ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
Human Interface
Guidelines for iOS
UI Element Part.
Seungmin Shim @CodeSquad
2018.01.08
Views
- 앱 콘í…츠를 표시
- 하위 뷰를 표시
- 콘í…츠 조회, 수정, 갱신, ì‚­ì œ 가능
UI Elements
Bars
- 앱 ë‚´ 사용ìžì˜ 위치 표시
- 문맥정보를 가지고 ì í•©í•œ 기능 ë˜ëŠ” ì •ë³´ 제공
Controls
- ì‚¬ìš©ìž ìž…ë ¥ì„ ë°›ìŒ
- 부수ì ì¸ ì •ë³´ 표시
Temporary Views
-특정 ìƒí™©ì—ì„œ 중요한 메시지를 전달하고
추가ì ì¸ ìž…ë ¥ì„ ë°›ê¸° 위한 ì¼ì‹œì ì¸ ë·°
Bars
UI Elements
Navigation Bars
계층구조로 êµ¬ì„±ëœ ì—°ì†ì ì¸
페ì´ì§€ë¥¼ 차례로 조회 가능
•위치: 화면 ìƒë‹¨ì˜ ìƒíƒœë°” 아래
•좌측: 보통 뒤로가기 버튼 삽입. 보통
ì´ì „ 페ì´ì§€ 제목으로 표시.
•우측: 기타 컨트롤 요소 삽입. 보통
수정 ë˜ëŠ” 완료 버튼 표시.
뒤로가기 버튼 기타 컨트롤 요소
숨김 처리
•제스처 ë°œìƒ, 키보드 노출, ë·° 사ì´ì¦ˆ 변경 ë“±ì˜ ìƒí™©ì— 바를 숨긴다.
•콘í…츠를 전체화면으로 보여주는 경우, 바를 숨기는 íŽ¸ì´ ì¢‹ë‹¤.
Navigation Bars
ë°” ë‚´ë¶€ì— ì»¨íŠ¸ë¡¤ 요소 배치 ì‹œ
권유사항
•컨트롤 요소를 너무 ë§Žì´ ë„£ì§€ 않는다.
•버튼 ì‚¬ì´ ê°„ê²©ì„ ë„“ê²Œ 한다.
(UIBarButtonSystemItemFixedSpace 참고)
•뒤로가기 ë²„íŠ¼ì€ Standard Back Button 사용.
í•­ìƒ ì§ì „ í™”ë©´ì„ í‘œì‹œí•˜ëŠ” 액션만 취해야 한다.
•세그먼트 ì»¨íŠ¸ë¡¤ì„ ì‚¬ìš©í•˜ë©´ 페ì´ì§€ë“¤ì˜ 계층
구조를 단순하게 보여줄 수 있다.
•세그먼트 ì»¨íŠ¸ë¡¤ì„ ë„£ì„ ë• íƒ€ì´í‹€ì„ 제외한다.
타ì´í‹€ 배치 ì‹œ 권유사항
•현재 보여지는 ë·°ì˜ ì œëª©ì„ í‘œì‹œí•˜ëŠ” íŽ¸ì´ ì¢‹ë‹¤.
•종류: Standard title, Large title
•기본ì ìœ¼ë¡œ Large titleë¡œ 표시한 후, 스í¬ë¡¤ ë“±ì˜ ì´ë²¤íŠ¸ê°€ ë°œìƒ ì‹œ
Standard titleë¡œ 변경하는 ê²ƒì´ ì¢‹ë‹¤. (prefersLargeTitles 참고)
Standard TitleLarge Title
현재 뷰 제목 컨트롤 요소
세그먼트 컨트롤
Tab Bars
앱 ë‚´ì—ì„œ 다른 섹션으로 스위칭 가능
•앱 구조를 단순하게 표시할 수 있다. 앱 레벨ì—ì„œ 사용한다.
•위치: 화면 하단
•탭바 ë²„íŠ¼ì€ ì•¡ì…˜ì„ ìˆ˜í–‰í•˜ëŠ” ë° ì‚¬ìš©í•˜ì§€ 않는다. 현재 ë·°ì—ì„œ 특정
ì•¡ì…˜ì„ ì·¨í•´ì•¼ 하는 경우, Tool Bar를 사용한다.
•기기 사ì´ì¦ˆë‚˜ 오리엔테ì´ì…˜ì— ë”°ë¼ ë³´ì—¬ì§€ëŠ” 탭 개수가 달ë¼ì§„다.
•너무 ë§Žì€ íƒ­ì„ ì“°ì§€ 않는다: 보통 3~5ê°œì˜ íƒ­ì„ ì“´ë‹¤.
â€¢íƒ­ì€ í•­ìƒ í™œì„±í™” ìƒíƒœë¡œ 둔다: 탭 내부 콘í…츠가 사용할 수 ì—†ë”ë¼
ë„ íƒ­ 내부ì—ì„œ ì´ë¥¼ 표시한다.
•특정 íƒ­ì— ì—…ë°ì´íŠ¸ëœ ì •ë³´ê°€ 있으면 배지를 달아서 표시할 수 있다.
•액션 ìˆ˜í–‰ì— ì‚¬ìš©í•˜ì§€ ì•ŠìŒ
•3~5개가 ì ë‹¹
â€¢í•­ìƒ í™œì„±í™” ìƒíƒœ
•업ë°ì´íŠ¸ 표시는 배지 사용
Tab Bars
Q. ìƒë‹¨ì— 위치한 탭바?
A. iOSì—ì„œ 탭바는 í•˜ë‹¨ì— ë°°ì¹˜ë˜ê¸° ë•Œë¬¸ì— ìœ„ ì˜ˆì‹œë“¤ì€ íƒ­ì²˜ëŸ¼ êµ¬í˜„ëœ ì»¤ìŠ¤í…€ ë·°ì´ë‹¤.
안드로ì´ë“œì™€ ë””ìžì¸ 통ì¼ì„ 위해 íƒ­ì„ ìƒë‹¨ì— ë°°ì¹˜í•˜ê¸°ë„ í•œë‹¤.
Tool Bars
현재 ë·°ì—ì„œ 수행가능한 기능 표시
•위치: 화면 하단
•현재 화면과 ê´€ë ¨ëœ ë²„íŠ¼ë§Œ 표시한다.
•툴바 ìœ„ì— ì„¸ê·¸ë¨¼íŠ¸ ì»¨íŠ¸ë¡¤ì€ ì‚¬ìš©í•˜ì§€ 않는 íŽ¸ì´ ì¢‹ë‹¤.
•í…스트 ë²„íŠ¼ë“¤ì€ ê°„ê²©ì„ ë„“ê²Œ 한다
(UIBarButtonSystemItemFixedSpace)
Q. 툴바?
Search Bars
•단ë…으로 배치ë˜ê±°ë‚˜ 내비게ì´ì…˜ ë°” ë“±ì˜ ë·° ë‚´ë¶€ì— ë°°ì¹˜
•Text Field ë§ê³  Search Bar 요소를 ì´ìš©í•œë‹¤.
•Clear 버튼 사용
•Cancel ë²„íŠ¼ì„ ë§Œë“¤ì–´ ê²€ìƒ‰ì„ ì¤‘ë‹¨í•  수 있ë„ë¡ í•œë‹¤.
•검색 중 í•˜ë‹¨ì— ì—°ê´€ê²€ìƒ‰ì–´ë¥¼ 보여주면 좋다.
•힌트 문구를 넣어 검색 가능한 범위를 ì•Œ 수 있ë„ë¡ í•œë‹¤.
ëª¨ë‘ ì§€ìš°ê¸° 검색 취소
연관 검색어 리스트
검색어 힌트
Scope Bar
검색 ë°”ì— ë¶™ì´ë©´ 검색 범위를 ì¢íž 수 있다.
Status Bars
현재 시간, ë„¤íŠ¸ì›Œí¬ ìƒíƒœ, 배터리 등 ê¸°ê¸°ì˜ í˜„ìž¬ ìƒíƒœë¥¼ 표시
•시스템 제공 바를 사용한다.
•앱 ë””ìžì¸ì— ë”°ë¼ ë°” 색ìƒì„ 변경할 수 있다: Light / Dark
•기본ì ìœ¼ë¡œ 투명해서 콘í…츠가 비ì³ë³´ì¸ë‹¤: ìƒíƒœë°” ë‚´ìš©ì´ ìž˜ ë³´ì¼ ìˆ˜ 있ë„ë¡
ìƒíƒœë°” ë’·ë¶€ë¶„ì— UIBlurEffect를 ì ìš©í•˜ì—¬ í리게 만든다.
•전체화면으로 미디어를 보여줄 때는 ìƒíƒœë°”를 ìž ì‹œ 숨긴다.
Light Dark
Views
UI Elements
Tables
컬럼 1ê°œì¸ ë¦¬ìŠ¤íŠ¸ë¡œ,
여러 ì¤„ì˜ ë°ì´í„°ë¥¼ 스í¬ë¡¤ 조회 가능
•주로 í…스트 ê¸°ë°˜ì˜ ì½˜í…츠나 Split Viewì—ì„œ 내비게ì´ì…˜ì„
표시할 ë•Œ 사용ë¨.
•테ì´ë¸” 너비를 고려한다.
•ì´ë¯¸ì§€ ë“±ì˜ ì¶”ê°€ì ì¸ ë°ì´í„°ë¥¼ 보여주기 위해 기다리지 않는
다: í…스트 ë°ì´í„°ë¶€í„° 빠르게 보여준다.
•콘í…츠가 ë¡œë“œë  ë•Œê¹Œì§€ Progress Indicator를 보여준다.
•테ì´ë¸” 콘í…츠를 정기ì ìœ¼ë¡œ ì—…ë°ì´íŠ¸í•˜ëŠ” ë°©ë²•ì„ ê³ ë ¤í•œë‹¤.
단, ì—…ë°ì´íŠ¸ë  ë•Œ 현재 스í¬ë¡¤ 위치는 유지한다.
Tables
Plain
â€¢í–‰ì´ ë¼ë²¨ì´ 있는 섹션 단위로 ë¬¶ì¼ ìˆ˜ 있다.
•Header와 Footer를 가질 수 있다.
•우측ì—는 색ì¸(index)ì„ ì„¸ë¡œë¡œ 삽입할 수 있다.
•단, ìš°ì¸¡ì— Disclosure Indicator ë“±ì˜ ìš”ì†Œê°€ 있
으면 색ì¸ì€ 넣지 않는다.
Grouped
â€¢í–‰ì´ ê·¸ë£¹ 단위로 ë¬¶ì¼ ìˆ˜ 있다.
•Header와 Footer를 가질 수 있다.
â€¢í•­ìƒ 1ê°œ ì´ìƒì˜ ê·¸ë£¹ì„ ê°€ì§€ë©°, ê° ê·¸ë£¹ì€ 1ê°œ
ì´ìƒì˜ í–‰ì„ ê°€ì§„ë‹¤.
•색ì¸ì€ 삽입할 수 없다.
Disclosure
Indicator
Footer
Header
Index
Tables
Subtitle
Left Detail
Basic
Right Detail
í–‰ 스타ì¼
ì´ë¯¸ì§€ 삽입 가능
제목 왼쪽 정렬
부제목 삽입
제목
왼쪽 정렬
부제목
오른쪽 정렬
제목
오른쪽 정렬
부제목
왼쪽 정렬
Collections
ì •ë ¬ëœ ì½˜í…츠 모ìŒì„ 관리하고
ì‹œê°ì ì¸ ë ˆì´ì•„웃으로 표시
•엄격한 선형구조를 요구하지 않기 때문ì—, 여러 사ì´ì¦ˆë¡œ 콘í…ì¸ ë“¤ì„ ë³´
여주는 ë° ì í•©í•˜ë‹¤.
•콘í…츠 ì£¼ìœ„ì— íŒ¨ë”© 사용: ë ˆì´ì•„ì›ƒì„ ê¹¨ë—하게 유지하고 콘í…츠가 겹치
는 ê²ƒì„ ë°©ì§€í•  수 있다.
•í…스트 콘í…츠 배치 ì‹œ, 컬렉션보다 í…Œì´ë¸” 사용
Split Views
스í¬ë¦°ì„ ë‘ í™”ë©´ìœ¼ë¡œ 나누어 관리
•주 화면(왼쪽): 변하지 않는 내용 표시
•보통 카테고리(내비게ì´ì…˜) 표시
•사용하지 ì•Šì„ ë• ìˆ¨ê²¨ë‘”ë‹¤.
•보조 화면(오른쪽): 관련 콘í…츠 표시
•화면 ë¶„í• ì€ ì½˜í…츠 ê· í˜•ì— ë§žê²Œ 한다:
•기본ì ìœ¼ë¡œ 주 í™”ë©´ì€ 1/3, ë³´ì¡° í™”ë©´ì€ 2/3를
차지한다.
•보조 í™”ë©´ì´ ì£¼ 화면보다 ë” ìž‘ì•„ì§€ë©´ 안ëœë‹¤.
•숨겨져 있는 주 화면 노출 시, 여러 방법 제공:
•스와ì´í•‘, 버튼 í´ë¦­ 등
주 화면
Master
보조 화면
Detail
Split Views
Q. ì•„ì´í°ì—ì„œì˜ ìŠ¤í”Œë¦¿ ë·°ì¸ê°€?
A. 아니다. 커스텀 ë·°ì´ë‹¤.
Scroll Views
사용ìžì™€ ìƒí˜¸ìž‘ìš© ì‹œ, ì¼ì‹œì ì¸ 스í¬ë¡¤ ì¸ë””ì¼€ì´í„° 노출
•tap, flick, drag, pinch, swipe 제스처를 따른다.
â€¢ì‚¬ìš©ìž ì œìŠ¤ì²˜ì˜ ì ì •ì„ ì„ 설정한다: 예를 들어, ì¤Œì¸ ì‹œ 너무 커지거나 ìž‘
아지지 ì•Šë„ë¡ ìµœëŒ€ 스케ì¼, 최소 ìŠ¤ì¼€ì¼ ê°’ì„ ì„¤ì •í•œë‹¤.
•페ì´ì§• 모드로 설정 ì‹œ: 스í¬ë¡¤ ì‹œ 새 페ì´ì§€ë¡œ 전환 가능
•스í¬ë¡¤ ë·° ì•ˆì— ìŠ¤í¬ë¡¤ 뷰를 중첩해서 넣지 않는다.
•스í¬ë¡¤ 뷰는 í•œ í™”ë©´ì— 1개만 보여준다:
•만약 2ê°œì˜ ìŠ¤í¬ë¡¤ 뷰를 넣어야 한다면, 다른 방향으로 스í¬ë¡¤ 하ë„ë¡
만든다. 제스처가 다른 ë·°ì— ì˜í–¥ì„ 주지 않기 때문.
Pages
문서, ì±…, 메모장, 달력 ë“±ì— ì‚¬ìš©ë˜ë©°,
여러 ìž¥ì˜ ì½˜í…츠를 차례대로 ì ‘ê·¼ 가능
•화면 전환 방법: Scrolling ë˜ëŠ” Page-curl
•연ì†ë˜ì§€ 않는 특정 페ì´ì§€ì— 바로 접근할 수 있ë„ë¡ êµ¬í˜„í•˜ë©´ 좋다.
Text Views
•í…스트 뷰는 ì–´ë–¤ 높ì´ë„ ë  ìˆ˜ 있으며, 콘í…츠가 뷰보다
길어질 ë•Œ 스í¬ë¡¤ 가능하다.
•í…스트는 ì½ê¸° 쉽게 쓴다:
•여러 글꼴, 색 ë“±ì„ ìž…í˜€ ì°½ì˜ì ì¸ ë°©ë²•ì„ ì‚¬ìš©í•  수 있
지만, 콘í…츠 ê°€ë…ì„±ì„ ìœ ì§€í•˜ëŠ” ê²ƒì´ ì¤‘ìš”í•˜ë‹¤.
•Dynamic Typeì„ ì‚¬ìš©í•˜ë©´ 기기ì—ì„œ í…스트 í¬ê¸°ê°€ ë³€
ê²½ë˜ì–´ë„ 여전히 좋게 ë³´ì¸ë‹¤.
•만약 í…스트뷰가 수정 가능하면(editable), 탭 ì‹œ 키보드
ê°€ 올ë¼ì˜¨ë‹¤.
•ì ì ˆí•œ 키보드를 보여준다: 효율ì ì¸ í…스트 ìž…ë ¥ì„ ìœ„í•´
서는 í•„ë“œì— ë“¤ì–´ê°ˆ 콘í…츠 íƒ€ìž…ì— ë§žëŠ” 키보드를 노출해
야 한다. (UIKeyboardType)
Image Views
í•œ ìž¥ì˜ ì´ë¯¸ì§€ë‚˜ 여러 ìž¥ì˜ ì—°ê²°ëœ ì´ë¯¸ì§€ë“¤ì„ 표시
•ì´ë¯¸ì§€ëŠ” ì´ë¯¸ì§€ë·° 안ì—ì„œ 늘어나거나 커지거나 작아지거나 ë”± 맞춰지거
나 특정 ìœ„ì¹˜ì— ê³ ì •ë  ìˆ˜ 있다.
•ì´ë¯¸ì§€ë·°ëŠ” 기본ì ìœ¼ë¡œ ì‚¬ìš©ìž ìƒí˜¸ìž‘ìš©ì´ ë¶ˆê°€ëŠ¥í•˜ë‹¤.
•연ì†ë˜ëŠ” ì´ë¯¸ì§€ë“¤ì„ 통해 애니메ì´ì…˜ 형태로 보여줄 ë• ìµœëŒ€í•œ ê°™ì€ ì‚¬
ì´ì¦ˆì˜ ì´ë¯¸ì§€ë¥¼ 사용한다: ì‹œìŠ¤í…œì´ ìŠ¤ì¼€ì¼ë§ì„ 해주긴 하지만, 미리 ì´
ë¯¸ì§€ë“¤ì´ ë·° 사ì´ì¦ˆì— 맞게 처리ë¼ìžˆëŠ” ê²ƒì´ ì¢‹ì€ ê²°ê³¼ë¥¼ 보여준다.
•템플릿 ì´ë¯¸ì§€ë¡œ ì„¤ì •ëœ ì´ë¯¸ì§€: color ê°’ì´ ì œê±°ë˜ê³  ì´ë¯¸ì§€ë·°ì˜ 틴트값
ì„ ì‚¬ìš©í•œë‹¤.
•ì´ë¯¸ì§€ë¥¼ í•­ìƒ í…œí”Œë¦¿ ì´ë¯¸ì§€ë¡œ 그리는 옵션:
UIImageRenderingModeAlwaysTemplate
* 템플릿 ì´ë¯¸ì§€ëž€?
단색 ì´ë¯¸ì§€ë¡œ, 마스í¬ë¥¼ 사용하여 ëª¨ì–‘ì„ ì •ì˜í•¨.
투명ë„ê°€ 있고, 안티앨리어싱 ê¸°ëŠ¥ì´ ìžˆìœ¼ë©° ëª…ì•”ì´ ì—†ë‹¤.
ì´ëŠ” ìžë™ìœ¼ë¡œ ìƒí™©ì´ë‚˜ ìƒí˜¸ìž‘ìš©ì— ë”°ë¼ ì ì ˆí•œ ìƒ‰ìƒ ì§€ì •, ê°•ì¡° 표시
ë“±ì„ ë°›ì•„ 사용한다.
Map Views
지형정보를 보여주고
ë¹ŒíŠ¸ì¸ ë§µ 앱ì—ì„œ 제공하는 ê¸°ëŠ¥ì„ ì§€ì›
•표준지ë„, 위성ì´ë¯¸ì§€ 표시 가능
•pin, overlay, zooming, panning 기능 제공
•ì´ë™ë£¨íŠ¸ 표시 가능 (feat. 러ë‹ì•±)
•예측 가능한 pin 색ìƒì„ 사용한다: 사용ìžëŠ” 표준 pin 색ìƒì—
ìµìˆ™í•˜ë‹¤. 목ì ì§€ëŠ” 빨간색, 출발지는 녹색, ì‚¬ìš©ìž ì„ íƒ ì§€ì 
ì€ ë³´ë¼ìƒ‰ìœ¼ë¡œ 표시한다.
Web Views
HTMLì´ë‚˜ 웹사ì´íŠ¸ 등 웹 콘í…츠를 앱 ë‚´ë¶€ì— í‘œì‹œ
•필요하면 ì´ì „페ì´ì§€ë³´ê¸°/ 다ìŒíŽ˜ì´ì§€ë³´ê¸° ë²„íŠ¼ì„ í™œì„±í™”í•œë‹¤:
•기본ì ìœ¼ë¡œ 비활성화 ë˜ì–´ìžˆë‹¤. 앱ì—ì„œ 여러 페ì´ì§€ì˜ 웹뷰를 ë³´
여줘야 한다면 활성화하는 ê²ƒì´ ì¢‹ë‹¤.
•웹뷰를 웹브ë¼ìš°ì €ë¡œ 사용하지 않는다.
Temporary Views
UI Elements
Alerts
•중요한 ìƒí™©ì—만 사용한다:
â€¢ì‚¬ìš©ìž ìž‘ì—…ì„ í•œ 번 ë” í™•ì¸í•˜ê±°ë‚˜ ì‚­ì œ ë“±ì˜ ìž‘ì—…ì„ ìˆ˜í–‰í•˜
거나 문제 ì‚¬í•­ì„ ì•Œë¦´ ë•Œ 등ì—만 사용한다.
•기본 ì•ŒëŸ¿ì°½ì€ ë³´í†µ 커스터마ì´ì¦ˆ ë  ìˆ˜ 없다.
•필요한 정보만 노출시키ë„ë¡ ì‚¬ì´ì¦ˆë¥¼ 최소화한다.
•Landscape 모드, Portrait 모드ì—ì„œ ëª¨ë‘ í™•ì¸í•´ë³¸ë‹¤.
Alerts
제목
•한 줄로 작성한다.
•한 단어만 사용하진 않는다: í•œ 단어만 사용하면 ë‚´ìš©ëž€ì— ë¶€ê°€ì ì¸ ì„¤ëª…ì´ í•„ìš”í•  수 있다.
설명
â€¢ì„¤ëª…ì€ ë˜ë„ë¡ ì ì§€ 않는다.
•꼭 ì ì–´ì•¼ 한다면, ì§§ì€ ë¬¸ìž¥ìœ¼ë¡œ ì ëŠ”다.
버튼
•주로 ë²„íŠ¼ì€ 2개만 배치한다:
•버튼 1개로는 사용ìžê°€ ìƒí™©ì„ 컨트롤하기 힘들다.
•3ê°œ ì´ìƒì˜ ë²„íŠ¼ì´ í•„ìš”í•˜ë©´ 액션시트로 대체한다.
•사용ìžë“¤ì´ ë” ë§Žì´ ëˆ„ë¥¼ 것 ê°™ì€ ë²„íŠ¼ì€ ì˜¤ë¥¸ìª½ì— ë°°ì¹˜í•˜ë©°, ì·¨ì†Œë²„íŠ¼ì€ í•­ìƒ ì™¼ìª½ì— ë°°ì¹˜í•œë‹¤.
â€¢ì·¨ì†Œë²„íŠ¼ëª…ì€ í•­ìƒ â€˜ì·¨ì†Œ(Cancel)’로만 표시ë˜ì–´ì•¼ 한다.
•Delete ë“±ì˜ ë²„íŠ¼ì€ Destructive 스타ì¼(UIAlertActionStyleDestructive)ë¡œ 만든다. ë˜, 취소 ë²„íŠ¼ë„ ê°™ì´
제공한다.
•홈 버튼 등으로 ì•±ì´ ì¢…ë£Œë˜ëŠ” 경우, ì•ŒëŸ¿ì´ ì·¨ì†Œë˜ë„ë¡ êµ¬í˜„í•œë‹¤:
â€¢ì•ŒëŸ¿ì°½ì´ ë…¸ì¶œëœ ìƒí™©ì—ì„œ 홈 버튼으로 ì•±ì´ ì¢…ë£Œë˜ë©´, ‘취소’ ë²„íŠ¼ì„ ëˆ„ë¥¸ 것과 ê°™ì€ ê²°ê³¼ë¥¼ 내야 한다.
•만약 ì•ŒëŸ¿ì°½ì— ì·¨ì†Œ ë²„íŠ¼ì´ ì—†ìœ¼ë©´ ì•±ì´ ì¢…ë£Œë˜ëŠ” ì‹œì ì— 취소 ì•¡ì…˜ì„ êµ¬í˜„í•  ìˆ˜ë„ ìžˆë‹¤.
제목
부제목
취소 삭제
Alerts
Q. 커스텀 알럿ì¸ê°€?
A. ì•ŒëŸ¿ì€ ì‚¬ìš©ìž ì •ì˜ê°€ ë˜ì§€ 않는다.
알럿처럼 만들어 모달 형태로 ë„ìš´ 커스텀 ë·°ì´ë‹¤.
Action Sheets
알림 ì»¨íŠ¸ë¡¤ëŸ¬ì˜ ì¼ì¢…으로, 2~3 ê°œ ì´ìƒì˜ ì„ íƒì§€ 제공
•새 ìž‘ì—…ì°½ì„ ì—´ê±°ë‚˜, 종료 여부 í™•ì¸ ì‹œ 사용하면 좋다.
â€¢ìž‘ì€ í™”ë©´ì—서는 액션시트가 화면 ì•„ëž˜ì— í‘œì‹œë˜ì§€ë§Œ, í° í™”ë©´ì—서는
íŒì˜¤ë²„(Popover) 형태로 나타나야 한다.
•아ì´íŒ¨ë“œì—서는 구현 ì‹œì— íŒì˜¤ë²„ë¡œ ë„우지 않으면 ì—러 ë°œìƒ
•취소 ë²„íŠ¼ì„ ë°˜ë“œì‹œ 넣는다: ì•¡ì…˜ 시트 마지막 항목으로 배치하면 좋다.
•위험한 ì„ íƒì§€ëŠ” ëˆˆì— ë„게 넣는다: ë¹¨ê°„ìƒ‰ì„ ì‚¬ìš©í•˜ì—¬ ëˆˆì— ë„게 표시
한다. 액션 시트 첫 항목으로 배치하면 좋다.
•스í¬ë¡¤ì´ ìƒê¸°ì§€ ì•Šë„ë¡ ë„ˆë¬´ ë§Žì€ í•­ëª©ì„ ë„£ì§€ 않는다.
Action Sheets
예시. 커스텀 액션시트
Popovers
특정 컨트롤ì´ë‚˜ ì˜ì—­ 탭 ì‹œ
콘í…츠 ìœ„ì— ìž ì‹œ 뜨는 ë·°
• 비모달 형태:
• 스í¬ë¦°ì˜ 다른 ë¶€ë¶„ì„ íƒ­í•˜ê±°ë‚˜ íŒì˜¤
버 ìœ„ì˜ ë²„íŠ¼ì„ ëˆ„ë¥´ë©´ 닫힘
• 닫히기 ì§ì „ì— ìžë™ìœ¼ë¡œ ë‚´ìš©ì„ ì €ìž¥
하는 ê²ƒì´ ì¢‹ë‹¤.
• í•œ ë²ˆì— 1개만 표시한다.
• íŒì˜¤ë²„ 위ì—는 알럿 ì™¸ì— ë‹¤ë¥¸ 뷰를 ë„
우지 않는다.
• 너무 í¬ê²Œ 만들어 스í¬ë¦° 전체를 사용하
지 ì•Šë„ë¡ ì£¼ì˜í•œë‹¤.
Popovers
• íŒì˜¤ë²„는 ì•„ì´íŒ¨ë“œì— 주로 사용ë˜ë©°, ì•„ì´í°ì—ì„  사용하지 ì•Š
는다:
• ì•„ì´í°ì—서는 스í¬ë¦°ì˜ 모든 ê³µê°„ì„ ì‚¬ìš©í•˜ì—¬ 모달형ì‹ìœ¼ë¡œ
만 뷰를 표시하기 ë•Œë¬¸ì— íŒì˜¤ë²„를 쓰지 않는 ê²ƒì´ ì¢‹ë‹¤.
Q. íŒì˜¤ë²„ì¸ê°€?
A. íŒì˜¤ë²„는 화살표가 있다. 위 예시는 íŒì˜¤ë²„처럼 만들어 모달형태로 ë„ìš´ 커스텀 ë·°ì´ë‹¤.
Activity Views
해당 페ì´ì§€ì— ê´€ë ¨ëœ ì•¡í‹°ë¹„í‹° 관리
•액티비티:
•현재 페ì´ë‹ˆ ë‚´ì—ì„œ 수행할 수 있는 복사, ì¦ê²¨ì°¾ê¸°, 검색 ë“±ì˜ ìž‘ì—… 단위
•액티비티 ë·°ì˜ ê´€ë¦¬ë¥¼ 받는ë°, 액션시트나 íŒì˜¤ë²„ 형태로 표시ëœë‹¤.
•시스템 제공 ë¹ŒíŠ¸ì¸ ì•¡í‹°ë¹„í‹°: Print, Message, AirPlay. 액티비티 ë·°ì— ê°€
장 먼저 표시ë˜ë©°, 순서를 변경할 수 없다. 제외는 가능.
â€¢ìž‘ì—…ëª…ì€ ì•„ì´ì½˜ 바로 아래 간단히 표시: ìž‘ì—…ëª…ì´ ê¸¸ë©´ iOS는 í…스트를 먼
ì € ì¤„ì¸ í›„ 너무 길면 ìžë¥¸ë‹¤. ë˜í•œ, 회사나 제품 ì´ë¦„ì„ í¬í•¨ì‹œí‚¤ì§€ 않는다.
â€¢ì‹œìŠ¤í…œì´ ì œê³µí•˜ëŠ” Action(공유) ë²„íŠ¼ì„ ì‚¬ìš©í•œë‹¤.
Controls
UI Elements
Buttons
시스템 제공 버튼
System Button
•주로 내비게ì´ì…˜ 바나 툴바
ì— ì‚¬ìš©
•ë˜ë„ë¡ ë™ì‚¬ë¡œ 작성
Detail Disclosure Button
•세부정보 뷰를 ë„움
•테ì´ë¸”ì—ì„œ 특정 í–‰ì˜ ì„¸ë¶€ì •
ë³´ 페ì´ì§€ ë„울 ë•Œ 주로 사용
•테ì´ë¸” í–‰ 전체를 세부정보ì—
사용하고 ì‹¶ì„ ë• Detail
disclosure accessory typeì„
사용 ( > 표시)
Info Button
â€¢ì•±ì˜ ìƒì„¸ 설정창 표시 ì‹œ 사용
•현재 ë·°ì˜ ë’·ë©´ì„ ë‚˜íƒ€ë‚¼ ë•Œ 사
ìš©í•˜ê¸°ë„ í•¨
Add Contact Button
•연ë½ì²˜ 리스트 íƒìƒ‰ ì‹œ, 새
í…스트필드나 다른 ë·° 삽입
시 사용
Labels
•í…스트는 ì½ê¸° 쉽게 쓴다:
•여러 글꼴, 색 ë“±ì„ ìž…í˜€ ì°½ì˜ì ì¸ ë°©ë²•ì„ ì‚¬ìš©í•  수 있지만, 콘
í…츠 ê°€ë…ì„±ì„ ìœ ì§€í•˜ëŠ” ê²ƒì´ ì¤‘ìš”í•˜ë‹¤.
•Dynamic Typeì„ ì‚¬ìš©í•˜ë©´ ì‚¬ëžŒë“¤ì´ ê¸°ê¸°ì—ì„œ í…스트 í¬ê¸°ë¥¼
변경하는 경우ì—ë„ ì—¬ì „ížˆ 좋게 ë³´ì´ê²Œ í•  수 있다.
Text Fields
1줄짜리 ë¼ì¸ 필드로, ì†ŒëŸ‰ì˜ ì •ë³´ë¥¼ 요청할 ë•Œ 사용
•높ì´ëŠ” ê³ ì •ì´ë‹¤.
•사용ìžê°€ 탭하면 키보드가 ìžë™ìœ¼ë¡œ 노출ëœë‹¤.
•ë˜ë„ë¡ ë¼ë²¨ì„ ë”°ë¡œ ë‘지 ë§ê³  힌트를 사용한다.
•오른쪽 ëì— Clear ë²„íŠ¼ì„ ì‚½ìž…í•œë‹¤.
•암호와 ê°™ì€ ì¤‘ìš”í•œ ë°ì´í„°ë¥¼ 요청할 ë•Œ, í•­ìƒ ë³´ì•ˆ 필드를 활용한다.
•ì´ë¯¸ì§€ì™€ ë²„íŠ¼ì„ ì‚¬ìš©í•˜ì—¬ í…스트 í•„ë“œì— ëª©ì ê³¼ ì¶”ê°€ê¸°ëŠ¥ì„ í‘œì‹œí•œ
다: ì¼ë°˜ì ìœ¼ë¡œ í…스트 í•„ë“œì˜ ì™¼ìª½ ëì€ í•„ë“œì˜ ëª©ì ì„ 나타내고, 오
른쪽 ëì€ ë¶ë§ˆí¬ì™€ ê°™ì€ ì¶”ê°€ ê¸°ëŠ¥ì´ ìžˆìŒì„ 나타낸다.
•여러 ì¤„ì˜ í…스트를 입력받기 위해선 Text View를 사용한다.
•ì ì ˆí•œ 키보드 ìœ í˜•ì„ í‘œì‹œí•œë‹¤. (UIKeyboardType)
Edit Menus
•현재 페ì´ì§€ì— ì í•©í•œ 메뉴들만 표시:
•기본ì ìœ¼ë¡œ, 잘ë¼ë‚´ê¸°, 복사하기, 붙여넣기, ì„ íƒ, ì „ì²´
ì„ íƒ, ì‚­ì œ ê¸°ëŠ¥ì„ ì œê³µí•˜ì§€ë§Œ, ì„ íƒì ìœ¼ë¡œ 비활성화 ì‹œ
킬 수 있다.
•필요한 경우, 위치를 변경한다:
•기본ì ìœ¼ë¡œ ì„ íƒí•œ ë¶€ë¶„ì˜ ìœ„ ë˜ëŠ” ì•„ëž˜ì— ë°°ì¹˜ë˜ì§€ë§Œ,
중요한 콘í…츠를 가리고 있는 경우 위치를 변경할 수 있
다.
•수정 불가한 í…스트는 ì„ íƒ/복사가 가능하ë„ë¡ ë§Œë“¤ë©´ 좋
다.
•수정 메뉴는 í•œ 번 실행ë˜ë©´ 취소할 수 없기 때문ì—, Undo/
Redo ëª…ë ¹ì„ ì œê³µí•œë‹¤.
Progress Indicators
복잡한 ë°ì´í„° 로드, ë™ê¸°í™” ìž‘ì—… 등
수치화 불가능한 작업 수행 중 사용
â€¢ê³„ì† ì›€ì§ì´ë„ë¡ ë§Œë“ ë‹¤: 사용ìžë“¤
ì€ ì¸ë””ì¼€ì´í„°ê°€ 정지ë˜ë©´ ìž‘ì—…ë„
정지ë˜ì—ˆë‹¤ê³  ìƒê°í•œë‹¤.
•기다리는 ë™ì•ˆ 유용한 정보를 제공
하면 좋다: ‘로딩 중’, ‘ì¸ì¦ 중’ ê³¼
ê°™ì€ ëª¨í˜¸í•œ 용어는 쓰지 않는다.
왼쪽ì—ì„œ 오른쪽으로 íŠ¸ëž™ì„ ì±„ì›Œê°€ë©´ì„œ
ìž‘ì—…ì˜ ì§„í–‰ë¥ ì„ ë³´ì—¬ì¤Œ
•취소 ë²„íŠ¼ì´ í•¨ê»˜ 제공ë˜ê¸°ë„ 한다.
•부정확한 진행 정보는 표시하지 않는다.
â€¢ê¸°ê°„ì´ ëª…í™•í•œ ìž‘ì—…ì— ì‚¬ìš©í•œë‹¤.
네트워킹 ë°œìƒ ì‹œ 회전하며,
ë„¤íŠ¸ì›Œí‚¹ì´ ì—°ê²°ë˜ë©´ 멈춤
•아ì´í°X 예외
•몇 초가 ì§€ë‚˜ë„ ì—°ê²°ì´ ì•ˆ ë  ë•Œ
만 사용한다.
Activity Indicators Progress Bars Network Activity Indicators
Progress Indicators
Q. Progress Bar ì¸ê°€?
A. Progress bar ë¼ê³  í•  수 있다.
Refresh Content Controls
•주로 í…Œì´ë¸”ë·°ì—ì„œ 수ë™ìœ¼ë¡œ 새로고침 ì‹œ 사용ëœë‹¤.
•기본ì ìœ¼ë¡œ 숨겨져 있으며, í™”ë©´ì„ ì•„ëž˜ë¡œ 드래그하면 나타난다.
•ìžë™ ì—…ë°ì´íŠ¸ë„ 정기ì ìœ¼ë¡œ 수행하ë„ë¡ êµ¬í˜„í•œë‹¤:
•사용ìžë“¤ì€ ìžë™ ì—…ë°ì´íŠ¸ê°€ 실행ë˜ê¸°ë¥¼ 기대한다.
â€¢ê°’ì´ ì¶”ê°€ë˜ëŠ” 경우ì—만 ì§§ì€ ì œëª©ì„ ì œê³µí•œë‹¤:
â€¢ì œëª©ì„ í¬í•¨ì‹œí‚¬ 수 있는ë°, ëŒ€ë¶€ë¶„ì˜ ê²½ìš° 불필요하다.
â€¢ì œëª©ì„ í¬í•¨í•  경우엔 콘í…ì¸ ì— ëŒ€í•œ 가치있는 정보를 제공한다.
예를 들어, 마지막 ì—…ë°ì´íŠ¸ ë°œìƒ ì‹œì ì„ 보여줄 수 있다.
Refresh Content Controls
예시. 커스텀 새로고침 컨트롤
Page Controls
여러 페ì´ì§€ 중 현재 페ì´ì§€ë¥¼ 나타냄
•ì¼ë ¨ì˜ ìž‘ì€ ì ìœ¼ë¡œ 표시ë˜ëŠ”ë°, ìƒ‰ì¹ ëœ ì ì€ 현재 페ì´ì§€ë¥¼ 나타낸다.
•ì ë“¤ì€ í•­ìƒ ê°™ì€ ê±°ë¦¬ë¥¼ 유지하며, 너무 많으면 잘린다.
•페ì´ì§€ ì»¨íŠ¸ë¡¤ì˜ ì•žë¶€ë¶„/ë’·ë¶€ë¶„ì„ íƒ­í•˜ë©´ 바로 ì•ž 페ì´ì§€ë‚˜ ë’· 페ì´ì§€
ë¡œ ì´ë™í•˜ì§€ë§Œ, 특정 페ì´ì§€ë¡œ ì´ë™í•  수는 없다.
â€¢ê³„ì¸µêµ¬ì¡°ì˜ íŽ˜ì´ì§€ì—는 사용하지 않는다: 페ì´ì§€ ì»¨íŠ¸ë¡¤ì€ íŽ˜ì´ì§€ë“¤ì´
ê´€ë ¨ëœ ë°©ì‹ì„ 보여주지 ì•Šê³ , ê° ì ì— 해당ë˜ëŠ” 페ì´ì§€ë¥¼ 나타내지 ì•Š
는다. 페ì´ì§€ ì»¨íŠ¸ë¡¤ì€ ë™ë“±í•œ ê´€ê³„ì— ìžˆëŠ” 페ì´ì§€ë¥¼ 위해 설계ë˜ì—ˆë‹¤.
â€¢í•­ìƒ ì½˜í…츠와 스í¬ë¦° 사ì´ì— 위치해야 한다.
Segmented Controls
ê° ì„¸ê·¸ë¨¼íŠ¸ëŠ” ìƒí˜¸ë°°íƒ€ì ì´ë©°, 다른 뷰를 표시하는 ë° ì‚¬ìš©ë˜ê¸°ë„ 함
•모든 ì„¸ê·¸ë¨¼íŠ¸ì˜ í­ì€ ë™ì¼í•˜ë©°, í…스트나 ì´ë¯¸ì§€ë¥¼ 삽입할 수 있다.
•단, í…스트와 ì´ë¯¸ì§€ë¥¼ 혼합하지 않는다.
•세그먼트 수를 제한한다: ì•„ì´í°ì—서는 5ê°œ ì´í•˜ì—¬ì•¼ 한다.
•콘í…츠 í¬ê¸°ë„ ì¼ê´€ì„± 있어야 한다:
•모든 세그먼트가 ë™ì¼í•œ í­ì„ 가지기 ë•Œë¬¸ì— ì½˜í…츠가 ì¼ë¶€ 세그먼트만 채우고 다른 세그먼
트는 채우지 않으면 좋아 ë³´ì´ì§€ 않는다.
Switches
Default Custom
ìƒí˜¸ë°°íƒ€ì ì¸ 2ê°œì˜ ìƒíƒœê°’ì„ ì§€ë‹Œ 토글
•스위치 ëª¨ì–‘ì„ ì•±ì˜ ìŠ¤íƒ€ì¼ì— 맞춰 변경하면 좋다.
•스위치는 í…Œì´ë¸”ì—ì„œ 사용ë˜ë„ë¡ ì„¤ê³„ë˜ì—ˆë‹¤. í…Œì´ë¸” í–‰ì—만 사용한다:
•툴바나 내비게ì´ì…˜ ë°”ì—는 스위치 대신 ë²„íŠ¼ì„ ì‚¬ìš©í•œë‹¤.
•스위치 ê°’ì„ ì„¤ëª…í•˜ëŠ” ë¼ë²¨ì€ 넣지 않는다.
•연관 ì¸í„°íŽ˜ì´ìŠ¤ì˜ ìš”ì†Œë“¤ì— ë¯¸ì¹  ì˜í–¥ì„ 고려한다:
•스위치는 종종 í™”ë©´ì˜ ë‹¤ë¥¸ 콘í…ì¸ ì— ì˜í–¥ì„ 미친다.
•(예) Wi-Fi 스위치 비활성화 ì‹œ, 사용가능한 ë„¤íŠ¸ì›Œí¬ ë° ê¸°íƒ€ ì˜µì…˜ì´ ì‚¬ë¼ì§.
ºÝºÝߣrs
가로트랙 위ì—ì„œ
최소값과 최대값 사ì´ë¥¼ ì´ë™ì‹œì¼œ 특정 ê°’ 변경
•양쪽으로 최소값, ìµœëŒ€ê°’ì„ ì˜ë¯¸í•˜ëŠ” ì•„ì´ì½˜ì„ 표시할 수 있다.
•오디오 볼륨ì—는 슬ë¼ì´ë”를 사용하지 않는다:
•앱ì—ì„œ 볼륨 ì»¨íŠ¸ë¡¤ì„ ì œê³µí•´ì•¼ 하는 경우, Volume View 사용
Steppers
2ê°œì˜ ì„¸ê·¸ë¨¼íŠ¸ë¡œ ì´ë¤„진 컨트롤.
ê°’ì„ ì¦ê°€/ê°ì†Œì‹œí‚¤ëŠ” ë° ì‚¬ìš©
•스테í¼ê°€ ì˜í–¥ 주는 ê°’ì„ ëª…í™•ížˆ 표시한다:
â€¢ìŠ¤í…Œí¼ ìžì²´ëŠ” ê°’ì„ í‘œì‹œí•˜ì§€ 않기 ë•Œë¬¸ì— ë³€ê²½í•˜ëŠ” ê°’ì´ ë­”ì§€ ì•Œ
려줘야 한다.
â€¢í° ê°’ì„ ë³€ê²½í•  때는 스테í¼ë¥¼ 사용하지 않는다:
•스테í¼ëŠ” 보통 몇 ë²ˆì˜ íƒ­ìœ¼ë¡œ 변경할 수 있는 ì •ë„ì—만 사용한다.
Pickers
•보통 화면 ì•„ëž˜ìª½ì— í‘œì‹œë˜ê±°ë‚˜ íŒì˜¤ë²„ 형태로 표시ëœë‹¤.
•테ì´ë¸” 특정 í–‰ì˜ ì¸ë¼ì¸ìœ¼ë¡œ 표시ë˜ê¸°ë„ 한다.
â€¢í”¼ì»¤ì˜ ë†’ì´ëŠ” 5ê°œ í–‰ ì •ë„ì´ë‹¤.
•논리ì ìœ¼ë¡œ ì •ë ¬ëœ ê°’ì„ ì‚¬ìš©í•œë‹¤:
â€¢ë§Žì€ ê°’ì´ ìˆ¨ê²¨ì ¸ 있기 ë•Œë¬¸ì— ì‚¬ìš©ìžê°€ ì–´ë–¤ ê°’ì´ ë‚˜ì˜¬ 지 예측 가능하
ë„ë¡ ë§Œë“œëŠ” ê²ƒì´ ì¤‘ìš”í•˜ë‹¤. (예) 알파벳 순, 날짜 순 등
•피커를 보여주기 위해 í™”ë©´ì „í™˜ì„ í•˜ì§€ 않는다:
•현재 페ì´ì§€ ë‚´ì—ì„œ 편집하는 í•„ë“œ 아래나 ê·¼ì²˜ì— ìœ„ì¹˜ì‹œí‚¨ë‹¤.
•아주 긴 리스트를 보여줘야 í•  때는 피커 대신 í…Œì´ë¸”ì„ ì‚¬ìš©í•œë‹¤:
•너무 긴 피커는 íƒìƒ‰í•  ë•Œ 지루해질 수 있다. 반면, í…Œì´ë¸”ì€ ë†’ì´ë¥¼ ì¡°ì •
í•  수 있고 색ì¸ì´ 있기 ë•Œë¬¸ì— ë¹ ë¥´ê²Œ íƒìƒ‰í•  수 있다.
Pickers
Date Picker
특정 날짜나 ì‹œê°„ì„ ì„ íƒí•˜ëŠ” 피커
•4가지 모드가 있다:
•Date: ë…„/ì›”/ì¼
•Time: 시/분/AM/PM
•Date and Time: ìœ„ì˜ ë‘˜ ëª¨ë‘ í‘œì‹œ 가능
•Countdown timer: 시/분
•분 ê°„ê²©ì„ ë„“íž ìˆ˜ 있다: 기본ì ìœ¼ë¡œ 1분 단위로 제공ë˜ì§€ë§Œ, ì„ íƒ
ì ìœ¼ë¡œ ê°„ê²©ì„ ì„¤ì •í•  수 있다.
â€¢í”¼ì»¤ì— í‘œì‹œë˜ëŠ” 정확한 ê°’ì€ ì‚¬ìš©ìžì˜ ìœ„ì¹˜ì— ë”°ë¼ ë‹¤ë¥´ë‹¤.
ê°ì‚¬Çê©ë‹ˆë‹¤.

