아이가 여전히 비행기를 좋아해서 레이더를 업그레이드함

 (substack.com/jacobbartlett)
1P by GN⁺ | ★ favorite | 댓글 1개
  • 개인 iOS 레이더 앱 Aviator 2.0은 12월 초부터 이어진 OpenSky Network 장애 이후 다시 동작하게 되면서, 실제 사용 중 드러난 불편을 한꺼번에 손본 업데이트임
  • 새 컨트롤 메뉴는 점진적 공개 구조로 주요 조작과 고급 도구를 나누고, SwiftUI modal detent와 배경 상호작용으로 레이더 화면을 덜 가리게 구성됨
  • 너무 먼 항공기까지 잡히던 문제는 이진 줌 토글로 줄였고, MapKit camera distance를 70km 또는 100km로 바꾸는 방식으로 구현됨
  • OpenSky Network API의 origin_country, 고도, category 데이터를 활용해 국기 표시, 흐린 날 저고도 필터, 헬리콥터·위성·기체 크기별 아이콘 구분이 추가됨
  • 사용자는 OpenSky Network 로그인 정보로 HTTP Basic 인증을 사용할 수 있지만, 2.0에서는 비밀번호가 User Defaults에 저장되므로 민감한 비밀번호 재사용은 피해야 함

Aviator 2.0 업데이트 배경

  • Aviator — Radar on your Phone은 아이와 함께 비행기를 찾기 위해 만든 iOS 레이더 앱임
  • 이전 글 이후 새 릴리스와 수익화 기회를 생각할 수도 있었지만, 앱은 12월 초부터 OpenSky Network 장애로 사용자에게 오류를 내고 있었음
  • 앱을 다시 열었을 때 계속 보이던 502 오류 대신 비행기 감지 알림음이 들리면서 정상 동작을 확인함
  • 이후 두 번의 저녁 동안 기존 아이디어를 반영해 Aviator 2.0 작업을 진행함

레이더를 덜 가리는 새 컨트롤 UI

  • 2.0에서는 컨트롤을 별도 메뉴로 옮겨 중요한 조작은 앞에 두고, 덜 자주 쓰는 고급 도구는 아래쪽에 배치함
  • 이 구조는 점진적 공개(progressive disclosure) 를 사용함
  • 메뉴는 SwiftUI modal로 구현되며 두 가지 presentationDetents를 가짐
    • primary: 화면 높이의 0.15
    • extended: 화면 높이의 0.4
  • 드래그 표시기로 메뉴 확장이 가능하다는 점을 보여주고, presentationBackgroundInteraction(.enabled)로 메인 레이더 UI가 그림자에 덮이지 않게 함
  • presentationBackground에는 Paul Hudson의 emboss effect를 적용해 실제 레이더 제어판 같은 금속 질감을 더함
  • 2.1에서는 TipKit을 활용해 어린 Apple 사용자도 점진적 공개 구조를 알아차릴 수 있게 할 계획임

줌 레벨과 레이더 범위 조정

  • 1.0에서는 레이더가 너무 잘 동작해, 지평선 너머나 지형 뒤에 있어 볼 수 없는 항공기까지 잡는 문제가 있었음
  • 런던 교외처럼 계단식 지형과 섬처럼 이어진 환경에서는 이 점이 실제 사용상 불편해짐
  • 개방된 공간에서는 멀리 있는 비행기도 볼 수 있었기 때문에 단순한 감도 문제로만 보기 어려웠음
  • 해결책은 줌 기능을 넣는 것이었음
  • MapKit SDK의 camera에 distance를 미터 단위로 전달해 지표면 확대·축소를 구현함
    • zoomed가 true이면 70 * 1_000
    • false이면 100 * 1_000
  • 주말 릴리스에 맞춰 빠르게 구현하면서, 확대된 UI를 강조하기 위해 레이더 원 하나를 제거함
  • 처음에는 Slider로 줌 레벨을 처리하려 했지만 A17 칩에서도 충분한 프레임레이트가 나오지 않아, 현재는 이진 줌 토글을 사용함

