피드로 돌아가기
Dev.toFrontend
원문 읽기
Protobuf 디코딩과 좌표계 변환을 통한 Google-KMap 라우팅 구현
Routing around Google Maps in Korea: Naver & Kakao deep links, weird coordinates, and iOS clipboard
AI 요약
Context
국내 지도 데이터 반출 규제로 인한 Google Maps의 경로 안내 불가 상황 분석. 기존 사용자의 수동 복사-붙여넣기 과정을 자동화하기 위한 좌표 추출 및 Deep Link 전환 구조 설계.
Technical Solution
- Cloudflare Worker 기반의 Stateless 아키텍처를 채택하여 React SPA 서빙과 API 엔드포인트를 단일 Origin에서 처리하는 제로 런타임 의존성 구조 설계
- Google Maps URL의 다양한 좌표 패턴(Place pin, Directions, Viewport)을 우선순위 기반 Regex로 처리하며, 특히 /dir/ 경로의 경위도 역전 현상을 보정한 정규화 로직 구현
- 모바일 공유 링크 내
geocode파라미터의 Base64url-encoded Protobuf를 분석하여 Little-endian 방식의 Fixed32 좌표값을 정밀하게 디코딩하는 서버사이드 로직 구축 - Naver 및 Kakao Map의 Deep Link 스펙을 분석하여
appname필수 파라미터 처리 및 Android Intent URL을 통한 스토어 Fallback 메커니즘 적용 - Kakao Web URL의 EPSG:5181 (GRS80 TM) 좌표계와 실제 좌표 간의 2.5배 스케일 차이를 수동 Projection 알고리즘으로 해결하여 데스크톱 환경의 호환성 확보
- iOS WebKit의 User Activation 만료 문제를 해결하기 위해 단일 Clipboard call 내에서
ClipboardItem타입을 순회하며text/uri-list를 우선 추출하는 비동기 처리 체인 최적화
실천 포인트
1. 다양한 URL 패턴의 좌표 추출 시 우선순위 맵(Priority Map)을 정의하여 정규식 충돌 방지
2. Protobuf 기반 인코딩 데이터 처리 시 엔디언(Endianness) 및 스케일 팩터 확인 필수
3. iOS Clipboard API 사용 시 `await` 호출로 인한 권한 만료 가능성을 고려해 단일 요청 내 타입 순회 구조 채택
4. OS별 Deep Link 동작 차이를 극복하기 위해 Android는 Intent URL, iOS는 Custom Scheme을 분리 적용