목차
USGS는 최근 지진 정보를 GeoJSON 피드로 공개합니다. 표로 보는 것보다 지도에 올려두는 편이 위치와 규모를 파악하기 쉬워서 작은 모니터를 만들었습니다. 데이터는 5분마다 갱신됩니다. 엄밀한 실시간 스트리밍은 아니지만 최근 상황을 살펴보기에는 충분한 간격입니다.
지도에서 볼 수 있는 것
처음 열면 최근 24시간 동안 발생한 규모 2.5 이상 지진이 표시됩니다. 왼쪽 목록과 지도 마커는 서로 연결되어 있어서 목록을 선택하면 해당 위치로 이동합니다.
기간은 최근 1시간, 24시간, 7일 중에서 고를 수 있습니다. 최소 규모와 지역명, 쓰나미 알림 여부로도 결과를 좁힐 수 있습니다. 지진 마커는 Canvas 레이어로 그려 일주일 범위처럼 항목이 많을 때도 DOM 요소가 과도하게 늘지 않게 했습니다.
데이터가 오는 경로
브라우저가 USGS에 직접 요청하지 않고 블로그의 /api/earthquakes를 호출합니다.
로컬에서는 Caddy가, 배포 환경에서는 Cloudflare Pages Function이 USGS 요청을
대신 처리합니다. 사용할 수 있는 피드는 1시간, 24시간, 7일 세 종류로 제한했고
응답은 5분 동안 캐시합니다.
지도 화면은 블로그에 포함된 독립 정적 HTML과 JavaScript로 실행합니다. 블로그 페이지는 이 화면을 같은 오리진 iframe으로 표시합니다. Next.js hydration이나 별도 개발 서버 상태와 관계없이 지도와 데이터 요청이 시작되도록 분리했습니다.
남아 있는 한계
현재 자료는 USGS 한 곳에만 의존합니다. 데이터 제공이나 지도 타일 서비스에 문제가 생기면 지도도 영향을 받습니다. 국내 지진을 자세히 보려면 기상청 자료를 함께 비교하는 기능이 필요합니다. 지역 저장과 알림 기능도 아직 없습니다.
위의 데모 열어보기에서 현재 지도를 확인할 수 있습니다.