한눈에 보기
| 항목 | 내용 |
|---|---|
| 기간 | 2026.08 – 2026.09 |
| 상태 | 완료 |
| 구분 | KF 아카데미 팀 프로젝트 (팀원 7명) |
| 내 역할 | 팀의 유일한 개발 담당 |
| 서비스 | odigoguide.com |
해결하려 한 문제
외국인 관광객은 서울의 팝업스토어 정보를 얻기 어렵습니다. 이 문제를 공공외교 관점에서 해결하는 것이 과제였습니다.
- 정보 유효성 — 이미 끝난 팝업인지 알기 어렵다
- 언어 — 자국어로 된 정보가 없다
- 예약 — 예약 과정이 외국인에게 장벽이 된다
내 역할과 기여 범위
팀 공동 작업
- 기획팀이 핵심 아이디어(스와이프 발견, 국적별 큐레이션, 배리어프리 필터)를 도출
- 디자인 담당 팀원이 UI/UX 초안을 작성
- 자문위원 피드백을 반영해 범위를 조정 (축제+팝업 → 팝업 중심으로 재편, 나도 의사결정에 참여)
내가 직접 맡은 일 (팀의 유일한 개발 담당)
- 기술 스택 선정, API 연동, 배포 등 기술적 의사결정
- 프론트엔드 전체 단독 구현: 온보딩, 스와이프·리스트 보기, 지도, 저장, 리뷰 탭
- 팝업스토어 200개 정보 직접 수집·검증
- 7개 언어 다국어 처리 설계
구현에는 AI 코딩 도구 Antigravity를 활용했고, 기능 동작과 배포 결과는 직접 확인했습니다.
수행 과정
- 기술 스택 확정 — Vite + React, Zustand, Kakao Maps API, DeepL API, Firebase, Vercel
- 데이터 준비 — 팝업스토어 200개 정보를 수집·검증하고, 종료일을 자동으로 판별해 끝난 팝업을 걸러내는 로직을 설계 (데이터 신선도 관리)
- 화면 구현 — 온보딩 → 스와이프·리스트 보기 → 지도 → 저장 → 리뷰 탭
- 다국어 처리 — DeepL 연동. 미리 번역해 둔 DB와 실시간 번역을 함께 쓰는 이원화 구조로 7개 언어 지원
- 현장 사용자 테스트(UT) — 부산·성수에서 진행. “팝업 맥락 이해 부족”(75%), “자국어 정보 부족”(80%)이라는 결과를 Foreigner-Ready 배지, 다국어 리뷰 허브 기능으로 반영
- 현장 시연과 검증 — 인천공항 현장 시연, 관광객 대상 테스트
기술을 고른 이유
| 기술 | 고른 이유 |
|---|---|
| Vite + React | 개발 서버가 빨라 화면을 고치고 바로 확인할 수 있음. 익숙한 도구는 아니었고, AI에게 자문해 추천받아 선택 |
| Firebase | 별도 서버 없이 데이터베이스를 쓸 수 있음 |
| DeepL API | 번역 품질 |
| Vercel | 배포 과정이 간단함 |
결과물과 성과
- 실제 서비스 — odigoguide.com에 배포된 웹앱. 위 화면은 첫 화면으로, 지도에서 팝업 위치를 보고 카드로 기간·지역을 확인할 수 있습니다.
- 방문 의향 88% — 관광객 25명 대상 테스트에서 확인한 응답 비율
- 방문 전환율 13.3% — 앱에서 저장한 팝업 대비 실제 방문으로 이어진 비율을 성과 지표로 제시
현장 장애 대응
인천공항 현장 시연 중 Firebase 환경변수가 누락되어 서비스가 정상 동작하지 않았습니다. 현장에서 바로 재배포해 복구했습니다.
배운 점과 한계
- 한계 — 팀 프로젝트라 내가 이상적으로 생각하는 방향만으로 결과물을 만들 수는 없었습니다. 디자인 초안이 마음에 들지 않아도 임의로 바꿀 수 없었습니다.
- 배운 점 — 다른 웹사이트의 레퍼런스를 모아 디자인 담당 팀원에게 보여주며 “이런 식으로 구현해 보자"고 설득했고, 결과물이 훨씬 나아졌다는 평을 들었습니다. 근거를 보여주며 설득하는 협업 방법을 배웠습니다.
다음 개선 방향
- 인천공항 장애처럼 환경변수 누락으로 서비스가 멈추지 않도록, 배포 전 환경변수 점검 목록을 만들어 배포할 때마다 확인하겠습니다.