[기본사항] 레이아웃, 이미지, 타이포그래피, 개인정보 보호, SF Symbols

레이아웃

적응성

모든 앱은 기기 또는 시스템 컨텍스트가 변경될 경우 이에 맞게 조정되어야 한다.

SwiftUI 또는 자동 레이아웃을 사용하면 인터페이스가 다양한 범위의 특성과 상황에 맞게 동적으로 조정되는지 확인할 수 있다. 이러한 도구를 사용하지 않으면 대체 방법을 사용해야 한다.

 

다뤄야 하는 가장 일반적인 기기 및 시스템 변형은 다음과 같다.

• 다양한 기기 화면 크기, 해상도 및 색상 공간
• 다양한 기기 방향(가로/세로)
• Dynamic Island 및 카메라 제어기와 같은 시스템 기능
• iPad의 외장 디스플레이 지원, 디스플레이 확대/축소 및 멀티태스킹 모드
• 다이나믹 타입 텍스트 크기 변경
• 왼쪽에서 오른쪽으로/ 오른쪽에서 왼쪽으로 레이아웃 방향, 날짜/시간/숫자 형식, 서체 변경 및 텍스트 길이와 같은 지역 기반 다국어 기능

1) 바로 알아볼 수 있도록 일관성을 유지하되 상황에 따라 적절히 조절되는 레이아웃을 디자인할 것: 시스템 정의 안전 영역, 여백 및 안내선을 반영하고 레이아웃 편집자를 지정하여 조절 가능한 인터페이스를 보장할 수 있다.

2) 텍스트 크기 변경에 대비할 것: 텍스트 크기를 선택할 수 있는 기능인 유동적 글자 크기 조절을 지원하면 앱이 적절히 반응할 수 있다. Apple – 손쉬운 사용 , 타이포그래피 참고

3) 다양한 방향, 현지화 및 텍스트 크기를 사용하여 여러 기기에서 앱을 미리 볼 것: 가장 큰 레이아웃과 가장 작은 레이아웃을 사용하는 환경 버전을 테스트하면 테스트 프로세스를 간소화할 수 있다. Xcode 시뮬레이터를 사용하여 클리핑 및 기타 레이아웃 문제를 확인할 수 있다. ex) 앱이 가로모드를 지원하는 경우 시뮬레이터를 활용하여 기기가 왼쪽이든 오른쪽이든 회전하면 레이아웃이 잘 표시되는지 확인할 수 있다.

4) 필요한 경우 디스플레이 변경에 따라 아트워크의 크기를 조절할 것: 다른 화면 영상비가 적용된 환경에서 앱을 보면 아트워크가 잘리거나 아트워크에 레터박스 또는 필러박스가 표시될 수 있다. 이럴 때 아트워크의 영상비를 변경하지 말고, 아트워크의 크기를 조절하여 중요한 시각적 콘텐츠가 표시되도록 하자. 

 

시각적 계층

1) 상대적 중요성을 전달할 수 있도록 배치: 읽기 순서대로, 즉 상단에서 하단으로 / 선행에서 후행으로 항목을 보는 경우가 많다. 따라서 화면 또는 시야각의 상단 및 선행 근처에 가장 중요한 항목을 배치하자.

2) 중요한 정보에는 충분한 공간을 확보해 쉽게 찾을 수 있도록하자: 세부 정보로 가득 채워 중요한 정보를 가려서는 안 된다.

3) 사람들이 원하는 정보를 찾을 수 있도록 시각적 그룹화 생성: 네거티브 공간, 배경 모양, 색상, 머티리얼 또는 구분선 사용 -> 시각적으로 그룹화 및 정보 영역 분리

4) 시각적 스캔을 용이하게 하고 조직 및 계층이 명확히 전달되도록 정렬: 콘텐츠를 추적하여 정보를 쉽게 찾을 수 있도록

5) 사람들이 현재 가려진 콘텐츠를 찾을 수 있도록 시각적 힌트 제공: 모든 항목을 한번에 표시할 수 없을 때 추가 콘텐츠가 있음을 알려야 함. ex) 스크롤 

