티스토리 뷰

UI_UX Design/UI Design 개론

ch05_iOS 가이드라인(1)

jsBae 2024. 11. 20. 18:31
학습목표
- iOS 디자인 원칙 이해
- iOS UI 구성 요소 및 패턴 익히기
iOS Human Interface Guidelines의 원칙과 세부 사항을 완전히 이해하고, 이를 기반으로 사용자 친화적이며 Apple의 디자인 철학에 부합하는 앱을 설계할 수 있게 된다.

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

 

Human Interface Guidelines | Apple Developer Documentation

The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

developer.apple.com

 

Human Interface Guidelines(HIG)

  • HIG의 역할:
    • iOS, iPadOS, macOS, visionOS, tvOS 등 다양한 Apple 플랫폼에서 최적의 앱 설계 가이드를 제공.
    • 애플 디바이스의 사용자 경험을 강화하기 위한 모범 사례와 원칙 제시.
  • 게임 및 애플리케이션 통합:
    • Apple 플랫폼에서 게임과 앱이 일관된 비주얼과 인터랙션을 제공하도록 가이드.
    • 새로운 VisionOS 환경 및 가상 손(Virtual Hands)을 포함한 가상 현실 요소 설계 지원.

iOS 경험의 주요 특성과 패턴

  1. 디스플레이(Display):
    • iPhone은 중간 크기의 고해상도 디스플레이를 제공한다.
    • 세부 정보와 이미지를 선명하게 표시할 수 있으므로, UI 요소는 선명하고 세밀하게 설계해야 한다.
  2. 인체공학(Ergonomics):
    • 사용자들은 보통 한 손 또는 양손으로 iPhone을 들고 조작하며, 필요에 따라 가로(landscape)와 세로(portrait) 모드로 전환한다.
    • 기기와의 시청 거리(Viewing Distance)는 보통 12피트(약 3060cm) 정도이므로, UI는 가까운 거리에서 잘 보이도록 설계되어야 한다.
  3. 입력 방식(Inputs):
    • iOS는 멀티터치 제스처(Multi-Touch gestures), 가상 키보드, 음성 제어(Voice Control)를 통해 다양한 입력 방식을 지원한다.
    • 사용자는 gyroscope(자이로스코프)와 accelerometer(가속도계)와 같은 센서 데이터를 앱에서 활용하기를 원할 수 있다.
    • 공간 상호작용(Spatial Interaction) 또한 중요한 입력 방법으로 활용 가능하다.
  4. 앱 상호작용(App Interactions):
    • 사용자는 앱을 짧게는 1~2분, 길게는 1시간 이상 사용하며, 사용 목적에 따라 앱과의 상호작용 시간이 다르다.
      • 짧은 상호작용: 이벤트 확인, 소셜 미디어 업데이트, 데이터 추적, 메시지 전송.
      • 긴 상호작용: 웹 브라우징, 게임 플레이, 미디어 감상.
    • iOS 사용자는 여러 앱을 동시에 열어놓고 자주 전환하며, 이러한 환경에 적응하는 UI를 선호한다.
  5. 시스템 기능(System Features):
    • iOS는 사용자들이 앱과 시스템을 익숙하고 일관된 방식으로 상호작용할 수 있도록 돕는 기능들을 제공한다.
      • 예: 홈 버튼, 제스처 내비게이션, 알림 센터, Control Center 등.

iOS 디자인의 핵심 원칙

  1. 일관성(Consistency):
    • iOS 디자인은 플랫폼의 기본 인터페이스와 일관된 사용자 경험을 제공해야 한다.
    • Apple의 UI 요소, 시스템 폰트(San Francisco), 제스처, 애니메이션 등을 적절히 활용하여 사용자가 익숙함을 느끼게 해야 한다.
  2. 직관성(Intuition):
    • 사용자가 추측 없이 앱을 사용할 수 있도록 설계해야 한다.
    • 주요 기능과 컨텐츠는 사용자가 쉽게 탐색할 수 있는 위치에 배치되어야 한다.
  3. 사용자 중심의 설계(User-Centric Design):
    • 앱은 사용자의 작업 흐름을 지원하고, 그들의 요구를 충족시키는 방식으로 설계되어야 한다.
    • 개인화 옵션과 접근성 기능을 통합하여 다양한 사용자의 요구를 충족시킨다.
  4. 반응성과 적응성(Responsiveness and Adaptivity):
    • iOS 앱은 다양한 화면 크기(iPhone, iPad 등)와 모드(라이트, 다크 모드)에 반응하고 적응할 수 있어야 한다.
    • Auto Layout과 Safe Area를 사용하여 디바이스 환경에 맞는 인터페이스를 제공한다.

