WatchOS에서 Maps를 완성한 지 6년

Source: Hacker News

나는 야생 모험을 즐긴다. 사람 한 명 보이지 않는 산속에 있을 때보다 더 행복한 순간은 거의 없다. 그래서 나는 문명에서 떨어져 있을 때 안전하게 탐험하고 길을 찾는 방법을 배우는 데 많은 시간을 투자했다. 내가 길을 잃지 않기 위해 가장 중요하다고 생각하는 습관은 이동 중에 매우 규칙적으로 현재 위치를 확인하는 것이며, 이를 가장 잘 할 수 있는 방법은 손목에 지도를 두는 것이다.

6년 넘게 나는 Apple Watch에서 가능한 최고의 지도 경험을 만들기 위해 노력해왔다. 어제 발표된 Pedometer++ 8의 출시와 함께, 이 디자인 여정이 의미 있는 목적지에 도달했다고 느낀다. 나는 Pedometer++의 watchOS 지도 지원이 App Store에서 제공되는 가장 뛰어난 지도 기능이라고 주장하고 싶다.

그래서 여기까지 오기까지의 여정을 차근차근 살펴보고자 한다.

초기 시도

Apple Watch가 출시된 이후로 손목에 좋은 지도를 갖고 싶었습니다. 이는 watchOS 6이 등장해 SwiftUI가 플랫폼에 도입되고, 처음으로 “실제” 앱을 만들 수 있게 되기 전까지는 현실적으로 불가능했습니다. 하지만 초기 시절에는 화면이 작고 프로세서도 느렸기 때문에 원하는 수준에 아직 도달하지 못했습니다.

이것이 제가 Pedometer++에 처음으로 탑재한 시도였습니다. 이 지도들은 완전히 서버에서 생성되었으며, 화면을 새로 고칠 때마다 관련 운동 데이터를 왕복 전송해야 했습니다. 이 시스템을 통해 아이디어를 검증할 수 있었지만, 내비게이션이나 일상적인 사용에 실용적으로 활용되기엔 한계가 있었고, 오프라인에서는 절대 작동하지 못했습니다.

맞춤 지도 엔진

목표를 향해 진전을 이루려면 더 낮은 수준에서 작업해야 한다는 것을 알았고, 그래서 완전한 SwiftUI‑네이티브 지도 렌더링 엔진을 만들기 시작했습니다. SwiftUI는 watchOS가 지원하는 전부였고, 위젯에도 SwiftUI만 지원되기 때문에 지도 위젯을 넣는 데도 도움이 되었습니다.

2021년에 이 엔진을 watchOS에서 지도를 안정적이고 성능 좋게 렌더링할 수 있는 단계까지 끌어올렸습니다. 이를 통해 타일 기반 지도는 물론, 그 위에 위치 정보를 오버레이할 수도 있습니다.

지도 디자인

다음으로는 데이터를 사용자에게 어떻게 가장 잘 보여줄지에 대한 질문이 나왔습니다. watchOS에서의 앱 디자인은 정말 재미있지만—답답하기도 한—도전입니다. 비교적 작은 화면을 한 손으로 조작해야 합니다. 이 경우, 사용자가 지도를 읽고 탐색에 사용할 수 있게 하면서, 다른 운동 관련 정보에도 접근할 수 있기를 원합니다.

이것은 긴 디자인 시도들의 연속을 시작했으며, 대부분은 (솔직히 말하면) 꽤 형편없었습니다.

결국, 왼쪽 상단 모서리의 버튼을 사용해 지도 화면과 메트릭 화면을 전환할 수 있는 “모달” 접근 방식으로 정착했습니다.

이 인터페이스는 사용자가 자유롭게 지도에서 팬/줌을 할 수 있는 하나의 컨텍스트와, 메트릭 및 컨트롤을 위한 보다 표준적인 watchOS 탭 페이지 인터페이스를 사용할 수 있는 또 다른 컨텍스트를 제공합니다. 이를 Pedometer++에 적용했지만, 항상 뭔가 마음에 들지 않는 부분이 있었습니다.

디자인은 타협처럼 느껴졌고, 좋은 의미의 타협은 아니었습니다. 지도를 인터랙티브하게 만들기 위해서는 스와이프와 관련된 UI 구조에 포함시킬 수 없었습니다. Apple Watch의 화면이 커지면서 지도 공간을 희생할 필요성이 줄어들었습니다.

그래서 대안 디자인을 시도해 보기 시작했습니다. 정말 많은 디자인을 만들었습니다.

한동안은 메트릭을 화면 하단에 배치하는 방법을 찾아야 한다고 생각했지만, 이는 장시간 외출이나 탐색 중심이 아닌 운동에서는 다른 문제를 야기했습니다. 계속해서 반복 작업을 거쳐 더 많은 디자인을 만들었습니다.

이 모든 디자인은 동일한 근본적인 문제를 가지고 있었습니다: 한 번에 고정된 필드 집합만 표시해야 한다는 점입니다.

인터페이스를 구성 가능하게 만들 수는 있겠지만, watchOS 디자인의 근본적인 규칙 중 하나는 손목 시계에서 몇 초 이상 걸리는 상호작용을 피해야 한다는 것입니다. 사용자 설정이 필요하면 본질적으로 번거로워지기 때문에 이 접근 방식은 마음에 들지 않았습니다.

