▲

watchOS에서 지도를 완성하는 데 걸린 6년

 (david-smith.org)
4P by GN⁺ 3시간전 | ★ favorite | 댓글 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의 차이를 비교함

함께 보면 좋은 글 β

▲
xguru 2시간전  [-]

등산은 안하는데 앱에 들인 노력은 엄청나네요
지도제작자를 고용했다니..

답변달기
▲
GN⁺ 3시간전  [-]
Hacker News 의견들

  • Apple Watch에 Apple 자체 제작 등산·지형도가 없다는 건 큰 실패처럼 보임. 가장 비싼 “탐험가용” Watch Ultra에도 없고, GPX 가져오기 같은 기능은 꿈에 가까움
    결국 라이프스타일 기기라지만 그래도 아쉬움

    • iPad용 계산기 앱 만드는 데도 10년 넘게 걸리지 않았나 싶음
    • 솔직히 Apple 제작 앱이 적을수록 생태계와 앱 품질 전반에는 더 낫다고 봄. 최근 Apple이 “sherlock”한 앱들은 품질이 딱히 좋지 않은데, 기본 제공 앱이 되면서 서드파티가 경쟁하기는 훨씬 어려워짐

  • 진화 과정이 훌륭하고, 가운데 정렬·대칭 UI 같은 디자인 관습에서 벗어나면 무엇을 만들 수 있는지도 보기 좋음. Apple Watch가 갖고 싶어질 정도임
    기사 스크린샷에 스코틀랜드에서 좋아하는 짧은 산책 코스 중 하나인 Glen Coe의 Hidden Valley가 보임
    다만 그 계곡 아래 집에 얽힌 기억은 덜 유쾌함. 예전에는 차로 지나가며, 산 사이 외딴 구석에 늘 닫혀 있던 그 집을 꿈꾸듯 바라봤고, 저런 곳에 살면 얼마나 특별할까 생각했음. 등산로 주차장은 길 위로 몇백 미터만 가면 있었음
    몇 년 뒤 Louis Theroux 다큐에서 그 집을 알아봤는데, 소유자인 TV 인물 Jimmy Saville과 함께 그곳을 방문하는 내용이었음. 이후 호주로 돌아간 뒤 Saville이 사후에 영국에서 가장 악명 높은 아동·성범죄자 중 하나였다는 사실이 드러났고, 정말 끔찍했음. 스크린샷 지도 상단에 그 오두막의 이름과 윤곽이 실제로 보임

  • 궁금해서 찾아보니, 등산로처럼 Apple Maps에 없는 세부 정보를 넣기 위해 지도 제작자를 고용해 크고 보기 좋은 맞춤 지도 이미지를 만든 것으로 보임
    그래서 동적으로 렌더링되는 Apple Maps와 달리 기본적으로 이미지 타일을 보여주는 방식임. 더 보기 좋고 자세한 지도를 만들 수 있지만, 줌 단계별 별도 다운로드, 회전, 업데이트 가능성 같은 부분에는 영향을 줌

    • 지도 제작자를 써서 별도 디자인을 만드는 것과, 그 디자인을 렌더링·전달하는 기술은 완전히 별개의 문제임
      원래 지도 제공자는 벡터 타일과 래스터 타일 서비스를 둘 다 제공함: https://www.thunderforest.com/maps/outdoors/
      흔한 방식은 벡터 타일 서비스와 스타일 정의를 직접 쓰거나, 필요하다면 래스터 타일을 생성하는 것임
    • Apple이 Apple Watch의 Metal 그래픽 API를 서드파티 개발자에게 열어주지 않아서, 이런 동적 렌더링 자체가 불가능할 수도 있다고 봄

  • Pedometer++ 사용자로서 David가 수년간 유지해 온 디테일 집착이 놀라움. 앱의 진화가 정말 대단함

    • 정말 헌신적인 개발자임. 여기서도 “그래서… 맞춤 지도를 의뢰했다”, 즉 지도 제작자를 고용한 게 완벽한 예시임
      이전에 Watchsmith에 공을 들인 덕분에 사실상 위젯 분야의 세계적 전문가가 됐고, 그래서 Widgetsmith로 크게 성공한 과정도 멋졌음. 더 잘될 만한 사람에게 잘된 경우라고 봄

  • 시계에서는 정적 타일이 맞는 선택임. 제약이 큰 기기에서 동적 렌더링을 해본 적이 있는데, 이동·확대/축소가 매 프레임 가비지 컬렉션 일시정지에 잡아먹혔음

    • watchOS에는 가비지 컬렉션이 없고 ARC를 사용함

  • WatchOS의 Apple Maps는 꽤 좋지만, 보통 자전거에 올라 경로를 설정하고 3분쯤 지나면 “운동 중인가요?” 화면이 덮어써서 멈춰 끄기 전까지 지도를 볼 수 없음
    그 화면은 전체 화면을 차지하지 말고 알림으로 바뀌거나, 시간이 지나면 조용히 기록만 시작해야 한다고 봄
    Apple에서 이걸 개발하는 사람들이 있다면 분명 이 문제를 겪을 텐데 놀라움
    이 앱의 지도가 화면을 잡고 유지할 수 있다면 나에게는 킬러 기능이 될 듯함. 다만 App Store 페이지를 훑어보니 어떤 기능이 구독 뒤에 있고 어떤 기능이 아닌지 명확하지 않았고, 설정을 다 마칠 때까지 알려주지 않는 앱을 싫어해서 그냥 참고 운동을 수동으로 시작하는 걸 기억하려 할 것 같음

    • “운동 중인가요?” 기능은 끌 수 있음. 운동 관련 설정에서 Check In Reminders를 끄면 됨
답변달기