디지털컨버전스-플립커뮤니케이션즈: 5월 2012

> 2012.05 1째주 (5.3-5.9) 스마트폰 판매 동향

- 스마트폰 제품 중 삼성 GALAXY 시리즈의 판매량이 타 회사 제품들 보다 증가

- OS판매량은 IOS에 비해 안드로이드 OS가 강세를 보임

- 새롭게 출시되는 모델 중 얼굴인식 기반의 기능 탑재된 GALAXY Ⅲ 기대

1. 소비자 판매 Top 10 모델

- 터치펜이 탑재되어 번거로울 것이라는 예상과는 달리 GALAXY Note 인기 강세

순위	제품명	변동폭	점유율	순위	제품명	변동폭	점유율
1	GALAXY Note (16GB/SKT)	-	10.3%	6	GALAXY S Ⅱ (SKT)	-	6.5%
2	GALAXY Note (16GB/KT)	+2	7.4%	7	Vega LTE EX (LG U+전용)	+3	4.0%
3	GALAXY Note (16GB/LG U+)	-	7.4%	8	GALAXY S II HD LTE (LG U+)	-	3.8%
4	GALAXY S II HD LTE (KT)	+1	7.1%	9	Vega LTE (SKT전용)	+8	3.5%
5	GALAXY S II LTE (SKT전용)	-3	6.8%	10	Optimus LTE (SKT)	+10	2.8%
					출처 - http://www.arg.co.kr

2. 업체 및 OS별 판매량 현황 (국,내외) 1분기

[제조사별 판매량]				[OS별 판매량]

순위	제조사	판매량	점유율	순위	업체명	기기수	점유율
1	삼성	86,567.6	20.7	1	안드로이드	81,067.4	56.1
2	노키아	83,162.5	19.8	2	IOS	33,120.5	22.9
3	애플	33,120.5	7.9	3	심비안	12,466.9	8.6
4	ZTE	17,439.3	4.2	4	리서치인모션	9,939.3	6.9
5	LG	14,720.4	3.5	5	바다	3,842.2	2.7
6	화웨이디바이스	10,796.1	2.6	6	마이크로소프트	2,712.5	1.9
7	리서치 인모션	9,939.3	2.4	7	Other	1,242.9	0.9
8	모토로라	8,368.2	2	Total		144,391.7	100
9	소니모바일	7,898.4	1.9			출처 - http://www.gartner.com
10	HTC	7,703.4	1.8
11	Others	139,392.60	33.3
Total		419108.3	100

3. 출시예정

지난번에 반응형 웹 디자인 네비게이션 패턴에 대해서 공유했는데,
이번에는 자주 사용되는 레이아웃 패턴 몇가지에 대해서 공유하도록 하겠습니다.

반응형 화면설계를 할 때는 큰화면에서 먼저 하는 것이 좋은 방법이라고 합니다. 큰 화면에서 Grid / Column을 활용하여 어떻게 레이아웃을 설계하는 것이 중요한 과제가 아닐까 하네요.

패턴에 대해 이야기 하기에 앞서,
반응형 웹디자인 화면설계를 할 때, 몇가지 체크 포인트에 대한 나누자면..
(어느 슬라이드 쇼에서 보고, 복사해둔 내용임)

1. 정보 설계 :
- 화면의 가변에 따라 달라질 수 없다는 것을 유념하고 정보를 설계 하라. (Narrow Layout, Wide Layout 일 때 정보의 뎁스가 변경되어서는 안된다.)
- 콘텐츠와 데이터는 웹에서 표현할 수 있는 형식이어야 반응형 웹 서비스에 적합하다.
- 대용량 멀티미디어 콘텐츠를 모바일 Device에서 보여줄 수 있는 방안을 마련해둬야 한다.

2. 화면의 가변 단계 정의와 순서 :
- 화면의 가변 단계는 구성정보가 많은 서비스 일 수록 단계를 세분화 하면 좋다.

3. Layout 정의 :
- 정의된 가변의 정의에 따라 영역이 확대, 축소 되는 것은 괜찮으나 뎁스가 새로 생성되어 페이지가 새로 생기는 것은 좋지 않다.

4. UI 기획 요소 :
- 이미지 사이즈의 규정이 필요하다. (확대를 할 것인가? 배열을 새로 할 것인가?)
- 폰트 사이즈를 pixcel 단위로 지정할 것 인가? 페센테이지로 할 것 인가?
- 터치 인터페이스를 고려해야 한다.

■ 반응형 웹 디자인 레이아웃 패턴

1. Mostly Fluid

심플하기 때문에 가장 많이 사용되는 패턴으로, 큰 화면에서는 더 많이 여유를(가장자리)를 두고, 유연한 Grids와 큰화면에서 작은화면으로 이미지 스케일링, 화면이 작아질 수록 세로로 column들을 쌓는 형태를 취하는 패턴이다.

2. Column Drop

또 다른 인기있는 패턴으로, multi-column layout으로 시작해서 single-column layout과 화면사이즈가 작아짐에 따라 column이 아래로 떨어지는 형태로 끝이난다.
Mostly Fluid pattern과는 달리, 이 레이아웃에서는 요소들의 전체 사이즈를 유지하려는 일관성이 있다. 다양한 화면 크기에 적응하는 대신에 column들을 쌓는 형태에 의존한다.

3. Layout Shifter

이 패턴은 다양한 화면 사이즈에 크로스 적용이 어렵다. 왜냐하면 많은 공수를 요구하기 때문이다. 아마도 이러한 이유로 앞의 두가지 패턴보다는 덜 사용되는 이유일 것이다.

4. Tiny Tweaks

여러 화면 사이즈에 적응시키는 가장 간단한 형태이지만, 이 패턴 또한 가장 인기없는 패턴이었다.

완전 간단한 컨텐츠로 구성된 사이트에서는 단지 폰트 사이즈나 이미지 레이아웃만 고려해서 사용하기에는 좋을 것이다.

5. Off Canvas

위에 나열한 것 처럼, 다양한 패턴의 반응형 디자인 레이아웃이 있지만, 몇가지 일반적인 공통점이 있다. 그것들은 모두 작은 화면에서는 세로로 쌓는 형태를 취하고 있다. 아마도 레이아웃을 조정하는데에 있어서 보여지는 화면 공간에만 의존하고 있기 때문이다.

그러나 멀티 스크린에 적용시키는 레이아웃의 방법은 그것 뿐이며, 가장 적합한가?
만약 우리에게 보여지는 한정된 공간에서만 레이아웃을 디자인 하라는 옵션이 있다면 모를까.. 사실은 보여지는 스크린보다 레이아웃 조절을 위한 보여지지 않는 스크린이 항상 존재하고 있다.

위의 그림과 같이, 멀티 디바이스를 위한 Off Canvas 패턴은 보여지지 않은 스크린을 keep contents 또는 네비게이션을 숨기는 용도로 사용하는데 이점이 있다. (사용자 액션에 의해 노출될 수도, 숨겨질 수도 있다)

이 패턴은 몇몇의 모바일 웹사이트 및 어플리케이션에 사용되고 있다.

그런데 주로 네비게이션을 숨기는 용도로 많이 사용되고 있는듯 하네요.(이전 네비게이션 패턴 포스팅)

출처: http://www.lukew.com/ff/entry.asp?1514

2012년 5월 25일 금요일

2012.05 1째주 (5.3 - 5.9)국내 스마트폰 판매 동향

2012년 5월 23일 수요일

반응형 웹 디자인 레이아웃 패턴(Multi-Device Layout Patterns)