6) 상호작용 구성요소 주변에 충분한 공간 확보: 쉽게 찾을 수 있도록

 

안내선 및 안전 영역

레이아웃 안내선: 직사각형 영역 정의

표준여백 적용, 텍스트 너비 제한 가능, 사용자 설정 레이아웃 안내선 정의도 가능 - UILayoutGuide 및 NSLayoutGuide 참조

 

안전 영역: 탐색 막대, 탭 막대, 도구 막대 또는 윈도우에 의해 나타나는 기타 보기로 가려지지 않는 보기 안의 영역

Dynamic Island 또는 일부 맥 모델의 카메라 하우징과 같이 기기의 상호작용 및 디스플레이 기능을 피하기 위해 반드시 필요

안전 영역에 관련된 콘텐츠 위치 조정하기 참조

 

각 플랫폼에서 주요 디스플레이 및 시스템 기능을 고려 

 

플랫폼 고려사항 - iOS

1) 세로, 가로 방향 모두 지원하기

2) 화면을 채우려면 시각적 콘텐츠 확장하기: 디스플레이 가장자리까지 표시되는지, 스크롤 할 때 화면 하단까지 이어지는지 확인

3) iOS 게임에 풀 블리드 인터페이스를 먼저 사용하기 

4) 전각 버튼 삽입하기: 전각 버튼의 양측에 표준 시스템 정의 여백을 고려하기, 화면 하단의 전각 버튼은 일반적으로 둥근 모서리가 있고 안전 영역 하단에 맞춰 정렬될 때 가장 잘 보이며, 홈 화면 표시기와 충돌하지 않도록 하자.

5) iPad의 가로 방향에서는 화면 양측에 제어기를 배치하는 것을 고려하기

6) 가능하면 화면 하단 가장자리에 상호작용 제어기를 배치하지 않기

7) 다양한 상태 막대 높이에 대비하기

8) 값을 추가하거나 경험을 향상시킬 때에만 상태 막대를 가리기: 일반적으로 계속 표시하는 것이 좋지만 심층적 환경(게임 플레이, 미디어 시청 등)을 제공하는 경우 상태 표시줄을 가리는 것이 합리적일 수 있다.

 

iOS 안전 영역

안전 영역은 탐색 막대, 탭 막대, 도구 막대 또는 보기 제어기가 제공할 수 있는 기타 보기로 가려지지 않는 보기 내의 영역

iOS 키보드 레이아웃 안내선

키보드가 현재 차지하는 공간을 나타내고 안전 영역 삽입을 고려하는 키보드 레이아웃 안내선을 제공한다. 이 안내선을 사용하면 키보드 유형이나 배치 위치에 관계없이 키보드가 앱의 일부처럼 느껴지도록 할 수 있다. UIKeyboardLayoutGuide 참조

그리드

UIkit 모음 보기 흐름 요소를 사용하는 경우 그리드의 행 수는 콘텐츠의 너비와 간격에따라 자동으로 결정된다.  UICollectionViewFlowLayout 참조

몇 열 그리드인지에 따라 값이 나와있으니 공식 문서를 참고할 것

제목이 있는 행에 대해 세로 간격을 더 포함

일관된 간격을 사용

부분적으로 가려진 콘텐츠를 대칭적으로 보이도록

 

명세, 기기 크기 유형

iOS 기기 화면 크기

이 부분도 공식 문서 참고.

보다 자세한 개발자 지침은 scale 및 nativeScale ,  내용 참조

 

https://developer.apple.com/kr/design/human-interface-guidelines/layout

---

이미지

해상도

다양한 기기는 각기 다른 해상도로 이미지 표시가 가능하다.

 

포맷

다양한 유형의 이미지를 생성할 때의 권장사항이다.

 

모범사례

1) 앱의 모든 아트워크, 모든 지원 기기에 고해상도 이미지를 제공한다.

