웹 기획 스터디 – 초급 Step4. Mobile & Tablet PC. Device 종류 크게 OS 의 종류로 나뉘며, 각 OS 별로 해상도, 제조사 별로 나뉜 다.  OS 종류 및 시장 점유율 이미지 출처 :

Presentation on theme: "웹 기획 스터디 – 초급 Step4. Mobile & Tablet PC. Device 종류 크게 OS 의 종류로 나뉘며, 각 OS 별로 해상도, 제조사 별로 나뉜 다.  OS 종류 및 시장 점유율 이미지 출처 :"— Presentation transcript:

1 웹 기획 스터디 – 초급 Step4. Mobile & Tablet PC

2 Device 종류 크게 OS 의 종류로 나뉘며, 각 OS 별로 해상도, 제조사 별로 나뉜 다.  OS 종류 및 시장 점유율 이미지 출처 : http://www.wookmark.com/image/57972/ mobile-os-icon-by-xavier-heritier

3 Device 해상도 제조사모델명해상도 ( 가로 x 세 로 ) Apple iPhone 3GS480 x 320 iPhone 4, 4S960 x 640 iPhone 51136 x 640 iPad, iPad21024 x 768 New iPad2048 x 1536 삼성 갤럭시 S, 갤럭시 U, 갤럭시 K, 갤럭시 A, 갤럭시 S2 800 x 480 갤럭시 S3, 캘럭시 탭 1280 x 720 갤럭시 노트, 갤럭시 탭 2 1280 x 800 LG, Sky, Sony, HTC, Google 등 옵티머스, 옵티머스 Z, 옵티머스 Q, 옵티머스 마하, 베가, 시리우스, 미라크, 이자르 800 x 480 옵티머스 뷰 1024 x 768 옵티머스 G( LG-F180S ) 1280 x 768 익스페리아 X10 854 x 480 출처 : http://melburn119.tistory.com/337

4 Device 해상도 ( 계속 ) 제조사모델명해상도 ( 가로 x 세 로 ) LG, Sky, Sony, HTC, Google 등 옵티머스 원, 안드로 -1, 스마트볼 480 x 320 소니에릭슨 -X10 미니, X10 미니 프로 320 x 240 KT Tech- 야누스폰 ( KM-S200 ) 960 x 540 모토로라 ( Motorola ) 모토믹스 (MB501 NEO BLACK ) 480 x 320 모토로이, 모토쿼티, 모토그램, 디파이 854 x 480 Droid RAZR HD, Droid RAZR MAXX HD540 x 960 HTC 디자이어, 디자이어 HD, 넥서스원, 센세이션 XL 1280 x 720 EVO 4G+, Rider800 x 480 J Butterfly960 x 540 출처 : http://melburn119.tistory.com/337

5 Device 기본 UI Component - iPad

6 Device 기본 UI Component - iPhone

7 Device 기본 UI Component - Android

8

9 기획 시 고려사항  멀티 해상도 지원 Responsive Web( 반응형 Web ) 포털 사이트, 뉴스.. 와 같이 많은 컨텐츠를 포함하고 있는 경우 주로 사용. Phone, Pad, Tablet PC 레이아웃 분리 Phone, Tablet App 이 세트 또는 확장 형태를 띄는 경우 주로 사용. 게임, 스케치 앱, 문서 작성 및 공유 앱.. Hybrid App 업데이트 주기가 짧은 페이지 또는 기능은 웹으로 구현하여 바로 적용할 수 있도록 하며, 디바이스 고유 기능을 동시에 사용 가능. 주로 쇼핑몰에서 많이 사용. Web App 앱 등록 절차를 거치지 않고 유포 가능하나, 디바이스 고유의 기능을 사용 할 수 없다는 단점이 있음.

10 기획 시 고려사항 ( 계속 )  Pivot ( 가로, 세로 모드 ) 지원 여부 가로, 세로에 따른 화면 UI 고려  네비게이션 & 페이지 히스토리 관리 각 페이지 별 화면 이동 방식 고려 “ 이전 ” 페이지로 돌아가는 경우의 히스토리 고려  키패드 처리 키패드가 표시되는 경우의 화면 UI 고려 제공되는 키패드 유형 고려 ( 검색, 완료.. 키 제공 )  Device Hard Key & Software Key 고려 볼륨, 홈, 이전, 메뉴.. 등의 키 조작에 대한 고려

11 사용자 제스처 TouchGestureGuide.pdf 참고

12 감사합니다.