30일 만에 Wear OS 앱 출시 (ft AI) #3

3장. 워치 UX와 화면 설계

 

이 장의 목표는 “작은 화면에서 바로 쓰이게” 만드는 설계법을 손에 익히는 것입니다. 워치는 시선 머무름이 짧고 한 손가락으로 조작합니다. 그래서 한 화면, 한 목적, 한 번의 만족을 설계 기준으로 삼겠습니다.

한눈에 쓰이게 하는 3대 원칙

• 한 목적: 화면마다 핵심 행동을 하나로 제한합니다(예: 시작/정지).
• 흘깃성: 5초 안에 상태와 다음 행동이 보이게 합니다.
• 절전성: 움직이는 요소·주기적 갱신을 최소화하고 필요할 때만 업데이트합니다.

정보 구조 미니 설계

• 홈: 현재 상태(예: 대기/진행/완료)와 핵심 버튼 1개.
• 주 행동: 실행 중 상태 표시, 남은/경과 시간, 취소/정지 한 가지 보조 행동.
• 예외: 빈 상태(처음 진입), 오류(권한/센서 실패), 오프라인 대체 흐름.
• 설정: 소수만 자주 쓰는 옵션만(진동 여부, 기본 목표 등). 깊이는 한 단계로 제한합니다.

네비게이션 패턴

• 기본: 단순 스택(뒤로 한 번)으로 왕복 가능한 구조.
• 보조 진입로: 타일/컴플리케이션/알림에서 바로 주 행동으로 진입.
• 하드웨어·제스처: 크라운 스크롤은 목록 탐색, 길게 누르기는 위험 동작(리셋) 방지용 확인창.

화면 레이아웃 요령

• 안전 영역: 원형 화면의 상·하단 곡률을 감안해 텍스트 끝이 잘리지 않게 여백을 둡니다.
• 시선 흐름: 상단은 상태(예: Running), 중앙은 핵심 정보(시간), 하단은 핵심 버튼.
• 구성 요소 선택:
  • 즉시 수행: Chip/Primary 버튼
  • 정보 묶음: Card(리스트를 만들 때)
  • 강조 수치: 큰 타이포 + 보조 라벨
• 스크롤: 한 화면에 다 담지 말고, “중요도 순”으로 위에서 아래로 배치합니다.

가독성과 터치 기준

• 터치 타깃: 최소 48dp, 요소 간 간격 8dp 이상.
• 대비: 텍스트 대비는 높은 편(대략 4.5:1 이상)을 유지하고 배경은 단색 위주.
• 타이포 크기 권장 범위:
  • 제목/상태: 18~22sp
  • 핵심 수치: 24~32sp(짧은 숫자는 크게)
  • 본문/설명: 14~16sp
• 줄바꿈: 한 줄 메시지는 12~16글자 내외로 끊고 말줄임은 최소화합니다(중요 정보는 절대 말줄임 처리 금지).

입력과 피드백

• 클릭 즉시 반응: 누르는 순간 시각·촉각 피드백(짧은 진동) 제공.
• 진행 표시: 원형 인디케이터나 미세한 변화를 사용하되 과도한 애니메이션은 피합니다.
• 오류 메시지: 짧고 해결 행동을 포함(예: “권한 필요 — 설정에서 허용”).

프로토타입–피드백 사이클(3단계)

1. 종이 스케치(10분): 원형 종이에 홈/주 행동/완료 3장만 먼저.
2. 저충실 프로토타입(30분): 대비·폰트·버튼 위치만 반영한 클릭 더미.
3. 고충실(1~2시간): 실제 시뮬레이터/기기에서 터치·스크롤·진동까지 점검.

• 복도 테스트 팁: 5명에게 30초 안에 “이 버튼이 무슨 의미인지”만 묻습니다. 설명 없이 성공하면 통과입니다.

예시: 랩타이머 앱 화면 설계

• 홈(대기): 상단 “Ready”, 중앙 00:00:00(큰 숫자), 하단 “시작” Primary Chip. 보조로 “목표 랩” 작은 설정 아이콘.
• 진행: 상단 “Running”, 중앙 현재 랩 시간 + 누적 랩 수, 하단 “랩 찍기”가 Primary, “정지”는 보조 스타일로 배치.
• 완료: 상단 “Finished”, 중앙 최고/평균 랩 2개 수치, 하단 “다시 시작”.
• 타일: “시작/정지” 토글만 표시해 손목을 올리자마자 작동.
• 컴플리케이션: 오늘 랩 횟수 또는 현재 랩 시간만 표시(숫자 1개 원칙).

접근성과 국제화

• 좌우 손목 고려: 하단 버튼은 중앙에, 가장 자주 쓰는 버튼은 엄지 닿기 쉬운 하단부.
• 색각 다양성: 단색 + 아이콘/레이블 병행으로 색 의존도 완화.
• 단위/지역: 시간/거리/날짜 형식은 시스템 설정을 따르고, 텍스트는 짧은 어휘로 준비합니다.

빈 상태·오류·오프라인 처리

• 빈 상태: “첫 사용 안내 1문장 + 시작 버튼”. 긴 튜토리얼은 피합니다.
• 오류: 원인 대신 해결 행동을 앞에 둠(“센서 연결 실패 — 다시 시도”).
• 오프라인: 핵심 기능은 기기 내에서 동작, 동기화는 배터리 충분·충전 중에 배치.

애니메이션과 항상 켜짐(잠깐 보기) 모드

• 애니메이션은 의미 전달에만 사용하고 반복 루프는 짧게.
• 항상 켜짐에서는 단색/낮은 갱신 빈도/정지된 형태로 대체해 번인과 배터리를 보호합니다.

작동성 점검 체크리스트

• 5초 룰: 홈→주 행동→피드백까지 5초 내 도달 가능한가
• 탭 수: 핵심 시나리오(시작→랩→정지)가 3탭 이내인가
• 가독성: 팔을 흔든 상태에서도 숫자가 읽히는가
• 대비: 야외 강한 빛과 실내 암부에서 모두 충분한가
• 오류 루프: 실패 후 복귀 경로가 한 번의 탭으로 가능한가

실전 팁

• 중요 버튼은 내용이 길어도 동사로 시작합니다(“시작하기”, “랩 찍기”).
• 동일 위치 동일 의미: 진행·완료 상황이 바뀌어도 버튼 위치는 고정해 근육 기억을 돕습니다.
• 목록은 3개 초과 시 “더보기”로 나눠 터치 실수를 줄입니다.

요약 포인트

• 한 화면 한 목적, 5초 내 가치 제공, 배터리 친화 설계가 핵심입니다.
• 원형 안전 영역·대비·터치 타깃만 지켜도 체감 품질이 크게 오릅니다.
• 타일/컴플리케이션/알림을 주 행동의 “지름길”로 설계하면 재방문이 높아집니다.

오늘의 수행 미션

• 홈/진행/완료 3화면을 종이로 그리고, 저충실 프로토타입까지 만든 뒤 5명 테스트.
• 탭 수와 5초 룰 점검표를 작성하고, 통과 못 한 항목은 레이아웃을 다시 단순화합니다.

 

타일 에시