iOS 디자인의 Best Practices 

  1. 주요 작업과 콘텐츠에 집중
    • 화면에 표시되는 컨트롤 수를 최소화하여 주요 작업과 콘텐츠에 집중하도록 설계.
    • 부가적인 세부 정보나 동작은 최소한의 상호작용으로 발견 가능하게 제공.
  2. 환경 변화에 유연하게 적응
    • 기기 방향(가로/세로 모드), 다크 모드, Dynamic Type(동적 텍스트 크기)와 같은 설정 변경에 원활하게 적응.
    • 사용자가 선호하는 구성 옵션을 선택할 수 있도록 지원.
  3. 편안한 상호작용 지원
    • 사람들이 기기를 손에 들고 사용하는 방식에 맞게 설계.
    • 중간 또는 하단 영역에 컨트롤을 배치해 접근성을 높이고, 스와이프 동작으로 목록 탐색 또는 뒤로 이동이 가능하도록 구현.
  4. 플랫폼 기능 통합
    • 사용자의 허가를 기반으로 플랫폼 기능을 활용해 경험을 향상.
    • 예: 지문/얼굴 인식으로 보안 제공, 위치 데이터로 맞춤형 기능 제공, 결제 통합.

Fundamental Design Elements

1.Accessibility: iOS 접근성

iOS 접근성(Accessibility) 기능은 모든 사용자가 디바이스와 상호작용할 수 있도록 돕는 필수 요소로, 장애를 가진 사용자를 포함한 다양한 사용자를 지원한다. 접근성은 앱 설계에서 중요한 역할을 하며, 사용자 경험을 향상시키는 데 기여한다.

주요 접근성 설계 원칙

  1. 포용적인 설계:
    • 모든 사용자를 고려한 보편적 설계를 목표로 한다.
    • 사용자의 물리적, 시각적, 청각적, 인지적 요구를 충족하도록 설계.
  2. 맞춤형 사용자 경험 제공:
    • 사용자가 필요에 따라 접근성 기능을 개인화할 수 있도록 지원.
    • 예: VoiceOver, Dynamic Type, 색상 조정, 음성 명령 등.
  3. 일관성과 직관성:
    • iOS 접근성 API를 사용하여 앱이 Apple 시스템과 일관된 사용자 경험을 제공하도록 보장.
    • 모든 UI 요소가 명확하고 직관적인 라벨을 가져야 한다.

주요 접근성 상호작용 기술

iOS는 VoiceOver, Assistive Touch, Pointer Control, Switch Control 등 접근성 기술을 통해 사용자가 디바이스와 상호작용할 수 있는 다양한 방법을 제공한다.
이 기술들은 시스템에서 제공하는 상호작용과 통합되며, 앱이 이러한 시스템 상호작용을 올바르게 지원해야 한다.

  1. VoiceOver:
    • 화면의 콘텐츠를 음성으로 읽어주는 기술로, 시각 장애 사용자를 위한 핵심 기능.
    • 탐색 및 선택 지원:
      • 사용자는 화면의 요소를 탐색하고, 음성 피드백을 통해 선택과 상호작용이 가능하다.
    • 앱 설계 시, 모든 UI 요소에 접근성 라벨을 추가하여 VoiceOver와 호환되도록 해야 함.
  2. Assistive Touch:
    • 화면 터치 없이 제스처를 대체할 수 있는 기능으로, 신체적 제한이 있는 사용자를 위한 대안 제공.
    • 복잡한 제스처(예: 핀치 확대)를 단순화하여 사용자에게 맞춤형 입력 옵션을 제공.
  3. Pointer Control:
    • 커서를 사용해 디바이스를 제어할 수 있는 기능으로, 특히 외부 입력 장치(마우스, 트랙패드) 사용자를 지원.
    • 앱은 커서가 UI 요소와 상호작용할 때 시각적 피드백(예: 강조 표시)을 제공해야 함.
  4. Switch Control:
    • 하나 이상의 스위치를 사용해 화면의 항목을 선택하고 동작을 실행.
    • 신체적 장애를 가진 사용자가 키보드, 버튼 등의 물리적 스위치를 통해 디바이스를 조작 가능.

