개발자가 Next.js 14, Leaflet, astronomia 라이브러리를 조합해 무료 천문학적 계산 기반의 지도 렌더링 웹앱 구축

Context

기존 천문학적 위치 계산 도구들은 월 20달러의 구독료 벽, Flash 시대 기술, 광고 과다 노출 등으로 접근성이 떨어졌다. 특히 사용자의 정확한 출생 시각과 위치를 기반으로 행성의 천체좌표를 계산하고 이를 지구 지도 위에 정확히 투영하는 기술적 난제가 있었다.

Technical Solution

• Next.js 14 App Router의 서버사이드 렌더링으로 검색 순위 최적화: SEO 목적의 calculator 페이지를 서버에서 완전히 렌더링해 전달
• Route Handlers를 통한 천문학적 계산의 백엔드 처리: POST 엔드포인트로 astronomia 라이브러리의 무거운 계산을 Node.js 런타임에서 수행 (Edge Runtime 제외)
• 다중 좌표계 변환 로직 구현: 황도좌표(ecliptic) → 적도좌표(equatorial) → 지리좌표(geographic)의 3단계 변환으로 행성선 위치 계산, 각 위도별 경도를 이진탐색으로 해결
• Leaflet + React-Leaflet 기반 지도 렌더링: OpenStreetMap 타일로 행성선을 Polyline 컴포넌트로 시각화, 동적 import에 ssr: false 옵션으로 SSR 호환성 확보
• 메모리 캐싱 추가: 동일한 출생 데이터에 대한 중복 계산 방지를 위해 Map 자료구조로 요청 바디의 JSON 문자열을 키로 사용

Impact

Mercury, Venus, Mars 등 행성선 계산의 정확도 검증에 약 2주 소요되었으며, Vercel 배포로 main 브랜치 푸시 후 약 30초 내 라이브 반영이 가능했다.

Key Takeaway

니치 도메인의 복잡한 수학 문제(천체 좌표 계산)와 프론트엔드 시각화(지도 렌더링)를 결합할 때, 계산 정확도 검증을 먼저 거친 후 UI 개발을 진행하는 순서보다는 근사값이라도 시각화 결과를 조기에 확인하는 것이 개발 동기와 디버깅 효율을 높일 수 있다.