OpenSky Network 데이터로 추가된 기능

  • 국기 표시

    • OpenSky Network API는 항공기 트랜스폰더에서 다양한 정보를 수집하지만, 1.0에서는 이 데이터를 충분히 활용하지 않았음
    • 2.0에서는 각 비행기 아이콘 아래에 출발 국가를 이모지 국기로 표시하는 토글이 추가됨
    • 구현은 origin_country 값을 기반으로 함
    • API가 제공하는 출발 국가 텍스트 문자열을 받음
    • 온라인에서 찾은 국가명 목록으로 2글자 국가 코드로 변환함
    • 국가 코드를 유니코드 스칼라로 바꿔 국기 이모지를 구성함
    • 사용자가 기능을 켜면 MapKit annotation의 텍스트로 flight.flag를 표시함

  • 흐린 날 모드

    • 영국의 흐린 날에는 앱에 표시되는 비행기 중 상당수가 구름에 가려 실제로 보이지 않았음
    • 높은 항공기를 숨기는 버튼을 추가해, 맑은 모드와 비 오는 모드를 전환할 수 있게 함
    • OpenSky Network에서 받은 고도 데이터를 사용하며, 낮은 구름의 기준 바닥값으로 2.5km를 사용함
    • geo_altitude < 2500.0이면 isLowAltitude가 true가 됨
    • cloudy 설정이 켜져 있으면 저고도 항공기만 MapKit annotation에 표시함

항공기 아이콘 개선

  • 공원에서 테스트하던 중 머리 위로 헬리콥터가 지나갔지만, Aviator는 이를 일반 비행기 아이콘으로 표시함
  • OpenSky Network API는 쿼리 파라미터를 추가하면 트랜스폰더가 속한 항공기 종류를 나타내는 category 속성을 제공함
  • 이 범주에는 다음 같은 항목이 포함될 수 있음
    • 15,500파운드 미만의 경량 항공기
    • 300,000파운드 초과의 중량 항공기
    • 헬리콥터 같은 회전익기
    • 우주/대기권 통과 차량
    • 낙하산 또는 스카이다이버
  • 최신 업데이트에서는 항공기 크기 등급을 구분하고, 위성과 헬리콥터를 별도 아이콘으로 표시함
  • AircraftCategory enum에서 이미지, 이모지, 스케일 값을 분리함
    • rotorcraft는 xmark.circle.fill SFSymbol을 사용함
    • spaceTransatmospheric은 🛰️ 이모지를 사용함
    • small, large, heavy는 각각 0.6, 1, 1.5 스케일을 적용함
  • 헬리콥터 이모지는 단색 평면으로 변환했을 때 지나치게 둥글어 보여, 더 추상적인 원 안의 십자 SFSymbol을 선택함
  • 이모지를 이미지처럼 다루기 위해 Text를 스케일링한 뒤 Rectangle의 마스크로 사용하고, 색상과 CRT 화면 효과를 적용함

사용자 OpenSky Network 로그인

  • 사용자가 직접 OpenSky Network 자격 증명을 입력하는 기능이 추가됨
  • 이 기능은 Android 버전 다음으로 요청이 많았던 기능 중 하나였으며, 인증되지 않은 API 사용의 rate limiting을 피하려는 목적이 있음
  • 전체 컨트롤 메뉴에서 계정을 입력할 수 있고, 등록 페이지로 가는 링크도 제공함
  • SwiftUI의 TextField와 SecureField로 구현됨
    • @AppStorage("username")
    • @AppStorage("password")
  • 2.0에서는 빠르게 프로덕션에 넣는 과정에서 비밀번호를 User Defaults에 저장함
  • 다음 릴리스에서는 Keychain에 저장할 예정이며, 현재는 민감한 비밀번호를 재사용하지 말아야 함
  • 입력된 사용자명과 비밀번호는 Base64로 인코딩되어 API 요청의 Authorization 헤더에 Basic 인증으로 붙음