2) 일반적으로 이미지를 가장 낮은 해상도로 디자인한 다음 크기를 확대하여 고해상도 애셋을 생성한다.

3) 각각의 이미지에 색상 프로필을 포함하자: 앱의 색상이 다양한 디스플레이에서 의도된 대로 표시되도록 돕는다.

4) 항상 다양한 실제 기기에서 이미지를 테스트하자.

 

https://developer.apple.com/kr/design/human-interface-guidelines/images

---

타이포그래피

타이포그래피 선택지는 가독성 있는 텍스트 표시, 정보 계층 명시, 중요한 콘텐츠 전달, 브랜드 또는 스타일 명시가 가능하다.

 

가독성 보장하기

1) 대부분의 사람들이 쉽게 읽을 수 있는 서체 크기 사용: iOS에서는 11pt의 최소 서체 크기를 사용

2) 다이나믹 타입을 지원: 텍스트 크기를 선택할 수 있는 시스템 기능

3) 다양한 맥락에서 가독성 테스트: 테스트 결과 텍스트를 읽기가 힘들다면 더 큰 글자를 사용하거나, 텍스트 또는 배경 색상을 수정해 대비를 높이거나, 시스템 서체와 같이 최적화된 가독성을 위해 디자인된 글자체를 사용하자.

4) 일반적으로 가는 서체 사용을 지양

 

계층 전달하기

1) 필요한대로 굵기, 크기, 색상 조절을 통해 중요한 정보를 강조하고 계층을 시각화

2) 많은 부분을 사용자화한 인터페이스에서도 사용하는 글자체의 수를 최소화

3) 텍스트 크기 변경에 반응할 때는 중요한 콘텐츠를 우선시

 

시스템 서체 사용하기

Apple은 다양한 굵기, 크기, 스타일 및 언어를 지원하는 2가지 글자체 패밀리를 제공한다.

 

San Francisco(SF) - SF Pro, SF Compact, SF Arabic, SF Armenian, SF Georigian, SF Hebrew, and SF Mono 변형을 포함하는 산세리프체 글자체 패밀리

둥근 변형도 제공한다.

New York(NY) - 단독으로 또는 SF서체와 동시에 사용하기 위해 디자인된 세리프체 글자체 패밀리

 

기본 텍스트 스타일을 사용해보자.

필요한 경우 기본 텍스트 스타일을 수정하자.

필요한 경우 인터페이스 모형에서 자간을 조절하자.

 

개발자 참고 사항

Font.Design에서 정의된 상수를 사용하여 모든 시스템 서체에 접근할 수 있습니다. 앱 또는 게임에 시스템 서체를 내장하지 마십시오. 예를 들어, 모든 플랫폼에서 시스템 서체를 사용하려면 Font.Design.default를 사용하고 New York 서체를 사용하려면 Font.Design.serif를 사용하십시오.

 

사용자 설정 서체 사용하기

사용자 설정 서체가 읽기 적합한지 확인: 다양한 스타일 및 굵기에 대해 권장되는 최소 서체 크기 참고할 것

사용자 설정 서체에 손쉬운 사용 기능을 적용: 자동으로 다이나믹 타입, 손쉬운 사용 기능을 구현하는지 확인할 것

 

플랫폼 고려 사항

iOS 

SF Pro는 iOS 시스템 서체. iOS 앱은 NY를 사용할 수도 있다.

 

명세

iOS 다이나믹 타입 크기

공식 문서 참고할 것

 

https://developer.apple.com/kr/design/human-interface-guidelines/typography

---

개인정보 보호

개인정보 보호는 가장 중요한 일이다. 요청한 개인정보 보호 관련 데이터 및 리소스에 관해 투명하게 처리하는 것이 중요하며, 사람들이 접근을 허용한 데이터를 보호하는 것이 필수적이다.

 

모범사례

1) 실제로 필요한 데이터에만 접근 요청: 가능한 한 구체적으로 권한을 요청하여 사람들이 자신의 데이터를 정밀히 제어하도록 하자.

