iOS 휴먼 인터페이스 가이드라인 요약

Apple의 iOS 휴먼 인터페이스 가이드라인(Human Interface Guideline, 이하 iOS HIG)은 iOS 개발자라면 누구나 일독을 권장하는 문서입니다. 이 문서의 근간이 되는 책은 1987년에 출간된 "Apple Human Interface Guidelines: The Apple Desktop Interface"입니다. 이후 새 플랫폼에 맞추어 꾸준히 개정되어 왔고 지금은 UX/디자인 산업 전반적으로 지대한 영향을 미쳤다고 평가받고 있습니다.

이번 포스팅에서는 분량이 방대한 iOS HIG를 요약하는 형태로 정리하였습니다. 간결함을 유지하기 위해 많은 부분들이 생략되어 있으니 세부사항은 원 문서의 해당 섹션을 참고하시기 바랍니다.

문서의 특성상 "~해야 합니다" 혹은 "~하는 것이 좋습니다"와 같은 표현들이 많이 사용됩니다. 이는 강제사항이라기 보다는 참여율(engagement) 또는 재방문율(retention)을 높이기 위해 권장되는 방법이라고 보시면 좋을 것 같습니다.


1. 개요

(1) iOS 디자인 언어

최초의 iOS(iPhone OS)는 스마트폰이 익숙하지 않은 유저들을 위해 장식적(skeuomorphic)이였습니다. iOS 7에 와서 조나단 아이브 주도로 대대적으로 개편한 UI가 지금까지 사용되고 있습니다. 이 때 애플이 정의한 iOS의 디자인 언어(테마)는 다음과 같습니다.

명확함 (Clarity)

가독성 높은 텍스트 / 이해하기 쉬운 아이콘 / 장식 최소화 / 기능 주도의 디자인 / 중요한 요소 강조

아래 예는 날씨 앱의 iOS 6 (좌), iOS 7 (우)의 UI를 비교한 것입니다. iOS 7으로 오면서 베젤(테두리) 영역을 제거하였습니다.

clarity

컨텐츠 존중 (Deference)

전체 화면을 활용한 컨텐츠 표시 / 컨텐츠 이외의 요소가 더 부각되지 않도록 함 / 부드러운 모션과 미려한 인터페이스 사용 / 베젤, 그라데이션, 그림자 등의 사용 최소화

Mail 앱의 경우 컨텐츠 이외의 네비게이션바나 툴바를 최대한 부각되지 않도록 하여 메일 본문이 부각되도록 하였습니다.

deference

깊이 (Depth)

레이어와 모션을 통해 계층구조(hierarchy) 표현 / 컨텐츠 사이를 이동할 때 깊이감을 더해주는 화면전환 사용

홈 아이콘이 배경이미지 위에 떠 있는 듯한 착각을 주는 모션 효과의 예입니다. 그 외에도 컨트롤 센터, 알림 센터 등의 화면은 블러효과를 통해 화면 위에 떠 있는 듯한 느낌을 주고 사용자가 문맥을 파악하는데 도움을 줍니다.

depth

(2) 디자인 원칙

앱 개발과정 전반적으로 적용할 수 있는 디자인 원칙들에 대해 소개하고 있습니다.

  • 미적인 통일성: 앱 기능에 어울리는 디자인을 하자. 생산성 향상을 위한 앱에는 장식을 최소화하고 표준 컨트롤을 사용하고, 게임에는 커스텀 UI, 커스텀 피드백 사운드 등을 통한 화려한 경험을 제공하자.
  • 일관성: iOS 전반적으로 통용되는 아이콘, 텍스트 스타일, 용어 등을 동일한 의미로 사용하자.
  • 직접조작: 버튼을 눌러 조작하는 '간접조작'을 지양하고 제스쳐를 통해 실제 사물을 만지는 것 같은 '직접조작'을 사용하자.
  • 피드백: 사용자가 발생한 동작에 대해서 그래픽, 사운드를 통해 적절히 반응하자.
  • 비유(metaphors): 사람들에게 친숙한 비유를 통해 이해를 돕자. (예: 스위치 컨트롤은 현실에 존재하는 스위치와 비슷하게 온/오프 상태를 가진다)
  • 사용자 주도: 되돌릴 수 없거나 중요한 결정은 사용자가 직접 하도록 하자.

(3) 아이폰 X

새로 발표된 아이폰 X에 대응하기 위해 추가된 섹션입니다. 주요 사항은 다음과 같습니다.

  • 아이폰 6/7 대비 세로 크기 145pt 증가 (812pt 375pt)
  • 화면배율은 @3x 사용
  • 사용할 수 없는 영역(상단바, 둥근 화면 모서리)을 피하기 위한 안전영역(safe area) 추가
  • 큰 네비게이션 타이틀을 사용할 수 있게 됨
  • 홈 화면 진입, 앱 전환 제스처와 충돌하지 않도록 제스처 사용

