Gemini 와 Antigravity 를 활용하여 효과적인 길 찾기 웹 서비스 만들기(SK open API 도 활용한) - 2탄
효과적인 길 찾기 웹 서비스 만들기 1탄에 이어서, 대중 교통 API Key를 연결하는 작업을 진행했습니다.
https://www.gpters.org/nocode/post/creating-effective-wayfinding-web-oteK7stwfBqpBNk
진행 방법
🔧 1. 기술적 설계: API Key연결
TMAP v2: 실시간 교통 + 택시 요금 계산
(TMAP과 카카오 및 네이버 API에 대한 비교)
구분
TMAP (SK Open API)
Kakao (Mobility/Maps)
NAVER (Cloud Platform)
자동차(택시) 경로
v2 제공. 택시 요금 정교함.
제공함. (카카오내비 기반)
제공함. (네이버내비 기반)
대중교통 데이터
있음 (Transit API).
없음.
없음.
장소 검색(POI)
준수함.
매우 우수함.
매우 우수함.
무료 제공량
적음 (구독형 과금).
매우 넉넉함.
넉넉함.
추천 용도
데이터 가공형 서비스
단순 장소 표시/앱 연결
단순 장소 표시/앱 연결
--> 대중 교통 정보 API를 불러오고자 했음. TMAP만 대중교통 데이터를 제공하나, Free 버전에는 10건 / 일 건으로 제한되어, 대안으로 ODsay Lab 으로 사용하고자 했습니다.
ODsay Lab: 버스/지하철 경로 탐색, 환승 횟수, 기본 운임
https://lab.odsay.com/guide/guide
국토교통부(TAGO): 실시간 버스 도착 정보, 노선 ID 변환
서울교통공사: 지하철 최단 경로, 정밀 환승 시간 계산
💡 발견: 공공데이터포털에서 다양한 공공데이터에 대해 API로 불러올 수 있다는 사실을 발견함.
https://www.data.go.kr/index.do
낮 버전과 밤 버전을 나눠서 구성을 하고자 했습니다.
그 중 낮 버전에 대해 구체화하고자 했습니다.
(낮 버전 3-Way 알고리즘 시나리오)
사용자의 이동 성향과 상황에 따라 선택 가능한 세 가지 추천 경로 전략을 설계했습니다.
① Saver 모드: 지갑 수호자
전략: 100% 대중교통
핵심: 최저 요금, 경제성 강조
UI 무드: "오늘 점심값을 아꼈습니다 🍱"
② Smart 모드: 가성비 전술가
전략: "환승 스킵 점프"
예시 로직:
느린 버스 대신 지하철역까지 택시로 이동
환승 많은 경로는 주요 지하철역까지 택시로 이동 후 직행 노선 탑승
UI 예시: "환승 2회 생략", "커피 한 잔 값으로 25분 단축"
③ VIP 모드: 리치 모드
전략: 100% 택시
목적: 쾌적함 + 프라이빗 공간 확보
UI 예시: "걷기 0분", "이동 중 업무 가능 💼"
🚨 3. 병목 현상 & 해결
문제: 현재 앱에서 '택시 옵션'만 나타나는 기술적 결함 발생
디버깅 과정:
Gemini는 부정확한 정보를 제공하며, Github에 저장된 Code 를 직접 읽을 수 없음 ❌
Claude에게 GitHub Raw 코드 전달 → 정확한 문제 포착 ✅
--> 웹에서
Ctrl + Shift + I로 콘솔 확인 → API KEY 누락 발견
해결책: Vercel의 환경변수(Environment Variables)에 ODsay Lab의 API KEY를 추가하여 정상 작동.
결과와 배운 점
AI를 활용한 디버깅은 모델 선택이 매우 중요함 (Gemini vs Claude)
서버리스 환경(Vercel)에서는 환경변수 세팅이 누락되기 쉬움 → 체크리스트 필요
앞으로 보완해야 할 사항
사용자의 현재 위치를 검색하고 위치 장소 명을 나오게 해야함.
아래화면과 같이 자세한 경로를 알려주게 구성해야함.
(원하는 화면)
(현재 화면)
한국 지하철 앱 스크린샷
