하모 핀볼: 게임 요소를 결합한 진주 맛집 추천 서비스
Ep. 06 : 게임으로 즐기는 지역 맛집 탐방, 하모 핀볼(Hamo Pinball)
1. Situation (상황)
- 배경: 지역 축제(진주남강유등축제 등)나 여행 시, 너무 많은 맛집 정보 속에서 무엇을 먹을지 결정하는 과정이 사용자에게 스트레스로 다가오는 '결정 장애' 문제를 포착했습니다.
- 동기: 진주시 공식 캐릭터 '하모'의 IP를 활용해 딱딱한 검색 서비스를 '게이미피케이션(Gamification)' 요소가 결합된 즐거운 경험으로 전환하고, 지역 소상공인에게는 자연스러운 홍보 효과를 제공하고자 구름 AI 해커톤에 참여했습니다.
2. Task (과업)
- 목표: 진주시 행정구역별 맛집 데이터를 실시간으로 필터링하고, 물리 엔진 기반의 핀볼 게임을 통해 최종 식당을 추천하는 풀스택 서비스 구축이 목표였습니다.
- 담당 역할: Full-stack (Spring Boot 백엔드 아키텍처 설계 및 React 구현)
3. Action (행동) - 기술적 해결 과정
- 지능형 맛집 큐레이션 엔진 (RestaurantService & Claude API):
- Naver Search API를 연동하여 진주시 30여 개 행정구역(동/면)별 실시간 식당 데이터를 수집했습니다.
- 단순 검색의 한계를 넘기 위해 Claude AI(Anthropic) 모델을 연결한
ClaudeConfig를 구축, 사용자의 모호한 취향 질문을 분석하고 하모 캐릭터 특유의 말투로 응답하는 AI 페르소나 인터렉션을 구현했습니다.
- 물리 엔진 기반 인터렉티브 UX (PinballGame & Matter.js):
- 웹 환경에서 생동감 있는 게임 기능을 제공하기 위해 **Matter.js(2D 물리 엔진)**를 도입했습니다.
- 필터링된 식당 리스트를 핀볼 게임의 타겟 슬롯으로 동적 할당하고, 충돌 감지 및 중력 가속도 로직을 적용해 공이 멈추는 지점의 식당을 추천하는 몰입형 UX를 완성했습니다.
- 확장성 있는 백엔드 아키텍처 (Java 17 & Spring Boot 3):
- WebClient를 활용한 비동기 외부 API 통신으로 응답 지연을 최소화했습니다.
JinjuDistrict 열거형(Enum)을 통해 행정구역 데이터를 체계적으로 관리하고, 정교한 쿼리 파라미터 설계를 통해 대량의 식당 정보를 효율적으로 필터링하는 API를 구축했습니다.
4. Result (결과)
- 성과: '캐릭터 IP + 물리 게임'이라는 요소를 유기적으로 결합한 MVP를 완성했습니다. 특히 단순 리스트 방식 대비 사용자 체류 시간을 늘리고, 추천 결과에 대한 심리적 거부감을 낮추는 효과를 거두었습니다.
- 개선: 해커톤 기간 내 API 호출 최적화와 물리 엔진 최적화를 주도하며, 제한된 시간 내에 복잡한 기술 스택(Spring Boot + React + AI API)을 통합하는 문제 해결 능력을 증명했습니다.
증빙 자료
- GitHub Repository: https://github.com/Smart-SW-Groom-AI-Hackathon
- Key Techs: Java 17, Spring Boot 3.3.1, Spring Security, Matter.js, Claude API, Naver Search API
