TIL

Human Interface Guidelines - OS별 디자인 가이드 iPadOS편

B_Tori 2025. 7. 2. 10:29

기기의 특징과 패턴을 이해하고 디자인하는 것은 사용자 경험을 향상시키는 데 큰 도움이 됩니다.
본 글에서는 iPadOS 에 대해 애플의 공식 디자인 가이드(HIG: Human Interface Guidelines)와 함께 개인적인 해석을 더해 설계 포인트를 정리해보았습니다.

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

📱 iPadOS 디자인 개요

iPad는 작업, 창작, 소비 활동이 모두 가능한 생산성 중심 디바이스로,
입력 방식과 사용 환경이 매우 다양하기 때문에 디자인 시 고려할 요소가 많습니다.

iPadOS 디바이스의 주요 특징과 설계 고려사항

🖥️ 디스플레이

📌 애플 문서 기반 요약

  • iPad는 크고 고해상도 디스플레이를 탑재하고 있습니다.

💡 설계 포인트

  • iPhone과 달리 넓은 화면을 바탕으로 다양한 정보와 기능을 동시에 보여줄 수 있습니다.
  • 하지만 화면이 넓다고 해서 모든 정보를 한 번에 담으려 하면 가독성이 떨어질 수 있으므로, 정보의 우선순위를 고려한 콘텐츠 배치가 중요합니다.

🤲 인체공학 (Ergonomics)

📌 애플 문서 기반 요약

  • iPad는 손으로 들고 사용도 가능하고, 책상에 두고 사용할 수도 있습니다
  • 보통 시야 거리는 iPhone 보다는 멀은 90cm 이내 입니다.

💡 설계 포인트

  • 기기의 위치가 다양하게 사용될 수 있기 때문에 다양한 사용자의 자세와 시야각을 고려해야합니다.
  • 손에 들고 쓸 경우에는 하단 버튼 위치에 쉽게 접근할 수 있지만, 스탠드 사용 시에는 상단, 중앙도 자연스러운 인터랙션 위치가 될 수 있습니다.
  • iPhone을 사용할 때보다는 멀은 곳에서 화면을 바라보기 때문에 너무 작은 컨텐츠는 지양하는 것이 좋습니다.
  • 모바일 사용 분석 업체 Onswipe의 조사에 따르면, 약 60%의 iPad 사용자가 주로 가로 모드를 사용하며, 41%는 세로 모드를 사용했다는 결과가 있습니다.
    • 가로 모드: 영상 시청, 게임 플레이, 키보드 기반 생산성 작업
    • 세로 모드: 웹 서핑, eBook/문서 읽기, 필기 등 정보 탐색 중심의 활동
    • 특히 세로 모드에서는 스탠드 없이 손에 들고 사용하는 경향이 많은 활동 중심이기에, 세로모드 UI 설계 시 손이 닿기 쉬운 하단에 주요 버튼을 배치하는 설계가 더욱 중요하다고 생각합니다.
      • 방법1: traitCollectionDidChange(_:)
      • 방법2: viewWillTransition(to:)
      • SwiftUI : GeometryReader, horizontalSizeClass

⌨️ 입력 (Input)

📌 애플 문서 기반 요약

  • 멀티터치, 키보드, 마우스, Apple Pencil, 음성 입력 등 다양한 입력 방식 지원합니다.
  • 여러 입력 모드가 혼합되어 사용됩니다.

💡 설계 포인트

  • 입력 방식에 따라 다르게 반응하는 인터페이스 설계가 필요합니다.
    • UIKeyCommand: 키보드 단축키 대응
    • UIHoverGestureRecognizer, UIPointerInteraction: 마우스 커서 대응
  • Apple Pencil 입력 시, 손가락 제스처와의 충돌 없이 자연스럽게 상호작용하도록 설계해야 합니다.
    • PencilKit, Scribble 등 Pencil 관련 API 활용

🔄 앱 상호작용

