애플워치 지도 UI 하나에 6년을 갈아 넣은 이야기

손목 위 지도라는 꽤 빡센 문제

• 글쓴이는 야생 하이킹을 자주 하는 개발자고, 길을 잃지 않는 핵심 습관으로 “이동하면서 위치를 자주 확인하는 것”을 꼽음

  • 그래서 가장 좋은 인터페이스는 폰을 꺼내는 게 아니라 손목에서 바로 지도를 보는 방식이었다고 함
  • 이 목표를 위해 Pedometer++의 애플워치 지도 경험을 6년 넘게 다듬어 왔고, Pedometer++ 8 출시와 함께 어느 정도 결론에 도달했다고 봄

• 초반에는 서버에서 지도를 만들어 애플워치로 보내는 방식부터 시작함

  • 운동 데이터를 서버로 왕복시켜 지도 이미지를 갱신하는 구조였음
  • 아이디어 검증에는 쓸 수 있었지만, 내비게이션처럼 자주 확인해야 하는 용도에는 느리고 불편했음
  • 오프라인에서도 당연히 동작할 수 없어서 “실사용 지도”로 가기엔 구조적으로 한계가 컸음

SwiftUI로 직접 지도 엔진을 만든 이유

• 전환점은 watchOS 6에서 SwiftUI가 들어오면서 시작됨

  • 이때부터 애플워치에서 좀 더 현실적인 “진짜 앱”을 만들 수 있게 됐다고 봄
  • 다만 초기 애플워치는 화면도 작고 프로세서도 느려서 원하는 수준까지 가기엔 여전히 빡셌음

• 글쓴이는 결국 더 낮은 레벨에서 제어해야 한다고 판단하고 SwiftUI 네이티브 지도 렌더링 엔진을 직접 만듦

  • watchOS에서 쓸 수 있는 선택지가 SwiftUI 중심이었고, 위젯도 SwiftUI만 지원했기 때문에 이 방향이 자연스러웠음
  • 2021년쯤에는 타일 기반 지도를 안정적으로 렌더링하고, 그 위에 위치 정보를 얹을 수 있는 수준까지 도달함

• MapKit을 쓰지 않은 것도 단순 취향 문제가 아니었음

  • 글쓴이는 MapKit이 기본적인 지도 용도에는 훌륭하지만, Pedometer++가 원하는 설정 가능성과 유틸리티에는 부족하다고 봄
  • 특히 운동 기록, 지도 타일, 위치 오버레이, 작은 화면 UI를 세밀하게 맞추려면 자체 엔진이 더 맞는 선택이었다는 쪽임

UI는 계속 망하고, 그래서 계속 바뀜

• watchOS 앱 디자인의 핵심 난제는 화면이 작고 한 손으로 조작해야 한다는 점임

  • 지도는 읽기 쉬워야 하고, 팬과 줌도 되어야 함
  • 동시에 운동 거리, 시간, 페이스 같은 지표도 보여줘야 함
  • 둘 다 중요하지만 같은 화면에 우겨 넣으면 바로 복잡해지는 조합임

• 처음에는 지도 화면과 지표 화면을 버튼으로 전환하는 “모달” 방식에 정착했음

  • 왼쪽 위 버튼으로 지도와 메트릭 화면을 오가는 구조였음
  • 지도 화면에서는 자유롭게 팬과 줌을 하고, 지표 화면에서는 watchOS의 일반적인 탭 페이지 UI를 활용할 수 있었음
  • 실제로 출시까지 했지만, 글쓴이는 계속 타협안 같은 느낌을 받았다고 함

• 이후에는 지표를 하단에 두는 방식 등 여러 레이아웃을 계속 시도함

  • 문제는 대부분의 디자인이 한 번에 고정된 필드 몇 개만 보여줄 수밖에 없었다는 점임
  • 설정 가능하게 만들 수도 있었지만, watchOS에서는 몇 초 이상 걸리는 조작 자체가 별로임
  • 손목 위에서 설정을 만지작거리는 UX는 너무 번거롭기 때문에 좋은 해법으로 보기 어려웠음

지도 타일까지 새로 만든 이유

