비싼감? · WonSense
"이 가격, 서울에선 비싼 걸까?"
외국인이 가격표·메뉴판 사진 한 장으로 서울 물가를 바로 판단할 수 있게 돕는 서비스
목차
- 왜 만들었나요?
- 주요 기능
- 시스템 구조
- 기술 스택
- 기술별 동작 원리
- 데이터 출처
- 프로젝트 구조
- 로컬에서 실행하기
- 테스트와 배포
1. 왜 만들었나요?
서울을 찾은 외국인은 가격표를 읽을 수 없고, 읽더라도 그 가격이 적당한지 비교할 기준이 없습니다.
그래서 바가지를 써도 알아채기 어렵고, 반대로 정상 가격도 의심하게 됩니다.
비싼감? 은 공공데이터(서울시 생필품 가격, 착한가격업소 메뉴 등)를 기준으로 삼고,
AI가 사진 속 한국어 가격표를 읽어 "서울 평균보다 몇 % 비싼지" 를 숫자로 알려 줍니다.
2. 주요 기능
| 기능 | 무엇을 하나요? | 주소 |
|---|
| 📸 바가지 판독기 | 가격표·메뉴판·영수증을 찍으면 품목마다 저렴 / 적정 / 조금 비쌈 / 바가지 를 판정합니다. 메뉴는 영어 설명·매운 정도·알레르기 재료·채식 여부 까지 알려 줍니다. 지금 있는 구를 고르면 그 동네 평균 으로 다시 판정합니다. | /scan |
| 🔎 물가 검색 | soju, bibimbap, 김치찌개처럼 영어·한국어로 검색하면 장보기·식당·편의점 가격을 한 번에 보여 줍니다. 오타도 "혹시 이걸 찾으셨나요?"로 바로잡습니다. | /search |
| 🧠 물가 퀴즈 · 가격 감 익히기 | 가격 맞히기, 더 비쌀까?, 이 가격 괜찮을까? 퀴즈와 "이 돈으로 뭘 살 수 있을까" 금액 퀴즈, 가격 순서 맞히기(가격 사다리)로 서울 물가 감을 익힙니다. | /quiz |
| 🗺️ 서울 물가 히트맵 | 25개 자치구의 장보기 물가를 서울 평균(100)과 비교한 지수로 지도에 칠합니다. 구를 누르면 품목별로 더 비싼·싼 품목을 보여 줍니다. | /heatmap |
| 💱 오늘의 환율 | 22개 통화의 원화 환율, 전일 대비 변화, 14일 추이 그래프, 환율 계산기를 제공합니다. 홈 화면 카드에 보일 통화 4개를 직접 고를 수 있습니다. | /fx |
| ⭐ 외국인 찐 리뷰 | 로그인 없이 "어디서 무엇을 얼마에 샀는지" 리뷰를 남깁니다. 가게는 카카오 장소 검색으로 고릅니다. | /reviews |
| 🌏 한국어 / English | 모든 화면을 오른쪽 위 버튼 하나로 전환합니다. 처음 방문하면 브라우저 언어에 맞춰 시작합니다. | 전체 |
3. 시스템 구조
flowchart LR
U["📱 사용자 브라우저"]
subgraph Vercel
FE["Next.js 16 프론트엔드<br/>(React 19 · Tailwind CSS 4)"]
end
subgraph Render
BE["FastAPI 백엔드<br/>(Python)"]
CACHE[("메모리 캐시<br/>10분 · 6시간")]
end
subgraph External["외부 서비스"]
DB[("Supabase<br/>PostgreSQL")]
LLM["LLM<br/>Claude API 또는<br/>Lablup Token Factory(DeepSeek)"]
FX["Frankfurter<br/>환율 API"]
KAKAO["Kakao Maps SDK<br/>장소 검색"]
end
subgraph Collect["수집 스크립트 (scripts/)"]
ING["GitHub Actions 매달 자동 실행<br/>서울 열린데이터광장 · 공공데이터포털"]
MINE["로컬 실행<br/>카카오 로컬 · Claude 웹 검색"]
end
U --> FE
FE -- "REST API (JSON)" --> BE
FE -. "리뷰 가게 검색" .-> KAKAO
BE --> CACHE
BE -- "service_role 키" --> DB
BE -- "사진 판독" --> LLM
BE -- "환율" --> FX
ING -- "매달 upsert" --> DB
MINE -- "upsert" --> DB
- 브라우저는 DB에 직접 접근하지 않습니다. 모든 데이터는 FastAPI를 거칩니다 (아래 보안 참고).
- 가격 데이터는 API 서버가 아니라 수집 스크립트가 넣습니다. 공공데이터는 GitHub Actions가 매달 자동으로 수집하고, 서버는 읽기만 합니다.
4. 기술 스택
| 영역 | 기술 | 쓰는 곳 |
|---|
| 프론트엔드 | Next.js 16 (App Router, Cache Components) · React 19 · TypeScript · Tailwind CSS 4 | 모든 화면, Vercel 배포 |
| 백엔드 | FastAPI · Pydantic Settings · Uvicorn | REST API, Render 배포 |
| 데이터베이스 | Supabase (PostgreSQL, RLS) · supabase-py | 가격 통계, 메뉴, 리뷰 |
| AI | Anthropic SDK · Claude Haiku 5.5 (비전 + 구조화 출력) · DeepSeek-V4.1-Flash (Lablup Token Factory, Anthropic 호환 API) · Claude Opus 5.5 웹 검색 | 바가지 판독기, 식당 가격 수집 |
| 지도·장소 | 서울 자치구 경계 SVG (KOSTAT 경계 → 미리 변환) · Kakao Maps JavaScript SDK | 히트맵, 리뷰 가게 검색 |
| 보안 | bcrypt · Row Level Security · 비밀번호 시도 제한 | 리뷰 게시판 |
| 자동화 | GitHub Actions | 공공데이터 가격 매달 자동 수집 |
| 테스트 | pytest (89개) · ESLint · TypeScript | 백엔드 로직, 프론트 빌드 |
5. 기술별 동작 원리
5.1 바가지 판독기: 사진 → 판정
핵심 원칙: AI는 "읽기"만, 판정은 "코드"가 한다.
가격 비교·퍼센트 계산을 AI에게 맡기지 않으므로, AI가 숫자를 지어낼 수 없습니다.
sequenceDiagram
autonumber
participant B as 브라우저
participant API as FastAPI /api/scan
participant L as LLM
participant M as 매칭·판정 (코드)
B->>B: 사진을 1600px JPEG로 축소 (5MB+ → 수십 KB)
B->>API: POST 사진(base64) + 지금 있는 구
API->>L: 사진 한 장 (한 번만 호출)
L-->>API: 품목명 · 가격 · 수량 · 영어 설명 · 매운 정도 · 재료
API->>M: 기준가 찾기 → 수량 환산 → 판정
M-->>API: 품목별 판정 + 합계 판정 + 25개 구 평균
API-->>B: JSON 응답
B->>B: 구를 바꾸면 AI 호출 없이 브라우저에서 즉시 재판정
① 기준가 찾기: 위에서부터 먼저 맞는 것을 씁니다
| 순서 | 기준 | 비교 방법 |
|---|
| 1 | 서울시 생필품 가격 (공식, 114개 품목 × 25개 구) | 고른 구의 평균, 없으면 서울 평균 |
| 2 | 서울시 착한가격업소 메뉴 가격 (4,161개 메뉴) | 가게별 가격의 "보통 범위" 위쪽 끝(75번째 백분위) · 착한가격업소는 일부러 싸게 받는 가게라 중앙값과 비교하면 일반 식당이 다 비싸게 나오기 때문 |
| 3 | Numbeo 서울 생활물가 (카페·교통·의류 등 40개 항목) | 추정치로 표시 |
② 수량 환산: 규격이 달라도 비교할 수 있게 단위를 맞춥니다.
계란 30구 vs 기준 계란 10개 → ×3 · 콜라 1.5L vs 기준 0.33L → ×4.5 · 1kg ↔ 500g → ×2
③ 판정 기준
| 기준가 대비 | 판정 |
|---|
| 10% 넘게 저렴 | 🔵 저렴해요 |
| ±10% 이내 | 🟢 적정가예요 |
| 10~30% 비쌈 | 🟠 조금 비싸요 |
| 30% 넘게 비쌈 | 🔴 바가지 주의! |
④ 두 가지 AI 경로: 환경변수 하나로 바꿉니다 (LLM_BASE_URL, LLM_MODEL).
| Claude (Haiku 5.5) | Anthropic 호환 게이트웨이 (DeepSeek-V4.1-Flash) |
|---|
| AI가 하는 일 | 읽기 + 품목 대조 + 수량 비율 | 읽기 · 번역만 |
| 품목 대조 | 프롬프트에 품목 목록 포함 (프롬프트 캐시) | 코드가 대조 (scan_match.py) |
| 응답 형식 | 구조화 출력 (messages.parse)으로 스키마 보장 | JSON 답변을 Pydantic으로 검증 |
| 출력 받기 | 일반 호출 | 스트리밍 · 출력 한도 16,000토큰 |
왜 나눴나요? DeepSeek에 "읽기 + 125개 대조 + 비율 계산"을 한 번에 시키면 생각(thinking)이 길어져 출력 한도를 다 쓰고 답을 못 냈습니다.
AI에게는 읽기만 맡기고 대조를 코드로 옮겨 응답 시간 약 1분 → 2~14초, 실패율을 크게 줄였습니다 (실측).
⑤ 메뉴판 통역: 같은 호출에서 메뉴마다 description_en(한 줄 설명), spice_level(0~3), contains(돼지고기·해산물·견과류 등 10가지 중), vegetarian을 받아 칩으로 보여 줍니다. 알레르기 정보는 AI 추정이라는 안내를 함께 표시합니다.
5.2 물가 검색: 영어·한국어 한 번에
검색어 하나로 네 가지 데이터 를 동시에 찾아 한 화면에 보여 줍니다.
| 결과 | 데이터 | 가격 표시 |
|---|
| 장보기 품목 | 서울시 생필품 가격 | 25개 구 평균 중 최저 ~ 최고, 서울 평균 |
| 식당 메뉴 | 착한가격업소 | 가게별 가격의 가운데 50% ("보통"), 중앙값 |
| 마트·편의점 상품 | 한국소비자원 참가격 | 판매점별 정상가의 가운데 50%, 중앙값 |
| 일반 식당 | Claude 웹 검색으로 수집 | 지역별 중앙값 + 가격마다 출처 링크 |
This is the beginning of the README. Read the rest at the original. Read the full README ↗