2) 앱이 사람들의 데이터를 수집하고 사용하는 방식에 관해 투명하게 처리: 데이터 사용 계획을 정확히 이해하지 못할 경우 데이터를 앱과 공유하는 것을 불편하게 느낄 수 있다. 

3) 가능한 경우 기기에서 데이터를 처리: iOS에서 Apple 뉴럴 엔진 및 사용자 설정 CreateML 모델을 활용하여 기기에서 바로 데이터를 처리할 수 있다. 이는 원격 서버까지 길고 위험할 수 있는 왕복 이동을 방지하는 데 도움이 된다.

4) 시스템 정의 개인정보 보호를 채택하고 보안 모범사례를 따르자

 

권한 요청하기

다음은 접근 권한을 요청해야 하는 작업의 여러가지 예시다.

• 위치, 건강, 금융, 연락처 및 기타 개인 식별 정보 등의 개인 데이터
• 이메일, 메시지, 캘린더 데이터, 연락처, 게임 플레이 정보, Apple Music 활동, HomeKit 데이터 및 오디오, 비디오, 사진 콘텐츠와 같은 사용자 생성 콘텐츠
• Bluetooth 주변 기기, 홈 자동화 기능, Wi-Fi 연결 및 로컬 네트워크와 같은 보호된 리소스
• 카메라 및 마이크와 같은 기기 기능
• 전체 공간에서 실행 중인 visionOS 앱에서 손 추적, 평면 추정, 이미지 고정 및 세계 추적과 같은 ARKit 데이터
• 앱 추적을 지원하는 기기의 광고 식별자

1) 앱이 명확하게 데이터 또는 리소스에 접근해야 하는 경우에만 권한 요청

2) 앱이 작동하는 데 데이터 또는 리소스가 필요하지 않다면 실행 시 권한을 요청하지 말 것

3) 앱이 요청된 기능, 데이터 또는 리소스를 사용하는 방법을 명확하게 설명하는 내용을 작성

 

사전 경고 화면, 윈도우 또는 보기

1) 하나의 버튼만 포함하고 해당 버튼을 누르면 시스템 경고가 열린다는 점을 명확히 할 것

2) 사용자 설정 화면 또는 윈도우에서 추가 동작을 포함하지 말 것: 시스템 경고를 보지 않고 화면 또는 윈도우에서 나갈수 있는 방법을 제공하지 말자

 

추적 요청

앱 추적은 민감한 문제이다. 

1) 시스템 제공 경고 전에 사람들을 혼란스럽게 하거나 오해할 수 있는 사용자 설정 화면 또는 윈도우를 제공하지 말 것: 사람들은 때때로 경고를 읽지 않고 빠르게 탭하여 닫는다. 이러한 동작을 활용하여 선택에 영향을 미치는 사용자 설정 메시지 화면, 윈도우 또는 보기는 App Store 심사 중에 거부될 수 있다.

 

위치 버튼

1) 특정 앱 기능을 위해 사람들이 위치를 공유할 수 있는 간단한 방법을 제공하려면 위치 버튼을 사용하는 것을 고려하자

2) UI와 조화를 이루려면 위치 버튼을 사용자화하는 것을 고려하자

 

데이터 보호하기

다음은 상위 수준의 일부 지침이다.

1) 인증을 위해 암호에만 의존하지 말 것: 이중인증, 생체 인증 등 사용

2) 키체인에 중요한 정보를 저장할 것: 키체인은 사람들의 개인정보를 처리할 때 안전하고 예측 가능한 사용자 경험을 제공한다.

3) 일반 텍스트 파일에 암호 또는 기타 보안 콘텐츠를 저장하지 말 것

4) 사용자 설정 인증 체계를 사용하지 말 것: 앱에 인증이 필요한 경우 passkey, Apple로 로그인 또는 Password AutoFill 과 같은 시스템 제공 기능을 가급적 사용하자.

 

https://developer.apple.com/kr/design/human-interface-guidelines/privacy

---

SF Symbols