(4) iOS 11을 위한 정보

마찬가지로 새로 발표된 iOS 11에서 추가 고려해야 할 사항을 따로 모아두었습니다.

  • AR
  • 네비게이션 변경점
  • 전반적으로 굵어진 아이콘
  • 드래그 앤 드랍
  • 페이스 ID 및 터치 ID
  • NFC
  • 안전영역(safe area) 레이아웃 가이드
  • 타이포그라피 변경사항

2. 앱 설계

앱을 기획할 때 전반적으로 고려해야 하는 사항입니다.

(1) 손쉬운 사용(accessibility)

iOS는 전통적으로 접근성 기능을 잘 지원해왔습니다. 화면에 표시되는 내용을 읽어주는 VoiceOver 기능을 지원하려면 이미지나 아이콘 등에 '설명'을 추가해야 합니다. 텍스트 가독성을 높여주는 '볼드체 텍스트'라던지 '더 큰 텍스트'를 활성화 했을 경우에도 UI가 깨지지 않도록 해야 합니다. 이를 위해서 해당 기능들을 활성화 하고 직접 테스트 해볼 것을 권장합니다.

(2) 로딩

무언가를 로딩할 일이 있을때 적용되는 전반적인 가이드입니다. 로딩이 일어나고 있을 경우 사용자에게 표시해야 합니다. 로딩중인 컨텐츠의 일부분이라도 접근 할 수 있다면 먼저 보여주도록 합니다.

(3) 모달(modal)

사용자의 주의를 끌 필요가 있을 경우 모달 창을 이용합니다. 모달 창을 이용해서 다른 항목에 대한 접근을 일시적으로 막을 수 있습니다. 불가피한 경우에만 사용하기를 권장합니다.

(4) 네비게이션

앱에서 보여주고자 하는 컨텐츠를 논리적으로 구성하는 방법에 대해서 다룹니다. 다음은 많이 사용되는 유형입니다.

수직(hierarchical) 구조

NavigationHierarchical-Graphic

수평(flat) 구조

NavigationFlat-Graphic

경험주도(experience-driven) 구조

NavigationExperienceDriven-Graphic

(5) 온보딩(onboarding)

앱을 처음 실행할 때 고려해야 할 사항입니다. 불필요한 항목을 최소화하여 빠른 앱 실행이 가능하도록 합니다. 회원가입이나 튜토리얼을 최소화 하여 사용자가 원하는 컨텐츠에 최대한 빨리 접근할 수 있도록 합니다.

onboarding

(6) 권한 요청

사용자의 현재 위치, 주소록, 사진 라이브러리 등은 모두 '권한 요청'을 승인해야 접근할 수 있습니다. 꼭 필요한 항목들에 대해서만, 왜 필요한지 충분한 설명을 동반하여, 앱 실행시점이 아닌 필요한 시점에 이루어져야 합니다.

permission

(7) 설정

앱에서 사용되는 각종 설정들은 시스템 설정에서 유추할 수 있는 사항들을 최대한 활용하거나 적절한 기본값을 제공하여 사용자가 미리 일일히 지정하지 않아도 되도록 합니다. 자주 변경이 필요한 항목은 메인 화면에 노출시키도록 하고 중요도가 떨어짐에 따라 앱 안에 있는 설정화면 혹은 시스템 설정화면에 노출시키도록 합니다.


3. 사용자 상호작용(interaction)

다양한 방법으로 이루어지는 사용자와 상호작용시 고려해야 할 사항입니다.

(1) 3D 터치

지원하는 기기(아이폰 5s 이상)에서 사용자가 입력하는 터치의 세기를 인식할 수 있습니다. 홈 화면에서 앱 아이콘을 3D 터치로 누르면 바로가기 메뉴를 선택할 수 있습니다. 앱 안에서는 Peek & Pop이라고 해서 중간 세기 정도로 누르면 미리보기를 하다가 더 세게 누르면 화면 전환을 할 수 있습니다. 앱 안에서 동작하는 Peek & Pop이 일관성 있게 동작하게 하는 등의 고려가 필요합니다.

3d-touch

(2) 오디오

