K-드라마 음식 검색 MVP 제작 사례 - 코아님의 꿀팁을 가득 곁들인..

소개

첫 버전은 꽤 그럴듯했습니다. K-드라마 장면을 올리면 떡볶이, 라면, 비빔밥, 김치찌개, 한국식 치킨 중 비슷한 음식 세 개를 보여줬습니다. 샘플 이미지 세 장에서는 정답이 모두 상위 3개 안에 들어왔습니다.

그런데 실제 장면 한 장을 넣자 문제가 드러났습니다. 불판 위 고기와 파채가 보이는 이미지를 AI가 라면 77.7%라고 답했습니다.

처음에는 모델 정확도 문제라고 생각하기 쉽습니다. 하지만 더 큰 원인은 제품 구조였습니다. 아는 음식이 다섯 개뿐인 시스템에게 무조건 하나를 고르라고 했으니, 화면에 라면이 없어도 라면이라고 답할 수밖에 없었습니다.

이 글은 이 실패를 출발점으로 고정 후보 분류기를 범용 로컬 비전 모델로 바꾸고, 로그인·무료 사용량·상품 검색·Stripe 테스트 결제 구조까지 붙인 과정입니다. 기능은 되지만 다소 촌스럽고 무거워 보이던 첫 화면을 Apple 디자인 원칙으로 다시 만든 과정도 함께 담았습니다.

만들고 싶었던 것

해외 K-드라마 팬이 화면 속 음식을 보고 궁금해도 음식 이름을 모르면 검색을 시작하기 어렵습니다. 이미지를 넣으면 음식 이름과 설명을 알려주고, 상온 배송 가능한 소스나 간편식 검색으로 이어주는 웹앱을 만들고 싶었습니다.

K-드라마 장면
→ 음식 식별
→ 영어·한글 음식명과 설명
→ 해외 쇼핑 검색

처음부터 큰 서비스를 만들지는 않았습니다. 영상 업로드, 드라마 장면 자동 수집, 냉장·냉동 배송, 제휴 수수료 정산은 제외했습니다. 사용자가 이미지 한 장을 직접 올리고 결과를 확인하는 흐름만 남겼습니다.

진행 방법

1. 다섯 가지 음식만 구분하는 첫 MVP를 만들었습니다

첫 기술 검증에는 로컬 CLIP 모델을 사용했습니다. 이미지와 음식 설명 문장의 유사도를 비교해 떡볶이, 라면, 비빔밥, 김치찌개, 한국식 치킨 중 가까운 후보를 찾는 방식입니다.

실제 음식 이미지 세 장으로 확인한 결과는 다음과 같았습니다.

떡볶이: Top-2
비빔밥: Top-1
김치찌개: Top-1

Top-1 2/3
Top-3 3/3

떡볶이가 치킨보다 낮게 나오는 경우가 있어 단일 정답 대신 후보 세 개를 보여줬습니다. 당시에는 사람이 마지막 후보를 고르게 하면 된다고 생각했습니다.

하지만 실제 사용자가 목록 밖 이미지를 가져오자 세 가지 문제가 드러났습니다.

한국식 고기구이는 후보에 없어서 가장 덜 먼 항목을 정답처럼 보여줬습니다.
CLIP 상대 유사도에 %를 붙여 실제 확률처럼 보이게 했습니다.
틀린 목록에서 후보 세 개를 보여줘도 정답은 그 안에 없었습니다.

후보를 더 늘리기보다, 답을 강요하는 폐쇄형 분류 구조를 먼저 바꿔야 했습니다.

2. Ollama와 Qwen2.5-VL로 열린 인식 구조를 만들었습니다

분류 구조를 버리고 Mac에서 실행하는 Ollama의 qwen2.5vl:7b로 전환했습니다. 미리 정한 음식 중 하나를 고르는 대신, 이미지에서 실제로 보이는 음식이나 조리 장면을 설명하게 했습니다.

사용한 시스템 프롬프트 전문은 다음과 같습니다.

You are a careful Korean food visual analyst for international K-drama viewers.
Identify foods and cooking situations from visible evidence only. The image may show a plated dish, tabletop cooking, ingredients, side dishes, packaging, or no food.

