뉴저지 포트리 한남마켓 내 한식 반찬·케이터링 업체 디미방에 제작 의뢰를 따내기 위한 데모 웹사이트 + 제안서입니다.
⚠️ 이 사이트는 데모입니다. 실제 주문·결제·발송이 일어나지 않습니다. 모든 데이터는 브라우저 localStorage에만 저장되며 서버로 전송되지 않습니다.
배포 주소: https://deemibang.vercel.app
| 항목 | 주소 |
|---|---|
| 손님 사이트 | https://deemibang.vercel.app (언어 자동 감지 → /en /ko /es /zh) |
| 제안서 | https://deemibang.vercel.app/ko/proposal ← 영업이 가장 많이 열 페이지 |
| 관리자 | https://deemibang.vercel.app/ko/admin |
| 역할 | 아이디 | 비밀번호 | 볼 수 있는 것 |
|---|---|---|---|
| 최고관리자 | admin |
demo1234 |
전체 (설정·구글 연동 포함) |
| 매니저 | manager |
demo1234 |
콘텐츠·주문·회원 (설정 제외) |
| 아르바이트 | staff |
demo1234 |
주문 확인 + 재고 변경만 |
/ko/mypage에서 예시 회원 4명 중 아무나 클릭하면 로그인됩니다.
알레르기가 등록된 회원으로 들어가면 메뉴가 자동으로 걸러집니다.
⚠️ 시연 전 반드시: 관리자 우상단 또는 푸터의 **데모 데이터 초기화**를 눌러 깨끗한 상태에서 시작하세요. 다음 주 로테이션이 비어 있어야 시나리오가 성립합니다.
데모 URL을 그냥 던져도 설명 없이 감이 잡히도록 세 가지 장치를 넣었습니다.
| 장치 | 어디에 | 무엇을 |
|---|---|---|
| 상시 데모 고지 띠 | 전 페이지 최상단 | 접히지 않습니다. "여기 보이는 반찬·가격·사진은 시연용 임시 데이터"를 4개 언어로 |
관리자 화면 열기 버튼 |
고지 띠 우측 | 로그인 없이 한 번에 대시보드로 (/admin/enter) |
| 편집 가능 힌트 | 편집 가능한 영역 | 초록 점선 + ✎ 이번 주 반찬 바꾸기 꼬리표. 누르면 그 관리자 화면이 바로 열립니다 |
편집 힌트는 첫 방문에 켜져 있고, 우하단 버튼으로 끌 수 있습니다(선택을 기억).
관리자 사이드바 하단 **다른 역할로 보기**로 매니저·아르바이트 화면도 볼 수 있습니다.
권장 순서는 ⓪ → A → C → B → D입니다. ⓪로 신뢰를 만들고, A로 "관리가 쉽다"를 각인시킵니다.
/ko/admin → 메뉴판 점검
사장님이 보내주신 menu_front.hwp와 menu_frount_2.hwp를 실제로 대조한 결과입니다.
꾸며낸 예시가 아니라 진짜 문제입니다.
- 만들어 팔면서 게시 메뉴판에는 없는 반찬 13가지 — 손님이 있는 줄 모릅니다
- 코드 440(조기구이)이 게시 메뉴판에 두 번 실려 있습니다
- 오이지 번호가 어긋납니다 — 게시판 228 / 마스터 231, 그런데 228은 오이지무침 번호
- 오탈자 6종 (제육복음→제육볶음, 브로커리→브로콜리, 켈리포이아롤→캘리포니아롤 …)
이어서 주문서 인쇄를 열어 "이 메뉴판은 홈페이지에서 바로 뽑은 겁니다. 손으로 옮겨 적지 않으니 중복도 누락도 안 생깁니다"로 넘어갑니다. 언어도 골라서 뽑힙니다.
말할 것: "사장님, 보내주신 메뉴판 파일을 좀 봤는데요…" 이 한 줄이면 나머지 설명이 훨씬 쉬워집니다.
/ko/admin로그인 → 반찬 로테이션 →다음 주탭 (비어 있음)- 오른쪽 후보 목록에
추천배지(4주 이상 안 나온 반찬)가 보임 - 클릭해서 12칸 채우기 → 김치류가 4개면 편중 경고, 지난주 반찬이면
2주 연속경고 - 각 칸에서 화/목/토 입고 요일 지정 → 주제 입력 →
다음 주 편성 확정하기 - 여기서 노트북을 사장님께 넘기고 직접 해보게 합니다
손님 화면에서 보기→/ko/weekly하단 "다음 주 예고"에 방금 짠 게 나옴
말할 것: "옆집 Yeolmae가 손으로 하는 걸 사장님은 3분에 하십니다."
- 손님 화면 → 케이터링 →
견적 요청하기 - 인원 40명, 알레르기
땅콩·참깨체크, 답변 언어 선택 → 제출 - 데모 모달 → 관리자 → 케이터링 견적 → 방금 요청이
새 요청으로 도착 - 금액 입력(
추천 금액 넣기버튼) →견적 발송
말할 것: "명함에 제일 크게 적힌 게 단체 도시락인데, 지금 온라인엔 그걸 요청할 창구가 하나도 없습니다."
- 관리자 → 반찬 관리 →
새 반찬 등록 - 한국어 탭에만
가지무침입력, 알레르겐에서대두·참깨체크 → 저장 - 목록에
번역 필요 ×3배지 → 다시 열어서AI 초벌 번역클릭 - 1.2초 후 영·스·중이 채워짐 → 영어 탭에서
이 언어 검수 완료체크 - 손님 화면 →
English/Español전환 → 방금 등록한 반찬이 보임
말할 것: "포트리 주민 절반이 집에서 영어를 안 씁니다. 옆집 Charim은 영어로만 팝니다."
- 손님 화면
English→ All Banchan - 왼쪽
Exclude allergens에서Sesame체크 - 해당 반찬이 흐려지고
Contains sesame사유가 표시됨 - 상세 들어가서 알레르겐·영양·보관·데우는 법 확인 → 장바구니 → 픽업 예약
말할 것: "참깨는 2023년부터 미국 FDA 9번째 법정 알레르겐입니다. 한식 나물엔 참기름이 거의 다 들어가죠."
| # | 관리자에서 | 손님 화면에서 |
|---|---|---|
| 1 | 로테이션 확정 |
/weekly + 홈 히어로 교체 |
| 2 | 재고·품절에서 품절 토글 | 목록·상세에 SOLD OUT, 주문 버튼 잠김 |
| 3 | 새 반찬 등록 + AI 번역 | 4개 언어 목록 전부에 노출 |
| 4 | 설정 → 공지 배너 ON | 전 페이지 최상단 배너 |
| 5 | 설정 → 임시 휴무 등록 | 오시는 길 안내 + 픽업 달력에서 해당일 차단 |
| 6 | 회원 등급 VIP로 변경 | 그 회원 마이페이지에 VIP 표시 |
| 7 | 설정 → 언어 끄기 | 손님 언어 선택에서 즉시 사라짐 |
| 8 | 케이터링 패키지 가격 수정 | /catering 카드 가격 반영 |
npm install
npm run dev # http://localhost:3000
npm run build && npm run startNode 20 이상. 사이트를 띄우는 데는 API 키나 환경변수가 필요 없습니다 — 이미지 URL이 코드에 박혀 나가기 때문입니다.
이미지를 다시 만들 때만 키가 필요합니다:
cp .env.example .env.local # GEMINI_API_KEY 채우기
npx wrangler login # Cloudflare R2 업로드용
npm run images # 없는 것만 생성 (재개 가능)
npm run images -- --only=241 --force # 특정 반찬만 다시 뽑기 (주문코드)
npm run images -- --dry # 프롬프트만 확인자세한 내용: docs/guides/gemini-image-setup.md,
docs/guides/cloudflare-r2-setup.md
src/
app/[locale]/
(site)/ 손님 사이트 (헤더·푸터·데모 배지)
proposal/ ★ 제안서 — 네비게이션에 노출 안 됨
admin/ 관리자 (사이드바, 한국어 전용)
components/
ui/ 버튼·모달·드로어 등 프리미티브
site/ admin/ demo/
data/
site.ts NAP 단일 소스 (상호·주소·전화·영업시간)
dishes.ts ★ 반찬 50종 — 클라이언트 실제 주문 코드표 기반
legacy-menu.ts ★ 원본 HWP 두 개 (감사 대상, 오류 그대로 보존)
catering.ts 케이터링 패키지 7종
seed.ts 로테이션·회원·주문·견적 생성 (실행 시각 기준)
content.ts 브랜드 스토리·FAQ
proposal.ts 제안서 내용
generated-images.ts ⚠️ 자동 생성 — 이미지 URL 매핑 (직접 수정 금지)
site/Logo.tsx 로고 컴포넌트 (엠블럼·로고타입·낙관)
site/logo-art.ts ⚠️ 자동 생성 — 로고 SVG 패스 (직접 수정 금지)
i18n/ 4개 언어 딕셔너리 + 로케일 설정
lib/
store.ts localStorage 상태 관리
mock-translate.ts AI 초벌 번역 목업
menu-audit.ts ★ 메뉴판 감사 엔진 (중복·불일치·누락·오탈자 탐지)
public/
brand/ ★ 브랜드 자산 — 클라이언트에게 그대로 넘길 수 있는 벡터
logo.svg 풀 락업 (엠블럼 + 디미방/DEEMIBANG + 낙관)
logo-light.svg 어두운 배경용 반전판
emblem.svg 원형 엠블럼 단독
og-card.png 1200×630 공유·인쇄용 카드
scripts/
trace-logo.py ★ 로고 원본 PNG → 위 자산 + logo-art.ts 일괄 생성
generate-images.mjs 이미지 생성 진입점
lib/
style.mjs 하우스 스타일 + 스타일 앵커 ← 사진 톤을 바꾸려면 여기
dish-prompts.mjs 반찬 50종의 생김새 서술 ← 반찬을 추가하면 여기
scene-prompts.mjs 케이터링·브랜드 이미지
gen.mjs Gemini 호출 / WebP 변환 / R2 업로드
docs/
research.md ★ 사전 조사 리포트 (모든 주장의 근거)
business-prompt.md 비즈니스 프롬프트
ADMIN-GUIDE.md 관리자 사용 설명서
handoff.md 영업 전달 문서
deemibang-logo-transparent.png ★ 클라이언트 제공 로고 원본
클라이언트가 준 PNG 원본(1894×830, 평면 4색)을 scripts/trace-logo.py로 벡터화해서
씁니다. 색상별 마스크를 마칭스퀘어로 따고 더글라스-포이커로 단순화하는 방식이라
재래스터화 오차가 1% 수준(전부 1px 경계)입니다.
python3 scripts/trace-logo.py # 원본을 교체했을 때만 다시 돌립니다한 번 돌려서 결과물을 커밋하는 스크립트이고, 빌드 파이프라인에는 없습니다.
src/components/site/logo-art.ts, public/brand/*, 파비콘·애플 아이콘을 함께 씁니다.
브랜드 갈색 #552401은 이 원본에서 실측한 값이고 디자인 토큰
--color-brand가 같은 값입니다. 원본 로고에는 붉은색이 없습니다 — 링과 낙관
모두 갈색입니다. 초기 팔레트가 명함 저해상 스캔을 붉게 읽어서 "낙관 레드"로
잡았던 것이고, 지금 남아 있는 --color-accent(#C0392B)는 브랜드 색이 아니라
순수 UI 강조색(CTA·주의)입니다.
공통 프롬프트는 ~/Projects/common/demo-site-kit/에 있습니다.
| 페이지 | 성능 | 접근성 | 권장사항 | SEO |
|---|---|---|---|---|
/en 홈 |
85 | 100 | 100 | 66* |
/ko 홈 |
91 | 100 | 100 | 58* |
/en/menu |
77 | 100 | 100 | 66* |
/ko/admin/login |
72 | 100 | 100 | 66* |
/ko/proposal |
60 | 100 | 100 | 66* |
데스크톱은 홈 기준 성능 97 / 접근성 100 / 권장사항 100.
- * SEO 점수는 의도적으로 낮습니다.
robots.txt에Disallow: /를 넣어 데모가 검색에 잡히지 않게 막아뒀기 때문입니다. 이 항목(is-crawlable) 하나만 빼면 100입니다. 실제 오픈 시src/app/robots.ts를allow: "/"로 바꾸면 됩니다. - 접근성은 전 페이지 100입니다. 초기 측정에서 92였고, 아래 세 가지를 고쳐 100이 됐습니다:
명암비 토큰을 흰색이 아니라 실제 페이지 배경(한지색
#f7f2e7) 기준으로 재계산,role="img"없는<span>의aria-label제거, 제목 계층(h1→h3) 보정. - 성능은 페이지마다 편차가 큽니다. 제안서 페이지(60)가 가장 낮은데, 표와 목록이 많은 긴 문서라서 그렇습니다. 모바일 4G 스로틀링 기준이고 실제 체감은 그보다 빠릅니다. 더 올리려면 제안서를 서버 컴포넌트로 분리하면 됩니다(현재는 인쇄 버튼 때문에 전체가 클라이언트 컴포넌트). 데모 목적상 우선순위를 낮게 뒀습니다.
먼저 말하면 솔직함이 되고, 지적당하면 변명이 됩니다.
- 사진이 전부 AI로 만든 예시 이미지입니다. 인스타그램 접근이 막혀 실제 사진을 못
받았습니다. 반찬 50종·케이터링 7종·매장 이미지를 품목별로 하나씩 생성했고, 그릇·조명·
색감을 통일해 한 사람이 하루에 찍은 것처럼 맞췄습니다. 화면마다
예시 이미지라벨이 붙어 있습니다. 실제 사진을 주시면 파일만 교체하면 되고 코드는 손대지 않습니다. → 촬영은 계약 범위에 포함되며, 제안서에 부가가치 항목으로 들어가 있습니다. - 주소·전화는 명함 기준이 맞지만 영업시간은 가정값입니다 (화–일 09:00–19:00, 월 휴무).
- 반찬 목록은 실제 것입니다 — 보내주신
menu_frount_2.hwp의 50개 품목과 주문 코드를 그대로 썼습니다. 가격만 가정값입니다(미국 반찬가게 통상 시세). 실제 가격을 주시면 교체합니다. - 분류·매운맛·알레르기 정보는 저희가 추정한 값입니다. 품명만 보고 넣었으므로 실제 조리법과 다를 수 있습니다. 특히 알레르기는 반드시 확인이 필요합니다.
- ‘쌀게무침’(602)은 표기 확인이 필요합니다. 원문이 오타일 가능성이 있어 메뉴판 점검 화면에서 확인 항목으로 표시해 뒀습니다.
- 결제·문자·번역 API는 연결되어 있지 않습니다. 해당 지점에서 데모 모달이 뜹니다.
- 관리자 화면은 한국어 전용입니다 (사장님이 쓰는 화면이므로 의도한 것). 제안서에 확장 옵션으로 안내되어 있습니다.
- 로테이션 편성은 클릭 방식입니다. 드래그보다 빠르고 태블릿에서도 안정적이라 의도적으로 선택했습니다.
- 지도는 OpenStreetMap입니다. 실서비스에서는 구글 지도로 교체해 구글 비즈니스 프로필의 리뷰·영업시간과 연동합니다.
전체 미확인 항목은 docs/research.md §10 참조.