iOS에서 볼륨 조절은 다양한 방법(본체 또는 이어폰에 있는 물리적인 버튼이나 화면상의 UI를 통해서)으로 가능하고, 오디오 출력 또한 다양하게(수화기, 폰 스피커, 블루투스 이어폰 혹은 AirPlay를 지원하는 무선 스피커 등) 지원 한다는 사실을 기억해야 합니다. 앱에서 출력되는 사운드가 기존 재생되고 있던 음악이나 걸려오는 전화 등과 충돌할 때 사용자에게 가장 바람직한 시나리오로 처리해주어야 합니다. (Audio Session Category 지정) 사용자가 지정한 무음모드로 전환한 경우 중요도가 낮은 사운드는 재생하지 않도록 합니다.

(3) 로그인(authentication)

회원가입 및 로그인 기능은 사용했을 때 추가적인 이점이 있을 경우에만 제공합니다. 또한 앱을 실행하자 마자 회원가입을 요구하는 것 보다는 로그인이 필요한 기능에 접근하는 시점에 요청하는 것이 바람직합니다. 페이스 ID나 터치 ID를 사용하여 반복적으로 요구되는 인증과정을 단순화 할 수 있습니다.

auth

(4) 데이터 입력

사용자가 화면상의 키보드를 통해 입력해야 하는 분량을 최소화 합니다. 적절한 데이터를 미리 채워넣거나 가능하면 보기 중에서 선택하게 하는 것이 바람직합니다.

(5) 드래그 앤 드랍

드래그 앤 드랍은 iOS 11에서 새로 추가되었습니다. 선택이나 편집이 가능한 항목에 대해서는 최대한 모두 지원하도록 합니다. UITextView, UITableView 등의 표준 UI 요소를 사용하면 지원하기가 수월해집니다. 드래고 되고 있는 항목에 대해서는 적절한 미리보기를 제공하는 것이 좋습니다.

(6) 피드백

사용자의 동작에 대해 적절한 피드백을 주어 현재 진행중인 동작, 앞으로 진행할 수 있는 동작, 그리고 동작들의 결과를 예상하는데 도음을 줍니다. 그래픽이나 사운드 또는 햅틱 진동의 출력을 통해 피드백을 줄 수 있습니다. 무분별하게 사용하지 말고 필요한 상황에 한해서, 간결하고도 재미를 주는 방향으로 피드백을 줄 것을 권장합니다.

(7) 파일 관리

사용자가 '파일 시스템'의 존재를 알지 못하고도 앱을 이용할 수 있게 하는 것이 좋습니다. 파일 관리가 필요한 일일히 파일을 수동으로 저장하지 않아도 쉽게 이용할 수 있도록 디자인합니다.

(8) 제스쳐

가능하면 표준 제스쳐를 사용하고 새로운 제스쳐는 꼭 필요한 경우에만 정의하도록 합니다. 시스템에서 사용되는 화면 가장자리 제스쳐와 충돌하지 않도록 합니다. 또한 제스쳐는 빠른 수행을 위한 단축 경로로 제공해야지 그 동작을 위한 유일한 수단으로 만드는 것은 적절하지 않습니다.

표준 제스쳐의 종류는 다음과 같습니다.

  • 탭(tap)
  • 드래그(drag)
  • 플릭(flick)
  • 스와이프(swipe)
  • 더블탭(double tap)
  • 핀치(pinch)
  • 터치하고 누르고 있기(touch and hold)
  • 흔들기(shake)

(9) NFC

지원하는 기기에 한해 NFC 읽기가 가능합니다. 사용자가 스캔하는 대상을 물리적으로 터치하지 않도록 가이드 해야 하며 'NFC'와 같은 기술용어 대신 이해하기 쉬운 표현을 사용합니다.

(10) 실행취소/실행복귀

실행 취소, 복귀할 동작이 무엇인지 명확하게 표현해야 합니다. 현재 편집중인 문맥에서만 동작하도록 합니다.


4. 시스템 기능

시스템에서 제공하는 기능들을 잘 활용하기 위한 가이드라인입니다.

(1) 멀티태스킹

아이폰에서는 현재 사용중인 1 개의 앱만이 최대의 시스템 자원을 활용할 수 있습니다. 아이패드에서는 '슬라이드 오버(slide over)'나 '스플릿뷰(split view)', 'PIP(picture in picture) 모드'를 통해 최대 4 개 까지 동시에 실행할 수 있습니다. 앱이 언제든지 백그라운드 모드에 진입할 수 있다는 가정을 하고 동작하게 해야 합니다. 보관이 필요한 정보는 가능하면 빠른 시점에 저장하도록 합니다.

(2) 알림