Rules:
- Use open vocabulary; never force the image into a fixed catalog.
- Prefer a correct broad category over an unsupported specific dish or meat cut.
- Recognize cooking scenes, not only plated dishes. A Korean tabletop grill with browned meat and scallion salad or vegetables should normally be described as Korean barbecue; name the exact meat cut only when its defining shape and fat layers are visible.
- Do not use Bulgogi merely as a synonym for grilled meat. Use Bulgogi only for visibly thin, marinated slices, and Samgyeopsal only when pork-belly-like fat layers or strips are visible.
- When exact identity is uncertain, put the broad identification first and explain uncertainty.
- Distinguish the main cooking scene from side dishes. Return at most three genuinely plausible candidates, ordered best first.
- Do not pad the candidate list. Return one candidate when only one meaningful identity is supported.
- Korean names must be natural Korean food terms. English names must be useful to international shoppers.
- Visible evidence must describe pixels actually visible, not assumptions about a drama or restaurant.
- Confidence is high only when defining visual evidence is clear; use medium or low for blur, occlusion, multiple foods, or ambiguous cuts.
- Mark imageQuality as limited when the food is blurred, cropped, distant, or too small for ingredient-level certainty.
- If food is visible, notFoodReason must be an empty string. If no food or cooking scene is visible, set isFood false, return no candidates, and explain why in notFoodReason.
- uncertainty must be a complete explanation of what cannot be determined from the image, not a confidence label.
- Do not identify people, actors, shows, brands, or episode names.
- Search terms should favor shelf-stable sauces, seasonings, kits, or pantry products that can plausibly ship internationally.
- Avoid medical, allergen, or dietary guarantees.

핵심은 음식 이름만 답하게 하지 않고 다음 정보를 함께 반환하게 한 것입니다.

화면에서 실제로 보이는 근거
이미지 화질
확인할 수 없는 부분
음식이 없을 때 추측하지 않는 응답
해외 상품 검색에 사용할 용어

같은 불판 이미지를 실제 회원 계정과 업로드 API를 거쳐 다시 분석한 결과는 다음과 같았습니다.

HTTP 200
Korean BBQ / 한국식 고기구이
화질: limited
근거: 불판 위 고기 조각, 파로 보이는 녹색 채소
불확실성: 정확한 고기 종류와 부위는 사진만으로 단정할 수 없음
이미지 저장: false
이미지 외부 전송: false
무료 사용량: 3회 → 2회

라면을 한국식 고기구이로 바꾼 것보다 더 중요한 변화는, 모델이 어디까지 봤고 어디부터 모르는지 함께 보여준다는 점이었습니다.

3. 기술 데모를 실제 사용 흐름으로 확장했습니다

인식 모델만 바꾼다고 제품이 되는 것은 아니었습니다. 한 페이지에 다음 기능을 연결했습니다.

이미지 선택, 드래그 앤 드롭, Ctrl+V·⌘+V 붙여넣기
JPG, PNG, WebP, HEIC와 8MB 제한 검증
이메일 회원가입·로그인·로그아웃
SQLite 기반 30일 세션과 월 사용량 저장
Free 계정은 성공한 분석만 월 3회 차감
Pro 월 $7.99 화면과 Stripe 테스트 Checkout 구조
Amazon·Google Shopping 일반 검색 링크
추론이 끝난 이미지 임시 파일 즉시 삭제

이미지는 Mac 안에서 처리하기 때문에 이미지별 API 비용이 없고 외부 비전 API로 전송되지 않습니다. 대신 모델 파일이 약 6GB이고 첫 추론이 느릴 수 있다는 단점도 있습니다.

Stripe는 테스트 결제 코드와 안전한 차단 흐름까지만 구현했습니다. 실제 키와 실결제는 활성화하지 않았습니다.

4. 기능은 되지만 제품처럼 보이지 않던 화면을 다시 만들었습니다

초기 디자인은 베이지 배경과 큰 세리프 제목을 사용했습니다. 빨강, 초록, 검정 포인트가 섞였고 후보 목록, 무료 계정, 요금제, 사용 방법이 비슷한 무게로 이어졌습니다.

잡지형 랜딩 페이지처럼 개성은 있었지만, 정작 드라마 장면을 넣어 음식을 찾고 상품까지 연결하는 서비스라는 점은 한눈에 보이지 않았습니다. 기능은 작동했지만 첫 화면이 조금 촌스럽고 무거워 보였습니다.

화면을 다시 만들 때는 스터디장 코아님이 알려주신 getdesign.md 의 Apple Design System Analysis를 참고했습니다. 이 자료는 Apple 공식 디자인 가이드가 아니라 공개된 Apple 화면의 패턴을 독립적으로 분석해 정리한 참고 자료입니다.

자료에서 가져온 것은 화려한 장식보다 제약이었습니다.

SF Pro 계열 시스템 글꼴
넓은 흰 여백
흰색과 #f5f5f7 표면
하나의 Action Blue
pill 형태의 주요 버튼
44px 모바일 터치 타깃
필요한 곳에만 사용하는 얕은 깊이와 블러

Apple 제품 페이지를 복제하지 않고 K-Food Lens에 필요한 원칙만 적용했습니다.

