비싼감? · WonSense

"이 가격, 서울에선 비싼 걸까?" 외국인이 가격표·메뉴판 사진 한 장으로 서울 물가를 바로 판단할 수 있게 돕는 서비스

🌐 배포	🎬 시연 영상
won-sense-seven.vercel.app	youtu.be/DbW0YEleRmY

---

목차

1. 왜 만들었나요?
2. 주요 기능
3. 시스템 구조
4. 기술 스택
5. 기술별 동작 원리
6. 데이터 출처
7. 프로젝트 구조
8. 로컬에서 실행하기
9. 테스트와 배포

---

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 웹 검색으로 수집	지역별 중앙값 + 가격마다 출처 링크

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