SF Symbols는 San Francisco 시스템 서체와 매끄럽게 통합되어 모든 굵기와 크기의 텍스트에 자동으로 맞춰지는 수천 개의 일관되고 고도로 구성 사능한 기호를 제공한다.

탐색 막대, 도구 모음, 탭 막대, 빠른 메뉴, 내부 텍스트 등 인터페이스 아이콘이 표시될 수 있는 모든 곳에서 기호를 사용하여 대상체나 개념을 전달할 수 있다.

대상 시스템의 버전에 따라 사용 가능 여부가 다른데, 해당 해에 도입된 기호 및 기호 기능은 이전 운영 체제에서 사용할 수 없다.

SF Symbols 를 방문하여 앱을 다운로드하면 전체 기호 세트를 둘러볼 수 있다.  개발자 지침을 보려면  Configuring and displaying symbol images in your UI 를 참조

 

렌더링 모드

SF Symbols는 네 개의 렌더링 모드(모노크롬, 계층, 팔레트, 멀티컬러)를 제공한다. 

가변 색상

가변 색상을 사용하면 렌더링 모드와 관계없이 기능이나 강도와 같이 시간에 따라 달라지는 특성을 표현할 수 있다.

가변 색상은 심도가 아닌 변화를 전달할 때 사용하자.

 

굵기 및 크기

SF Symbols는 다양한 굵기, 크기로 기호를 제공한다.

디자인 변형

채우기, 슬래시, 둘러싸기와 같은 다양한 디자인 변형을 정의한다.  이미지 를 참조하자.

 

윤곽 변형은 도구막대, 탐색막대, 목록 및 텍스트 옆에 기호를 표시하는 기타 위치에서 효과적이다.

정사각형 또는 원과 같이 둘러싸는 도형을 사용하는 기호는 작은 크기에서 가독성을 높일 수 있다.

채우기 변형의 단색 영역은 기호를 시각적으로 강조해 iOS 탭 막대, 쓸어넘기기 동작, 강조 색상을 사용하여 선택을 표시하는 위치에서 사용하기 좋다.

 

대부분, 기호를 표시하는 보기는 윤곽 또는 채우기를 사용할지 말지 여부를 결정하기 때문에 변형을 지정할 필요가 없다. ex) iOS 탭 막대는 채우기 변형을 선호하지만 탐색 막대는 윤곽 변형을 사용한다.

 

애니메이션

SF Symbols는 애니메이션 모음을 제공한다. SF Symbols 에서 제공하지 않는 기호가 필요한 경우,  사용자 설정 기호를 참조하자. 애니메이션을 처음부터 끝까지 실행할지 아니면 조건이 충족될 때까지 효과를 반복하며 무한히 실행할지 등 애니메이션 재생을 제어할 수 있다. 애니메이션 재생 속도를 변경하거나 애니메이션을 반복하기 전에 역방향으로 재생할지 여부를 결정하는 것처럼 동작을 사용자화 할 수 있다. 개발자 지침을 보려면  Symbols 및 SymbolEffect 참조

 

SF Symbols 5이상은 다음 애니메이션을 지원한다.

• 나타나기: 기호가 서서히 표시된다.
• 숨기기: 기호가 서서히 사라진다.
• 바운스: 고무줄과 같은 움직임으로 기호를 짧게 확대 또는 축소한 다음 초기상태로 돌아간다. 기본적으로 한 번 재생되며, 동작이 발생했거나 발생해야 한다는 것을 알린다.
• 확대/축소: 기호를 확대하거나 축소하여 크기를 변경한다. 바운스 애니메이션과 달리 새로운 크기를 설정하거나 효과를 제거할 때까지 계속된다. 관심을 끌 때 사용하거나 기호를 선택할 때 피드백으로 사용할 수 있다.
• 박동: 시간에 따라 기호의 불투명도를 변경한다. 기호 내의 레이어에 자동으로 박동을 적용하고 기호 내의 모든 레이어에 박동을 적용할 수 있다(선택 사항). 조건이 충족될 때까지 계속 재생하여 진행 중인 활동을 나타낼 수 있다.
• 가변 색상: 기호 내 레이어의 불투명도를 점진적으로 변경한다. 누적되거나 반복될 수 있다. 누적의 경우, 애니메이션 주기가 완료될 때까지 각 레이어의 색상 변경이 지속된다. 반복하면 한 번에 한 레이어의 색상이 변경된다 .
• 대치: 하나의 기호를 다른 기호로 대치한다. 3가지 구성이 있다.
  • 축소-확대: 사라지는 기호는 축소, 나타나는 기호는 확대
  • 확대-확대: 사라지는 기호도 확대, 나타나는 기호도 확대
  • 끔-확대: 사라지는 기호는 즉시 가려지고 나타나는 기호는 확대
