watchOS에서 지도를 완성하는 데 걸린 6년
4 hours ago
2
- Pedometer++의 watchOS 지도 기능은 6년 이상 Apple Watch에서 가능한 최선의 지도 경험을 목표로 다듬어졌고, Pedometer++ 8 출시로 중요한 도달점에 이름
- 초기 시도는 서버에서 지도를 생성해 Apple Watch에 표시하는 방식이었지만, 운동 데이터를 매번 왕복 전송해야 해 내비게이션과 일상 사용에는 실용적이지 않았고 오프라인에서도 동작할 수 없었음
- watchOS에서 필요한 제어를 얻기 위해 SwiftUI 네이티브 지도 렌더링 엔진을 직접 만들었고, 2021년에는 타일 기반 지도를 안정적으로 렌더링하고 위치 정보를 오버레이할 수 있게 됨
- watchOS 26과 Liquid Glass에 맞추기 위해 Andy Allen과 새로운 기본 지도를 제작했으며, 시각적 복잡도를 줄이고 대비와 채도를 높여 유리 같은 요소 아래에서도 읽기 쉽게 만듦
- Rafa Conde와 협업해 지표를 왼쪽 위에 레이어링하고 지도를 세로 스택의 맨 위 페이지로 두는 새 레이아웃을 만들었으며, 수백 마일의 현장 검증을 거쳐 Pedometer++ 8의 최종 디자인에 반영됨
Pedometer++의 watchOS 지도 여정
- 산이나 야외에서 길을 잃지 않기 위한 핵심 습관은 이동 중 현재 위치를 매우 자주 확인하는 것이며, 손목 위 지도가 이를 위한 가장 좋은 방식으로 쓰임
- Apple Watch 출시 초기부터 손목 위의 좋은 지도를 원했지만, 현실적으로는 watchOS 6에서 SwiftUI가 도입되고 “진짜” 앱을 만들 수 있게 된 뒤에야 가능성이 생김
- 초기 Apple Watch는 화면이 작고 프로세서가 느려 원하는 수준에 도달하기 어려웠으며, Pedometer++의 첫 지도 시도는 서버에서 지도를 생성하는 방식이었음
- 이 서버 생성 방식은 관련 운동 데이터를 매번 왕복 전송해야 화면을 새로고침할 수 있어 아이디어 검증에는 유용했지만, 내비게이션이나 일상적 사용에는 실용적이지 않았고 오프라인에서도 동작할 수 없었음
SwiftUI 기반 커스텀 지도 엔진
- watchOS에서 진전하려면 더 낮은 수준의 제어가 필요했기 때문에 완전한 SwiftUI 네이티브 지도 렌더링 엔진을 직접 구축함
- SwiftUI는 당시 watchOS가 지원하는 선택지였고, SwiftUI만 지원하는 위젯에 지도를 넣는 데도 도움이 됨
- 2021년에는 watchOS에서 지도를 안정적이고 성능 좋게 렌더링할 수 있는 수준에 도달함
- 이 엔진은 타일 기반 지도를 렌더링하고 그 위에 위치 정보를 오버레이할 수 있음
watchOS 화면 설계의 제약
- watchOS 앱 설계는 작은 화면과 한 손 조작이라는 제약 때문에 재미있지만 답답한 과제였음
- 목표는 사용자가 지도를 읽고 내비게이션에 활용하면서도 운동 관련 정보에 접근할 수 있게 만드는 것이었음
- 여러 설계 시도 끝에 한동안은 왼쪽 위 버튼으로 지도 화면과 지표 화면을 전환하는 모달 방식을 채택함
- 이 방식은 한 화면에서는 지도를 자유롭게 이동·확대·축소할 수 있고, 다른 화면에서는 watchOS의 일반적인 탭 페이지 인터페이스로 지표와 제어를 제공할 수 있었음
- 하지만 이 설계는 타협처럼 느껴졌고, 지도를 인터랙티브하게 만들려면 스와이프가 필요한 UI 구조 안에 지도를 넣기 어려웠음
- Apple Watch 화면이 커지면서 지도를 유용하게 만들기 위해 별도 공간을 강하게 분리할 필요가 줄어든 것으로 보임
- 이후 지표를 화면 아래에 배치하는 방안도 검토했지만, 긴 외출이나 내비게이션 중심이 아닌 운동에서는 다른 한계가 생김
- 여러 설계안은 공통적으로 앱이 한 번에 고정된 필드 집합만 표시해야 한다는 한계를 가졌음
- 인터페이스를 사용자가 구성할 수 있게 만들 수도 있었지만, watchOS 설계에서는 몇 초 이상 걸리는 상호작용을 피해야 하며 사용자 설정은 본질적으로 번거롭기 때문에 적합하지 않았음
Liquid Glass와 맞춘 새 지도 제작
- 앱 구조 설계가 계속 고민되던 시점에 Apple이 watchOS 26과 Liquid Glass를 발표함
- Liquid Glass의 핵심 설계 요소는 요소를 겹겹이 쌓는 레이어링이며, 서로 잘 맞는 색의 유형도 중요했음
- 기존에는 앱의 기본 지도에 Thunderforest Outdoors를 사용했으며, 포함된 콘텐츠는 좋았지만 유리 같은 요소를 얹었을 때 Liquid Glass에 잘 맞지 않았음
- 지도 제작자 Andy Allen과 함께 Liquid Glass에서 잘 보이도록 완전히 새로운 기본 지도를 제작함
- 새 지도에서는 시각적 복잡도를 줄이고, 요소의 대비를 높이며, 유리 아래에서 탁하게 뭉개지지 않도록 지도 요소의 채도를 높임
- 이 작업을 통해 지도 타일의 다크 모드 변형도 만들 수 있게 됨
- 다크 모드는 iOS에서도 유용하지만 watchOS에서 특히 효과가 컸고, 팔 길이 거리에서도 매우 읽기 쉬운 지도를 목표로 조정함
- 결과적으로 watchOS에 적합한 지도가 생겼지만, 그 수준에 맞는 앱 설계는 아직 부족했음
Rafa Conde와 새 레이아웃
- 설계 정체를 벗어나기 위해 디자이너 Rafa Conde와 협업함
- 여러 대안 레이아웃 중 지표를 왼쪽 위에 레이어링하고, 지도를 세로 스택의 맨 위 페이지로 두는 설계가 최종 방향이 됨
- 이 설계는 지도를 먼저 탭해야 탐색 모드로 들어가도록 만들어 인터랙티브 지도의 문제를 처리함
- 전체 콘셉트가 정해진 뒤 실제 앱을 만들고 세부 요소를 다듬는 작업이 이어짐
- Rafa의 콘셉트는 빠르게 동작하는 프로토타입으로 구현됐고, 수백 마일을 걸으며 현장에서 검증됨
- 이후 글꼴과 더 미묘한 디자인 선택을 다듬어 Pedometer++ 8에 포함된 최종 디자인에 도달함
- 최종 화면은 읽기 쉽고 유용하며, watchOS 플랫폼에 자연스럽게 맞으면서도 새롭고 독특한 디자인으로 정리됨
MapKit을 쓰지 않은 이유
- watchOS용 Apple MapKit이 등장하기 전부터 커스텀 지도 작업이 진행됐으며, MapKit 대신 직접 구현한 이유는 Pedometer++에 필요한 구성 가능성과 유틸리티가 부족했기 때문임
- MapKit은 기본적인 용도에는 좋지만, Pedometer++가 제공하려는 수준의 제어를 제공하지 못했음
- watchOS의 MapKit은 항상 다크 모드로 표시되며, 기본값으로는 좋을 수 있지만 접근성과 사용자 선택 측면에서 한계를 만들기 때문에 사용자가 선택할 수 있어야 했음
- watchOS의 MapKit은 시간이 지나며 할 수 있는 일이 늘었지만, 애니메이션과 오버레이 측면에서는 여전히 제한적이었음
- MapKit의 지형 등고선과 트레일 표시 범위는 개선되고 있지만, MapKit 지도가 거의 비어 있는 곳에서도 더 풍부한 세부 정보가 필요한 장소가 많았음
- 예시로 스코틀랜드의 좋아하는 하이킹 코스 입구에서 커스텀 지도와 MapKit의 차이를 비교함
-
Homepage
-
Tech blog
- watchOS에서 지도를 완성하는 데 걸린 6년