모바일 디자인 접근방법부제 : 모바일 사이트 제작을 위한 디자인 접근방법작성자 : 황규연(Megazone SA Team)

작성일 : 2011년 2월 14일블로그 : http://sateam.co.kr

이메일 : yeoni@mz.co.kr, kyoo119@gmail.com

1

목차1. 개요 ............................................................................................................................................................................................................ 3

2. 모바일(터치)기기에서의 유의사항 ................................................................................................................................... 4

2.1. 기본적으로 알아야두어할 것 .......................................................................................................................................................................................... 4

2.2. 다양한 스크린의 크기 ........................................................................................................................................................................................................... 8

2.3. 터치영역 사이즈 ...................................................................................................................................................................................................................... 13

2.4. 팝업창의 최소화 ...................................................................................................................................................................................................................... 14

2.5. 플래시 .............................................................................................................................................................................................................................................. 14

2.6. Frameset/Iframe/Overflow등의 스크롤 사용제한 .............................................................................................................................................. 15

2.7. 고정된 레이어 ........................................................................................................................................................................................................................... 15

3. 다양한 레이아웃 제작 방법.................................................................................................................................................. 16

3.1. 고정형 ...............................................................................................................................................................................................................................(Fixed) 17

3.2. 유동형 .................................................................................................................................................................................................................................(Fluid) 18

3.3. 탄력형 .............................................................................................................................................................................................................................(Elastic) 19

3.4. 복합형 ............................................................................................................................................................................................................................(Hybrid) 20

3.5. .........................................................................................................................................................................................................Responsive Web Design 20

4. 참고문헌 .............................................................................................................................................................................................. 23

4.1. 사이트 .............................................................................................................................................................................................................................................. 23

4.2. 서적 ................................................................................................................................................................................................................................................... 23

4.3. 디바이스 매트릭스 ................................................................................................................................................................................................................ 23

2

1.개요본 문서는 모바일웹 사이트 제작시에 겪게 될 현실적인 문제들을 다루고자 작성이 되었습니다. 모바일(터치기기)에서는 여러가지 제약사항으로 인해 PC기반의 디자인에서 보다는 다른 방법으로

접근할 필요가 있습니다.

아래 몇가지 다루어볼만한 제약사항들을 열거해 보았습니다.

• 타겟 대상기기에 대한 조사• 테스트 기기의 범위 확정• 다양한 단말의 출시• 불안정한 네트워크 환경: 모바일 디바이스이기 때문에 사용자의 위치에 따라 네트워크 환경이 수시로 변함(3G, WiFi)

• 데이터 사용량• 한정된 운영시간: Battery 기반 전원 공급• 단말별로 해상도/화면크기 및 DPI(Dots per Inch)가 상이함에 따른 디자인의 문제해결방안• 부정확하거나 불편한 Input Method: 가상 키보드, 작은 qwerty키보드, 트랙볼 등

다음 장부터는 좀 더 상세하게 다루어 보겠습니다.

3

2.모바일(터치)기기에서의 유의사항

2.1. 기본적으로 알아야두어할 것Resolution

Resolution : 디스플레이 모니터 내에 포함되어 있는 픽셀의 숫자

아래 표는 대표적인 모바일 기기들에 대한 해상도/화면크기/DPI들을 비교해 보았습니다.

iOS

기종 해상도 화면크기 PPI DPI

iPhone 3GS 320×480 3.5 163 -

iPhone 4 640×960 3.5 326 -

iPad 1024×768 9.7 132 -

Android

기종 해상도 화면크기 PPI DPI

갤럭시S 480×800 4 233 HDPI

갤럭시A 480×800 3.7 252 HDPI

갤럭시K 480×800 3.7 252 HDPI

갤럭시탭 1024×600 7.0 170 HDPI

모토로이 480×854 3.7 - HDPI

옵티머스Z 480×800 3.5 266 HDPI

옵티머스원 320×480 3.2 180 MDPI

옵티머스 2x 480×800 4.0 233 HDPI

시리우스 480×800 3.7 - HDPI

베가 480×800 3.7 266 HDPI

베가 Xpress 480×800 4.0 233 HDPI

미라크 480×800 3.5 266 HDPI

모토로라 모토로이 480×854 3.7 265 HDPI

모토로라 모토쿼티 480×854 3.7 265 HDPI

모토로라 모토글램 480×854 3.7 265 HDPI

모토로라 DEFY 480×854 3.7 265 HDPI

4

HTC EVO 4G 480×800 4.30 - HDPI

