Transcript 웹 기획_초급_Step4

웹 기획 스터디 – 초급
Step4. Mobile & Tablet PC
Device 종류
크게 OS 의 종류로 나뉘며, 각 OS 별로 해상도, 제조사 별로 나
뉜다.
 OS 종류 및 시장 점유율
이미지 출처 : http://www.wookmark.com/image/57972/
mobile-os-icon-by-xavier-heritier
Device 해상도
제조사
Apple
삼성
LG, Sky, Sony,
HTC, Google 등
모델명
해상도( 가로 x 세
로)
iPhone 3GS
480 x 320
iPhone 4, 4S
960 x 640
iPhone 5
1136 x 640
iPad, iPad2
1024 x 768
New iPad
2048 x 1536
갤럭시S, 갤럭시U, 갤럭시K, 갤럭시A, 갤럭시S2
800 x 480
갤럭시S3, 캘럭시 탭
1280 x 720
갤럭시 노트, 갤럭시 탭2
1280 x 800
옵티머스, 옵티머스Z, 옵티머스Q, 옵티머스 마하,
베가, 시리우스, 미라크, 이자르
800 x 480
옵티머스 뷰
1024 x 768
옵티머스 G( LG-F180S )
1280 x 768
익스페리아 X10
854 x 480
출처 : http://melburn119.tistory.com/337
Device 해상도( 계속 )
제조사
LG, Sky, Sony,
HTC, Google 등
모토로라( Motorola )
HTC
모델명
해상도( 가로 x 세
로)
옵티머스 원, 안드로-1, 스마트볼
480 x 320
소니에릭슨-X10 미니, X10 미니 프로
320 x 240
KT Tech- 야누스폰( KM-S200 )
960 x 540
모토믹스(MB501 NEO BLACK )
480 x 320
모토로이, 모토쿼티, 모토그램, 디파이
854 x 480
Droid RAZR HD, Droid RAZR MAXX HD
540 x 960
디자이어, 디자이어HD, 넥서스원, 센세이션XL
1280 x 720
EVO 4G+, Rider
800 x 480
J Butterfly
960 x 540
출처 : http://melburn119.tistory.com/337
Device 기본 UI Component - iPad
Device 기본 UI Component - iPhone
Device 기본 UI Component - Android
Device 기본 UI Component - Android
기획 시 고려사항
 멀티 해상도 지원

Responsive Web( 반응형 Web )
포털 사이트, 뉴스.. 와 같이 많은 컨텐츠를 포함하고 있는 경우 주로 사
용.

Phone, Pad, Tablet PC 레이아웃 분리
Phone, Tablet App 이 세트 또는 확장 형태를 띄는 경우 주로 사용.
게임, 스케치 앱, 문서 작성 및 공유 앱 ..

Hybrid App
업데이트 주기가 짧은 페이지 또는 기능은 웹으로 구현하여 바로 적용
할 수 있도록
하며, 디바이스 고유 기능을 동시에 사용 가능.
주로 쇼핑몰에서 많이 사용.

Web App
기획 시 고려사항 ( 계속 )
 Pivot ( 가로, 세로 모드 ) 지원 여부
 가로, 세로에 따른 화면 UI 고려
 네비게이션 & 페이지 히스토리 관리
 각 페이지 별 화면 이동 방식 고려
 “이전” 페이지로 돌아가는 경우의 히스토리 고려

키패드 처리
 키패드가 표시되는 경우의 화면 UI 고려
 제공되는 키패드 유형 고려 ( 검색, 완료.. 키 제공 )
 Device Hard Key & Software Key 고려
 볼륨, 홈, 이전, 메뉴.. 등의 키 조작에 대한 고려
사용자 제스처
TouchGestureGuide.pdf 참고
감사합니다.