iOS UI가이드, figma

안녕하세요.

오늘은 플랫폼 별 UI가이드 중 iOS UI 가이드에 대해 스터디한 내용을 쓰려고 합니다.

Apple Human Interface Guidelines와  시각 및 레이아웃, 개인정보 보호 보안 및 콘텐츠 보호 및 데이터 사용에 대해 알아보도록 하겠습니다.

iOS UI가이드

 

 iPhone Operating System에서 유래되었으며, Apple의 독점 플랫폼으로 하드웨어와 소프트웨어가 긴밀히 통합된 환경을 제공합니다

Apple Human Interface Guidelines (HIG)

iOS정의

• 앱 심사가 매우 까다로워서 리젝됐는데 하루 안에 심사됩니다.
• 애플의 칩셋 성능이 우수하고 한국 유저는 연 1회 os 업데이트를 합니다.
• 맥북, 아이맥, 애플워치, 아이패드 모든 기기를 애플로 바꿉니다.(애플 생태계)

iOS 앱샌드박스개념

앱 샌드박싱은 iOS에서 각 앱이 자신만의 제한된 파일 시스템 공간과 리소스 권한 안에서 실행되도록 하는 구조로, 앱 간 간섭, 시스템 침해, 사용자 정보 유출 등을 방지합니다.

• 보안이 강하다.
• 버전이 중요하다. 기획자가 버전 정보를 알아야 한다.
• 예전 버전에서는 동작을 안할때 분기처리하던지 기능을 넣지 않던지 해야 한다. 한국은 과감하게 사양을 높게 해야 한다.(GA4에서 기기 보면 높은사양을 쓰고 있고 버전 업데이트를 한다)
• 그런 부분을 기획할 때 참고해야 한다.
• 애플 인텔리젼스에서 ai기능 가져오는 라이브러리에서 가져온다.
• 기능이 뭐가 업데이트가 되었는지 메일이 온다.
• 앱 보안기능: 보안이 철저해서 iOS는 다 막아버려서 표현을 못한다.
• 앱 무결성

사용자 중심의 디자인

• 스티브잡스가 중요하게 생각한게 UX이다.
• FACE ID를 활용한 보안 로그인으로 보안 강화
• Siri 음성 명령
• sos기능
• 애플 TV(업무 환경이 좋다,HDMI 빼고 꽂을 필요없다)

✨국내 시장이냐, 국외시장이냐 ux기획할때, 실제 사용자들이 어떤시장을 점유하는지 os를 선택하고 버전을 선택합니다.

 

HIG 가이드라인

시각 및 레이아웃 (Visuals & Layout)앱의 전체적인 인상과 정보 구조의 뼈대를 결정합니다.

1. 레이아웃 (Layout)

2. 색상 (Color)

3. 타이포그래피 (Typography):Apple 플랫폼의 시스템 서체인 San Francisco(SF) 폰트 사용을 권장합니다.

사용자가 시스템 설정에서 글자 크기를 조절하면 앱 내의 텍스트도 그에 맞춰 자연스럽게 커지거나 작아지는 다이내믹 타입(Dynamic Type)을 지원해야 합니다.

 

4. 다크 모드(Dark Mode)

완전한 검은색보다는 매우 어두운 회색을 배경색으로 사용할 것을 권장합니다. 

의미론적 색상 사용 (Use Semantic Colors)으로 "기본 배경색(System Background Color)", "주요 텍스트색(Label Color)" 등 역할과 의미를 가진 시스템 색상(Semantic Color)**을 사용해야 합니다.

채도가 낮은 색상 유지 (Desaturated Colors)

 

사용성 강화 디자인 가이드

•터치 영역 최소 44pt ×44pt 이상

•탭 전환 시 부드러운 애니메이션 사용

•비활성 요소는 시각적으로 구분 (회색 등) 

• VoiceOver(음성 해설) 및 접근성 요소 고려

•하위 콘텐츠로의 점진적 탐색 (drill-down 방식)

 

상호 작용 및 패턴

패턴

1. 차트 데이터 (Chart Data)

2. 드래그 앤 드롭 (Drag and Drop) 

3. 데이터 입력하기 (Data Entry)

4. 전체 화면 사용하기 (Using Full Screen)

5. 모달 형식 (Modality)

6. 멀티태스킹 (Multitasking)

 

핵심 컴포넌트 (Core Components) 

1. 바 (Bars): 

정의: 화면의 상단, 하단에 위치하여 중요한 정보나 기능을 제공합니다. 상태 바(Status Bar), 내비게이션 바(Navigation Bar), 탭 바(Tab Bar), 툴바(Toolbar) 등이 있습니다. 

 

2. 컨트롤 (Controls):

정의: 사용자가 직접 조작하여 특정 행동을 실행하거나 값을 변경하는 요소입니다. 버튼(Buttons), 스위치(Switches), 슬라이더(Sliders), 선택기(Pickers) 등이 있습니다.

핵심: 컨트롤의 시각적 형태만 보고도 사용자는 그 작동 방식을 예측할 수 있어야 합니다.

 

3. 뷰 (Views):

정의: 텍스트, 이미지, 목록 등 앱의 주요 콘텐츠를 사용자에게 보여주는 영역입니다. 이미지 뷰, 텍스트 뷰, 테이블 뷰(목록) 등이 있습니다.

핵심: 콘텐츠의 특성에 가장 적합한 '뷰'를 선택하여, 사용자가 정보를 가장 효율적으로 소비할 수 있도록 해야 합니다.

 

애플이 안드로이드보다 더 디테일하고 인터랙션이 많다(스와이프, 제스쳐, 햅틱)

 

ATT 추적 권한 신청

추적 권한 요청 (App Tracking Transparency -ATT)

•과거 (Opt-out 방식): 

추적이 '기본 허용' 상태였고, 사용자가 원치 않으면 직접 설정 메뉴 깊숙이 찾아 들어가 '광고 추적 제한' 옵션을 켜야만 했습니다. 대부분의 사용자는 이 사실조차 몰랐습니다. 

•현재 (Opt-in 방식): 

추적이 '기본 금지' 상태입니다. 이제 앱이 사용자를 추적하고 싶다면, 반드시 사용자에게 먼저 다가가 문을 두드리고, 명시적으로 '허용'을 받아야만 합니다.이 변화는 데이터의 통제권을 기업에서 완전히 사용자에게로 되돌려주었으며, '투명성'과 '사용자 선택권 존중'이 얼마나 중요한 가치인지를 보여줍니다

 

마치며

 iOS 사용자 중심의 디자인에 대해서 살펴보았으며 특히 ATT방식의 사용자 보호 장치가 눈의 띄었습니다.