여행의 기억을 기록하고, 경로와 비용까지 한눈에 관리하는 나만의 스마트 여행 아카이빙 플랫폼
시작 배경
단순히 사진만 남기는 기록 방식에서 벗어나, 방문한 장소의 위치, 감정, 소비 비용 등 여행의 다각적인 데이터를 체계적으로 관리하고, 이를 지도로 시각화하여 여행을 입체적으로 복기할 수 있는 공간이 필요하다는 배경에서 프로젝트를 시작했습니다.
진행한 일
1. 지도 기반 경로 시각화 및 데이터 아카이빙
- 경로 시각화: KakaoMap API를 활용한 정밀 좌표 선택 기능 구현 및
react-leaflet을 활용하여 방문 경로를 폴리라인(Polyline)으로 연결하는 시각화 로직 구축 - 복합 데이터 관리: 날짜별 목적지, 카테고리, 비용 관리 시스템을 구축하고, 무드 태그와 한 줄 평 기능을 통해 감성적인 기록 영역 확보
2. 통계 기반 대시보드 및 상태 관리 고도화
- 대시보드 구현: 여행지별 비용 자동 합산(TotalCostDisplay) 및 카테고리/평점별 필터링 기능 구현
- 상태 관리 최적화:
useReducer와Zod스키마 검증을 통해 복잡한 여행 작성 폼의 안정성을 확보하고,useMemo를 통한 데이터 필터링 최적화
3. 성능 최적화 및 최신 스택 활용
- Next.js 15 환경 구축: App Router와 Server Components를 도입하여 초기 데이터 패칭 성능을 최적화하고 SEO 최적화 환경 마련
⭐ 업무 과정 [핵심]
기술적 의사결정
- BaaS(Supabase) 도입: 별도의 백엔드 인프라 구축 공수를 줄이기 위해 Supabase를 도입했습니다. 인증(Auth), 스토리지(Storage), DB를 통합 관리하여 개발 속도를 극대화하고, 서버리스 환경에서의 배포 안정성을 확보했습니다.
- SSR/CSR 하이브리드 아키텍처: 대시보드의 초기 데이터는 Server Components로 빠르게 렌더링하고, 인터랙션이 많은 캘린더나 지도 컴포넌트는
dynamic import와"use client"를 적재적소에 배치하여 성능과 사용성을 모두 잡았습니다. - 데이터 타입 안정성 강화:
Zod와TypeScript를 결합하여 폼 데이터의 런타임 검증을 강화했습니다. 이를 통해 여행 추가 시 발생할 수 있는 데이터 결측 오류를 사전에 차단했습니다.
결과물
- 사용자 친화적 대시보드: 캘린더, 여행 목록, 지도, 가계부가 한 화면에 조화된 사용자 경험(UX) 제공
- 데이터 중심 기록: 카테고리(맛집/관광지 등)별 필터링이 가능한 입체적 여행지 목록 구현
- 시각적 추억: 사용자의 발자취가 남은 인터랙티브 지도와 감성적인 사진 슬라이더 구현
성장한 점
성과
- 데이터 체계화: 단편적인 기록 방식을 8개의 데이터 카테고리를 가진 체계적인 데이터베이스로 진화시켰으며, 지도 시각화를 통해 사용자의 여행 동선 파악 시간을 크게 단축했습니다.
- 아키텍처 이해도 제고: Next.js 15 App Router의 서버/클라이언트 컴포넌트 모델을 완벽히 이해하고, 라이브러리(Leaflet/카카오맵)의 SSR 호환성 이슈를 해결하며 에코시스템 대응 능력을 키웠습니다.
키운 역량
- 풀스택 데이터 모델링: Supabase를 활용한 관계형 데이터베이스 모델링 및 RLS(Row Level Security) 환경 설정 경험을 통해 백엔드와의 통합적인 데이터 처리 역량을 강화했습니다.
- 성능 최적화 역량: 컴포넌트 단위의 렌더링 최적화와 서버사이드 렌더링 전략을 통해 실제 서비스의 퍼포먼스를 체감할 수 있는 최적화 과정을 경험했습니다.
나의 방향성
이번 프로젝트를 통해 '데이터를 시각화하여 사용자의 경험을 가치 있게 바꾸는 프론트엔드 개발자'로서의 재미를 느꼈습니다. 앞으로는 단순 CRUD 기능을 넘어, 실시간 동기화(Supabase Realtime)를 통한 다인 협업 여행 플래너, 혹은 사용자의 여행 패턴을 AI로 분석하여 다음 여행지를 추천해 주는 기능 등 기술을 통해 여행의 가치를 증대시키는 문제들에 도전하고 싶습니다.