오늘은 플랫폼 별 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방식의 사용자 보호 장치가 눈의 띄었습니다.
안드로이드(Android)는 구글(Google)이 개발한 모바일 운영체제(OS)로, 스마트폰, 태블릿, 웨어러블, TV, 자동차 등 다양한 기기에서 사용됩니다. 기본적으로 리눅스 커널 기반이며, 오픈소스로 제공되어 전 세계 제조사들이 자유롭게 사용하고 커스터마이징 할 수 있습니다.
안드로이드 기초
1. 플랫폼 가이드라인(Material Design)을 준수하라
Material Design 3 기준에 따라 UI 구성 요소를 사용해 일관성을 유지하세요.
예: 버튼, 카드, FAB, TopAppBar등은 Android Native 스타일 사용
2. 적응형 레이아웃을 설계하라 (Responsive UI)
다양한 해상도/화면 크기를 고려해 ConstraintLayout, Compose 등 유연한 UI 도구 사용
예: 폴더블폰, 태블릿, TV 지원 시 화면 구성 다르게 설계
3. 간결하고 직관적인 탐색 구조 제공
Bottom Navigation, Navigation Drawer, Tab Layout 사용해 앱 내 이동을 단순하게
뒤로가기 버튼 동작을 명확히 처리 (예: 이중 백 버튼 방지)
4. 속도감 있는 첫 화면 (Splash + Skeleton Loading)
앱 실행 시 로딩이 느릴 경우 Skeleton UI 또는 진입 애니메이션 제공
사용자에게 “앱이 작동 중이다”는 피드백 제공
5. 모션과 애니메이션은 자연스럽게과하지 않으면서도 맥락 있는 애니메이션
제공예: 페이지 전환, FAB 클릭 시 확장 모션
6. 오프라인 상태와 에러 처리 고려네트워크 오류, 인증 실패, 앱 충돌 시 사용자 친화적 메시지 제공
예: “오류가 발생했습니다. 다시 시도해주세요.” + 재시도 버튼
7. 접근성과 포용성 강화TalkBack, 고대비 모드, 글자 크기 조절 등 접근성 서비스 대응컬러 대비, 아이콘 텍스트 병행 표기
8. 프라이버시와 권한은 ‘상황에 따라’ 요청앱 실행 시 바로 전체 권한 요구 → 사용 시점에 필요한 권한만 안내예: 카메라 버튼을
누를 때만 카메라 권한 요청
9. AI/ML 기반 UX 기능 통합 고려사용자 행동 기반 추천, 자동 입력, 예측 입력 등으로 사용성 향상
예: Google Keyboard의 맞춤 제안, 사진 자동 분류 등10. 테스트와 피드백 기반 지속 개선Firebase, UXCam, A/B 테스트 도구로 사용자 행동 분석주기적으로 UI 개선, 기능 재설계 반복
DP (Density-independent Pixel)
기기의 화면 밀도(DPI)에 따라 실제 픽셀(px) 크기가 자동으로 변환되어, 저해상도 폰이든 고해상도 태블릿이든 동일한 물리적 크기로 보이게 만듭니다.
SP (Scale-independent Pixel)
글자 크기(Font size)에만 사용되는 단위
8dp 그리드 시스템 (8dp Grid System)
UI의 모든 요소를 8dp 단위의 보이지 않는 격자에 맞춰 배치하는 규칙입니다. 모든 간격(Margin, Padding)과 대부분의 컴포넌트 크기를 8의 배수(8, 16, 24, 32dp...)로 설정하여, 디자인에 시각적인 안정감과 리듬감을 부여합니다.
컴포넌트(Component) –UI 구성요소 이해와 활용
앱 바 (App Bars), 버튼 (Buttons), 네비게이션 (Navigation), 다이얼로그 (Dialogs), 탭 (Tabs), 칩 (Chips), 스낵바 (Snackbar), 텍스트 필드 (Text Field)
Material Design 커스터마이징 & 디자인 토큰
Android 디자인은 브랜드만의 정체성을 담아내는 '커스터마이징(Customization)'과, 디자인과 개발의 언어를 통일하는 '디자인 토큰(Design Tokens)'이라는 두 가지 중요한 개념을 중심으로 발전하고 있습니다.
머티리얼 커스터마이징 (Material Customization)
핵심 도구: 머티리얼 테마 빌더 (Material Theme Builder)
디자인 토큰 (Design Tokens)
디자인 토큰은 디자이너와 개발자가 사용하는 '언어'를 통일시켜줍니다. 이는 사소한 오해를 줄이고, 디자인의 일관성을 완벽하게 유지하며, 향후 유지보수 비용을 획기적으로 절감시키는 현대 디자인 시스템의 가장 핵심적인 개념입니다
제스처의 주요 기능과 원칙
제스처는 터치스크린 환경에서 사용자가 손가락의 움직임을 통해 기기와 직접적으로 소통하는 핵심적인 상호작용 방식입니다.
마치며
안드로이드에 관한 기본개념과 유저의 일관된 경험을 위하여 안드로이드의 UI가이드에 알아볼 수 있었습니다.