HTC 디자이어 480×800 3.7 252 HDPI

HTC 넥서스원 480×800 3.7 252 HDPI

HTC 디자이어HD 480×800 4.3 217 HDPI

HTC 디자이어팝 240×320 3.2 125 LDPI

소니에릭슨 엑스페리아(X10i) 480×854 4.0 245 HDPI

KT 테이크 480×800 3.8 245 HDPI

Dell 스트릭 480×800 5.0 - MDPI

Dell 베뉴 480×800 4.1 228 HDPI

Motorola XOOM(발매예정) 1024×800 10.1 160 -

LG Gslate(발매예정) 1280×768 8.9 - -

갤럭시탭2(발매예정) 1280×800 10.1 - -

Windows Phone 7

기종 해상도 화면크기 PPI DPI

HTC HD7 480×800 4.3 - -

LG E900 Optimus 7 480×800 3.8 - -

Etc

기종 해상도 화면크기 PPI DPI

Nokia N8 360×640 3.5 - -

Palm Pre Plus 320×480 3.1 - -

5

DPI

DPI : dot per inch의 약자로 1인치를 몇 개의 도트로 표현하는지를 나타내는 것

PPI : pixel per inch의 약자로 1인치를 표현하는데 몇 픽셀로 이루어지는지를 나타는내는 것

스크린상에서는 DPI와 PPI에 차이점은 거의 없기 때문에 앞으로는 DPI라고 설명을 하겠습니다.

먼저 DPI에 따라 어떻게 화면이 보이게 되는지에 대해서 비교를 해보도록 하겠습니다.

아래 예제를 보게 되면 같은 물리적인 크기의 스크린에서 DPI가 다를 경우 어떻게 보여줄지에 대해서 알 수 있을 것 같습니다.

두가지 예시를 보셨을텐데 첫번째 예시가 좀 더 자연스럽게 텍스트가 만들어져 있음을 보실 수

있습니다.

6

안드로이드계열에서는 보통 3가지의 DPI로 제작을 할 수 있게 개발가이드가 있습니다.

▼ 다음 표는 Android에서 지원되는 Screen Size와 Density 간의 관계를 나타낸 내용입니다.

- Low density (120), ldpi

Medium density (160), mdpi

High density (240), hdpi

Small screen QVGA(240×320)2.6”-3.0” - -

Normal screen

WQVGA400(240×400)3.2”-3.5”

WQVGA432(240×432)3.5”-3.8”

HVGA(320×480)3.0”-3.5”

WVGA(480×800)3.3”-4.0”

WVGA(480×854)3.5”-4.0”

Large screen -

WVGA(480×800)4.8”-5.5”

WVGA(480×854)5.0”-5.8”

-

이 표에서 Baseline은 HVGA, Normal Screen, Medium density 이며, dpi와 pixel이 1:1로 매칭되는 조건입니다. 대부분의 국내 폰들은 WVGA(400*800) hdpi 입니다.

그럼 위에 표에서 보신것처럼 안드로이계열에 기기들을 맞추기 위해서는 어떻게 해야할까요?

세계적으로나 국내 상황에서도 그렇지만 점차 스크린사이즈는 대형화되는 추세이기도 합니다.

Small / ldpiNormal / ldpi

Normal / mdpi Nomarl / hdpi

7

아래 표에서 보시는것처럼 최소 320×480이상인것을 보실 수가 있습니다.

- Low Density Medium Density High Density

Small 2.3% - -

Normal - 45.9% 51.2%

Large - - -

결론은 위에 여러표에서 보신것처럼 Resolution이나 DPI, 물리적인 스크린 사이즈에 따라서 우리가

만들고 있는 웹사이트는 다르게 보일것입니다.

어떤 기기에서는 최적화되어 보일것이고, 어떤 기기에서는 공백이 좁거나 넓거나 할것이고, 이미지 퀄리티 역시 떨어져 보일 수 도 있을 것입니다. 다음 내용에서는 실제로 어떻게 다르고 어떤 제작을 해야하는지에 대해서 알아보겠습니다.

2.2. 다양한 스크린의 크기시스템폰트

• 이미지폰트를 사용하게 되면 다양한 Resolution, DPI값이나, 화면 확대를 했을때 따라서 이미지 퀄리티가 떨어질 수 있습니다.

• 타이틀, 콘텐츠에 들어가는 텍스트, 버튼에 들어가는 텍스트의 경우에는 특히 필요할것입니다.

• 디바이스에 따라서 웹폰트가 적용되기는 하나 약간에 로딩시간이 걸리때문에 현실적으로