Before

After

DM Serif Display 중심

macOS SF 계열 시스템 폰트

베이지 바탕

흰색과 연회색 표면

빨강·초록·검정 포인트

본문 #1d1d1f, 주요 행동 #0071e3

반복되는 테두리와 장식

단순한 카드와 제한된 그림자

후보 3개와 상대 점수

음식 하나, 보이는 근거, 불확실성

설명을 읽어야 이해되는 화면

장면→음식→상품을 보여주는 데모

색과 폰트만 바꾸고 끝내지는 않았습니다. 첫 화면에 예시 장면, 음식 이름, 보이는 근거, 상품 카드와 Try this scene 버튼을 배치했습니다. 버튼을 누르면 같은 샘플이 실제 업로드 미리보기에 들어가고 분석 버튼이 활성화됩니다.

모바일 390×844 환경에서는 가로 넘침이 없고 주요 버튼 높이가 44px 이상인지 확인했습니다. 다만 디자인 변경 후 전환율이 높아졌다고 말할 수는 없습니다. 외부 사용자의 업로드 완료율과 상품 링크 클릭률은 따로 측정해야 합니다.

결과와 배운 점

현재 확인한 결과는 다음과 같습니다.

자동 테스트             22/22 통과
로컬 비전 회귀 이미지     4/4 통과
운영 의존성 취약점         0개
브라우저 JavaScript 오류   0개
모바일 가로 넘침           0

회귀 이미지는 떡볶이, 비빔밥, 김치찌개, 한국식 불판 구이 네 장입니다. 4/4는 제품 전체 정확도가 아니라 수정한 경로가 다시 깨지지 않았는지 확인하는 작은 회귀 테스트입니다.

1. 후보를 늘리는 것보다 답을 강요하지 않는 구조가 먼저였습니다

다섯 가지를 스무 가지로 늘렸어도 목록 밖 음식은 계속 틀렸을 것입니다. 실제 입력이 열린 범위라면 출력 구조도 열린 범위여야 했습니다.

2. 숫자가 있으면 신뢰가 생기는 것이 아니라 숫자의 의미가 정확해야 했습니다

CLIP 상대 유사도에 %를 붙이자 실제 확률처럼 보였습니다. 현재는 가짜 정밀도를 없애고 근거와 불확실성으로 바꿨습니다.

3. 실패한 한 장이 잘 고른 샘플 여러 장보다 더 많은 것을 알려줬습니다

또렷한 음식 사진에서는 초기 구조도 작동했습니다. 하지만 흐린 실제 장면 한 장이 제품이 틀리는 방식을 보여줬습니다. 평균 점수만큼 실패 사례를 따로 모으는 일이 중요했습니다.

4. 첫 화면은 설명서보다 결과 예시에 가까워야 했습니다

사용자는 긴 소개보다 장면 이미지, 음식 이름, 상품 카드를 보고 더 빨리 서비스를 이해합니다. 그래서 첫 화면에 실제 작동하는 샘플 여정을 넣었습니다.

아직 검증하지 못한 것

현재 단계에서 사업이 검증됐다고 말할 수는 없습니다.

외부 K-드라마 팬의 실제 분석 완료율
음식 결과에 대한 사용자 만족도
상품 검색 링크 클릭률
월 3회 제한과 Pro 가격의 적절성
Stripe 테스트 Checkout·웹훅·구독 취소 전체 흐름
다양한 드라마 장면을 포함한 충분한 정확도 평가

현재는 사용자 Mac에서 실행되는 로컬 MVP입니다. 다음에는 실제 장면을 음식별로 더 모아 실패 유형 중심 테스트셋을 만들고, 해외 K-드라마 팬 5~10명에게 사용하게 해 완료율과 상품 링크 클릭률을 측정할 계획입니다.

이번 작업에서 가장 크게 바뀐 것은 모델 이름이 아닙니다. 처음에는 “다섯 음식 중 무엇과 비슷한가”를 물었습니다. 지금은 “이미지에서 실제로 무엇을 확인할 수 있고, 무엇은 아직 모르는가”를 묻습니다.

AI 제품을 실제로 쓰게 만들려면 정답을 많이 말하게 하는 것보다, 틀릴 때 어떻게 말할지를 먼저 설계해야 한다는 것을 배웠습니다.

도움 받은 글

스터디장 코아님이 알려주신 Apple 디자인 시스템 분석: https://getdesign.md/apple/design-md
해당 자료는 Apple 공식 문서가 아니라 공개된 디자인 패턴을 독립적으로 분석한 참고 자료입니다.

🔥<24기 AI 스터디> 블라인드 최저가로 신청하세요 🔥