서론: 해커톤 그 이후, 멈추지 않는 도전
지난 포스팅(경기 기후 바이브코딩 해커톤 후기)에서 소개했던 '경기 그늘 로드' 프로젝트를 기억하시나요? 감사하게도 해커톤 이후 After 프로젝트 지원 대상에 선발되어, 단순한 아이디어 구현을 넘어 '실제 서비스 가능한 수준'으로 프로젝트를 고도화할 기회를 얻게 되었습니다.
특히 이번 프로젝트는 '클로드 코드(Claude Code)'를 활용한 AI 페어 프로그래밍(Vibe Coding) 방식을 적극 도입했습니다. 해커톤 당시에는 토큰 제한 문제로 메인 페이지만 구현하는 데 그쳐 아쉬움이 컸지만, 이번에는 토큰 효율성을 고민하며 실제 백엔드 로직까지 완성도 있게 구현해볼 수 있었습니다.
오늘은 프로젝트명을 '경기 안심 로드(Gyeonggi Safety Road)'로 변경하고, 기존의 "작동만 하는 프로토타입"을 넘어 Spring Boot 백엔드 도입과 시스템 아키텍처 분리를 진행한 대규모 리팩토링 과정을 공유하려 합니다.
1. 🏗️ 아키텍처의 완전한 분리 (Monolith → Client/Server)
해커톤 당시에는 빠른 구현을 위해 로컬 상태(State)와 Mock 데이터에 의존하는 단순 React 앱이었습니다. 하지만 확장성과 데이터 무결성을 위해 프론트엔드와 백엔드를 물리적으로 분리했습니다.
- Before: 단일 프로젝트, 브라우저 메모리 의존
- After:
- Backend: back/ (Spring Boot 3.2.1 REST API)
- Frontend: front/ (Vite + React 19)
- Data Flow: User → React(Axios) → Spring Controller → Service → DB/External API
이로써 데이터의 안정성을 보장하고, 더 복잡한 비즈니스 로직을 서버 사이드에서 안전하게 처리할 수 있는 구조를 갖췄습니다.
2. ✨ Backend: Spring Boot로 뼈대를 세우다
가장 큰 변화는 Java Spring Boot 기반의 백엔드 시스템 구축입니다.
🛠️ Tech Stack
- Framework: Spring Boot 3.2.1 (Java 17)
- Database: H2 (개발용) / JPA (ORM)
- Security: Spring Security + JWT
주요 구현 내용
- 🔐 보안 시스템 구축: JwtTokenProvider를 구현하여 Stateless한 인증 시스템을 만들었습니다. 이제 라이더 분들의 개인정보를 안전하게 보호하며 회원가입/로그인이 가능합니다.
- *🧠 스마트 경로 탐색 (A 알고리즘 이식):** 프론트엔드에 있던 무거운 연산을 백엔드로 가져왔습니다. 단순 최단 거리가 아닌, '거리 비용 + (기온 가중치 × 태양광 노출도)'를 계산하는 커스텀 A 알고리즘을 Java로 구현하여 서버 성능을 활용합니다.
- 🌍 경기 기후 데이터 파이프라인: ClimateAPIService를 통해 경기도 기후 플랫폼(Climate.gg)의 WFS API와 연동하여 무더위 쉼터, 공원, 탄소 배출량 데이터를 실시간으로 가져옵니다.
3. 🎨 Frontend: 사용자 경험(UX) 고도화
프론트엔드는 백엔드 API와의 통신을 중심으로 전면 개편되었습니다.
- 상태 관리: Zustand를 도입하여 전역에서 로그인 상태와 유저 설정을 효율적으로 관리합니다.
- 지도 시각화: Leaflet 라이브러리를 활용해 위험지역(Red Heatmap)과 안전지대(Green Zone), 그리고 최적 경로(Polyline)를 레이어링하여 직관성을 높였습니다.
- UI/UX: 실제 앱처럼 느껴지도록 LoginPage, RouteSearchPage, MyPage 등 화면 흐름을 유기적으로 설계했습니다.
4. 🚀 핵심 기능: 라이더를 위한 디테일
이번 업데이트로 '경기 안심 로드'만의 차별화된 기능들이 구현되었습니다. 특히 기존 해커톤 대상작들이 주로 '여름철 그늘'에 집중했다면, 저는 겨울철 안전까지 고려하여 기능을 확장했습니다.
- 경로 비교 분석: 출발/도착지만 입력하면 '최단 경로'와 '그늘 경로'를 동시에 보여주고, 시간 차이와 그늘 비율을 비교해 줍니다. ("5분 더 걸리지만 그늘이 30% 더 많아요!"를 알려주는 식이죠.)
- 계절 모드 (The Shade Paradox): 여름엔 '그늘 = 시원함(Safe)'이지만, 겨울엔 '그늘 = 블랙아이스 위험(Danger)'이 됩니다. User 엔티티에 SeasonMode를 추가하여 계절에 따라 알고리즘 가중치가 정반대로 작동하도록 설계했습니다.
5. 🔮 Future Roadmap: 앞으로 추가될 기능들
현재 뼈대는 완성되었지만, 현장의 라이더 분들이 더 편리하게 쓰실 수 있도록 다음 기능들을 준비 중입니다.
🚧 1. PWA (앱 설치) 지원
라이더 분들이 매번 웹사이트 주소를 치고 들어오는 것은 불편합니다. vite-plugin-pwa를 적용하여 홈 화면에 아이콘을 추가하고 네이티브 앱처럼 실행되도록 할 예정입니다.
📍 2. 지도 위 '커뮤니티 제보' 시각화
현재는 쉼터 정보만 보이지만, 라이더들이 직접 제보한 "여기 빙판길이에요! ⚠️", "여기 공사 중! 🚧" 같은 정보를 지도 위에 마커로 띄워 '살아있는 지도'를 만들 계획입니다.
🛵 3. 소셜 경로 (Social Route) & 외부 네비 연동
- 집단 지성: 다른 라이더들이 많이 다니거나 '좋아요'를 누른 검증된 경로를 추천해주는 기능을 기획 중입니다.
- Deep Link: 저희 앱에서 안전 경로를 확인한 후, [카카오맵으로 길안내] 버튼을 누르면 바로 네비게이션으로 연결되도록 하여 실용성을 극대화할 것입니다.
마치며: AI와 함께 성장하다
해커톤의 아이디어가 실제 코드로, 그리고 하나의 견고한 서비스 구조로 갖춰지는 과정이 정말 흥미로웠습니다. 특히 '계절에 따라 데이터의 의미가 달라진다(The Shade Paradox)'는 점을 백엔드 로직에 녹여내는 과정이 기술적으로 가장 재밌는 도전이었습니다.
무엇보다 **클로드 코드(Claude Code)**를 활용한 개발 경험이 특별했습니다. 단순히 코드를 짜주는 것을 넘어, 토큰 효율성을 고민하며 아키텍처를 설계하는 과정에서 개발자로서의 시야가 넓어짐을 느꼈습니다.
앞으로 남은 기능들을 하나씩 구현하며 '경기 안심 로드'가 이동 노동자분들에게 사계절 내내 든든한 오아시스가 될 수 있도록 만들어보겠습니다. 다음 개발기도 기대해 주세요!