• 매직 대치: SF Symbols 6 이상에서는 관련 모양의 두 기호 간에 스마트하게 전환된다.

SF Symbols 6 이상은 다음 애니메이션을 지원한다.

• 흔들기: 방향 축을 따라 기호의 앞뒤로 이동한다. 사람이 간과할 수 있는 변경 사항을 하이라이트하거나 행동을 촉구할 수 있다.
• 호흡: 기호의 표시 상태를 부드럽게 증가시키고 감소시켜 숨쉬는 것처럼 보이게 한다. 박동과 비슷하지만 박동은 불투명도만 변경하느 반면 호흡은 불투명도와 크기 모두 변경한다.
• 회전: 기호를 회전하여 시각적 지표 역할을 하거나 실제 대상체의 동작을 모방한다. 완전히 회전시킬 수도 있고, 기호의 특정 부분만 회전시킬 수도 있다.

1) 기호 애니메이션을 신중히 적용: 너무 많으면 인터페이스를 압도하고 주의를 분산시킬 수 있다.

2) 애니메이션이 기호의 의도를 명확하게 전달하게: 움직이는 기호를 사람들이 어떻게 해석할 수 있는지와 애니메이션 또는 그 조합이 혼란스럽지는 않은지 고려하자.

3) 기호 애니메이션을 사용하여 더 효율적으로 정보를 전달: 대량의 시각적 공간을 차지하지 않으면서 복잡한 정보를 단순한 방법으로 제시할 수 있다.

애니메이션을 추가할 때 앱의 분위기를 고려: 브랜드 아이덴티티, 앱의 전반적인 스타일 및 분위기와 일치할 수 있는 방법에 대해 생각해야 한다.

 

사용자 설정 기호

자신만의 기호를 설정할 수도 있다. 개발자 지침을 보려면 Creating custom symbol images for your app를 참조하자.

1) 템플릿을 가이드로 사용: 간단한, 알아볼 수 있는, 포괄적, 동작 또는 대표하는 콘텐츠와 직접 관련된 (아이콘 참조)

2) 필요한 경우 사용자 설정 기호에 측면 여백을 지정

3) 레이어를 최적화하여 사용자 설정 기호와 애니메이션을 사용

4) 사용자 설정 기호의 애니매이션을 테스트

5) 둘러싸기 또는 배지와 같이 일반적 변형이 포함된 사용자 설정 기호를 사용하지 말 것: 구성 요소 보관함을 사용하면 포함된 SF Symbols와 디자인 일관성을 유지하면서 사용자 설정 기호의 일반적으로 사용되는 변형을 생성할 수 있다.

6) 사용자 설정 기호의 대체 텍스트 레이블 제공: 대체 텍스트 레이블 또는 손쉬운 사용 설명을 사용하면 VoiceOver가 표시된 UI및 콘텐츠를 설명하여 시각 장애가 있는 사용자가 더 쉽게 탐색할 수 있다.  VoiceOver 참조

7) Apple 제품의 복제품을 디자인하지 말 것: SF Symbols에서 Apple 기능 또는 제품을 나타내는 것으로 식별되는 기호는 사용자화할 수 없다.

 

https://developer.apple.com/kr/design/human-interface-guidelines/sf-symbols