ISEEYOU
Project Name
날짜
담당자 이름
(이메일 주소)

ISEEYOU
참고할 것들
• 모든 폰트는 DP 좌표계를 사용합니다.
• Fixed Coordinate를 쓸 경우 DP 좌표계를 사용합니다.
• 좌표 설정 시 RelativeLayout를 활용 가능하므로, 특정 UI Component를 기준으로 상대적 좌표를 입력할 수 있습니다.
• 디바이스는 크게 4가지로 나뉘어집니다.
– 320dp 스마트폰
– 400dp 태블릿폰 (2011 현재 삼성에서만 출시, 갤탭(2010)은 7인치지만 dp 분류상 갤노트와 같이 분류.)
– 600dp 7인치 태블릿
– 720dp(800dp) 10인치 태블릿.
– 참고 1: http://developer.android.com/guide/practices/screens_support.html
– 참고 2: http://android-developers.blogspot.com/2011/07/new-tools-for-managing-screen-sizes.html
• HVGA 스마트폰
(G1, 옵티머스원 등)
– RESOLUTION : 320px * 480px (320dp * 480dp)
– DENSITY DPI : mdpi, 160 dpi
– SCREEN SIZE : normal
• WVGA 스마트폰
(WVGA800: 넥서스원, 갤럭시S, 갤럭시S2 / WVGA854 : 모토로라 드로이드, XPERIA X10)
– RESOLUTION : 480px * 800px (320dp * 533dp) / 480px * 854px (320dp * 569dp)
– DENSITY DPI : hdpi, 240 dpi
– SCREEN SIZE : normal
• 7인치 태블릿
(킨들 파이어, 누크 태블릿)
– RESOLUTION : 600px * 1024px (600dp* 1024dp)
– DENSITY DPI : mdpi, 160 dpi
– SCREEN SIZE : large

ISEEYOU
참고할 것들
• 10인치 태블릿
(갤럭시탭 10.1, 모토로라 XOOM)
– RESOLUTION : 1280px * 800px(1280dp * 800dp) / 1280px * 720px(1280dp * 720dp)
– DENSITY DPI : mdpi, 160 dpi
– SCREEN SIZE : xlarge
• 갤럭시 노트
– RESOLUTION : 800px * 1280px (400dp * 640dp)
– DENSITY DPI : xhdpi, 320 dpi
– SCREEN SIZE : ??? (Gingerbread)
• 7인치 갤럭시탭(2010)
– RESOLUTION : 600px * 1024px (400dp * 682dp)
– DENSITY DPI : hdpi, 240 dpi
– SCREEN SIZE : large(Gingerbread)
• 갤럭시 넥서스
– RESOLUTION : 720px * 1280px (360dp * 640dp)
– DENSITY: 2.0
• hTC evo 4g
– RESOLUTION : 540px * 960px (360dp * 640dp)
– DENSITY: 1.5
• 추가 참고 자료
– http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

ISEEYOU
기본 설계
• Structure 또는 Map을 표시
• 서로 연결되어 있거나, 독자적으로 동작하는 기능 (로그인 등)은 전체 구조에서 분리하고, Link
또는 Connection 방식으로 표현함
로그인
카테고리 채널 상품올리기 장바구니 설정
로그인 후 첫 화면

ISEEYOU
유저 플로우
• 필수 기능들에 대한 User Flow 혹은 Sequence Diagram을 표시

ISEEYOU
뷰 목록
• 메인 인터페이스 속성
– 하드웨어 옵션 버튼
– 그 외 Global User Interface 관련 사항들
• 앱 런칭 화면
• 앱 초기 화면
• 탭 1
– 하위 메뉴 1
– 하위 메뉴 2
• 탭 2
– 하위 메뉴 1
– 하위 메뉴 2
• 탭 3
– 하위 메뉴 1
– 하위 메뉴 2
• 탭 4
– 하위 메뉴 1
– 하위 메뉴 2
• 탭 5
– 하위 메뉴 1
– 하위 메뉴 2

