iOS 가이드라인 2

시각 요소

1. 적응성 및 레이아웃 
iOS에서는 멀티태스킹, 분할 보기, 화면 회전 등의 작업을 하는 동안 다양한 장치에서 모양과 크기가 자동으로 변경되도록 인터페이스 요소와 레이아웃을 구성할 수 있다. 다양한 화면을 지원하려면 구성 요소 간의 관계를 규칙으로 정의하여 화면 크기가 변경되더라도 적용되도록 하는 방법이 필요한데, 이 방법을 자동 레이아웃이라고 한다. 자동 레이아웃은 환경 변화가 감지되면 분할 보기와 같이 지정된 조건에 따라 레이아웃을 자동으로 재조정한다.

2. 안전 영역 Safe Area
tvOS에서 처음 도입된 개념인 안전 영역은 콘텐츠로 가려지지 않는 영역을 의미한다. iPhone X 스마트폰에서도 사용되기 시작했으며, 주요 콘텐츠와 버튼이 이 영역을 벗어나지 않도록 디자인해야 한다. 
시스템에서 제공하는 표준 UI를 사용하는 대부분 응용프로그램은 기기의 새로운 폼 팩터 Form Factor에 자동으로 적용되고, 배경도 가장자리까지 확장된다. 
클리핑 방지를 위해 필요한 내용을 삽입할 필요도 있다. 일반적으로 콘텐츠는 모든 방향에서 잘 보이도록 중앙에 대칭적으로 배치되고 모서리나 장치의 센서 하우징에 가려지지 않아야 한다. 최상의 결과를 위해서는 시스템이 제공하는 표준 인터페이스 요소와 자동 레이아웃을 사용해야 한다. 안전 영역은 내용이 상태 바나 내비게이션 모음, 도구 모음, 탭 바에 겹치는 것을 방지한다.

3. 애니메이션 Animation
모바일 UI/UX 디자인에서의 애니메이션은 사용자의 상호작용에 대한 반응을 말한다. 친숙하고 재미있는 경험은 사용자의 참여를 유도한다. 적절하게 사용된 애니메이션은 현재 상황을 잘 설명하면서 피드백을 제공하고, 직접 조작하는 느낌을 주며, 결과를 쉽게 예측할 수 있도록 한다. 기기의 방향 전환이나 스크롤과 같은 익숙한 기능은 행동 유도성 Affordance을 기반으로 사용성을 높인다. 또한 시차 효과와 같은 동작 효과를 사용하면 홈 화면 및 다른 영역에서의 심도 인식을 만들 수 있다. 
확대나 축소, 회전, 깜빡이는 요소 등을 사용할 때는 더 신경 써야 한다. 바운스 Bounce 효과를 과장되게 사용하면 사용자가 현기증이 나거나 불편함을 느낄 수 있으므로 동작 감소 기능을 제공해야 한다.

4. 브랜딩
브랜딩이 잘 된 앱이란 단순히 로고 이미지가 잘 보이게 배치된 앱을 의미하는 것이 아니다. 사실 글꼴, 색상, 이미지 등을 특성 있고 일관적으로 사용하면 브랜딩 경험을 끌어낼 수 있다. 
앱 전체에 로고가 표시되어 있으면 탐색에 방해가 될 수 있다. 따라서 최상의 경험을 위해서는 앱 디자인의 브랜딩을 미묘하게 통합해야 한다. 예를 들어, 인터페이스 전체에서 앱 아이콘의 색상을 사용하면 앱의 맥락 Context를 제공할 수 있다.

5. 다크 모드 Dark Mode
다크 모드란 하얀 배경 대신 검거나 어두운 배경 화면을 지원하는 것을 말한다. 주위가 어두울 때 하얀 배경 화면을 보면 눈에 부담이 되기 때문에 어두운 배경 화면을 사용하는 것이다. iOS 13.0 이상에서는 어두운 곳에서나 야간에 사용할 수 있도록 다크 모드를 선택할 수 있다. 기본 인터페이스 스타일로 다크 모드를 선택할 수 있으며, 설정 기능을 사용해 주변 조명이 약해지면 자동으로 모드가 전환되도록 할 수도 있다.
다크 모드에서는 모든 화면, 보기, 메뉴, 컨트롤에 어두운색 팔레트를 사용하고, 더 어두운 배경에 대비해 콘텐츠를 더 선명하게 만들어야 한다. 콘텐츠 영역에 초점을 두어 주변 UI가 배경으로 물러나는 동안 콘텐츠가 눈에 띄도록 해야 하며, 대비 및 투명성, 접근성 설정을 조정할 때 콘텐츠가 어두운 모드에서도 쉽게 읽힐 수 있도록 해야 한다. 특히 색의 대비를 통해 텍스트의 접근성을 높여야 하며, 사용자가 일반 모드와 다크 모드에서 같은 경험을 할 수 있도록 디자인을 조정해야 한다.