More Related Content

HIG for iOS: UI Element (Bars, Views, Controls)

  • 1. Human Interface Guidelines for iOS UI Element Part. Seungmin Shim @CodeSquad 2018.01.08
  • 2. Views - 앱 콘í…츠를 표시 - 하위 뷰를 표시 - 콘í…츠 조회, 수정, 갱신, ì‚­ì œ 가능 UI Elements Bars - 앱 ë‚´ 사용ìžì˜ 위치 표시 - 문맥정보를 가지고 ì í•©í•œ 기능 ë˜ëŠ” ì •ë³´ 제공 Controls - ì‚¬ìš©ìž ìž…ë ¥ì„ ë°›ìŒ - 부수ì ì¸ ì •ë³´ 표시 Temporary Views -특정 ìƒí™©ì—ì„œ 중요한 메시지를 전달하고 추가ì ì¸ ìž…ë ¥ì„ ë°›ê¸° 위한 ì¼ì‹œì ì¸ ë·°
  • 4. Navigation Bars 계층구조로 êµ¬ì„±ëœ ì—°ì†ì ì¸ 페ì´ì§€ë¥¼ 차례로 조회 가능 •위치: 화면 ìƒë‹¨ì˜ ìƒíƒœë°” 아래 •좌측: 보통 뒤로가기 버튼 삽입. 보통 ì´ì „ 페ì´ì§€ 제목으로 표시. •우측: 기타 컨트롤 요소 삽입. 보통 수정 ë˜ëŠ” 완료 버튼 표시. 뒤로가기 버튼 기타 컨트롤 요소 숨김 처리 •제스처 ë°œìƒ, 키보드 노출, ë·° 사ì´ì¦ˆ 변경 ë“±ì˜ ìƒí™©ì— 바를 숨긴다. •콘í…츠를 전체화면으로 보여주는 경우, 바를 숨기는 íŽ¸ì´ ì¢‹ë‹¤.
  • 5. Navigation Bars ë°” ë‚´ë¶€ì— ì»¨íŠ¸ë¡¤ 요소 배치 ì‹œ 권유사항 •컨트롤 요소를 너무 ë§Žì´ ë„£ì§€ 않는다. •버튼 ì‚¬ì´ ê°„ê²©ì„ ë„“ê²Œ 한다. (UIBarButtonSystemItemFixedSpace 참고) •뒤로가기 ë²„íŠ¼ì€ Standard Back Button 사용. í•­ìƒ ì§ì „ í™”ë©´ì„ í‘œì‹œí•˜ëŠ” 액션만 취해야 한다. •세그먼트 ì»¨íŠ¸ë¡¤ì„ ì‚¬ìš©í•˜ë©´ 페ì´ì§€ë“¤ì˜ 계층 구조를 단순하게 보여줄 수 있다. •세그먼트 ì»¨íŠ¸ë¡¤ì„ ë„£ì„ ë• íƒ€ì´í‹€ì„ 제외한다. 타ì´í‹€ 배치 ì‹œ 권유사항 •현재 보여지는 ë·°ì˜ ì œëª©ì„ í‘œì‹œí•˜ëŠ” íŽ¸ì´ ì¢‹ë‹¤. •종류: Standard title, Large title •기본ì ìœ¼ë¡œ Large titleë¡œ 표시한 후, 스í¬ë¡¤ ë“±ì˜ ì´ë²¤íŠ¸ê°€ ë°œìƒ ì‹œ Standard titleë¡œ 변경하는 ê²ƒì´ ì¢‹ë‹¤. (prefersLargeTitles 참고) Standard TitleLarge Title 현재 ë·° 제목 컨트롤 요소 세그먼트 컨트롤
  • 6. Tab Bars 앱 ë‚´ì—ì„œ 다른 섹션으로 스위칭 가능 •앱 구조를 단순하게 표시할 수 있다. 앱 레벨ì—ì„œ 사용한다. •위치: 화면 하단 •탭바 ë²„íŠ¼ì€ ì•¡ì…˜ì„ ìˆ˜í–‰í•˜ëŠ” ë° ì‚¬ìš©í•˜ì§€ 않는다. 현재 ë·°ì—ì„œ 특정 ì•¡ì…˜ì„ ì·¨í•´ì•¼ 하는 경우, Tool Bar를 사용한다. •기기 사ì´ì¦ˆë‚˜ 오리엔테ì´ì…˜ì— ë”°ë¼ ë³´ì—¬ì§€ëŠ” 탭 개수가 달ë¼ì§„다. •너무 ë§Žì€ íƒ­ì„ ì“°ì§€ 않는다: 보통 3~5ê°œì˜ íƒ­ì„ ì“´ë‹¤. â€¢íƒ­ì€ í•­ìƒ í™œì„±í™” ìƒíƒœë¡œ 둔다: 탭 내부 콘í…츠가 사용할 수 ì—†ë”ë¼ ë„ íƒ­ 내부ì—ì„œ ì´ë¥¼ 표시한다. •특정 íƒ­ì— ì—…ë°ì´íŠ¸ëœ ì •ë³´ê°€ 있으면 배지를 달아서 표시할 수 있다. •액션 ìˆ˜í–‰ì— ì‚¬ìš©í•˜ì§€ ì•ŠìŒ â€¢3~5개가 ì ë‹¹ â€¢í•­ìƒ í™œì„±í™” ìƒíƒœ •업ë°ì´íŠ¸ 표시는 배지 사용
  • 7. Tab Bars Q. ìƒë‹¨ì— 위치한 탭바? A. iOSì—ì„œ 탭바는 í•˜ë‹¨ì— ë°°ì¹˜ë˜ê¸° ë•Œë¬¸ì— ìœ„ ì˜ˆì‹œë“¤ì€ íƒ­ì²˜ëŸ¼ êµ¬í˜„ëœ ì»¤ìŠ¤í…€ ë·°ì´ë‹¤. 안드로ì´ë“œì™€ ë””ìžì¸ 통ì¼ì„ 위해 íƒ­ì„ ìƒë‹¨ì— ë°°ì¹˜í•˜ê¸°ë„ í•œë‹¤.
  • 8. Tool Bars 현재 ë·°ì—ì„œ 수행가능한 기능 표시 •위치: 화면 하단 •현재 화면과 ê´€ë ¨ëœ ë²„íŠ¼ë§Œ 표시한다. •툴바 ìœ„ì— ì„¸ê·¸ë¨¼íŠ¸ ì»¨íŠ¸ë¡¤ì€ ì‚¬ìš©í•˜ì§€ 않는 íŽ¸ì´ ì¢‹ë‹¤. •í…스트 ë²„íŠ¼ë“¤ì€ ê°„ê²©ì„ ë„“ê²Œ 한다 (UIBarButtonSystemItemFixedSpace) Q. 툴바?
  • 9. Search Bars •단ë…으로 배치ë˜ê±°ë‚˜ 내비게ì´ì…˜ ë°” ë“±ì˜ ë·° ë‚´ë¶€ì— ë°°ì¹˜ •Text Field ë§ê³  Search Bar 요소를 ì´ìš©í•œë‹¤. •Clear 버튼 사용 •Cancel ë²„íŠ¼ì„ ë§Œë“¤ì–´ ê²€ìƒ‰ì„ ì¤‘ë‹¨í•  수 있ë„ë¡ í•œë‹¤. •검색 중 í•˜ë‹¨ì— ì—°ê´€ê²€ìƒ‰ì–´ë¥¼ 보여주면 좋다. •힌트 문구를 넣어 검색 가능한 범위를 ì•Œ 수 있ë„ë¡ í•œë‹¤. ëª¨ë‘ ì§€ìš°ê¸° 검색 취소 ì—°ê´€ 검색어 리스트 검색어 힌트 Scope Bar 검색 ë°”ì— ë¶™ì´ë©´ 검색 범위를 ì¢íž 수 있다.
  • 10. Status Bars 현재 시간, ë„¤íŠ¸ì›Œí¬ ìƒíƒœ, 배터리 등 ê¸°ê¸°ì˜ í˜„ìž¬ ìƒíƒœë¥¼ 표시 •시스템 제공 바를 사용한다. •앱 ë””ìžì¸ì— ë”°ë¼ ë°” 색ìƒì„ 변경할 수 있다: Light / Dark •기본ì ìœ¼ë¡œ 투명해서 콘í…츠가 비ì³ë³´ì¸ë‹¤: ìƒíƒœë°” ë‚´ìš©ì´ ìž˜ ë³´ì¼ ìˆ˜ 있ë„ë¡ ìƒíƒœë°” ë’·ë¶€ë¶„ì— UIBlurEffect를 ì ìš©í•˜ì—¬ í리게 만든다. •전체화면으로 미디어를 보여줄 때는 ìƒíƒœë°”를 ìž ì‹œ 숨긴다. Light Dark
  • 12. Tables 컬럼 1ê°œì¸ ë¦¬ìŠ¤íŠ¸ë¡œ, 여러 ì¤„ì˜ ë°ì´í„°ë¥¼ 스í¬ë¡¤ 조회 가능 •주로 í…스트 ê¸°ë°˜ì˜ ì½˜í…츠나 Split Viewì—ì„œ 내비게ì´ì…˜ì„ 표시할 ë•Œ 사용ë¨. •테ì´ë¸” 너비를 고려한다. •ì´ë¯¸ì§€ ë“±ì˜ ì¶”ê°€ì ì¸ ë°ì´í„°ë¥¼ 보여주기 위해 기다리지 않는 다: í…스트 ë°ì´í„°ë¶€í„° 빠르게 보여준다. •콘í…츠가 ë¡œë“œë  ë•Œê¹Œì§€ Progress Indicator를 보여준다. •테ì´ë¸” 콘í…츠를 정기ì ìœ¼ë¡œ ì—…ë°ì´íŠ¸í•˜ëŠ” ë°©ë²•ì„ ê³ ë ¤í•œë‹¤. 단, ì—…ë°ì´íŠ¸ë  ë•Œ 현재 스í¬ë¡¤ 위치는 유지한다.
  • 13. Tables Plain â€¢í–‰ì´ ë¼ë²¨ì´ 있는 섹션 단위로 ë¬¶ì¼ ìˆ˜ 있다. •Header와 Footer를 가질 수 있다. •우측ì—는 색ì¸(index)ì„ ì„¸ë¡œë¡œ 삽입할 수 있다. •단, ìš°ì¸¡ì— Disclosure Indicator ë“±ì˜ ìš”ì†Œê°€ 있 으면 색ì¸ì€ 넣지 않는다. Grouped â€¢í–‰ì´ ê·¸ë£¹ 단위로 ë¬¶ì¼ ìˆ˜ 있다. •Header와 Footer를 가질 수 있다. â€¢í•­ìƒ 1ê°œ ì´ìƒì˜ ê·¸ë£¹ì„ ê°€ì§€ë©°, ê° ê·¸ë£¹ì€ 1ê°œ ì´ìƒì˜ í–‰ì„ ê°€ì§„ë‹¤. •색ì¸ì€ 삽입할 수 없다. Disclosure Indicator Footer Header Index
  • 14. Tables Subtitle Left Detail Basic Right Detail í–‰ ìŠ¤íƒ€ì¼ ì´ë¯¸ì§€ 삽입 가능 제목 왼쪽 ì •ë ¬ 부제목 삽입 제목 왼쪽 ì •ë ¬ 부제목 오른쪽 ì •ë ¬ 제목 오른쪽 ì •ë ¬ 부제목 왼쪽 ì •ë ¬
  • 15. Collections ì •ë ¬ëœ ì½˜í…츠 모ìŒì„ 관리하고 ì‹œê°ì ì¸ ë ˆì´ì•„웃으로 표시 •엄격한 선형구조를 요구하지 않기 때문ì—, 여러 사ì´ì¦ˆë¡œ 콘í…ì¸ ë“¤ì„ ë³´ 여주는 ë° ì í•©í•˜ë‹¤. •콘í…츠 ì£¼ìœ„ì— íŒ¨ë”© 사용: ë ˆì´ì•„ì›ƒì„ ê¹¨ë—하게 유지하고 콘í…츠가 겹치 는 ê²ƒì„ ë°©ì§€í•  수 있다. •í…스트 콘í…츠 배치 ì‹œ, 컬렉션보다 í…Œì´ë¸” 사용
  • 16. Split Views 스í¬ë¦°ì„ ë‘ í™”ë©´ìœ¼ë¡œ 나누어 관리 •주 화면(왼쪽): 변하지 않는 ë‚´ìš© 표시 •보통 카테고리(내비게ì´ì…˜) 표시 •사용하지 ì•Šì„ ë• ìˆ¨ê²¨ë‘”ë‹¤. •보조 화면(오른쪽): 관련 콘í…츠 표시 •화면 ë¶„í• ì€ ì½˜í…츠 ê· í˜•ì— ë§žê²Œ 한다: •기본ì ìœ¼ë¡œ 주 í™”ë©´ì€ 1/3, ë³´ì¡° í™”ë©´ì€ 2/3를 차지한다. •보조 í™”ë©´ì´ ì£¼ 화면보다 ë” ìž‘ì•„ì§€ë©´ 안ëœë‹¤. •숨겨져 있는 주 화면 노출 ì‹œ, 여러 방법 제공: •스와ì´í•‘, 버튼 í´ë¦­ 등 주 화면 Master ë³´ì¡° 화면 Detail
  • 17. Split Views Q. ì•„ì´í°ì—ì„œì˜ ìŠ¤í”Œë¦¿ ë·°ì¸ê°€? A. 아니다. 커스텀 ë·°ì´ë‹¤.
  • 18. Scroll Views 사용ìžì™€ ìƒí˜¸ìž‘ìš© ì‹œ, ì¼ì‹œì ì¸ 스í¬ë¡¤ ì¸ë””ì¼€ì´í„° 노출 •tap, flick, drag, pinch, swipe 제스처를 따른다. â€¢ì‚¬ìš©ìž ì œìŠ¤ì²˜ì˜ ì ì •ì„ ì„ 설정한다: 예를 들어, ì¤Œì¸ ì‹œ 너무 커지거나 ìž‘ 아지지 ì•Šë„ë¡ ìµœëŒ€ 스케ì¼, 최소 ìŠ¤ì¼€ì¼ ê°’ì„ ì„¤ì •í•œë‹¤. •페ì´ì§• 모드로 설정 ì‹œ: 스í¬ë¡¤ ì‹œ 새 페ì´ì§€ë¡œ 전환 가능 •스í¬ë¡¤ ë·° ì•ˆì— ìŠ¤í¬ë¡¤ 뷰를 중첩해서 넣지 않는다. •스í¬ë¡¤ 뷰는 í•œ í™”ë©´ì— 1개만 보여준다: •만약 2ê°œì˜ ìŠ¤í¬ë¡¤ 뷰를 넣어야 한다면, 다른 방향으로 스í¬ë¡¤ 하ë„ë¡ ë§Œë“ ë‹¤. 제스처가 다른 ë·°ì— ì˜í–¥ì„ 주지 않기 때문.
  • 19. Pages 문서, ì±…, 메모장, 달력 ë“±ì— ì‚¬ìš©ë˜ë©°, 여러 ìž¥ì˜ ì½˜í…츠를 차례대로 ì ‘ê·¼ 가능 •화면 전환 방법: Scrolling ë˜ëŠ” Page-curl •연ì†ë˜ì§€ 않는 특정 페ì´ì§€ì— 바로 접근할 수 있ë„ë¡ êµ¬í˜„í•˜ë©´ 좋다.
  • 20. Text Views •í…스트 뷰는 ì–´ë–¤ 높ì´ë„ ë  ìˆ˜ 있으며, 콘í…츠가 뷰보다 길어질 ë•Œ 스í¬ë¡¤ 가능하다. •í…스트는 ì½ê¸° 쉽게 쓴다: •여러 글꼴, 색 ë“±ì„ ìž…í˜€ ì°½ì˜ì ì¸ ë°©ë²•ì„ ì‚¬ìš©í•  수 있 지만, 콘í…츠 ê°€ë…ì„±ì„ ìœ ì§€í•˜ëŠ” ê²ƒì´ ì¤‘ìš”í•˜ë‹¤. •Dynamic Typeì„ ì‚¬ìš©í•˜ë©´ 기기ì—ì„œ í…스트 í¬ê¸°ê°€ ë³€ ê²½ë˜ì–´ë„ 여전히 좋게 ë³´ì¸ë‹¤. •만약 í…스트뷰가 수정 가능하면(editable), 탭 ì‹œ 키보드 ê°€ 올ë¼ì˜¨ë‹¤. •ì ì ˆí•œ 키보드를 보여준다: 효율ì ì¸ í…스트 ìž…ë ¥ì„ ìœ„í•´ 서는 í•„ë“œì— ë“¤ì–´ê°ˆ 콘í…츠 íƒ€ìž…ì— ë§žëŠ” 키보드를 노출해 야 한다. (UIKeyboardType)
  • 21. Image Views í•œ ìž¥ì˜ ì´ë¯¸ì§€ë‚˜ 여러 ìž¥ì˜ ì—°ê²°ëœ ì´ë¯¸ì§€ë“¤ì„ 표시 •ì´ë¯¸ì§€ëŠ” ì´ë¯¸ì§€ë·° 안ì—ì„œ 늘어나거나 커지거나 작아지거나 ë”± 맞춰지거 나 특정 ìœ„ì¹˜ì— ê³ ì •ë  ìˆ˜ 있다. •ì´ë¯¸ì§€ë·°ëŠ” 기본ì ìœ¼ë¡œ ì‚¬ìš©ìž ìƒí˜¸ìž‘ìš©ì´ ë¶ˆê°€ëŠ¥í•˜ë‹¤. •연ì†ë˜ëŠ” ì´ë¯¸ì§€ë“¤ì„ 통해 애니메ì´ì…˜ 형태로 보여줄 ë• ìµœëŒ€í•œ ê°™ì€ ì‚¬ ì´ì¦ˆì˜ ì´ë¯¸ì§€ë¥¼ 사용한다: ì‹œìŠ¤í…œì´ ìŠ¤ì¼€ì¼ë§ì„ 해주긴 하지만, 미리 ì´ ë¯¸ì§€ë“¤ì´ ë·° 사ì´ì¦ˆì— 맞게 처리ë¼ìžˆëŠ” ê²ƒì´ ì¢‹ì€ ê²°ê³¼ë¥¼ 보여준다. •템플릿 ì´ë¯¸ì§€ë¡œ ì„¤ì •ëœ ì´ë¯¸ì§€: color ê°’ì´ ì œê±°ë˜ê³  ì´ë¯¸ì§€ë·°ì˜ 틴트값 ì„ ì‚¬ìš©í•œë‹¤. •ì´ë¯¸ì§€ë¥¼ í•­ìƒ í…œí”Œë¦¿ ì´ë¯¸ì§€ë¡œ 그리는 옵션: UIImageRenderingModeAlwaysTemplate * 템플릿 ì´ë¯¸ì§€ëž€? 단색 ì´ë¯¸ì§€ë¡œ, 마스í¬ë¥¼ 사용하여 ëª¨ì–‘ì„ ì •ì˜í•¨. 투명ë„ê°€ 있고, 안티앨리어싱 ê¸°ëŠ¥ì´ ìžˆìœ¼ë©° ëª…ì•”ì´ ì—†ë‹¤. ì´ëŠ” ìžë™ìœ¼ë¡œ ìƒí™©ì´ë‚˜ ìƒí˜¸ìž‘ìš©ì— ë”°ë¼ ì ì ˆí•œ ìƒ‰ìƒ ì§€ì •, ê°•ì¡° 표시 ë“±ì„ ë°›ì•„ 사용한다.
  • 22. Map Views 지형정보를 보여주고 ë¹ŒíŠ¸ì¸ ë§µ 앱ì—ì„œ 제공하는 ê¸°ëŠ¥ì„ ì§€ì› â€¢í‘œì¤€ì§€ë„, 위성ì´ë¯¸ì§€ 표시 가능 •pin, overlay, zooming, panning 기능 제공 •ì´ë™ë£¨íŠ¸ 표시 가능 (feat. 러ë‹ì•±) •예측 가능한 pin 색ìƒì„ 사용한다: 사용ìžëŠ” 표준 pin 색ìƒì— ìµìˆ™í•˜ë‹¤. 목ì ì§€ëŠ” 빨간색, 출발지는 녹색, ì‚¬ìš©ìž ì„ íƒ ì§€ì  ì€ ë³´ë¼ìƒ‰ìœ¼ë¡œ 표시한다.
  • 23. Web Views HTMLì´ë‚˜ 웹사ì´íŠ¸ 등 웹 콘í…츠를 앱 ë‚´ë¶€ì— í‘œì‹œ •필요하면 ì´ì „페ì´ì§€ë³´ê¸°/ 다ìŒíŽ˜ì´ì§€ë³´ê¸° ë²„íŠ¼ì„ í™œì„±í™”í•œë‹¤: •기본ì ìœ¼ë¡œ 비활성화 ë˜ì–´ìžˆë‹¤. 앱ì—ì„œ 여러 페ì´ì§€ì˜ 웹뷰를 ë³´ 여줘야 한다면 활성화하는 ê²ƒì´ ì¢‹ë‹¤. •웹뷰를 웹브ë¼ìš°ì €ë¡œ 사용하지 않는다.
  • 25. Alerts •중요한 ìƒí™©ì—만 사용한다: â€¢ì‚¬ìš©ìž ìž‘ì—…ì„ í•œ 번 ë” í™•ì¸í•˜ê±°ë‚˜ ì‚­ì œ ë“±ì˜ ìž‘ì—…ì„ ìˆ˜í–‰í•˜ 거나 문제 ì‚¬í•­ì„ ì•Œë¦´ ë•Œ 등ì—만 사용한다. •기본 ì•ŒëŸ¿ì°½ì€ ë³´í†µ 커스터마ì´ì¦ˆ ë  ìˆ˜ 없다. •필요한 정보만 노출시키ë„ë¡ ì‚¬ì´ì¦ˆë¥¼ 최소화한다. •Landscape 모드, Portrait 모드ì—ì„œ ëª¨ë‘ í™•ì¸í•´ë³¸ë‹¤.
  • 26. Alerts 제목 •한 줄로 작성한다. •한 단어만 사용하진 않는다: í•œ 단어만 사용하면 ë‚´ìš©ëž€ì— ë¶€ê°€ì ì¸ ì„¤ëª…ì´ í•„ìš”í•  수 있다. 설명 â€¢ì„¤ëª…ì€ ë˜ë„ë¡ ì ì§€ 않는다. •꼭 ì ì–´ì•¼ 한다면, ì§§ì€ ë¬¸ìž¥ìœ¼ë¡œ ì ëŠ”다. 버튼 •주로 ë²„íŠ¼ì€ 2개만 배치한다: •버튼 1개로는 사용ìžê°€ ìƒí™©ì„ 컨트롤하기 힘들다. •3ê°œ ì´ìƒì˜ ë²„íŠ¼ì´ í•„ìš”í•˜ë©´ 액션시트로 대체한다. •사용ìžë“¤ì´ ë” ë§Žì´ ëˆ„ë¥¼ 것 ê°™ì€ ë²„íŠ¼ì€ ì˜¤ë¥¸ìª½ì— ë°°ì¹˜í•˜ë©°, ì·¨ì†Œë²„íŠ¼ì€ í•­ìƒ ì™¼ìª½ì— ë°°ì¹˜í•œë‹¤. â€¢ì·¨ì†Œë²„íŠ¼ëª…ì€ í•­ìƒ â€˜ì·¨ì†Œ(Cancel)’로만 표시ë˜ì–´ì•¼ 한다. •Delete ë“±ì˜ ë²„íŠ¼ì€ Destructive 스타ì¼(UIAlertActionStyleDestructive)ë¡œ 만든다. ë˜, 취소 ë²„íŠ¼ë„ ê°™ì´ ì œê³µí•œë‹¤. •홈 버튼 등으로 ì•±ì´ ì¢…ë£Œë˜ëŠ” 경우, ì•ŒëŸ¿ì´ ì·¨ì†Œë˜ë„ë¡ êµ¬í˜„í•œë‹¤: â€¢ì•ŒëŸ¿ì°½ì´ ë…¸ì¶œëœ ìƒí™©ì—ì„œ 홈 버튼으로 ì•±ì´ ì¢…ë£Œë˜ë©´, ‘취소’ ë²„íŠ¼ì„ ëˆ„ë¥¸ 것과 ê°™ì€ ê²°ê³¼ë¥¼ 내야 한다. •만약 ì•ŒëŸ¿ì°½ì— ì·¨ì†Œ ë²„íŠ¼ì´ ì—†ìœ¼ë©´ ì•±ì´ ì¢…ë£Œë˜ëŠ” ì‹œì ì— 취소 ì•¡ì…˜ì„ êµ¬í˜„í•  ìˆ˜ë„ ìžˆë‹¤. 제목 부제목 취소 ì‚­ì œ
  • 27. Alerts Q. 커스텀 알럿ì¸ê°€? A. ì•ŒëŸ¿ì€ ì‚¬ìš©ìž ì •ì˜ê°€ ë˜ì§€ 않는다. 알럿처럼 만들어 모달 형태로 ë„ìš´ 커스텀 ë·°ì´ë‹¤.
  • 28. Action Sheets 알림 ì»¨íŠ¸ë¡¤ëŸ¬ì˜ ì¼ì¢…으로, 2~3 ê°œ ì´ìƒì˜ ì„ íƒì§€ 제공 •새 ìž‘ì—…ì°½ì„ ì—´ê±°ë‚˜, 종료 여부 í™•ì¸ ì‹œ 사용하면 좋다. â€¢ìž‘ì€ í™”ë©´ì—서는 액션시트가 화면 ì•„ëž˜ì— í‘œì‹œë˜ì§€ë§Œ, í° í™”ë©´ì—서는 íŒì˜¤ë²„(Popover) 형태로 나타나야 한다. •아ì´íŒ¨ë“œì—서는 구현 ì‹œì— íŒì˜¤ë²„ë¡œ ë„우지 않으면 ì—러 ë°œìƒ â€¢ì·¨ì†Œ ë²„íŠ¼ì„ ë°˜ë“œì‹œ 넣는다: ì•¡ì…˜ 시트 마지막 항목으로 배치하면 좋다. •위험한 ì„ íƒì§€ëŠ” ëˆˆì— ë„게 넣는다: ë¹¨ê°„ìƒ‰ì„ ì‚¬ìš©í•˜ì—¬ ëˆˆì— ë„게 표시 한다. ì•¡ì…˜ 시트 첫 항목으로 배치하면 좋다. •스í¬ë¡¤ì´ ìƒê¸°ì§€ ì•Šë„ë¡ ë„ˆë¬´ ë§Žì€ í•­ëª©ì„ ë„£ì§€ 않는다.
  • 30. Popovers 특정 컨트롤ì´ë‚˜ ì˜ì—­ 탭 ì‹œ 콘í…츠 ìœ„ì— ìž ì‹œ 뜨는 ë·° • 비모달 형태: • 스í¬ë¦°ì˜ 다른 ë¶€ë¶„ì„ íƒ­í•˜ê±°ë‚˜ íŒì˜¤ 버 ìœ„ì˜ ë²„íŠ¼ì„ ëˆ„ë¥´ë©´ 닫힘 • 닫히기 ì§ì „ì— ìžë™ìœ¼ë¡œ ë‚´ìš©ì„ ì €ìž¥ 하는 ê²ƒì´ ì¢‹ë‹¤. • í•œ ë²ˆì— 1개만 표시한다. • íŒì˜¤ë²„ 위ì—는 알럿 ì™¸ì— ë‹¤ë¥¸ 뷰를 ë„ ìš°ì§€ 않는다. • 너무 í¬ê²Œ 만들어 스í¬ë¦° 전체를 사용하 지 ì•Šë„ë¡ ì£¼ì˜í•œë‹¤.
  • 31. Popovers • íŒì˜¤ë²„는 ì•„ì´íŒ¨ë“œì— 주로 사용ë˜ë©°, ì•„ì´í°ì—ì„  사용하지 ì•Š 는다: • ì•„ì´í°ì—서는 스í¬ë¦°ì˜ 모든 ê³µê°„ì„ ì‚¬ìš©í•˜ì—¬ 모달형ì‹ìœ¼ë¡œ 만 뷰를 표시하기 ë•Œë¬¸ì— íŒì˜¤ë²„를 쓰지 않는 ê²ƒì´ ì¢‹ë‹¤. Q. íŒì˜¤ë²„ì¸ê°€? A. íŒì˜¤ë²„는 화살표가 있다. 위 예시는 íŒì˜¤ë²„처럼 만들어 모달형태로 ë„ìš´ 커스텀 ë·°ì´ë‹¤.
  • 32. Activity Views 해당 페ì´ì§€ì— ê´€ë ¨ëœ ì•¡í‹°ë¹„í‹° 관리 •액티비티: •현재 페ì´ë‹ˆ ë‚´ì—ì„œ 수행할 수 있는 복사, ì¦ê²¨ì°¾ê¸°, 검색 ë“±ì˜ ìž‘ì—… 단위 •액티비티 ë·°ì˜ ê´€ë¦¬ë¥¼ 받는ë°, 액션시트나 íŒì˜¤ë²„ 형태로 표시ëœë‹¤. •시스템 제공 ë¹ŒíŠ¸ì¸ ì•¡í‹°ë¹„í‹°: Print, Message, AirPlay. 액티비티 ë·°ì— ê°€ 장 먼저 표시ë˜ë©°, 순서를 변경할 수 없다. 제외는 가능. â€¢ìž‘ì—…ëª…ì€ ì•„ì´ì½˜ 바로 아래 간단히 표시: ìž‘ì—…ëª…ì´ ê¸¸ë©´ iOS는 í…스트를 먼 ì € ì¤„ì¸ í›„ 너무 길면 ìžë¥¸ë‹¤. ë˜í•œ, 회사나 제품 ì´ë¦„ì„ í¬í•¨ì‹œí‚¤ì§€ 않는다. â€¢ì‹œìŠ¤í…œì´ ì œê³µí•˜ëŠ” Action(공유) ë²„íŠ¼ì„ ì‚¬ìš©í•œë‹¤.
  • 34. Buttons 시스템 제공 버튼 System Button •주로 내비게ì´ì…˜ 바나 툴바 ì— ì‚¬ìš© •ë˜ë„ë¡ ë™ì‚¬ë¡œ 작성 Detail Disclosure Button •세부정보 뷰를 ë„움 •테ì´ë¸”ì—ì„œ 특정 í–‰ì˜ ì„¸ë¶€ì • ë³´ 페ì´ì§€ ë„울 ë•Œ 주로 사용 •테ì´ë¸” í–‰ 전체를 ì„¸ë¶€ì •ë³´ì— ì‚¬ìš©í•˜ê³  ì‹¶ì„ ë• Detail disclosure accessory typeì„ ì‚¬ìš© ( > 표시) Info Button â€¢ì•±ì˜ ìƒì„¸ 설정창 표시 ì‹œ 사용 •현재 ë·°ì˜ ë’·ë©´ì„ ë‚˜íƒ€ë‚¼ ë•Œ 사 ìš©í•˜ê¸°ë„ í•¨ Add Contact Button •연ë½ì²˜ 리스트 íƒìƒ‰ ì‹œ, 새 í…스트필드나 다른 ë·° 삽입 ì‹œ 사용
  • 35. Labels •í…스트는 ì½ê¸° 쉽게 쓴다: •여러 글꼴, 색 ë“±ì„ ìž…í˜€ ì°½ì˜ì ì¸ ë°©ë²•ì„ ì‚¬ìš©í•  수 있지만, 콘 í…츠 ê°€ë…ì„±ì„ ìœ ì§€í•˜ëŠ” ê²ƒì´ ì¤‘ìš”í•˜ë‹¤. •Dynamic Typeì„ ì‚¬ìš©í•˜ë©´ ì‚¬ëžŒë“¤ì´ ê¸°ê¸°ì—ì„œ í…스트 í¬ê¸°ë¥¼ 변경하는 경우ì—ë„ ì—¬ì „ížˆ 좋게 ë³´ì´ê²Œ í•  수 있다.
  • 36. Text Fields 1줄짜리 ë¼ì¸ 필드로, ì†ŒëŸ‰ì˜ ì •ë³´ë¥¼ 요청할 ë•Œ 사용 •높ì´ëŠ” ê³ ì •ì´ë‹¤. •사용ìžê°€ 탭하면 키보드가 ìžë™ìœ¼ë¡œ 노출ëœë‹¤. •ë˜ë„ë¡ ë¼ë²¨ì„ ë”°ë¡œ ë‘지 ë§ê³  힌트를 사용한다. •오른쪽 ëì— Clear ë²„íŠ¼ì„ ì‚½ìž…í•œë‹¤. •암호와 ê°™ì€ ì¤‘ìš”í•œ ë°ì´í„°ë¥¼ 요청할 ë•Œ, í•­ìƒ ë³´ì•ˆ 필드를 활용한다. •ì´ë¯¸ì§€ì™€ ë²„íŠ¼ì„ ì‚¬ìš©í•˜ì—¬ í…스트 í•„ë“œì— ëª©ì ê³¼ ì¶”ê°€ê¸°ëŠ¥ì„ í‘œì‹œí•œ 다: ì¼ë°˜ì ìœ¼ë¡œ í…스트 í•„ë“œì˜ ì™¼ìª½ ëì€ í•„ë“œì˜ ëª©ì ì„ 나타내고, 오 른쪽 ëì€ ë¶ë§ˆí¬ì™€ ê°™ì€ ì¶”ê°€ ê¸°ëŠ¥ì´ ìžˆìŒì„ 나타낸다. •여러 ì¤„ì˜ í…스트를 입력받기 위해선 Text View를 사용한다. •ì ì ˆí•œ 키보드 ìœ í˜•ì„ í‘œì‹œí•œë‹¤. (UIKeyboardType)
  • 37. Edit Menus •현재 페ì´ì§€ì— ì í•©í•œ 메뉴들만 표시: •기본ì ìœ¼ë¡œ, 잘ë¼ë‚´ê¸°, 복사하기, 붙여넣기, ì„ íƒ, ì „ì²´ ì„ íƒ, ì‚­ì œ ê¸°ëŠ¥ì„ ì œê³µí•˜ì§€ë§Œ, ì„ íƒì ìœ¼ë¡œ 비활성화 ì‹œ 킬 수 있다. •필요한 경우, 위치를 변경한다: •기본ì ìœ¼ë¡œ ì„ íƒí•œ ë¶€ë¶„ì˜ ìœ„ ë˜ëŠ” ì•„ëž˜ì— ë°°ì¹˜ë˜ì§€ë§Œ, 중요한 콘í…츠를 가리고 있는 경우 위치를 변경할 수 있 다. •수정 불가한 í…스트는 ì„ íƒ/복사가 가능하ë„ë¡ ë§Œë“¤ë©´ 좋 다. •수정 메뉴는 í•œ 번 실행ë˜ë©´ 취소할 수 없기 때문ì—, Undo/ Redo ëª…ë ¹ì„ ì œê³µí•œë‹¤.
  • 38. Progress Indicators 복잡한 ë°ì´í„° 로드, ë™ê¸°í™” ìž‘ì—… 등 수치화 불가능한 ìž‘ì—… 수행 중 사용 â€¢ê³„ì† ì›€ì§ì´ë„ë¡ ë§Œë“ ë‹¤: 사용ìžë“¤ ì€ ì¸ë””ì¼€ì´í„°ê°€ 정지ë˜ë©´ ìž‘ì—…ë„ ì •ì§€ë˜ì—ˆë‹¤ê³  ìƒê°í•œë‹¤. •기다리는 ë™ì•ˆ 유용한 정보를 제공 하면 좋다: ‘로딩 중’, ‘ì¸ì¦ 중’ ê³¼ ê°™ì€ ëª¨í˜¸í•œ 용어는 쓰지 않는다. 왼쪽ì—ì„œ 오른쪽으로 íŠ¸ëž™ì„ ì±„ì›Œê°€ë©´ì„œ ìž‘ì—…ì˜ ì§„í–‰ë¥ ì„ ë³´ì—¬ì¤Œ •취소 ë²„íŠ¼ì´ í•¨ê»˜ 제공ë˜ê¸°ë„ 한다. •부정확한 진행 정보는 표시하지 않는다. â€¢ê¸°ê°„ì´ ëª…í™•í•œ ìž‘ì—…ì— ì‚¬ìš©í•œë‹¤. 네트워킹 ë°œìƒ ì‹œ 회전하며, ë„¤íŠ¸ì›Œí‚¹ì´ ì—°ê²°ë˜ë©´ 멈춤 •아ì´í°X 예외 •몇 초가 ì§€ë‚˜ë„ ì—°ê²°ì´ ì•ˆ ë  ë•Œ 만 사용한다. Activity Indicators Progress Bars Network Activity Indicators
  • 39. Progress Indicators Q. Progress Bar ì¸ê°€? A. Progress bar ë¼ê³  í•  수 있다.
  • 40. Refresh Content Controls •주로 í…Œì´ë¸”ë·°ì—ì„œ 수ë™ìœ¼ë¡œ 새로고침 ì‹œ 사용ëœë‹¤. •기본ì ìœ¼ë¡œ 숨겨져 있으며, í™”ë©´ì„ ì•„ëž˜ë¡œ 드래그하면 나타난다. •ìžë™ ì—…ë°ì´íŠ¸ë„ 정기ì ìœ¼ë¡œ 수행하ë„ë¡ êµ¬í˜„í•œë‹¤: •사용ìžë“¤ì€ ìžë™ ì—…ë°ì´íŠ¸ê°€ 실행ë˜ê¸°ë¥¼ 기대한다. â€¢ê°’ì´ ì¶”ê°€ë˜ëŠ” 경우ì—만 ì§§ì€ ì œëª©ì„ ì œê³µí•œë‹¤: â€¢ì œëª©ì„ í¬í•¨ì‹œí‚¬ 수 있는ë°, ëŒ€ë¶€ë¶„ì˜ ê²½ìš° 불필요하다. â€¢ì œëª©ì„ í¬í•¨í•  경우엔 콘í…ì¸ ì— ëŒ€í•œ 가치있는 정보를 제공한다. 예를 들어, 마지막 ì—…ë°ì´íŠ¸ ë°œìƒ ì‹œì ì„ 보여줄 수 있다.
  • 41. Refresh Content Controls 예시. 커스텀 새로고침 컨트롤
  • 42. Page Controls 여러 페ì´ì§€ 중 현재 페ì´ì§€ë¥¼ 나타냄 •ì¼ë ¨ì˜ ìž‘ì€ ì ìœ¼ë¡œ 표시ë˜ëŠ”ë°, ìƒ‰ì¹ ëœ ì ì€ 현재 페ì´ì§€ë¥¼ 나타낸다. •ì ë“¤ì€ í•­ìƒ ê°™ì€ ê±°ë¦¬ë¥¼ 유지하며, 너무 많으면 잘린다. •페ì´ì§€ ì»¨íŠ¸ë¡¤ì˜ ì•žë¶€ë¶„/ë’·ë¶€ë¶„ì„ íƒ­í•˜ë©´ 바로 ì•ž 페ì´ì§€ë‚˜ ë’· 페ì´ì§€ ë¡œ ì´ë™í•˜ì§€ë§Œ, 특정 페ì´ì§€ë¡œ ì´ë™í•  수는 없다. â€¢ê³„ì¸µêµ¬ì¡°ì˜ íŽ˜ì´ì§€ì—는 사용하지 않는다: 페ì´ì§€ ì»¨íŠ¸ë¡¤ì€ íŽ˜ì´ì§€ë“¤ì´ ê´€ë ¨ëœ ë°©ì‹ì„ 보여주지 ì•Šê³ , ê° ì ì— 해당ë˜ëŠ” 페ì´ì§€ë¥¼ 나타내지 ì•Š 는다. 페ì´ì§€ ì»¨íŠ¸ë¡¤ì€ ë™ë“±í•œ ê´€ê³„ì— ìžˆëŠ” 페ì´ì§€ë¥¼ 위해 설계ë˜ì—ˆë‹¤. â€¢í•­ìƒ ì½˜í…츠와 스í¬ë¦° 사ì´ì— 위치해야 한다.
  • 43. Segmented Controls ê° ì„¸ê·¸ë¨¼íŠ¸ëŠ” ìƒí˜¸ë°°íƒ€ì ì´ë©°, 다른 뷰를 표시하는 ë° ì‚¬ìš©ë˜ê¸°ë„ 함 •모든 ì„¸ê·¸ë¨¼íŠ¸ì˜ í­ì€ ë™ì¼í•˜ë©°, í…스트나 ì´ë¯¸ì§€ë¥¼ 삽입할 수 있다. •단, í…스트와 ì´ë¯¸ì§€ë¥¼ 혼합하지 않는다. •세그먼트 수를 제한한다: ì•„ì´í°ì—서는 5ê°œ ì´í•˜ì—¬ì•¼ 한다. •콘í…츠 í¬ê¸°ë„ ì¼ê´€ì„± 있어야 한다: •모든 세그먼트가 ë™ì¼í•œ í­ì„ 가지기 ë•Œë¬¸ì— ì½˜í…츠가 ì¼ë¶€ 세그먼트만 채우고 다른 세그먼 트는 채우지 않으면 좋아 ë³´ì´ì§€ 않는다.
  • 44. Switches Default Custom ìƒí˜¸ë°°íƒ€ì ì¸ 2ê°œì˜ ìƒíƒœê°’ì„ ì§€ë‹Œ 토글 •스위치 ëª¨ì–‘ì„ ì•±ì˜ ìŠ¤íƒ€ì¼ì— 맞춰 변경하면 좋다. •스위치는 í…Œì´ë¸”ì—ì„œ 사용ë˜ë„ë¡ ì„¤ê³„ë˜ì—ˆë‹¤. í…Œì´ë¸” í–‰ì—만 사용한다: •툴바나 내비게ì´ì…˜ ë°”ì—는 스위치 대신 ë²„íŠ¼ì„ ì‚¬ìš©í•œë‹¤. •스위치 ê°’ì„ ì„¤ëª…í•˜ëŠ” ë¼ë²¨ì€ 넣지 않는다. •연관 ì¸í„°íŽ˜ì´ìŠ¤ì˜ ìš”ì†Œë“¤ì— ë¯¸ì¹  ì˜í–¥ì„ 고려한다: •스위치는 종종 í™”ë©´ì˜ ë‹¤ë¥¸ 콘í…ì¸ ì— ì˜í–¥ì„ 미친다. •(예) Wi-Fi 스위치 비활성화 ì‹œ, 사용가능한 ë„¤íŠ¸ì›Œí¬ ë° ê¸°íƒ€ ì˜µì…˜ì´ ì‚¬ë¼ì§.
  • 45. ºÝºÝߣrs 가로트랙 위ì—ì„œ 최소값과 최대값 사ì´ë¥¼ ì´ë™ì‹œì¼œ 특정 ê°’ 변경 •양쪽으로 최소값, ìµœëŒ€ê°’ì„ ì˜ë¯¸í•˜ëŠ” ì•„ì´ì½˜ì„ 표시할 수 있다. •오디오 볼륨ì—는 슬ë¼ì´ë”를 사용하지 않는다: •앱ì—ì„œ 볼륨 ì»¨íŠ¸ë¡¤ì„ ì œê³µí•´ì•¼ 하는 경우, Volume View 사용
  • 46. Steppers 2ê°œì˜ ì„¸ê·¸ë¨¼íŠ¸ë¡œ ì´ë¤„진 컨트롤. ê°’ì„ ì¦ê°€/ê°ì†Œì‹œí‚¤ëŠ” ë° ì‚¬ìš© •스테í¼ê°€ ì˜í–¥ 주는 ê°’ì„ ëª…í™•ížˆ 표시한다: â€¢ìŠ¤í…Œí¼ ìžì²´ëŠ” ê°’ì„ í‘œì‹œí•˜ì§€ 않기 ë•Œë¬¸ì— ë³€ê²½í•˜ëŠ” ê°’ì´ ë­”ì§€ ì•Œ 려줘야 한다. â€¢í° ê°’ì„ ë³€ê²½í•  때는 스테í¼ë¥¼ 사용하지 않는다: •스테í¼ëŠ” 보통 몇 ë²ˆì˜ íƒ­ìœ¼ë¡œ 변경할 수 있는 ì •ë„ì—만 사용한다.
  • 47. Pickers •보통 화면 ì•„ëž˜ìª½ì— í‘œì‹œë˜ê±°ë‚˜ íŒì˜¤ë²„ 형태로 표시ëœë‹¤. •테ì´ë¸” 특정 í–‰ì˜ ì¸ë¼ì¸ìœ¼ë¡œ 표시ë˜ê¸°ë„ 한다. â€¢í”¼ì»¤ì˜ ë†’ì´ëŠ” 5ê°œ í–‰ ì •ë„ì´ë‹¤. •논리ì ìœ¼ë¡œ ì •ë ¬ëœ ê°’ì„ ì‚¬ìš©í•œë‹¤: â€¢ë§Žì€ ê°’ì´ ìˆ¨ê²¨ì ¸ 있기 ë•Œë¬¸ì— ì‚¬ìš©ìžê°€ ì–´ë–¤ ê°’ì´ ë‚˜ì˜¬ 지 예측 가능하 ë„ë¡ ë§Œë“œëŠ” ê²ƒì´ ì¤‘ìš”í•˜ë‹¤. (예) 알파벳 순, 날짜 순 등 •피커를 보여주기 위해 í™”ë©´ì „í™˜ì„ í•˜ì§€ 않는다: •현재 페ì´ì§€ ë‚´ì—ì„œ 편집하는 í•„ë“œ 아래나 ê·¼ì²˜ì— ìœ„ì¹˜ì‹œí‚¨ë‹¤. •아주 긴 리스트를 보여줘야 í•  때는 피커 대신 í…Œì´ë¸”ì„ ì‚¬ìš©í•œë‹¤: •너무 긴 피커는 íƒìƒ‰í•  ë•Œ 지루해질 수 있다. 반면, í…Œì´ë¸”ì€ ë†’ì´ë¥¼ ì¡°ì • í•  수 있고 색ì¸ì´ 있기 ë•Œë¬¸ì— ë¹ ë¥´ê²Œ íƒìƒ‰í•  수 있다.
  • 48. Pickers Date Picker 특정 날짜나 ì‹œê°„ì„ ì„ íƒí•˜ëŠ” 피커 •4가지 모드가 있다: •Date: ë…„/ì›”/ì¼ â€¢Time: ì‹œ/분/AM/PM •Date and Time: ìœ„ì˜ ë‘˜ ëª¨ë‘ í‘œì‹œ 가능 •Countdown timer: ì‹œ/분 •분 ê°„ê²©ì„ ë„“íž ìˆ˜ 있다: 기본ì ìœ¼ë¡œ 1분 단위로 제공ë˜ì§€ë§Œ, ì„ íƒ ì ìœ¼ë¡œ ê°„ê²©ì„ ì„¤ì •í•  수 있다. â€¢í”¼ì»¤ì— í‘œì‹œë˜ëŠ” 정확한 ê°’ì€ ì‚¬ìš©ìžì˜ ìœ„ì¹˜ì— ë”°ë¼ ë‹¤ë¥´ë‹¤.