마무리

  • Aviator 2.0은 아이와 함께 놀 수 있는 앱을 계속 개선하는 업데이트임
  • 기능 아이디어나 ASO 팁을 댓글로 요청하며, Aviator — Radar on your Phone 2.0 다운로드와 리뷰를 요청함

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 두 달 전 꽤 인기 있었던 글의 후속편임
    0: https://news.ycombinator.com/item?id=38435908 My toddler loves planes, so I built her a radar (1304 points, 56 days ago)

  • 앱을 보니 DVD 프로그래밍하던 시절 겪었던 문제가 떠오름. 토글 버튼에서 현재 어떤 모드가 활성인지 명확하지 않음
    깃발이나 구름 아이콘이 현재 모드를 보여주는 건지, 그 모드로 바꾸려면 눌러야 하는 건지 헷갈림. 날씨 토글도 구름을 눌러 흐린 모드를 보겠다는 건지, 맑은 화면으로 바꾸겠다는 건지 반대로 느껴짐
    지금 하는 프로젝트에서도 +/- 버튼이 시간 범위 창 크기를 조절하는데, 시작 시간에서는 +가 초 값을 줄이고 -가 늘림. 끝 시간에서는 반대임. 창 크기 관점에서는 둘 다 예상대로라서, 결국 사용자의 관점을 명확히 해줘야 함

    • 현대 UX에서 제일 싫은 부분이 바로 이거고, 특히 TV 앱에서 심함. 메뉴 항목 둘 중 하나는 굵은 흰색이고 다른 하나는 굵은 검정색이면, 지금 뭘 클릭하려는 건지 모르겠음
      YouTube 자막 토글도 검정 바탕 흰 글자와 흰 바탕 검정 글자 사이를 오가서, 일단 눌러보고 입은 움직이는데 자막이 안 보이면 다른 아이콘 모드를 시도해야 함
      터치스크린으로 넘어오면서 상태가 있는 위치 입력 피드백에 대한 상식이 사라진 느낌임
    • 맞는 지적임. UX를 좋게 만들기보다 컨트롤 패널처럼 보이게 하는 것에 조금 매달렸던 것 같음
      게다가 헷갈린 게 맞음. 마지막 순간 버그 수정에서 구름 아이콘만 다른 것들과 반대로 넣어 배포했음

  • 레이더 스캔이 비행기를 지나갈 때 깜빡 표시되고, 위치는 고정된 채 다음 스윕 전까지 서서히 사라지면 정말 멋질 듯함
    또 기기의 현재 GPS 고도와 위치를 보고 OpenStreetMap의 주변 건물, 언덕, 고도를 이용해 방위각별로 보이는 스카이라인을 계산하면 좋겠음. 그러면 지도 위에 레이더 차폐처럼 표시할 수 있음. 통나무를 지나는 어군탐지기나 다른 선박에 가려진 선박 레이더 같은 느낌임
    그렇게 만들면 업계 사람들이 휴대폰이 어떻게 방사형 스캔을 하는지 머리를 긁적일 것 같음
    [1] https://www.researchgate.net/figure/Occlusion-percentage-for...

    • 이런 아이디어들이 다 좋음. 지금 앱은 잠재적으로 가능한 100% 완성판의 파레토 버전에 가까움

  • 블로그에 남겼던 생각인데, 유아 부모로서 색 고르는 부분이 가장 중요하다는 말에 공감함
    재미있는 사이드 프로젝트라 아직 구현하지 않았을 수 있는 기능 아이디어가 몇 가지 있음. 첫째, 휴대폰 카메라와 iPhone의 AR 기능을 써서 항공기가 있는 대략적 위치에 점을 표시하는 라이브 뷰. 사용자 위치와 ADS-B 정보로 계산하는 코드를 조금 짜본 적 있음
    둘째, 항공기를 “봤음” 또는 “놓침”으로 표시하고, 그 피드백을 표시 내용 조정에 활용할 수도 있음
    셋째, 배지와 통계. 딸이 우리 아이와 비슷하다면 앱에서 배지 받는 걸 좋아할 것임. 이전 관측 기록을 로컬 DB에 저장해 “본 항공사 수”, “본 항공기 기종 수”, “가장 먼 비행 시간”, “가장 짧은 비행 시간” 같은 걸 추적할 수 있음. 다만 아이 대상 앱을 게임화하는 데 따르는 문제는 충분히 이해함

    • 좀 고루하게 들릴 수 있지만, 아이에게 기술의 소비자에 머무르기보다 기술의 생산자가 되길 바라라고 계속 알려주려 함
      Robux 같은 디지털 화폐에 30달러를 쓰면 안 되는 이유를 자주 얘기함. 테니스 라켓이나 신발처럼 실제 가치가 있는 물건과는 다르다고 설명함
      그래서 게임화에 저항하고, 배지나 가치 없는 디지털 유물을 얻으려고 몇 시간씩 반복 작업에 빨려 들어가지 않도록 도구를 주려 함
      아이들을 위한 앱이라면 이런 기능은 넣지 않는 편이 좋겠음. 광고도 없고 게임화도 안 됐지만 삶에 실제 가치를 더해주는 앱이 존재한다는 걸 보여줄 수 있음
    • 아이디어들이 정말 고마움. 1번을 위해 Vision Pro를 구할 수 있을지 궁금함

  • HN 사람들 중 이걸 Android로 포팅하는 오픈소스 크라우드소스 프로젝트를 해볼 사람 있을까?
    라이선스는 추측이지만, 초기 GitHub 저장소를 만드는 사람이 저자의 “진취적인 Android 엔지니어가 직접 포팅하길 기다리고 있다. 글에 충분한 세부사항을 넣어두었다. 모두에게 무료로만 제공한다면 해도 된다”는 문구를 쓰면 될 것 같음

    • 이런 제안 고마움. 모바일 앱을 만들어본 적은 없지만 배워보고 싶음
      이 레이더 앱에 고품질 Android 앱으로 기여하지 못하더라도, “An app can be a home-cooked meal”[0] 패러다임에 맞는 무언가를 포팅해보는 데 시간을 쓰면 좋을 것 같음. 단일한 비전과 패러다임으로 짜여 있고 비대함, 광고, 추적 등이 없어 코드를 이해하기 쉬울 가능성이 큼
      이 제안이 프로그래밍의 즐거움을 다시 찾는 길로 이끌 수도 있겠음
      0: https://news.ycombinator.com/item?id=38877423
    • 장기 유지보수 여력은 없지만 조금은 기여할 수 있을 것 같음. 이메일은 프로필에 있음

  • 약간 다른 얘기지만, 방향 감각이 나쁜 사람으로서 휴대폰에서 가장 중요한 기능은 지도 위 작은 화살표가 내가 어느 쪽을 보고 있는지 얼마나 정확히 보여주느냐임
    Android를 쓰는데, 확신이 없을 때 파란색 불확실성 원뿔을 보여주고, 가끔 8자 모양으로 휴대폰을 움직이거나 주변 건물을 가리켜 보정하라고 함
    기술적으로 여기서 한계는 뭘까? iPhone이 Android보다 나은가? 하드웨어, 가속도계, 나침반, GPS 신호, 소프트웨어 중 무엇이 문제일까? 여전히 꽤 자주 헷갈려서 원뿔을 엉뚱한 방향으로 보여줌. iPhone이 확실히 더 잘 된다면 거의 갈아탈 정도로 중요함

    • 이 말을 해줘서 반가움. 원래 글에서도 같은 관찰을 했음
      GPS 쪽 한계가 있을 거라고 생각했는데, CoreLocation의 방향 델리게이트는 적어도 내 기기의 120Hz 프레임률에서는 방향을 완벽하게 반환함
      Google Maps가 그냥 별로일 수도 있음
    • 둘 다 비슷하게 자주 쓰는 입장에서, Android는 원시 센서값을 그대로 통과시키는 편이고 iOS는 일종의 디바운스 지연과 추정을 넣은 것 같음
      둘 다 방향값이 틀릴 때가 비슷하게 많음. 다만 사용 경험에 기반한 추정이지 확정적인 사실은 아님
    • Apple 제품과 애니메이션은 대체로 더 많은 평활화와 히스테리시스를 넣음. 화살표가 심하게 흔들리지 않게 하려고 정확도를 사용자에게 숨기는 것 같고, Android UI는 잡음 많은 GPS/IMU 융합과 자력계의 본질적 부정확성에서 생기는 아티팩트를 더 그대로 보여주는 편으로 보임
      예전 iOS에서는 느린 화살표가 꽤 거슬렸는데, 이제 하드웨어가 빨라지면서 다른 플랫폼의 튀는 화살표가 더 눈에 띔
      요약하면, 최신 하드웨어 대부분은 공간과 시간에서 자기 위치를 꽤 정확히 파악하는 능력은 비슷함. 하지만 현재 데이터로 추측항법과 자세 추정을 얼마나 잘하고, 손에 든 상태에서 사용자가 기대하는 잡음 필터링을 어떻게 처리하느냐는 내비게이션 소프트웨어마다 다름

  • Tony Hawk 게임들 때문에 헤비메탈에 빠졌음. THPS3의 Motörhead “Ace of Spades”, THPS4의 Iron Maiden “Number of the Beast”가 계기였으니, 플랫포머 게임에서 헤비메탈로 이어지는 빵부스러기 경로가 있을 수 있음

  • 가장 중요한 사용자를 확실히 행복하게 만들었다는 점에서 잘했음

  • 멋짐. 덧붙여 18년 뒤에 딸이 항공 관제 시험을 통과했는지 확인하려고 !remindme를 걸고 싶어짐

    • 지금 2살이고 학생 조종사 면허는 16살부터 딸 수 있으니, 알림은 14년 뒤로 맞추면 됨
    • 딸이 조종사가 되면 무료 비행을 받을 수 있나? STEM 쪽으로 은근히 유도할 기회를 놓치고 있는 걸지도 모름

  • 9/11 이후 세상에서도 아이들이 조종석에 초대받을 수 있는지 궁금함

    • 아버지가 조종사였고, 가족 휴가를 아버지 비행 일정에 맞추곤 했음. 어린아이였을 때 푸시백 뒤 조종석에 초대받아 “엔진 시동”을 걸었던 순간만큼 자랑스러운 일은 없었음
      버튼을 누르고 아버지가 움직이는 계기를 가리켜줬던 게 어렴풋이 기억남. 자리로 돌아오면서 세상에서 제일 큰 아이가 된 것 같았던 느낌은 선명함
      9/11 이후에는 그런 일은 확실히 일어나기 어렵겠음
    • 아이가 조종석을 보고 싶어 한다면, 이륙 전에는 묻지 않는 게 좋다는 팁을 인터넷에서 봄. 그때 조종사들은 체크리스트와 준비로 할 일이 많음
      반대로 착륙 후에 아이가 조종석을 볼 수 있냐고 물으면 성공 가능성이 훨씬 높음
    • 우리 아이들은 9/11 이후에도 조종석에 들어가 봤음. 다만 이륙 전이어야 함
      비행 중에는 승무원도 거의 들여보내지 않고, 가끔 사무장만 들어갈 수 있음. 아이들은 탑승할 때 조종석 문이 아직 열려 있으면 물어봄
    • 2024년 1월 1일에 여섯 살 아이가 처음으로 조종석에 초대받았음. 그 순간까지 나도 같은 궁금증을 갖고 있었음
      JetBlue 미국 국내선이었음
    • 게이트에 서 있을 때 그런 일이 일어나는 걸 본 적 있음. 조종사들이 보통 문을 열어두고 있어서 다가가 말해볼 수 있음. 최악의 경우 거절당할 뿐이니 물어볼 만함
      어릴 때 여행 중 항로에서 조종석을 보고 받은 Delta 날개 핀이 아직 어딘가에 있음. 지금도 기억나는 멋진 경험이었고, 다른 아이들도 그 일부라도 경험할 수 있으면 좋겠음
답변달기