폰 자체적으로 특정 시간이 되거나 서버에서 푸쉬(push)로 알려주는 경우 알림(notification)을 표시할 수 있습니다. 유용한 정보에 한해서만 알림을 받을 수 있도록 해야하고 제목에 앱 이름을 포함하지 않아야 합니다. (앱 이름을 표시하는 영역이 있기 때문에 중복되어 보이게 됩니다.) '읽지 않은 메일 수'와 같은 정보의 경우 앱 아이콘 옆에 빨간색 숫자로 표시되는 '뱃지(badge)'를 보여줄 수 있습니다.

notification

(3) 프린트

iOS에서 제공하는 AirPrint를 통해 손쉽게 프린트가 가능합니다. 앱 안에서 프린트하기 적합한 컨텐츠가 있다면 AirPrint를 지원하도록 합니다.

(4) 퀵룩(quick look)

Keynote, Numbers, Pages, PDF 등의 문서를 앱 안에서 미리 볼 수 있습니다. 앱에서 고유의 파일을 생성한다면 '퀵룩'을 통해 미리 볼 수 있도록 구현합니다.

(5) 앱 평가 및 리뷰

iOS 10.3부터 앱 평가를 앱안에서 할 수 있는 API가 추가되었습니다. 아래와 같이 앱 안에서 평가를 요청할 수 있으며 SKStoreReviewController에서 자세한 내용을 확인 할 수 있습니다. 이 API를 사용할 경우 앱 평가 요청 횟수가 자동적으로 1년에 3회로 제한되게 됩니다. 이 API가 나오기 전에는 앱 스토어 해당 페이지로 이동시키는 방법을 주로 사용하였습니다. 이 방법을 사용한다면 너무 자주 요청하여 사용자를 성가시게 하지 않아야 합니다.

rating

(6) 화면 캡쳐

사용자는 현재 화면을 캡쳐할 수 있습니다. 캡쳐를 방지하는 등의 목적으로 캡쳐하는 순간 다른 화면을 보여준다면 사용자에게 혼란을 주게 됩니다. 필요할 경우 상대방에게 캡쳐가 이루어졌음을 알려주는 등의 방안을 고려할 수 있습니다. (예: 단체 대화방에서 대화 내용을 캡쳐한 경우)

(7) Siri

앱이 Siri를 통해 동작하도록 할 수 있습니다. 아직은 제한된 영역에서만 가능하며 iOS 버전업마다 조금씩 추가되고 있습니다. iOS 11 기준으로 다음과 같은 영역에서 사용 가능합니다.

  • 오디오/비디오 통화(audio and video calling): 전화 걸기, 히스토리 보기
  • CarPlay 연동(CarPlay integration): 운전자 설정 접근, 자동차의 오디오 출력, 온도조절 등
  • 운동(fitness activities): 운동 시작, 일시정지, 중단
  • 리스트/노트(list and notes): 할일목록 읽기/쓰기
  • 메시지(messaging): 메시지 보내기, 메시지 읽기
  • 결제(payments): 송금, 결제요청, 대금결제
  • 사진 관리(photo management): 앱 안의 사진 검색
  • 탑승 예약(ride booking): 탑승 예약 및 정보 보기
  • 홈킷 연동(vehicle integraion): 홈킷 기기 제어
  • QR/바코드(visual codes): QR코드 및 바코드 보여주기

화면을 보지 않고서도 Siri를 이용할 수 있도록 구현하는 것을 권장합니다. 앱에서 자주 사용되는 단어를 사전의 형태로 제공하여 인식률을 높일 수도 있습니다.

(8) TV 제공자

미국 등 서비스가 제공되는 국가의 경우 케이블 구독 계정을 연동하면 TV앱을 통해 각종 영화, 드라마 시청이 가능합니다. TV 앱에서 해당 앱으로 이동한 경우 사용자가 길을 잃지 않도록 적절한 정보를 표시해야 합니다.

tv-app


5. Visual Design

(1) 적응성 및 레이아웃

다양한 기기의 화면에서 최적화된 레이아웃을 보여줄 수 있도록 합니다. 다음은 iOS가 지원하는 기기의 화면크기 목록입니다.

devices

기존 포스팅 중 iOS 8의 적응형(Adaptive) UI에서 등장 배경 등을 설명하였습니다.

(2) 오토 레이아웃

이렇게 다양한 화면을 지원하기 위해서 오토 레이아웃(auto layout)을 사용합니다. 구성요소들 간의 관계를 '규칙'으로 정의해서 화면 크기가 변경되더라도 적용되게 하는 방법입니다. 자세한 내용은 Auto Layout Guide 또는 UITraitCollection를 참고합니다.

(3) 안전영역

안전영역(safe area)은 원래 tvOS에서 처음 도입된 개념으로 컨텐츠가 가리지 않는 것이 보장되는 영역입니다. 아이폰 X이 등장하면서 폰에서도 사용하게 되었습니다. 주요 컨텐츠와 버튼이 이 영역을 벗어나지 않도록 해야 합니다.