주요 Patterns

1. Loading

가장 좋은 로딩 경험은 사용자가 로딩이 일어났다는 사실조차 인식하지 못할 정도로 빠르게 완료되는 것이다. 로딩이 필요한 경우에도 사용자에게 긍정적인 경험을 제공할 수 있도록 설계해야 한다.

최적의 로딩 경험 설계 가이드

  1. 로딩 시간 최소화
    • 콘텐츠 로딩 시간을 줄이기 위해 백그라운드 프로세싱과 데이터 최적화를 활용.
    • 로딩 중인 콘텐츠가 즉시 사용 가능한 것처럼 보이도록 설계.
  2. 시각적 피드백 제공
    • 로딩이 지연될 경우, 사용자에게 로딩 상태를 명확히 알리는 피드백 제공.
      • 스피너(Spinner): 일반적인 로딩 애니메이션.
      • 진행 바(Progress Bar): 로딩 완료 예상 시간을 전달.
      • Skeleton Screen: 콘텐츠의 자리 표시자(Placeholder)로 화면이 준비 중임을 시각적으로 표시.
  3. 로딩 중에도 콘텐츠 표시
    • 주요 콘텐츠를 순차적으로 로딩하여 사용자들이 기다리지 않고 앱을 사용할 수 있도록 지원.
      • 예: 이미지를 비동기로 로딩하고, 텍스트는 즉시 표시.
  4. 로딩 중 사용자 작업 지원
    • 로딩 시간이 길 경우, 사용자가 로딩이 끝날 때까지 다른 작업을 수행할 수 있도록 인터페이스 설계.
      • 예: 파일 업로드 시 다른 섹션 탐색 가능.
  5. 의미 있는 피드백 추가
    • 로딩 중 유용한 정보를 제공하여 사용자가 기다림을 덜 느끼게 만듦.
      • 예: "데이터를 불러오는 중입니다...", "거의 완료되었습니다!"와 같은 메시지.
  6. 로딩 실패 처리
    • 네트워크 연결이나 서버 오류로 로딩이 실패할 경우, 명확한 오류 메시지와 함께 해결 방법(다시 시도 버튼 등)을 제공.

사용자 경험 개선을 위한 팁

  • 애니메이션 사용: 로딩 중 동적인 요소를 추가하여 사용자가 기다리는 동안 지루하지 않게 만듦.
  • 점진적 로딩: 콘텐츠를 작은 단위로 분할하여 필요한 부분부터 먼저 로딩.
  • 사용자 작업 흐름 최소 방해: 로딩이 완료될 때까지 사용자 작업이 중단되지 않도록 설계.

2. Modality

Modality는 콘텐츠를 별도의 모드에서 표시하는 디자인 기술로, 사용자가 부모 뷰와의 상호작용을 중단하고 모달 콘텐츠에만 집중하도록 한다. 모달 뷰는 명시적인 작업(예: 버튼 클릭)으로 해제되어야 하며, 주로 다음과 같은 경우에 사용된다:

  • 중요 정보 전달 및 조치 요구
  • 최근 작업 확인 또는 수정
  • 특정 작업 수행을 돕기 위한 집중 모드 제공
  • 몰입형 경험 또는 복잡한 작업 지원

