Chalpu Web - 음식 촬영 가이드 웹뷰

🚀 빠른 시작

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 정적 파일 MIME 타입 테스트
npm run test:static

🔧 정적 파일 MIME 타입 문제 해결

문제 상황

앱 개발자로부터 받은 피드백: 정적 자원(CSS·JS)이 text/html로 리다이렉트-응답되어 MIME 오류가 발생

해결 방법

1. Next.js Middleware 생성 (src/middleware.ts)

   • 정적 파일 경로(/_next/static/*)를 인증에서 제외
   • API 경로(/api/*)를 인증에서 제외

2. next.config.ts 헤더 설정 최적화

   • 정적 파일에 대한 적절한 MIME 타입 설정
   • 캐시 컨트롤 헤더 추가
   • CORS 헤더 설정

3. 테스트 방법

   # 개발 서버 실행 후
   npm run test:static

예상 결과

• /_next/static/* → Status: 200, Content-Type: text/css 또는 application/javascript
• 정적 파일이 로그인 페이지로 리다이렉트되지 않음
• WebView에서 정상적으로 CSS/JS 로드 가능

---

📱 프로젝트 개요

사진

1. 음식 사진을 찍는 행위 자체에 대한 어려움
    - 음식의 위치(왼쪽, 오른쪽, 중앙)를 맞추기 어려움
    - 좋은 사진의 각도를 모름 (예/ 햄버거는 수평 뷰 / 피자는 탑뷰)


        ![image.png](attachment:c3435fe4-469c-4d99-acf3-e6d98cf7c926:image.png)

        ![image.png](attachment:8214581b-1e24-4847-828e-3a5e3e71cab8:image.png)

    - 각 음식에 맞는 조명(빛)을 알기 어렵거나, 해당 빛을 구하기 어려움(자연광)
2. 음식 사진을 찍고나서 편집하는 행위에 대한 어려움
    - 편집 규정에 대한 정보 습득
        - 각 플랫폼마다 사진 화소수나 비율에 대한 규정이 다름 (빈칸은 공식적으로 서술되어 있지 않은 부분들)
        - 각 플랫폼별 사진 규정


            |  | 배달의 민족 | 쿠팡이츠 | 요기요 | 네이버 플레이스 | 카카오 맵 |
            | --- | --- | --- | --- | --- | --- |
            | 확장자 | JPG/PNG | JPG | - | - | - |
            | 사이즈(가로x세로, px) | 1280x960 **이상** | 1080x660 **이상** | 1080X640 | - | - |
            | 용량 | 15MB 이하 | - | - | - | - |
            | 메뉴사진 원본 비율 | **4 : 3**
             | **18 : 11**
             | **16 : 9** | - | - |
            | 메뉴사진 확대 비율 | 4 : 3 | 18 : 11 | 16 : 9 | 1 : 0.625 (메뉴 확대)
            1 : 0.5294 (가게대표) | - |
        - 화소수, 용량(MB), 사진 비율 에 대한 지식이 부족함
    - 음식의 후편집
        - 누끼 / 보정 (명도, 채도  색상) / 사진 자르기
3. 사진을 편집하고 나서 플랫폼에 올리는 것에 대한 어려움
    - 우리가 해결할 수 있는 방법이 없음

• 프리랜서를 고용할 때의 어려움
  • 왜 프리랜서를 부를까?
    • 좋은 사진을 얻고 싶어서
    • 플랫폼의 사진규정을 만족하는 사진을 창출해준다.
    • 플랫폼에 승인이 될 때까지 사진을 수정을 해준다.
    • 사진을 촬영하면서 음식 구성, 음식의 배치, 양, 조합 등에 대한 조언을 해준다.
    • 각 플랫폼에 제한되지 않은 사진 업로드가 가능하기 때문에
      • 플랫폼(배달의 민족)에서 찍어준 이미지는 다른 플랫폼(쿠팡이츠)에 사용할 수 없다.
  • 프리랜서를 고용할 경우 음식점 홍보를 위한 메뉴 촬영이 비싸다.
    • 사진기사 프리랜서를 부르기 위한 가격 테이블 (크몽 기준)
  • 프리랜서를 부르는 것의 단점
    • 처음(창업 초기)에 수십개의 음식 사진을 추가할 때
      • 하루에 모든 음식을 준비해야하는 번거로움
    • 메뉴 한 두개 추가할 때
      • 한 두장만 찍어주는 프리랜서를 찾기 어려움
        • 프리랜서마다 계약을 해주는 최소 사진 장 수가 다름
      • 한 두장만 찍으려고 해도 프리랜서들은 출장비를 받음.
    • 제한적인 상황(냉면같은 계절음식 또는 빙수같은 녹는 음식)에서 한 번에 음식 촬영이 힘듦 .
    • 과반수의 프리랜서가 촬영된 사진의 원본을 제공하지 않음

사진촬영 외

• 메뉴 설명(디스크립션)
  • 메뉴 설명이란?
  • 설명을 만들기 귀찮다.
• 메뉴판 (프리랜서들이 메뉴판을 파일(pdf)의 형태로만 제공)
  • 비싸다
• SNS 마케팅
  • 네이버 블로그, 인스타, 쓰레드, 틱톡, 유튜브 쇼츠, 당근 등에서 홍보글을 어떻게 쓰는 지도 모르고 쓰기도 귀찮다.
    • 다수의 오픈 채팅방 채팅으로 확인됨(개인정보라 공개 불가)

솔루션

사진

• 촬영 가이드
  • 사용자는 음식이나 담는 도구에 맞는 가이드나 프레임을 통해 스마트폰으로 촬영을 한다
  • 사용자는 촬영 중 자신의 이미지가 플랫폼에 어떻게 업로드 될 지 예상할 수 있다.(프레임)
  • 사용자는 실시간으로 촬영에 대한 피드백을 받을 수 있다
    • ex) 좀 더 음식에 가까이 가세요, 음식에서 조금 떨어져 주세요
  • 촬영 예시

사진촬영 외

• 생성된 사진에 대한 ai 기반 디스크립션 생성
  • 사용자는 사진을 넣으면 사진의 정보와 가게의 context에 맞춰 음식에 대한 설명을 ai를 통해 제공 받는다.
• 메뉴판 생성 (파일 형태로 제공, 파일 형태는 미정)
  • 사용자는 메뉴들의 정보와 가게의 context에 맞춰 파일 형태의 메뉴판을 제공 받는다.
    • 제공 형태
      • 사전에 여러 템플릿을 AI 로 만든 후 사용자에게 템플릿 형태로 제공한다
      • 메뉴판 사진 예시
      • 사용자가 버튼을 누르면 바로 생성 AI 로 생성한다.
    • 촬영한 음식 사진을 활용한 시각적 메뉴판 자동 생성
    • 다양한 템플릿 제공 (한식, 중식, 양식, 카페 등 업종별 특화 디자인)
    • 가격, 메뉴 설명, 추천 메뉴 표시 등 정보 자동 배치
• 포스터, 홍보물 생성
  • 매장 홍보 포스터, 전단지 (파일 제공)
    • 대표 메뉴 사진을 활용한 홍보물 자동 생성 (A4 크기 예상)
    • 신메뉴 출시, 할인 이벤트 등 목적별 포스터 템플릿 제공
    • 매장 로고, 연락처, 위치 정보 자동 삽입
  • SNS 홍보물
    • SNS 홍보 이미지 및 문구 자동 생성
      • SNS : 네이버 플레이스 소식탭, 인스타그램, 당근 마켓, 네이버 블로그
      • SNS 해시태그 예시
    • 해시태그 자동 생성
      • 음식 종류별 인기 해시태그 기반으로 (해시태그 조합) 생성
      • 지역별 맛집 해시태그 (#강남맛집, #홍대맛집 등) 자동 포함

1. 가이드를 활용한 사진 촬영 유저 스토리

• 자영업자로서, 플랫폼이나 SNS에 메뉴 사진을 올릴 때 픽셀, 해상도, 용량 같은 어려운 기술 용어를 몰라도, 앱이 자동으로 모든 필수 기준을 맞춰주길 원한다, 그래서 전문가가 아니어도 누구나 쉽게, 무료로 업로드 가능한 사진을 만들고, 사진 등록에 대한 걱정과 번거로움을 없앨 수 있다.
• 세부 유저 스토리
  • 자영업자로서, 사진을 저장할 때도 픽셀, 해상도, 파일 형식 같은 선택 없이, 플랫폼에 바로 쓸 수 있도록 앱이 알아서 처리해주길 바란다, 그래서 복잡한 설정 없이 바로 사용할 수 있다.
  • 자영업자로서, 이 모든 과정을 무료로 제공받고 싶다, 그래서 비용 부담 없이 내 가게 메뉴 사진을 직접 관리할 수 있다.
• 플로우 설계 원칙
  • 사용자는 복잡한 용어나 설정에 대한 지식 없이 앱의 안내사항만 따르면 플랫폼 기준을 자동으로 맞출 수 있어야 합니다.

2. AI 기반 디스크립션(문구) 생성 유저스토리

• 자영업자로서, 메뉴 사진을 찍거나 기존 사진을 선택할 때, 음식에 어울리는 설명 문구를 직접 고민하지 않고 AI가 자동으로 다양한 스타일의 설명을 제안해주길 원한다, 그래서 설명 작성에 드는 시간과 번거로움을 줄이고, 플랫폼/SNS에 바로 쓸 수 있는 멋진 문구를 쉽게 확보할 수 있다.
• 세부 유저스토리
  • 자영업자로서, 내 가게 메뉴 사진을 한눈에 보고, 원하는 사진을 쉽게 선택해 AI 설명 생성을 시작하고 싶다, 그래서 설명 작성 작업이 한결 간편해진다.
  • 자영업자로서, AI가 기본형/감성형/SNS형 등 다양한 스타일로 설명 문구를 자동 추천해주길 바란다, 그래서 내 가게와 상황에 맞는 설명을 빠르게 고를 수 있다.
  • 자영업자로서, AI가 제안한 설명을 바로 수정하거나, 글자 수 등 플랫폼별 조건을 쉽게 확인하고 적용하고 싶다, 그래서 각 플랫폼에 딱 맞는 설명을 번거로움 없이 완성할 수 있다.
    • 예) 배달의 민족은 00자 제한, 요기요는 00자 제한
• 플로우 설계 원칙
  • 사용자는 복잡한 설정 없이 간단한 플로우만 거치면 됩니다.
  • 메뉴 사진을 한눈에 볼 수 있는 갤러리 UI를 제공하여, 원하는 사진을 선택할 수 있도록 합니다. (문구 생성하기 전 사진 선택 단계)
  • AI가 기본형, 감성형, SNS형 등 다양한 스타일의 설명 문구를 자동으로 ****제안합니다.
  • 각 플랫폼별(배달앱, 인스타그램 등) 글자 수, 다른 메뉴의 문체 등, 문체(말투) 등 조건을 미리 적용해, 사용자가 별도로 신경 쓰지 않아도 문구를 받을 수 있습니다.
  • AI가 제안한 설명을 바로 수정할 수 있도록 하고, 실시간으로 글자 수를 시각적으로 안내합니다.

3. 메뉴판 생성 유저스토리

• 자영업자로서, 내 가게의 메뉴와 분위기에 맞는 메뉴판을 쉽고 빠르게 만들고 싶다. 그래서 디자인에 대한 고민 없이, AI가 자동으로 다양한 템플릿을 추천해주고 내 정보만 입력하면 완성된 메뉴판 파일을 받을 수 있길 원한다.
• 세부 유저 스토리
  • 자영업자로서, 한식/중식/양식/카페 등 내 업종에 맞는 메뉴판 디자인 템플릿을 쉽게 선택하고 싶다. 그래서 내 가게 분위기에 어울리는 메뉴판의 미리보기를 보고 빠르게 만들 수 있고 파일(PDF, 사진)로 다운받을 수 있다.
  • 자영업자로서, 메뉴 이름, 가격, 설명, 추천 메뉴 등 필요한 정보만 입력하면, AI가 자동으로 정보 배치와 디자인을 완성해주길 바란다. 그래서 메뉴판 제작 시간을 크게 줄이고, 메뉴판을 만들 수 있다.
• 플로우 설계 원칙
  • 사용자는 업종, 분위기, 메뉴 정보만 입력하면 복잡한 디자인/파일 설정 없이 메뉴판을 완성할 수 있어야 합니다.
  • 템플릿 미리보기와 간단한 선택만으로 메뉴판 스타일을 결정할 수 있도록 합니다.
  • 기존 데이터(메뉴 이름, 가격, 설명, 사진)를 불러와 자동 배치할 수 있도록 합니다.
  • 음식 사진을 활용한 시각적 메뉴판도 클릭 한 번으로 생성할 수 있어야 합니다.
  • 메뉴판 파일 형식(PDF, 이미지 등)은 자동으로 제공하거나, 사용자가 쉽게 선택할 수 있도록 안내합니다.
  • 모든 과정은 “생성 버튼 클릭 → 미리보기 → 다운로드/공유”의 단계로 설계합니다.

4. 포스터 및 홍보물 생성 유저 스토리

• 자영업자로서, 내 가게의 대표 메뉴와 정보를 활용해 손쉽게 매장 홍보 포스터와 전단지, 그리고 SNS 홍보 이미지를 만들고 싶다. 그래서 디자인이나 홍보 문구, 해시태그 같은 복잡한 고민 없이 AI가 목적에 맞는 템플릿과 내용을 제공해주고, 완성된 홍보물을 받을 수 있길 원한다.
• 세부 유저 스토리
  • 자영업자로서, 신메뉴 출시, 할인 이벤트 등 목적에 맞는 다양한 포스터/전단지 템플릿을 선택하고 홍보물을 빠르게 제작할 수 있다.
  • 자영업자로서, 매장 로고, 연락처, 위치 정보 등 필수 정보를 자동으로 삽입해주길 원한다. 그래서 쉽게 홍보물을 완성할 수 있다.
  • 자영업자로서, 완성된 포스터/전단지를 A4 등 이미지로 바로 다운로드하거나 인쇄하고 싶다. 그래서 오프라인 홍보에 바로 활용할 수 있다.
  • 자영업자로서, 네이버 플레이스, 인스타그램, 당근마켓, 네이버 블로그 등 다양한 SNS 채널에 맞는 홍보 이미지와 문구를 자동으로 생성해주길 바란다. 그래서 각 채널에 홍보를 손쉽게 진행할 수 있다.
  • 자영업자로서, 음식 종류별 인기 해시태그와 지역 맛집 해시태그가 자동으로 조합되어 제공되길 원한다. 그래서 트렌드에 맞는 홍보 효과를 높일 수 있고 홍보 작업이 간소화된다.
• 플로우 설계 원칙
  • 사용자는 홍보 목적(신메뉴, 이벤트 등)만 선택하면, AI가 상황에 맞는 템플릿과 레이아웃을 제공합니다.
  • 대표 메뉴 사진, 매장 로고, 연락처, 위치 등 정보는 한 번 입력하거나 기존 데이터를 불러와 자동 배치할 수 있습니다.
  • 포스터/전단지는 미리보기와 간단한 선택만으로 스타일을 결정하고, 이미지는 자동 제공 또는 사용자가 쉽게 선택할 수 있습니다.
  • SNS 홍보물은 각 채널별 이미지 규격과 문구 스타일을 자동 생성해주고 인기 해시태그는 자동 조합되어 추천되며, 사용자는 필요에 따라 수정하거나 복사해 바로 활용할 수 있습니다.