safearea

(4) 사이즈 클래스

오토 레이아웃에서 사용되는 '규칙(constraints)'이 화면 크기에 따라 다르게 적용되어야 하는 경우가 생깁니다. 이 때 활용할 수 있는 값이 '사이트 클래스(size classes)'입니다. 크기에 따라 '레귤러(regular)'와 '컴팩트(compact)'로 구분됩니다. 아래 표는 화면의 크기와 가로/세로 여부, 또한 아이패드의 경우 스플릿뷰 사용의 경우에 따른 사이즈 클래스입니다. 예를 들어 아이폰 X는 세로모드(portrait)에서 컴팩트 너비와 레귤러 높이를, 가로모드(landscape)에서 컴팩트 너비와 컴팩트 높이를 가집니다.

size-classes-1

size-classes-2

(5) 애니메이션

적절하게 사용된 애니메이션은 현재 상황을 잘 설명하며 피드백을 제공하고, 직접 조작하는 느낌을 주며 결과를 쉽게 예측할 수 있게 합니다. 의미 없이 화려한 애니메이션보다는 절제되면서도 기능과 잘 녹아나는 애니메이션을 사용하도록 합니다. 한 번 사용된 애니메이션은 같은 맥락에서 일관성 있게 사용되어야 합니다.

(6) 브랜딩

'브랜딩이 잘 된 앱'은 단순히 로고 이미지를 보여주는 것을 의미하지 않습니다. 글꼴, 색상, 이미지 등을 특성 있고 일관적으로 사용하여 브랜딩 경험을 이끌 수 있습니다. 이런 요소들은 컨텐츠 보다 부각되지 않도록 합니다.

(7) 색

UI의 강조를 나타내는 'tint color'를 선택할 때에는 밝거나 어두운 배경색에서 모두 잘 보이는 색상을 선택합니다. 아래는 iOS에서 사용하는 강조색의 예입니다.

color

색맹을 고려하여 값을 표시할 때 색상 외의 요소도 같이 사용하는 것이 좋습니다. 문화권에 따라 의미가 다른 색상이 있을 수 있으니 주의해야 합니다.

(8) 용어

앱에서 보여주는 텍스트는 사용자기 이해하기 쉽게 작성해야 합니다. 격식있고 딱딱한 문체 보다는 친근한 문체 사용이 권장됩니다. '우리(our)', '내(my)'라는 표현이나 유머의 경우 자제하거나 주의해서 사용합니다.

(9) 타이포그라피

iOS에서 사용되는 영문 글꼴은 San Francisco(SF)로서 글꼴 크기에 따라 자동으로 자간과 굵기를 조절해줍니다. 되도록 시스템 글꼴을 사용하도록 하고, 커스텀 글꼴을 사용해야 한다면 하나만 사용할 것을 권장합니다.

사용자는 시스템 설정에서 텍스트의 크기를 조절할 수 있습니다. 다이나믹 타입(dynamic type)에서 미리 정의된 스타일을 사용한다면 다양한 설정에 최적화된 텍스트 크기를 보여줄 수 있습니다. 아래는 기본(large) 텍스트 크기의 경우 스타일별 크기입니다. 이곳에서 기본값 이외에 대응하는 크기를 확인할 수 있습니다.

text-style-large


6. 아이콘과 이미지

(1) 이미지 크기와 해상도

iOS에서 좌표 시스템에서 사용되는 단위는 '포인트(point)' 입니다. 최초의 아이폰부터 아이폰 3GS까지 사용된 스크린에서는 1 포인트 = 1 픽셀이였습니다. 아이폰 4부터 동일한 길이에 2배의 픽셀(1 포인트 = 2 픽셀)을 보여주는 레티나 스크린이 도입되었습니다. 아이폰 6 플러스에는 3배의 픽셀을 보여줍니다.

retina

이렇게 다양한 화면배율(scale factor)에 적합한 이미지를 보여주도록 합니다. 아이콘의 경우 가능하면 벡터(PDF)를 사용하며 사진의 경우 용량이 최적화된 JPEG 이미지를 사용합니다.

(2) 앱 아이콘

앱 아이콘은 앱 스토어에서 가장 먼저 사용자의 눈길을 끄는 역할을 합니다. 심플하면서도 강한 인상을 줄 수 있는 하나의 형태를 사용하는 것이 좋습니다. 크기가 작기 때문에 아이콘 안에서의 텍스트 사용은 자제합니다. 다음은 기기별로 포함해야 하는 아이콘 크기입니다.

icon

