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의 차이를 비교함
Read Entire Article