사용하기에는 어려움이 있습니다.

아래 표를 보시면 이미지 폰트와 시스템 폰트를 확대전과 확대후에 이미지를 비교해보시면 확연히 품질에 차이가 나는것을 보실 수 있습니다.

폰트 확대전 확대후

이미지 폰트

시스템 폰트

8

아래 이미지는 아이폰4에서 캡쳐된 이미지입니다.

코드를 잠깐 보시면 각 class에 2배수와 8배수를 지정함으로써 해상도별로 폰트 사이즈를 키울 수

있게 만들 수가 있습니다.

<a href="#" class="button">1×</a><div class="size_2x"> <a href="#" class="button">2×</a></div><div class="size_8x"> <a href="#" class="button">8×</a></div><a href="#" class="button"><span class="textsize_2x">2× text</span></a>

<참조사이트 : http://sateam.co.kr/ui_library/tip/resolution-independent-ui/1_button.html(goo.gl/rxIwG)>

레이아웃▼ 아래 이미지는 네이버 모바일사이트를 서로 다른 기종인 Dell Streak와 Gallaxy Tab로 접속하여

비교해 본 모습입니다. 삼성 갤럭시탭이 해상도는 더 크지만 Dell 스트릭에 들어가는 네이버 모바일사이트에 나오는 영역이 더 많은것을 알 수 있습니다.

9

이것은 삼성 갤럭시탭의 DPI 설정때문에 각 요소들이 ×1.5배씩 커지기때문입니다.

- Dell 스트릭 삼성 갤럭시탭

LCD 크기 5 인치 7 인치

화면 해상도 WVGA (480 * 800) WSVGA (600 * 1,024)