📌 애플 문서 기반 요약

  • 간단한 작업부터 몰입형 작업까지 모두 사용됩니다.
  • 앱을 동시에 열고, 화면 분할 및 드래그앤 드롭 기능이 자주 사용됩니다.

💡 설계 포인트

  • 기존 iPadOS에서는 Split View 기반의 고정된 화면 분할이 중심이었습니다.하지만 iPadOS 26에서는 Mac처럼 자유로운 창 관리 시스템(Stage Manager)이 도입되어, 사용자가 앱의 창 크기와 위치를 자유롭게 조절할 수 있게 되었습니다.
    iPadOS 26에 대해서는 다른 글에서 자세히 정리하겠습니다.
  • 이에 따라:
    • 창 크기 변화에 유연하게 반응하는 레이아웃 설계가 중요해졌습니다.
    • 창의 너비·높이 비율 변화까지 고려한 반응형 UI가 필요합니다.
    • 여전히 구형 iPadOS를 사용하는 사용자도 많기 때문에, OS 버전에 따른 분기 처리가 필수입니다.
      • #available(iPadOS 26, *) 등을 통해 조건 처리
    • 다중 인스턴스 대응을 위해 SceneDelegate를 활용한 상태 관리도 고려해야 합니다.
  • 드래그 앤 드롭 시에는 어떤 데이터를 어떻게 이동시킬지에 대한 설계도 중요합니다.
    • UIDragInteraction, UIDropInteraction API를 활용하여 앱 간/앱 내 콘텐츠 이동을 구현합니다.

🧩 시스템 기능

📌 애플 문서 기반 요약

  • iPadOS는 사용자 경험 향상을 위한 다양한 시스템 기능을 제공합니다.
    • 위젯
    • 멀티태스킹
    • 드래그 앤 드롭

💡 설계 포인트

  • 다음의 시스템 기능들을 제공하지 않으면 iPadOS 답지 않은 앱이라는 인상을 줄 수 있기에 시스템 기능들을 무시하지 않도록 설계해야합니다.

✅ 올바른 iOS 앱 디자인을 위한 모범 사례

  1. 대형 디스플레이 활용
    • 중요한 콘텐츠에 시선을 집중시키고,
    • 모달/전체 화면 전환은 최소화
    • 버튼과 컨트롤은 쉽게 닿되 방해되지 않는 위치에 배치
  2. 시청 거리와 입력 모드 고려
    • 콘텐츠 크기와 밀도는 사용자의 시야 거리(ex. 90cm)와 사용하는 입력 방식에 맞게 설계
  3. 다양한 입력 모드 통합
    • 터치, 키보드, 트랙패드, Apple Pencil 등 다양한 입력을 지원하고 혼합 사용도 고려한 UX 설계
  4. 모양 변화에 유연하게 대응
    • 기기 방향, 멀티태스킹, 다크 모드, 동적 글꼴 등 사용자 설정 변화에 레이아웃이 자동으로 적응되도록 구성
  5. 플랫폼 간 전환 용이성
    • macOS에서도 실행 가능하도록 크로스 플랫폼 대응 구조 고려

✍️ 마무리

iPadOS를 지원하는 앱 프로젝트를 진행할 때 느낀점은, 단독 앱보다는 iOS나 macOS와의 크로스플랫폼으로 개발되는 경우가 많아 그에 따른 UI/UX 대응이 훨씬 까다롭다는 것이었습니다.

특히 이번 iPadOS 26 업데이트 이후에는 윈도우 크기 조절, 다중 창, 플랫폼 간 호환성까지 고려해야 하므로, OS 버전 분기와 레이아웃 설계에 더욱 신경 써야 할 부분이 많아졌습니다.

공부하면 할수록 iPadOS는 단순한 태블릿 OS가 아니라, 정교한 사용 경험을 요구하는 복합적인 운영체제라는 생각이 들었습니다.

저작자표시 (새창열림)