그 외에도 스팟라이트나 설정, 알림에 사용되는 아이콘을 지정할 수 있습니다. 이는 선택사항으로서 아이콘의 특성상 크기가 작아졌을 때 별도의 그래픽이 필요한 경우 사용합니다.

iOS 10.3부터 앱 아이콘을 동적으로 변경할 수 있습니다. 앱에서 생성하거나 다운받아서 변경하는 것은 불가능하며 앱 번들에 미리 포함시켜야 합니다.

(3) 커스텀 아이콘

시스템 아이콘이 커버하지 못할 경우에 사용합니다. 단순화되고 인지하기 쉬운 '기호(glyph)'의 형태로 디자인합니다. 가능하면 벡터(PDF)로 만들어서 다양한 화면배율을 지원하도록 합니다.

CustomIcon_Sizes

다음은 커스텀 아이콘의 크기를 보여줍니다.

네비게이션바, 툴바 아이콘

  • 대다수의 경우 25pt × 25pt
  • 형태에 따라 일부분이 위 영역을 벗어나는 경우 약간 크게 만들 수 있음. 최대 27.67pt × 27.67pt를 초과하지 않도록 해야 함.

탭바 아이콘

tabbar-icon-size

(4) 실행 화면(launch screen)

앱을 실행할 때 로딩 중에 보여주는 화면입니다. 앱의 최초 화면과 거의 동일한 화면을 보여주는 것이 좋습니다. 매번 바뀌는 영역이나 텍스트는 제거하고 보여줍니다. 로딩이 짧을 경우 금방 지나갈 수 있기 때문에 시간을 들여 읽어야 할 컨텐츠를 보여주는 것은 적절하지 않습니다.

(5) 시스템 아이콘

시스템 아이콘은 기본 앱 곳곳에 사용되고 있어 사용자들에게 친숙합니다. 가능한 시스템 아이콘을 활용할 것을 권장합니다. 일반적으로 인식되는 의미와 다르게 사용하지 않도록 합니다. 세부목록은 해당 섹션에서 보실 수 있습니다.


7. UI 구성요소

인터페이스를 구성하는 요소는 크게 바(bars), 뷰(views), 컨트롤(controls)로 구분됩니다. 이후에는 각각의 요소별로 왜 필요한지, 어떻게 사용되어야 하는지 등의 내용으로 구성되어 있습니다.

(1) 바(bars)

  • 네비게이션바(navigation bars)
  • 서치바(search bars)
  • 탭바(tab bars)
  • 툴바(toolbars)

bars

(2) 뷰(views)

  • 액션시트(action sheets)
  • 액티비티 뷰(activie view)
  • 경고창(alerts)
  • 컬렉션(collections)
  • 이미지뷰(image views)
  • 지도(maps)
  • 페이지(pages)
  • 팝오버(popovers)
  • 스크롤뷰(scroll views)
  • 스플릿뷰(split views)
  • 테이블(tables)
  • 텍스트뷰(text views)
  • 웹뷰(web views)

views

(3) 컨트롤(controls)

  • 버튼(buttons)
  • 편집 메뉴(edit menu)
  • 레이블(labels)
  • 페이지 컨트롤(page controls)
  • 피커 (pickers)
  • 프로그레스 인디케이터(progress indicators)
  • 새로고침 컨트롤(refresh content controls)
  • 세그먼티드 컨트롤(segmented controls)
  • 슬라이더(sliders)
  • 스테퍼(steppers)
  • 스위치(switches)
  • 텍스트 필드(text fields)

controls


8. 익스텐션(extensions)

특정 시스템 UI나 동작에 접근하기 위해 익스텐션을 사용합니다.

(1) 커스텀 키보드

다른 앱에서 직접 제작한 키보드를 이용할 수 있습니다. 기본 키보드는 오타 방지나 3D 터치를 통한 제어 등의 많은 기능을 제공하므로 커스텀 키보드는 꼭 필요할 때 만들도록 합니다. 언어 전환 버튼을 익숙한 곳에 배치하여 이전에 사용하던 키보드로 손쉽게 돌아갈 수 있도록 합니다.

앱 안에서만 사용하는 '커스텀 입력 뷰'도 있습니다. Numbers 앱에서 숫자와 수식을 입력하기 위한 창이 그 예입니다. 키보드 클릭시 기존 키보드를 사용하는 것과 동일한 클릭음을 재생하도록 합니다.

(2) 도튜먼트 프로바이더

데스크탑에서 파일을 열거나 저장할 때 볼 수 있었던 것과 비슷한 파일 목록을 사용할 수 있습니다. 목록은 가능하면 현재 사용자가 원하는 동작의 문맥과 맞는 항목만 선별하여 보여주도록 합니다.