[참조:http://brucemoon.net/1198141737]

10

위 예제이미지를 보시면 양 사이드로 이미지가 있습니다. 만약에 동일한 사이즈에서 DPI가 다르다면 HDPI에서는 원래 의도했던 160이 아니라 240(160×1.5)으로 배율이 커진 이미지로 나올것입니다. 물론 드물지만 더 커진다면 겹칠수 있는 가능성이 있다고 볼 수 있습니다.

이에 권장하는 방식은 좌우로 나누어진 레이아웃보다는 세로배열방식에 레이아웃을 권하는 바입니다.

이미지

• 아이폰3GS와 아이폰4 차이 2x (비교사이트 : http://aralbalkan.com/demos/high-dpi-images/

(http://goo.gl/biRCQ))High-DPI가 적용이 안된것과 된것에 차이점을 확연히 느끼실 수 있습니다.

11

• Android Medium density 와 Android High density 차이 1.5x• 위에 설명대로 동일한 품질을 원한다면 원본 사이즈에서 배율만큼 곱을 하게 되면 됩니다.

(ex : image size × (1.5/2.0) = 배율사이즈)

사례비교두개의 사이트를 분석한 자료입니다.

• 네이버 모바일 사이트(http://m.naver.com/)• 롯데칠성 모바일 사이트(http://m.lottechilsung.co.kr/)

- naver lottechilsung

main

12

menu

footer

[테스트기기 : iPhone4]

2.3. 터치영역 사이즈• 클릭 가능한 탐색을 설계할 때 터치폰의 경우 손가락이 마우스 포인터보다 크기때문에 이

점을 염두에 두어야 합니다. • 링크를 서로 가깝게 배치하면 안됩니다. 왜냐하면 한 링크를 누를 때 옆에 있는 링크도 함께 눌러지기 때문입니다.

13

OS Target Size Etc

Iphone 29~44 -

Windows Phone 26~34 오브젝트사이의 간격(8px)

Nokia - -

[참조사이트 : Touch Target Sizes : http://goo.gl/GUIs]

2.4. 팝업창의 최소화• PC에서 무한대로 생성이 가능했던 새로운 페이지가 모바일에서는 OS나 디바이스별로 개수에 제한이 있습니다. (ex : iOS-9, Android-8)

2.5. 플래시• iOS(아이폰, 아이패드)의 경우 미지원됩니다.• 플래시를 지원하는 디바이스라도 메모리나 배터리에 대한 소모가 큰 편입니다.

14

2.6. Frameset/Iframe/Overflow등의 스크롤 사용제한• 지원여부가 OS나 browser따라서 달라집니다.• 스마트폰처럼 작은 스크린사이즈에 내부 스크롤을 만들기 위해서는 스크립트를 이용하여

생성하여야 합니다.

2.7. 고정된 레이어• 지원여부가 OS나 browser에 따라서 달라집니다.

15

3.다양한 레이아웃 제작 방법아래 설명드리는 대부분의 다양한 레이아웃 제작 기법은 국내의 PC기반에서는 외면받았던 기법이였습니다. 왜냐하면 최신 브라우저에서는 자체기능으로 확대/축소기능을 해줌으로써 해결이

가능했으나 다양한 디바이스의 등장으로 인해 다시금 주목할 필요가 있는것 같습니다.

고정형(Fixed) 레이아웃 기법이 국내에서 웹디자인을 하시는 디자이너 여러분들께 가장 사랑받는

기법일거라고 생각합니다. 다른 레이아웃 기법의 경우 거의 생소하지 않을까 생각하면서 이 자리에서 소개를 하겠습니다.

• 고정너비형• 유동형• 탄력형• 복합형• Responsive Web Design

16

3.1. 고정형(Fixed)

너비를 특정 픽셀 값으로 고정시킨 정적인 레이아웃.(단위는 px를 사용)

• 장점 : • 해상도에 상관없이 동일한 형태(디자인)을 유지한다.

• 디자인 요소의 위치를 지정하기 쉽고 모든 사항을 예측할 수 있다는 점• 단점 :

• 사용자가 브라우저의 전체 영역을 사용할 때 얻을 수 있는 이점을 살리지 못한다.• 매우 큰 와이드 화면표시를 사용한다면 ‘비율 배분’이나 삼등분의 법칙’과 어긋나는

과도한 여백을 만들 수 있다. • 가독성 문제(IE6의 경우 브라우저의 자체 기능인 폰트 사이즈를 키울 수 없음)

• 해결책• 웹사이트의 고정너비형 레이아웃을 위한 최적의 분할 비율을 찾으려면 웹사이트의

타깃 사용자에 대한 분석이 필요.• 방문자의 브라우저 해상도에 대한 통계치를 이용(예:인터넷트렌드에 방문자 환경

(화면 해상도)을 조사)• 예시화면

폰트만 em단위를 사용하는 경우

접근성을 위해서 em단위를 사용한다면 폰트에만 사용되는편이라고 보면 된다.

• 장점 : • 최소한 폰트사이즈를 키울 수 있기 때문에 저시력자에게 도움이 된다.

• 단점 : • 레이아웃은 그대로이고 폰트사이즈만 키우기때문에 레이아웃이 깨질 경우가 있다.

17

3.2. 유동형(Fluid)

웹브라우저의 크기 비율에 따라 달라진다.(단위는 %를 사용)

• 장점 : • 브라우저의 활용 가능한 화면 영역을 최대한 이용• 상대적으로 낮은 해상도에서 볼 때 가로 스크롤 바가 생기는 것을 없앨 수도 있다• 사용자들이 편하게 이용• 저시력인에게 유용

• 단점 : • 브라우저의 폭이 좁을 경우 한줄 길이가 좁아져서 가독성이 떨어짐

(min-width를 지정하여 최소한의 폭을 유지하여야함)• 화면이 큰 모니터일 경우 좌우폭이 넓어져서 가독성이 떨어짐

• 해결책• 최소 사이즈와 최대사이즈값을 지정해준다.(min-width/max-width)

• 예시화면

18

3.3. 탄력형(Elastic)

브라우저의 화면영역이 아니라 사용자의 폰트 크기를 기반으로 조절.(단위는 em/%를 사용)(em계산법)

• 장점 :

• 가능한 공간을 최대한 활용• 폰트 사이즈에 따라 레이아웃이 유지• 저시력인에게 유용• 사실적인 확대/축소 효과가 가능

• 단점 : • 브라우저의 폰트 크기가 심하게 커지면 레이아웃의 너비와 높이가 깨질 수 있다.(폰트크기를 계속 키울 경우 브라우저에 가로 스크롤이 생기게 됩니다.)

• 페이지가 완전히 사용할 수 없는 상태가 되거나 가독성을 심하게 상실하게 된다.• 이미지나 플래시 객체와 같은 멀티미디어 콘텐츠를 어떻게 표현하느냐 하는것• max-width를 지정할 수 있으나 ie6이하 버전에서 지원을 하지 않는 문제점

(ie6이하 버전은 스크립트를 활용)• 해결책 :

• 콘텐츠 영역을 최대 너비로 지정하고, 그에 맞춰 레이아웃은 최적화된 너비를 유지하는 것

• 콘텐츠 영역의 최대 너비는 가독성이 가장 좋은 너비(47~86단어가 한 줄에 있는)에

10%를 추가• 예시화면(font-size:0.75em 기준)

19

3.4. 복합형(Hybrid)

글자크기기준(Elastic)이나 화면폭기준(Liquid)의 단점을 보완하기 위한 레이아웃

3.5. Responsive Web Design

<link rel="stylesheet" href="index_files/mobile.css" type="text/css" media="screen and (max-device-width: 480px)"><link rel="stylesheet" href="index_files/tablet.css" type="text/css" media="screen and (min-device-width: 481px) and (max-device-width: 1024px)"><link rel="stylesheet" href="index_files/computer.css" type="text/css" media="screen and (min-device-width: 1025px)">

20

<참조사이트 : http://mediaqueri.es/>

21

아마존 사이트

고사양 폰 저사양 폰

22

4.참고문헌

4.1. 사이트• 10 TIPS FOR DESIGNING MOBILE WEBSITES• Designing for iPhone 4 Retina Display: Techniques and Workflow• A Collection Of Responsive Web Designs• Responsive Web Design: What It Is and How To Use It• 40 Detailed and High Quality Mobile Phone .psd Source Files

4.2. 서적• 모바일 디자인&개발• 스마트폰 웹개발• 스매싱 매거진• Stunning CSS

4.3. 디바이스 매트릭스

Class Markup CSS JavaScript Support

Class A XHTML, XHTML-MP, HTML5

CSS2, CSS3

우수, DHTML 및 Ajax 지원

아이폰, 안드로이드폰, 블랙베리6.0

Class B XHTML, XHTML-MP CSS2 (적절) 제한적, 일부 DHTML 스마트폰

Class C XHTML, XHTML-MP CSS2 (제한적) 제한적 -

Class D XHTML-MP CSS2 (기본) 안됨 -

Class F XHTML-MP, WML 안됨 안됨 -

Class A mobile browsers

A 클래스 모바일 브라우저의 특징은 다음과 같다.

• 훌륭한 XHTML 1.0 지원• 적절한 HTML5 지원사항 : CANVAS 엘레먼트와 오프라인 스토리지• 훌륭한 CSS 지원, CSS 레벨 2.1포함(ACID2 테스트 90% 이상 획득)• 대부분의 CSS 레벨 3(AICD3 테스트 75% 이상 획득)포함• 절대위치, FLOAT 속성, 복잡한 CSS 기준 레이아웃을 포함한 웹 표준 레이아웃 지원• 이미지 대체 기술 지원• 훌륭한 자바스크립트 지원• 디스플레이 프로퍼티의 토글 능력• Ajax를 포함한 DOM 이벤트 지원

23

• 데스크톱용 브라우저와 같은 급의 브라우저

Class B mobile browsers

B 클래스 모바일 브라우저의 특징은 다음과 같다.

• 적절한 CSS 레벨 2.1 지원(ACID2 테스트 75% 이상 획득)• Padding, Border, and Margin 프로퍼티의 정확한 적용• 배경, 텍스트, 링크에 신뢰성 있는 컬러 적용 가능• 이미지 대체 기술• 최소 스크린 넓이 : 164픽셀• 한열에 네 개 셀까지 Complex 테이블 지원 가능 - 중첩 테이블 불필요• 제한된 자바스크립트 지원(디스플레이 속성 토글 지원)

Class C mobile browsers

C 클래스 모바일 브라우저의 특징은 다음과 같다.

• 적절한 XHTML 1.0 지원• 적절한 CSS 레벨 2.1 지원(ACID2 테스트 50% 이상 획득)• 자바스크립트 제한적으로 지원하거나, 지원하지 못함

Class D mobile browsers

D 클래스 모바일 브라우저의 특징은 다음과 같다.

• 기초적인 XHTML• CSS 지원 제한적(CSS 1만 지원하거나, CSS 인식불가)• 최소 스크린 넓이 : 164픽셀• Hyperlinks - CSS에 의한 컬러 미지원• colspan과 rowspan 미지원• 비율로 폭을 지정한 것은 안정적이지 못할 수 있음• 자바스크립트 미지원

Class F mobile browsers

F 클래스 모바일 브라우저의 특징은 다음과 같다.

• CSS는 지원 수준이 신뢰할 수 없는 수준이거나, 아예 지원하지 않음• TABLE 지원은 빈약하거나, 아예 지원하지 않음• 베이직폼 : 텍스트 필드, <select>옵션, Submit 버튼• 필드의 INPUT MASK 미지원• 자바스크립트 미지원

24