다크 모드, 리퀴드 글라스, 그리고 지도 제작

같은 시기에 나는 여전히 앱을 어떻게 구조화할지 디자인 고민을 하고 있었고, Apple은 watchOS 26과 Liquid Glass의 출시를 발표했습니다. Liquid Glass의 핵심 디자인 요소 중 하나는 요소들을 서로 겹쳐 쌓는 것이지만, 또 다른 요소는 서로 가장 잘 어울리는 색상 유형입니다.

나는 이전에 앱의 베이스맵으로 Thunderforest Outdoors를 사용하고 있었습니다. 이 지도에 포함된 콘텐츠는 마음에 들었지만, 유리 같은 요소들을 겹쳐 놓으니 Liquid Glass에 잘 맞지 않는다는 것을 알게 되었습니다.

그래서… 맞춤형 지도를 의뢰했습니다. 뛰어난 지도 제작자 Andy Allen과 함께, Liquid Glass와 환상적으로 어울릴 완전히 새로운 베이스맵을 만들었습니다.¹

우리는 지도를 시각적으로 단순화하고, 요소들의 대비를 높였으며, 유리 아래에 표시될 때 흐릿해지는 것을 방지하기 위해 색상을 더 포화시켰습니다.

이제 지도 타일의 다크 모드 버전을 가질 수 있게 되었습니다. iOS에서는 유용하지만, watchOS에서는 특히 빛을 발합니다. Andy와 나는 손목에서 멀리 떨어져도 매우 읽기 쉬운 무언가를 만들기 위해 노력했습니다.

이러한 노력의 결과, 이제 watchOS용 훌륭한 지도를 갖게 되었지만, 그 위대함에 맞지 않는 디자인이 있었습니다.

위대함을 향해

I kept trying. To get me out of my design rut, I enlisted the help of the fantastic designer Rafa Conde. I needed a fresh set of eyes on this and very quickly, this partnership paid off. They proposed a variety of alternative layouts, but when I saw this one I knew it was the one.

The layering of the metrics on the top‑left corner, with the map being the top page of a vertical stack, was the correct answer. This design handles interactivity by requiring a tap on the map first to enter “browse mode”.

조정 및 다듬기

전체 개념을 확정하고 나니, 진짜 재미가 시작되었습니다: 실제로 앱을 만들고 모든 세부 사항을 조정하는 것이죠. 저는 라파의 개념을 꽤 빠르게 작업 가능한 프로토타입으로 바꾸었습니다. 이를 통해 현장에서(말 그대로) 아이디어를 검증할 수 있었습니다. 몇 백 마일을 걸으며 테스트해 본 결과, 올바른 접근이라는 확신이 들었습니다.

다음으로, 폰트를 미세하게 조정하고 더 섬세한 디자인 선택을 해야 했습니다.

조금 더 반복 작업을 거친 뒤, 어제 출시된 디자인에 도달했습니다. 가독성이 좋고 유용하며 (제 겸손한 의견으로) 아름답습니다.

6년 여정의 마무리를 이렇게 자랑스러운 디자인으로 할 수 있어 정말 기쁩니다. 이 화면은 그동안 쌓아온 노력과 배움을 모두 담고 있습니다. 이제 플랫폼에 네이티브하면서도 새롭고 독특한 느낌을 주는 디자인을 갖게 되었습니다.

지난 6년 동안 이 디자인이 어떻게 진화했는지 보여드립니다:

부록: MapKit 고려하기

제가 watchOS 매핑 작업을 시작한 시기는 Apple의 MapKit이 플랫폼에 도입되기 훨씬 이전이지만, 왜 이 모든 커스텀 작업을 선택했고 MapKit을 사용하지 않았는지 설명할 가치가 있습니다.

근본적으로, 저는 MapKit이 기본적인 용도에는 훌륭하지만 **Pedometer++**가 제공하고자 하는 수준의 구성 가능성과 유용성을 제공하지 못한다고 생각합니다. 예를 들어:

• watchOS의 MapKit은 항상 다크 모드로 표시되며, 이는 좋은 기본값이지만 접근성 및 사용자 선택 측면에서 문을 닫아 버립니다. 저는 이를 사용자가 선택할 수 있는 옵션으로 만들 필요가 있었습니다.
• 시간이 지나면서 watchOS의 MapKit이 개선되었지만, 애니메이션 및 오버레이 측면에서는 여전히 제한적인 느낌이 듭니다.
• MapKit의 지형 등고선 및 트레일 표시 지원이 점차 개선되고 있지만, 더 풍부한 세부 정보가 존재하는 많은 지역이 여전히 사실상 빈 화면으로 남아 있습니다. 예를 들어, 아래는 제가 좋아하는 스코틀랜드 하이킹 코스 트레일헤드에서의 제 지도와 MapKit을 비교한 모습입니다.

제 작업 덕분에 “카토그래퍼에게 의뢰했다”는 말을 할 수 있다는 점이 아직도 멋지다고 생각합니다. 😁

Footnotes

1. 커스텀 베이스맵은 watchOS 26에 도입된 Liquid Glass의 투명도 및 레이어링 효과를 보완하도록 특별히 설계되었습니다. ↩