ISEEYOU
메인 인터페이스 속성
• 레퍼런스 기기는 넥서스 S입니다. (기준이 되는 기기의 명칭이나 타입을 언급)
– Width 480px * Height 800px (320dp * 533dp) (자세한 내용은 링크 참조 http://www.androidpub.com/1895935)
– hdpi, 240dpi
• Portrait 화면을 기준으로 합니다. (Portrait, Landscape, 회전 대응 등의 사항 언급)
• 모든 버튼은 16dp를 기준으로 합니다. (button_name.png) (통합적인 UI 리소스에 대한 사항 정리)
• 상단 타이틀 바에 들어가는 텍스트는 20dp를 기준으로 합니다. (title_bar.png)
• 상품 목록의 텍스트는 제목 16dp, 세부 내용 12dp를 기준으로 합니다. (listview_panel.png)
• Native Text Label에 들어가는 텍스트는 12dp를 기준으로 합니다.

ISEEYOU
User Interface Image Kit (시안용 그래픽 리소스 모음)
Photoshop
12dp = 18px
16dp = 24px
20dp = 30px
PowerPoint
12dp = 10pt
16dp = 14pt
20dp = 18pt
(기준이 되는 폰트 크기를 시안과 비교하여 명시해 두면 좋
음)
16dp
12dp
20dp 12dp
16dp 텍스트 입력 테스트
12dp 서브 텍스트 입력 테스트
16dp 16dp
16dp 텍스트 입력 테스트
(모든 그래픽 리소스는 기준 스크린샷을 기준으로
실제 크기-비율과 동일하게 배치함)

ISEEYOU
뷰 제목 (하위 카테고리 제목)
•기본 구조
–Inner Activity (하단 탭이 있을 경우 Inner, 없을 경우 Outer로 명시)
–상품의 목록을 표시하는 페이지 (해당 뷰에 대한 개략적인 설명)
•A. 타이틀 바 (UI Component 명칭)
–0_title_bar.png (파일명)
–16 dp (폰트가 들어갈 경우 폰트 사이즈)
•B. 썸네일 이미지
–유저가 올린 상품에 대한 썸네일을 표시함 (기능 설명)
•C. 상품 목록
–상품 제목
• 판매자가 입력한 상품의 제목을 표시 (자세한 설명이 필요할 경우 분리)
• 16dp - 텍스트 내용이 길 경우, 3점 표시(…)로 생략
–상품 세부 설명
• 판매자가 설정한 실제 가격과 판매자의 닉네임을 표시
• 12dp
•D. 더 불러오기 패널 (버튼, 패널, 입력영역 등의 속성 명시)
–터치할 경우 10개의 상품 목록을 추가로 불러옴
–현재 표시된 목록의 하단에 추가로 붙여서 표시함
•상품 열람 절차 (유저 액션 절차를 설명함)
–성공
• 상품을 터치할 경우 상품 뷰 화면으로 이동 (뷰 제목을 정확히 명시)
–인터넷 접속에 문제가 있거나, 인증 서버에 문제가 있을 경우
• 확인 버튼이 있는 “네트워트가 불안정합니다. 잠시 후에 다시 시도해 주시기 바랍니
다.” 시스템 팝업 메시지를 띄움
• 확인 버튼을 누를 경우 팝업창을 닫음
타이틀 표시 영역
16dp 텍스트 입력 테스트
10,000원 / test_nickname
16dp 텍스트 입력 테스트
10,000원 / test_nickname
16dp 텍스트 입력 테스트
10,000원 / test_nickname
16dp 텍스트 입력 테스트
10,000원 / test_nickname
16dp 텍스트 입력 테스트
10,000원 / test_nickname
더 불러오기...
A
B C
D

ISEEYOU
뷰 제목 (하위 카테고리 제목)
•Android 개발 환경에 내장되어 있는 컴포넌트들
–http://developer.android.com/guide/topics/ui/index.html 참고
•Menu
–http://developer.android.com/guide/topics/ui/menus.html
•Native Notification
–http://developer.android.com/guide/topics/ui/notifiers/index.html
–Toast Notification
–Status Bar Notification
•Native Dialog
–http://developer.android.com/guide/topics/ui/dialogs.html
–Y/N Alert
–List
–List with Radio Button
–Loading Indicator
–Loading Progress Bar
Toast Notification Sample
최신순
정렬 기준 선택
인기순
저가순
고가순
검색 정렬