사용 예시

  1. 모든 플랫폼 공통 요소:
    • Alert(알림): 앱 또는 게임 관련 중요한 정보를 전달하는 모달 뷰.
  2. 플랫폼별 모달 뷰:
    • iOS, iPadOS, macOS: 시트(Sheet), 팝오버(Popover), 확인 대화 상자(Action Sheet).
    • iPadOS, macOS, visionOS: 별도의 창(Window)을 활용.
  3. 풀스크린 모달 경험:
    • 멀티미디어 감상(예: 비디오, 사진 보기) 또는 다단계 작업(예: 콘텐츠 편집)을 지원.
    • visionOS에서는 Shared Space에서 윈도우를 채우는 방식으로 시작하고, Full Space로 전환 시 몰입형 경험 제공.

모달 디자인의 모범 사례

  1. 모달 콘텐츠 사용의 명확한 목적 정의:
    • 현재 컨텍스트를 벗어나야 하는 명확한 이유가 있는 경우에만 모달을 사용.
    • 사용자가 초점을 맞추거나 중요한 선택을 해야 할 때 적합.
  2. 모달 작업 간단하고 간결하게 유지:
    • 복잡한 작업은 사용자가 컨텍스트를 잃을 가능성이 있으므로 피함.
    • 모달 뷰 안에서 하위 계층구조를 구성할 경우, 단일 경로로 작업이 진행되도록 설계.
  3. 복잡한 작업에 풀스크린 모달 활용:
    • 멀티미디어 콘텐츠(비디오, 사진) 또는 다단계 작업(문서 마크업, 사진 편집)에 적합.
    • 풀스크린은 주의 분산을 최소화하며 몰입감을 제공.
  4. 모달 뷰 해제 방식 제공:
    • 플랫폼 컨벤션에 따라 해제 버튼이나 제스처를 제공:
      • iOS/iPadOS: 내비게이션 바의 버튼 또는 아래로 스와이프.
      • macOS/tvOS: 콘텐츠 뷰 내 해제 버튼.
  5. 데이터 손실 방지:
    • 모달 해제 시 사용자 생성 콘텐츠가 손실될 가능성이 있다면, 상황을 설명하고 저장 옵션을 포함한 조치를 제공.
  6. 모달 작업 식별 가능하게 만들기:
    • 제목이나 설명을 추가하여 사용자가 작업의 목적과 위치를 명확히 이해하도록 돕기.
  7. 모달 뷰 간 중첩 방지:
    • 여러 모달 뷰가 동시에 표시되지 않도록 제한.
    • 단, Alert(알림)은 다른 모달 위에 표시 가능하나, 하나 이상의 알림을 동시에 표시하지 않음.

모달 뷰는 사용자가 특정 작업에 집중하거나 중요한 결정을 내릴 때 효과적인 도구이다. 모달 설계 시 작업의 간결성, 명확성, 데이터 보호, 그리고 적절한 해제 방법을 고려하여 사용자 경험을 최적화해야 한다. 중첩된 모달 뷰와 같은 시각적 혼란을 피하며, 플랫폼의 가이드라인을 준수해야 한다.

3. 온보딩(Onboarding)이란?

온보딩은 사용자에게 앱 또는 게임을 빠르게 시작할 수 있도록 돕는 초기 학습 흐름이다.
이 과정은 사용자에게 앱의 기능과 사용 방법을 소개하며, 빠르고 재미있고 선택 가능한 방식으로 설계되어야 한다.

모범 사례 (Best Practices)

  1. 상호작용을 통한 학습 제공
    • 사용자가 직접 작업을 수행하며 배우는 방식이 효과적.
    • 예: 기능 테스트, 게임 메커니즘 시도.
  2. 문맥별 팁(Context-Specific Tips) 제공
    • 단일 온보딩 흐름 대신, 사용자가 작업 중에 관련 팁을 제공.
    • UI의 특정 영역에 대해 설명할 경우, 해당 영역 근처에 팁 표시.
      참고: TipKit 활용.
  3. 필수 온보딩은 간단하고 재미있게
    • 짧고 즐거운 경험 제공으로 사용자의 부담 감소.
    • 과도한 정보 제공은 피해야 함.
  4. 튜토리얼을 선택적으로 제공
    • 튜토리얼을 스킵할 수 있도록 선택권 제공.
    • 첫 실행 후에도 설정 메뉴에서 다시 볼 수 있게 설계.
  5. 앱 또는 게임에 초점 맞추기
    • 시스템 또는 기기의 사용법이 아닌, 앱이나 게임의 핵심 경험에 집중.

