앱과 웹의 업데이트 시차를 다루는 법

버튼의 좌표보다 관계를 먼저 맞췄다

일반 아이폰에서는 포키 버튼 옆에 탭이 있고, 빠른 실행 버튼은 포키 위의 본문 쪽에 놓입니다. 듀오의 옆 막대로 옮길 때도 이 관계가 유지돼야 했습니다. 탭을 세로로 쌓는 과정에서 빠른 실행까지 막대 안에 넣으면 같은 제품인데도 사용자가 버튼을 찾는 방식이 달라집니다.

그래서 옆 막대 아래에 포키를 두고, 바로 위에 탭을 배치했습니다. 빠른 실행과 글쓰기 같은 문맥별 버튼은 포키 왼쪽의 본문 쪽으로 옮겼습니다. 버튼 크기와 간격도 폰과 맞춰 방향이 달라져도 익숙한 조작 관계를 유지했습니다.

앱이 차지한 공간을 웹에도 알려줘야 했다

탭과 일부 버튼은 네이티브가 그리고, 빠른 실행 목록 등은 웹이 그립니다. 각자 화면 끝에서 같은 거리만 띄우면 서로 겹칩니다. 앱이 옆 막대의 폭과 버튼 위치를 계산하고 CSS 변수로 전달해, 웹의 버튼과 패널도 같은 공간 기준을 쓰도록 했습니다.

웹의 빠른 실행 목록은 버튼 위에 열되 헤더와 상태 표시 영역을 침범하지 않도록 높이를 제한했습니다. 웹 하단에 고정 버튼이 있는 화면에서는 문맥별 버튼의 위치도 함께 올렸습니다.

새 앱과 새 웹만 맞으면 충분하지 않다

웹을 배포하는 시점과 사용자의 앱에 OTA 업데이트가 적용되는 시점은 다릅니다. 새 좌표 변수만 읽도록 웹을 바꾸면 예전 앱에서는 값이 없습니다. 반대로 앱이 기존 변수의 의미를 버리면 아직 예전 웹을 보고 있는 화면에서 버튼이 탭과 겹칠 수 있습니다.

확인한 범위와 남은 범위를 구분한다

11월 4일 변경 기록에서는 앱 타입 검사와 테스트 58개 통과, 같은 번들을 듀오·일반 아이폰 시뮬레이터에 넣은 비교 캡처를 확인했습니다. App Store 0.1.10 출시 노트에도 듀오 화면과 옆 막대 대응이 안내돼 있습니다. 시뮬레이터 검증과 공개 출시 기록이 모든 사용자의 기기에서 최신 OTA 적용을 보장하는 것은 아닙니다.

반응형 화면에서는 크기별 배치뿐 아니라 앱과 웹이 공유하는 값의 의미도 유지해야 합니다. 이번 변경은 그 계약에 기본값을 두어 업데이트가 동시에 도착하지 않는 상황을 다룬 사례입니다.

출시 노트와 2026-11-04 병합된 앱·웹 변경을 2026-11-05에 대조했습니다. 테스트 수는 당시 변경 기록의 결과입니다.