아이콘

iOS의 아이콘에 대한 구체적인 디자인 가이드라인은 다음과 같다.

앱의 본질을 파악하고 그 요소를 특별한 모양으로 표현해야 하며, 배경은 단순하게 만들고 투명도를 적용하지 않는다.
사진이나 스크린샷 또는 인터페이스 요소를 포함하지 않는다.
아이콘을 앱 전체에서 다양한 용도로 사용하지 않는다.
아이콘을 제작한 후에는 사용자의 다양한 홈 화면 배경을 고려해 여러 바탕화면에서 테스트한다.

1. 앱 아이콘 App icon
앱 아이콘은 실행 아이콘이라 불리는 런처 Launcher 아이콘을 말한다. 주로 사용자의 홈 화면에 위치해 응용프로그램 바로가기 역할을 한다. 앱 아이콘은 운영체제에 따라 기본으로 설치되어 시스템과 관련된 역할을 하는 시스템 애플리케이션 아이콘과 사용자가 직접 내려받아 설치하는 타사 애플리케이션 아이콘으로 구분할 수 있지만, 그 속성과 크기는 같다.

- 앱 아이콘의 속성
포맷 : PNG
색 공간 : sRGB 또는 P3
레이어 : 투명도가 없는 평면
해상도 : 이미지의 해상도에 따라 다름
형태 : 둥근 모서리가 없는 정사각형

- 앱 아이콘의 크기
iPhone : 180x180px (60x60pt @3x), 120x120px (60x60pt @3x)
iPad Pro : 167x167px (83.5x83.5pt @2x)
iPad, iPad mini : 152x152px (76x76pt @2x)
앱 스토어 (App Store) : 1024x1024px (1024x1024pt @1x)

2. 스포트라이트 Spotlight, 설정 및 알림 아이콘
iOS의 모든 앱 아이콘은 스포트라이트 검색에 노출되는 작은 아이콘을 제공해야 한다. 또한, 설정이 있거나 알림을 지원하는 앱 역시 표시할 작은 아이콘을 제공해야 한다. 아이콘이 작아져도 명확하게 식별할 수 있어야 하며, 앱 아이콘과 같아야 한다. iOS에 설정이나 알림 아이콘을 제공하지 않으면 iOS가 앱 아이콘을 축소해 제 위치에 표시되도록 한다. 

3. 사용자 정의 아이콘
iOS 13 이상에서는 앱에서 작업 모드를 나타내는 SF 심벌 (SF Symbol)을 사용하는 것을 선호한다. SF 심벌은 앱에서 사용할 수 있도록 1,500여 가지로 구성된 기호 세트를 말하며, 개발자 사이트에서 제공한다. SF 심벌은 모든 무게, 크기, 텍스트에 대해 다양한 범위의 가중치와 스케일로 적용할 수 있다. 

-iOS 아이콘 디자인 
iOS 아이콘은 크기에 맞게 사각형 형태로 디자인해야 한다. 사용자가 홈 화면에서 보는 아이콘은 모서리가 둥근 형태이지만, iOS 시스템이 자동으로 마스크를 적용하기 때문에 가장자리를 둥글게 디자인하지 않아야 같은 형태가 된다. 다만 가장자리 둥근 부분의 디자인을 예측하기 위해 아이콘 그리드를 활용해야 하며, 앱 아이콘의 배경이 1px인 경우 회색 테두리 선이 적용되어 아이콘의 가장자리를 쉽게 인식할 수 있게 되는데, 이것 역시 아이콘을 디자인할 때 작업하는 것이 아니라 앱 스토어에 등록할 때 설정하면 된다.
iOS 아이콘 그리드는 iOS 개발자 사이트에 있는 애플 디자인 리소스 페이지에서 내려받을 수 있다. 여기에서는 아이콘 그리드뿐만 아니라 포토샵, 스케치, 어도비 XD 템플릿과 함께 iOS 응용프로그램을 신속하게 설계할 수 있는 다른 UI 자료가 포함되어 있다.
애플 디자인 리소스 https://developer.apple.com/design/resources

4. iOS 아이콘의 저장과 파일명
iOS의 모든 아이콘 이미지는 PNG 포맷으로 저장해야 하며, 알파 채널을 포함할 수 있지만 투명 영역은 없어야 한다. 만약 가장자리 영역을 투명으로 설정해 저장하면 검은색으로 렌더링 되므로 주의해야 한다. 아이콘 이름은 대문자로 시작해야 한다. 

2023.04.12 - [UXUI 디자인] - iOS 가이드라인 3

iOS 가이드라인 3

2023.04.10 - [UXUI 디자인] - iOS 가이드라인 1

iOS 가이드라인 1