개인 의사결정을 위한 경제지표 모바일 대시보드
WTI 유가, 미국 10년물 금리, 미국 CPI, 원달러 환율을 모바일에서 빠르게 확인할 수 있는 개인용 경제지표 PWA를 구축했습니다. 실시간성 지표와 월간 지표를 한 화면에 정리하고, 인증된 사용자만 접근할 수 있도록 Supabase Auth와 서버 API 기반 데이터 파이프라인을 함께 설계했습니다.
클라이언트 상황
클라이언트는 유가, 환율, 금리, CPI처럼 시장 판단에 자주 참고하는 지표를 매번 여러 사이트에서 확인하고 있었습니다.
특히 모바일 환경에서 빠르게 현재값과 추세를 함께 보고 싶었고, 개인용 도구인 만큼 접근 권한과 데이터 안정성도 필요했습니다.
요청 내용
핵심 경제지표 4종을 카드와 시계열 차트로 보여주는 모바일 우선 대시보드를 만들고, 외부 API 데이터를 정기적으로 수집해 최신 상태를 유지하도록 요청했습니다.
나의 접근 방식
Next.js App Router 기반으로 모바일 우선 PWA 구조를 잡고, 카드형 요약 지표와 상세 시계열 차트를 분리해 한 화면에서 스캔과 분석이 모두 가능하게 구성했습니다.
Supabase에는 현재 지표값, 일별 이력, intraday 이력을 나눠 저장해 대시보드 조회와 차트 조회의 목적을 분리했습니다. 데이터 수집은 Yahoo Finance와 FRED를 우선 활용하되, WTI와 환율처럼 소스 장애 가능성이 있는 지표는 fallback 경로를 두어 빈 화면으로 끝나지 않도록 설계했습니다.
보안 측면에서는 Supabase Magic Link와 화이트리스트 검증을 적용하고, 서비스 롤 키는 서버 라우트에서만 사용하도록 분리했습니다. 클라이언트에서는 60초 단위 refresh throttle, 장 운영 시간 체크, 마지막 캐시 데이터 fallback을 적용해 외부 API 호출량과 사용자 경험 사이의 균형을 맞췄습니다.
UI는 모바일 2열 카드와 데스크톱 4열 그리드로 반응형을 구성하고, 각 지표 카드에 현재값, 변화율, 출처, 최근 업데이트 시간, 스파크라인을 함께 노출했습니다. 상세 차트는 Lightweight Charts를 사용해 1일 intraday부터 장기 추세까지 지표 특성에 맞는 기간 선택을 제공했습니다.
결과
사용자는 하나의 모바일 화면에서 WTI, 미국 10년물 금리, 미국 CPI YoY, 원달러 환율을 빠르게 확인하고 각 지표의 추세를 바로 비교할 수 있게 되었습니다.
외부 데이터 수집, Supabase 저장, 인증 기반 조회, PWA 캐싱까지 연결된 작은 운영형 데이터 제품으로 구현되어 단순 정적 대시보드보다 실제 사용성과 유지보수성이 높아졌습니다.