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

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

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

💻 watchOS 디자인 개요

watchOS는 “간결하고 직관적인 정보 전달 + 빠른 조작(moments of glance)” 중심의 플랫폼입니다

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

🖥️ 디스플레이

📌 애플 문서 기반 요약

• 손목에 딱 맞는 작은 디스플레이 + 고해상도 디스플레이를 탑재하고 있습니다.💡 설계 포인트
• 화면공간이 매우 제한적이여서 나타낼 수 있는 정보량이 적습니다.
• 즉 필수정보만 표시하고 간단한 UI를 통해 조작해야합니다. (한 번에 한 가지 정보만 보여주는 구조가 바람직합니다.)
• 기본 UI는 검은색 배경을 바탕으로
  • 고대비 색상, 큰 글씨체 → font(.title2).bold(), accessibilityFont() 등 사용
  • 다크 모드 전용 → 배경색 지정하지 않고 기본 .background(Color.clear) 또는 생략 상태를 유지

---

🤲 인체공학 (Ergonomics)

📌 애플 문서 기반 요약

• 사용자는 Apple Watch를 손목에서 약 30cm 거리에서 바라보며, 반대 손으로 조작합니다.
• Always On Display 기능을 사용하면 손목을 내려놓더라도 시계 화면의 정보를 확인할 수 있음💡 설계 포인트
• 짧은 시간 동안 손목을 들어 사용하는 맥락에 맞게 빠르고 직관적인 정보 전달이 중요합니다.
• 고정 위치 버튼을 위한 toolbar, bottomBar 사용할 수 있습니다.

---

⌨️ 입력 (Input)

📌 애플 문서 기반 요약

• 디지털 크라운으로 스크롤, 탐색, 값 조정
• 탭/스와이프/드래그, 물리 버튼, 센서 값 등 다양하게 입력 가능.

💡 설계 포인트

• 디지털 크라운의 회전이나 제스처를 자연스럽게 앱 탐색 흐름에 녹여내는 설계가 중요합니다.
  • 디지털 크라운 입력처리 : digitalCrownRotation(_:)
  • 간단한 제스쳐 처리 : .onTapGesture, .gesture, .swipeActions
• 센서값을 활용한 다양한 워치앱 개발 가능합니다. ->- HealthKit, CoreMotion 등 프레임워크를 사용한 개발 가능

---

🔄 앱 상호작용

📌 애플 문서 기반 요약

• 사람들은 하루에도 여러 번, 1분 미만의 짧은 시간 동안 Apple Watch 앱과 상호작용합니다.
• 앱 자체보다는 컴플리케이션, 알림, Siri 상호작용 등 앱 외부 요소로 경험이 이루어지는 경우가 많습니다.

💡 설계 포인트

• 앱은 즉시 실행 가능하고, 빠르게 조작을 끝낼 수 있도록 설계되어야 하며 컴플리케이션과 알림 기반의 흐름을 고려해 앱의 핵심 기능을 외부로 확장할 수 있어야 합니다.
• 빠른 앱 설계를 위해 앱 로딩 최소화를 고민해볼 수 있으며 @SceneStorage, AppStorage, onAppear 캐싱 등 적극 활용하는 것이 중요합니다.

---

🧩 시스템 기능 (iOS 고유 기능)

📌 애플 문서 기반 요약

watchOS는 사용자가 익숙하고 일관된 방식으로 시스템과 앱을 다룰 수 있도록 다양한 시스템 기능을 제공합니다.

• Complications
• 알림
• Always On
• Watch Faces

💡 설계 포인트

• 알림: UNUserNotificationCenter와 Notification Extension으로 구현
• 컴플리케이션: WidgetKit 기반 위젯 사용
• 시리 응답: Intents extension으로 음성 명령 처리
• Haptic 피드백: WKInterfaceDevice.current().play(.success) 등으로 진동 피드백 제공

---

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

1. 한눈에 들어오는 단일 화면 상호작용으로 최대 1~2번의 제스처로 완료되는 UI 설계
2. 탐색 계층은 얕고 디지털 크라운을 활용한 수직 흐름 설계 제공
3. 사용자의 상황이나 상태를 예측한 UX를 통해 개인화된 경험 제공
4. watchOS 시스템 기능(알림, 컴플리케이션, Siri 등)과 연동하여 앱 경험을 확장하고, 앱 자체로도 완결성 있게 설계

---

✍️ 마무리

watchOS는 손목 위의 짧고 집중된 상호작용을 설계해야 하는,
기존 iOS나 macOS와는 전혀 다른 사용자 경험을 요구하는 플랫폼입니다.

직접 SwiftUI로 워치 앱을 개발해보며, UI를 구현하는 과정은 비교적 간단했지만,
오히려 그 단순함을 유지하면서도 사용자의 흐름에 맞게 정보와 기능을 정제하는 일이 더 어렵게 느껴졌습니다.
작은 화면에서 최소한의 제스처로 원하는 정보를 전달하기 위해선
정보 구조, 인터랙션 흐름, 입력 방식까지 모두 처음부터 다시 설계해야 했습니다.

이번 학습을 통해 돌아보니, 제가 만들었던 워치 앱은 iOS 앱의 보조 기능에 가까운 형태였고,watchOS 고유의 기능들을 충분히 활용하지 못하고 있었음을 깨달았습니다.
watchOS만의 컨텍스트와 기능들을 적극 활용한다면, 보다 독립적이고 강력한 앱으로 발전시킬 수 있다는 가능성을 확인할 수 있었습니다.

watchOS 앱을 설계하는 과정은 사용자의 맥락과 사용 순간을 예측해 흐름을 설계하는 능력이 더욱 중요하다는 것을 느꼈습니다.