4.Motion

모션 디자인은 앱과 게임에 생동감을 불어넣으며 상태를 전달하고, 피드백과 지시를 제공하며, 시각적 경험을 풍부하게 만든다. Apple 플랫폼은 자동으로 일부 모션을 제공하지만, 맞춤 모션을 설계할 때는 아래 가이드라인을 따르는 것이 중요하다.

모범 사례 (Best Practices)

  1. 목적에 맞는 모션 사용
    • 모션은 경험을 지원해야 하며, 과도한 애니메이션은 피해야 함.
    • 불필요한 모션은 사용자에게 산만함이나 불편함을 유발할 수 있음.
  2. 모션 선택 가능성 제공
    • 모든 사용자가 모션을 즐기거나 사용할 수 있는 것은 아니므로 대체 수단 제공:
      • 햅틱, 오디오, 텍스트 등을 사용하여 정보를 전달.
  3. 피드백 모션 설계
    • 제스처와 기대에 부합하는 모션 제공:
      • 예: 화면을 아래로 슬라이드하면 뷰가 닫혀야 함.
    • 간결하고 정밀한 애니메이션:
      • 짧고 분명한 애니메이션은 정보를 효과적으로 전달.
    • 사용자 제어 허용:
      • 사용자가 애니메이션을 취소하거나 기다리지 않고 작업 가능하도록 설계.
  4. 사용자 경험과의 통합
    • 지속적으로 발생하는 인터랙션에 모션 추가는 피함:
      • 기본 UI 요소에 이미 제공되는 애니메이션 활용.
    • 애니메이션 심볼 활용:
      • SF Symbols에 애니메이션을 적용해 인터랙션 강화.

Layout

일관된 레이아웃은 다양한 상황에 적응하면서 모든 디바이스에서 사용자 경험을 친숙하고 접근 가능하게 만든다. SwiftUI 또는 Auto Layout을 사용하면 시스템 및 기기 변화에 동적으로 대응할 수 있다.

적응성 (Adaptability)

앱과 게임은 다양한 디바이스 및 시스템 변화에 적응해야 함:

  1. 화면 크기와 해상도: iPhone, iPad 등 다양한 디바이스를 고려.
  2. 기기 방향: 세로/가로 모드 지원.
  3. 시스템 기능: Dynamic Island, 멀티태스킹, 외부 디스플레이 지원.
  4. 글로벌화: 언어 방향(좌→우/우→좌), 날짜/시간 형식, 글자 길이 등.

모범 사례

  • Dynamic Type: 사용자 설정 텍스트 크기 지원.
  • Safe Area: 카메라, 네비게이션 바 등 기기의 인터랙티브 영역 회피.
  • 텍스트 및 레이아웃 테스트: 여러 기기와 모드에서 미리보기.

가이드와 Safe Area

  1. Safe Area:
    • 기기의 인터랙티브 요소(Dynamic Island, 홈 인디케이터)와 겹치지 않도록 콘텐츠 위치 조정.
  2. 시스템 정의 마진:
    • 버튼 및 텍스트에 표준 시스템 마진 적용.

플랫폼별 고려사항

iOS/iPadOS:

  • 가로/세로 모드 지원: 양방향에서 동작 검토.
  • 풀스크린 레이아웃: 배경과 아트워크는 화면 끝까지 확장.
  • 버튼 인셋:
    • 풀스크린 버튼은 표준 마진과 라운드 코너 적용.
  • iPad:
    • 가로 모드에서는 화면 양쪽에 컨트롤 배치.

추가 설계 팁

  1. 상태바 관리:
    • 필요 시 상태바를 숨기되, 대부분의 경우 표시 유지.
  2. 하단 영역의 컨트롤 배치 주의:
    • 홈 제스처와 충돌하지 않도록 충분한 여백 제공.
  3. 아트워크 스케일링:
    • 다른 화면 비율에서도 중요한 콘텐츠를 보존.

728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형