• watchOS 26과 Liquid Glass도 큰 변수였음

  • Liquid Glass는 반투명 레이어를 겹쳐 올리는 디자인 언어라, 배경이 되는 지도 색감과 대비가 UI 가독성에 직접 영향을 줌
  • 기존에는 Thunderforest Outdoors를 베이스맵으로 썼는데, 유리 느낌 요소를 올리니 잘 어울리지 않았다고 함

• 그래서 아예 커스텀 지도 타일을 의뢰함

  • 지도 제작자 Andy Allen과 함께 Pedometer++에 맞는 새 베이스맵을 만듦
  • 시각 요소를 단순화하고, 대비를 높이고, 색을 더 선명하게 조정함
  • 목적은 유리 UI 아래에서도 지도가 탁하게 뭉개지지 않게 만드는 것이었음

• 이 작업 덕분에 다크 모드 지도도 제대로 만들 수 있게 됨

  • iOS에서도 도움이 되지만, 손목 거리에서 읽어야 하는 watchOS에서는 효과가 훨씬 큼
  • 핵심은 “예쁜 지도”가 아니라 팔을 뻗은 거리에서도 지형과 경로가 읽히는 지도였음

최종 해법은 레이어링과 탐색 모드

• 디자인 파트너 Rafa Conde가 제안한 레이아웃에서 최종 방향이 잡힘

  • 운동 지표를 지도 위 왼쪽 상단에 레이어처럼 올림
  • 지도는 세로 스택의 맨 위 페이지로 두는 구조를 택함
  • 평소에는 지표와 지도를 같이 보고, 지도를 탭하면 별도의 “탐색 모드”로 들어가 팬과 줌을 할 수 있음

• 이 방식은 watchOS의 제약을 꽤 영리하게 피함

  • 지도 조작과 페이지 스와이프가 충돌하지 않도록, 먼저 탭해서 지도 조작 모드에 들어가게 함
  • 지표는 항상 중요한 위치에 남기되, 지도를 완전히 가리지 않도록 올려둠
  • 작은 화면에서 정보량과 조작성을 동시에 챙기려면 이런 상태 전환이 필요했던 셈임

• 글쓴이는 이 프로토타입을 실제로 몇백 마일 걸으며 검증했다고 함

  • 책상 위에서 예뻐 보이는 UI가 아니라, 야외에서 계속 확인해도 읽히고 쓸 수 있는지를 본 것임
  • 이후 폰트와 세부 디자인을 더 다듬어 Pedometer++ 8에 최종 반영함

---

기술 맥락

• 이 글에서 제일 큰 선택은 MapKit에 기대지 않고 SwiftUI 기반 커스텀 지도 렌더링 엔진을 만든 거예요. 기본 지도 표시만 필요했다면 MapKit이 훨씬 빠른 길이었겠지만, Pedometer++는 운동 데이터와 지도 타일, 위치 오버레이를 손목 화면에 맞춰 세밀하게 조합해야 했거든요.

• 서버에서 지도 이미지를 만들어 보내던 초기 방식은 아이디어 검증에는 괜찮았지만, 내비게이션 제품에는 맞지 않았어요. 위치를 자주 확인해야 하는데 매번 서버 왕복이 필요하면 반응성도 떨어지고, 산이나 외딴 지역처럼 네트워크가 불안정한 곳에서는 바로 약점이 드러나거든요.

• UI 쪽 선택도 비슷해요. 지도와 운동 지표를 한 화면에 그냥 넣으면 작고 복잡해지고, 설정 화면을 많이 만들면 watchOS 사용 패턴과 안 맞아요. 그래서 지도는 탭했을 때 탐색 모드로 들어가게 하고, 평소에는 핵심 지표를 레이어로 얹는 구조가 나온 거예요.

• 커스텀 베이스맵을 만든 이유도 단순한 브랜딩이 아니에요. Liquid Glass처럼 반투명 UI를 지도 위에 올리면 배경 색과 대비가 가독성을 크게 흔들어요. 그래서 색을 더 선명하게 하고 요소를 단순화한 지도 타일이 필요했던 거예요.