(3) 홈 화면 액션

홈 화면에서 앱 아이콘을 3D 터치하여 단축동작을 수행할 수 있습니다. 이곳에는 사용자가 가장 많이 사용하는 소수의 항목만을 보여주도록 합니다. 한 번 보여준 항목들은 일관적으로 계속 보여주는 것이 좋습니다. 항목별로 적절한 아이콘과 텍스트를 사용하여 이해를 돕습니다.

home-screen-action

(4) 메시지

iMgessage 앱이나 스티커(sticker packs) 앱을 만들 수 있습니다. iMessage 앱은 한 번에 하나의 컨텐츠만 집중해서 보여주도록 합니다. 스티커 앱은 보여지는 목록 크기와 포맷에 주의해서 만들도록 합니다.

목록 크기

sticker-size

스티커 이미지 포맷

sticker-format

(5) 사진 편집

앱 익스텐션을 통해 사진(photo) 앱에 저장된 사진들을 편집할 수 있습니다. 사용자가 편집 중에 '취소'할 경우 확인창을 추가하여 변경사항이 유실되지 않도록 합니다. 수정한 사항들은 저장하기 전에 미리보기 할 수 있게 해야 합니다.

(6) 공유/실행

소셜 미디어 앱에서 활용도가 높은 익스텐션입니다. 공유할 대상을 액티비티 뷰에 정의할 수 있습니다. 버튼을 눌렀을 때 한 가지 작업을 집중해서 할 수 있도록 합니다.

share

(7) 위젯

시기적으로 적절하고 유용한 정보들을 보여줄 때 사용되는 익스텐션입니다. 예를 들어 뉴스 위젯은 주요 헤드라인 목록을 보여줍니다. 이 정보는 앱 아이콘을 3D 터치하였을 보여줄 수 있고 이곳에서 '위젯 추가하기'를 할 수 있습니다. 추가된 위젯은 홈 화면(home screen)이나 잠금 화면(lock screen)에서 우측 스와이프를 했을 때 보여지는 '검색화면(search screen)'에 보여집니다.

widget


9. 기술

(1) Apple Pay

Apple Pay를 사용할 때에는 SDK에서 제공하는 버튼을 사용해야 합니다. 또한 배경화면에 따라 적절한 스타일을 사용해야 합니다.

ApplePay_PayorBuyWithApplePay

'Apple Pay'는 트레이드 마크이므로 번역하거나 대소문자를 변경하지 않도록 합니다. 결제에 필요한 정보는 필수 항목에 한해서만 요청하고 Apple Pay에서 제공하는 주소, 연락처 등이 있는 경우 이를 우선적으로 활용합니다. 입력한 데이터가 올바르지 않은 경우 적절하게 안내해야 합니다. 결제에 치명적이지 않은 에러의 경우 결제를 멈추기 보다는 비지니스 로직에서 적절하게 처리하도록 합니다. (예: 예전 형태의 우편번호 입력 등)

(2) AR(augmented reality)

iOS 11에서 추가되어 많은 주목을 받고 있는 기술입니다. AR을 사용할 경우 전체 화면을 사용하도록 합니다. 사용자의 물리적인 제약과 안전을 고려해야 하며 오래 사용할 경우 피로도에 주의해야 합니다. AR 공간에 있는 물체를 조작할 때에는 제스쳐를 통한 직접조작을 하도록 합니다.

(3) 게임킷(GameKit)

점수판이나 리더보드(leader board) 기능을 게임킷을 통해 구현할 수 있습니다. 별도의 로그인 과정을 구현하지 말고 게임킷에서 제공하는 로그인 기능을 이용하도록 합니다. 최대한 게임킷에서 제공하는 표준 UI를 사용하도록 합니다.

(4) 헬스킷

사용자의 건강 관련 데이터를 중앙에서 관리해줍니다. 이 데이터는 항목별로 앱에서 요청하여 읽기, 쓰기가 가능합니다. 권한을 요청할 때에는 꼭 필요한 항목에 한하여 납득할만한 이유를 가지고 하도록 합니다. 사용자의 건강 데이터는 일반 데이터보다 더욱 프라이버시에 주의해서 다루도록 합니다.

(5) 홈킷

Siri나 홈 앱을 통해서 집 안의 각종 기기를 제어할 수 있습니다.

