포트폴리오 상세

돌아가기
FuelTracker Insight 1

프로젝트 정보

  • 카테고리: 웹 사이트
  • 클라이언트: 자동차 소유 고객
  • 프로젝트 오픈 날짜: 2026/05/20
  • 프로젝트 URL: https://fuel.logikitapps.com/

글로벌 유가 데이터를 한눈에 보여주는 풀스택 대시보드

FuelTracker Insight는 매일 갱신되는 국내외 유가 데이터를 한 화면에서 비교·추적할 수 있도록 직접 기획·설계·개발한 풀스택 사이드 프로젝트입니다. 데이터 수집 파이프라인부터 차트·지도 시각화, 배포·운영까지 한 사람이 끝까지 책임지는 구조로 만들었으며, 단순 가격 노출을 넘어 가격 변동의 맥락(이슈·뉴스)까지 함께 제공합니다.

데이터 파이프라인 (Spring Boot Scheduler)

  • Opinet · GlobalPetrolPrices · World Bank 등 응답 형식이 서로 다른 외부 API를 매일 자동 수집해 단일 도메인 모델로 정규화
  • 국내 17개 지역과 해외 26개국의 휘발유·경유 시계열 데이터를 일 단위로 적재해 장기 트렌드 분석 가능
  • Spring Boot 스케줄러 기반 일배치 안에서 수집 → 정규화 → 정합성 체크 → 재시도 로직을 하나의 흐름으로 운영
  • 키워드 기반 뉴스 자동 수집까지 함께 자동화해 가격 변동의 배경 이벤트를 동일 화면에서 노출

프론트엔드 (Next.js · React · TypeScript)

  • Next.js App Router 기반으로 SSR과 클라이언트 컴포넌트를 화면 특성에 맞게 혼합 사용해 초기 로딩과 인터랙션을 동시에 최적화
  • 지도 시각화로 지역·국가별 가격을 색상과 레이블로 한눈에 비교
  • 주식 차트 스타일의 시계열 차트에서 일·월·연 단위 줌, 기간 비교, 이동평균 등 분석 인터랙션 제공
  • 반응형 레이아웃으로 모바일·태블릿·데스크탑 모두에서 동일한 사용성 보장

백엔드 & 아키텍처 (Spring Boot · JPA · QueryDSL)

  • Spring Boot · JPA · QueryDSL 기반 도메인 중심 API 설계로 가격 · 지역 · 국가 · 뉴스 도메인을 명확히 분리
  • DTO 분리, 페이지네이션, 응답 캐싱으로 외부 API 호출 비용과 응답 지연을 최소화
  • 외부 API 장애·지연을 가정한 예외 처리, 재시도, 폴백 로직을 운영 관점에서 함께 설계
  • REST API 명세를 기준으로 프론트엔드와 명확한 계약을 잡고 화면 요구와 데이터 모델을 분리 운영

운영 & 결과 (Vercel · End-to-End Ownership)

  • 프론트엔드를 Vercel에 배포해 글로벌 CDN 기반의 빠른 응답 시간과 자동 배포 파이프라인 확보
  • 기획 · 화면 · 서비스 · 데이터 파이프라인 · 운영까지 한 사람이 끝까지 책임지는 풀스택 사이클을 직접 경험
  • 실제 사용 데이터를 기반으로 캐싱 정책, 응답 구조, 차트 UX를 반복 개선하며 운영 감각을 축적
  • 서비스 운영 중 마주친 외부 API 한계와 데이터 정합성 이슈를 회고하며 개선 포인트를 지속적으로 도출