기기들을 그룹화 하기 위해서 '집(home)', '방(room)', '구역(zones)' 등의 용어를 사용합니다. 기기들은 '액세서리(accessories)'라고 합니다. 램프의 전구와 액세서리에서 조작 가능한 부분을 '서비스(service)'라고 하며, 서비스의 제어 가능한 값을 '캐릭터(characteristic)'라고 합니다. '액션(action)'은 이러한 캐릭터를 변경하도록 하는 동작을 의미합니다. 여러 개의 액션을 묶어서 '씬(scene)'을 만들 수 있습니다. 또한 특정 조건에 따라 액세서리가 동작하기를 원한다면 '오토메이션(automation)'을 정의하도록 합니다.

홈킷을 구현할 때에는 가능하면 셋업 과정을 최소화 하고 엑세서리는 인지하기 쉽게 합니다. 셋업 과정에 Siri를 통한 접근방법을 알려주는 것도 좋은 방안입니다.

(6) iCloud

iCloud는 사용자 데이터를 여러 기기에서 동기화 하여 사용할 수 있게 해줍니다. 사용자가 일일히 지정하지 않아도 유의미한 정보를 자동으로 동기화하도록 해야 하며 용량이나 데이터 소모가 클 경우에는 선택할 수 있게 해줍니다. 오프라인의 경우에도 앱이 잘 동작할 수 있도록 해야 합니다. 항목을 삭제할 경우에는 모든 기기에서 삭제되는 것을 알려야 합니다. 데이터 충돌이 발생할 경우 적절하게 처리해야 합니다.

iCloud

(7) 앱내 결제

앱내 결제(in-app purchase)는 디지털 재화를 앱 안에서 판매할 수 있게 해줍니다. 일회성 아이템을 구매하거나 서비스 구독을 할 수 있습니다. 사용자가 얻게 되는 항목에 대해서 정확하게 설명해야 합니다. 또한 별도의 상점을 방문하는 것이 아닌 앱 안에서 연속적으로 구매가 이루어지도록 사용자 경험을 제공해야 합니다.

(8) 라이브 포토

라이브 포토는 사진이 촬영 시점 전후 몇 초간의 동영상을 포함합니다. 앱에서 라이브 포토에 필터를 적용할 때에는 모든 프레임에 적용되도록 해야 합니다. 라이브 포토를 공유한다면 움직이는 전체 컨텐츠를 미리보기 할 수 있도록 합니다.

(9) 리서치킷(ResearchKit)

리서치킷은 의학 연구에 많은 사람들의 참여를 이끌어 내기 위해 고안되었습니다. 처음 앱을 실행할 때 보여주는 온보딩 과정에 있어서 고려해야 할 사항은 다음과 같습니다.

  • 연구의 목적을 분명히 밝히고 사용자가 할 수 있는 액션이 어떤 것인지 알려준다.
  • 연구 대상이 아닌경우 가능하면 빨리 알 수 있도록 한다.
  • 동의하기 전에 연구에 대해 충분히 이해할 수 있도록 한다. 약관이 길 경우 간결하게 분할해서 보여준다.
  • 참여자의 이해도를 측정하기 위한 퀴즈를 이용한다.
  • 서명 등을 이용하여 사용자의 동의를 얻는다. 이 때 연락처도 얻을 수 있다.
  • 건강 데이터 등에 접근하기 위한 권한요청을 한다.
  • 연구 진행에 있어서 참여자가 꾸준히 집중할 수 있도록 가이드 한다.
  • 대쉬보드 등을 이용하여 참여도를 확인할 수 있도록 한다.

(10) 소셜 미디어

시스템 공유를 통해 공유를 할 경우 매번 아이디, 비밀번호를 입력하지 않아도 동작하도록 해야 합니다. 공유 익스텐션을 사용해서 구현할 수 있습니다.

(11) 월렛(wallet)

지갑에 넣고 다니는 각종 카드를 월렛에 저장할 수 있습니다. Apple Pay에 이용되는 신용카드 외에도 각종 패스(pass)를 저장할 수 있습니다.

패스를 구현할 때에는 모든 기기에서 잘 표시되도록 해야 하고 특정 기기(예: 아이폰)에 한정된 설명은 자제해야 합니다. 패스의 종류는 다음과 같습니다.

  • 보딩패스: 항공권 등과 같은 승차권
  • 쿠폰: 할인쿠폰 등
  • 이벤트 키텟: 콘서트, 영화, 연극, 스포츠 경기 둥의 관람 티켓
  • 상점 카드: 할인, 포인트 적립에 사용되는 멤버쉽 카드
  • 일반: 헬스장 이용권 등 일반적인 패스

WalletPasses-Screen


10. 참고 자료

이 곳에서 UI 구성요소들이 담긴 Photoshop, Sketch, Adobe XD 파일을 다운받을 수 있습니다. 공식 가이드 외에 iOS HIG 비공식 가이드 (영문)도 참고할 수 있습니다.

comments powered by Disqus