AI로 인터랙티브 스시 레스토랑 웹사이트 만들기

Claude Desktop

데스크톱 앱의 Claude Code를 사용해 레스토랑 웹사이트를 설정하고 꾸밉니다.

Claude Desktop 다운로드하기

https://claude.ai/download

GitHub 계정

무료입니다. 나만의 KAITEN 사본을 여기에 보관하며, Hostinger는 여기서 배포합니다.

GitHub 계정 만들기

https://github.com/signup

Node.js

LTS 버전을 다운로드하세요. Claude가 스토어를 설치하고 점검하는 데 씁니다.

Node.js 다운로드하기

https://nodejs.org/en/download

Supabase 계정

무료 플랜이면 충분합니다. 메뉴, 사진, 영업시간, 주문, 관리자 로그인 정보를 보관합니다.

Supabase 계정 만들기

https://supabase.link/r4gdwhi

Hostinger 호스팅

호스팅은 스토어를 공개하는 5단계에서 필요합니다.

Hostinger 플랜 선택하기

Unlimited 플랜이나 Cloud 플랜을 사용하세요. KAITEN은 정적 웹사이트가 아니라 Node.js Web App으로 배포됩니다.

나만의 사본 만들기

GitHub에서 KAITEN 열기

https://github.com/salhiworks/kaiten-sushi-store

Use this template를 클릭한 다음 Create a new repository 클릭하기 이름을 정하고 Public 또는 Private 선택하기 Create repository를 클릭하고 저장소 주소 복사하기

Supabase 프로젝트 만들기

Supabase 대시보드 열기

https://supabase.com/dashboard

New project 클릭하기 — 지역은 아무 곳이나, Free 플랜이면 충분합니다 데이터베이스 비밀번호를 안전한 곳에 저장하기 — Claude에게는 필요 없습니다 프로젝트가 준비되면 Project ID 복사하기

Supabase Project Settings General

Claude에게 필요한 프로젝트 정보는 Project ID뿐입니다. 테이블을 만들거나 SQL을 작성할 필요가 없습니다. 데이터베이스는 3단계에서 Claude가 설정합니다.

Claude Desktop으로 가져오기

Claude Desktop Code Local

Documents 같은 폴더에서 Local 세션을 시작하고, 아래에 저장소 주소를 넣은 뒤 보내세요:

사본 클론하기

나만의 KAITEN 저장소를 새 하위 폴더로 내려받고, Claude가 업데이트할 수 있는지 확인합니다.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, tell me exactly how to install it. Then check that you can push to this repository with git push --dry-run. If GitHub needs me to sign in, tell me exactly what to do, and never ask me to paste a password or token into the chat. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

내 저장소 주소

https://github.com/your-name/my-sushi-restaurant

KAITEN 폴더 열기

새 Local 세션 시작하기 Claude가 방금 만든 폴더 열기 — README.md가 들어 있는 폴더 Claude Desktop이 물으면 폴더를 신뢰하기

Claude에게 스토어 연결 요청하기

KAITEN 세션에서 아래에 Project ID를 입력하고 보내세요:

KAITEN을 Supabase에 연결하기

Claude가 Supabase CLI로 스타터의 마이그레이션 3개와 기본 메뉴를 적용하고, 보안과 스토리지를 확인한 뒤 Hostinger에 넣을 공개 값 2개를 알려 줍니다.

Connect this KAITEN restaurant to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md (step 2, "Make it a real store with Supabase") and docs/SUPABASE.md first, and follow docs/SUPABASE.md's Supabase CLI steps. Use only the SQL this project already has. Don't write new tables, policies or setup SQL, and don't change the store's code. Use only this project's own pinned Supabase CLI, through npx supabase after npm install — never a global supabase command — always on my hosted project. Never run supabase db reset, supabase migration repair or any command that deletes data, never use --include-seed, and never start a local database or Docker. Never ask me for a password, an access token or a Secret key, and never use --reveal. Do these yourself, and tell me what each one does before you run it: 1. Check that Node.js 22 or newer is installed (if it isn't, stop and tell me how to install it), then run npm install and check that npx supabase --version shows 2.122.0. If it doesn't, stop and tell me. 2. Check that I'm signed in to the Supabase CLI. If I'm not, stop and tell me to run npx supabase login in the Terminal myself, and continue when I say I'm signed in. 3. Link this folder with npx supabase link --project-ref {{PROJECT_REF}}, then show me the project's name and URL and ask me to confirm it's the right one. 4. Show me the project's migration history (npx supabase migration list --linked). If it has migrations that aren't in supabase/migrations, stop and explain what you see. If the history is empty but the table public.dishes already exists, the setup was already run by hand: stop and tell me, and push nothing, because these files must not run twice. 5. Show me what the push would apply (npx supabase db push --linked --dry-run). It must be exactly the three files in supabase/migrations, in order: kaiten_schema, kaiten_seed, kaiten_private_helpers. Then apply them with npx supabase db push --linked, so they are recorded in the project's migration history. They create the tables, the Row Level Security policies, the dish-images storage bucket and the starting menu. There is no separate seed step. 6. Verify the setup with npx supabase db query --linked: Row Level Security is on for all seven tables in public, the public dish-images bucket exists, and there are 5 plate tiers, 4 categories and 8 dishes. Fix nothing by hand: tell me what's wrong. 7. Show me my Project URL and Publishable key (sb_publishable_...) as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger, using npx supabase projects api-keys --project-ref {{PROJECT_REF}}. If no Publishable key is listed, tell me to copy it from Connect in the Supabase Dashboard. Never read, use or write the Secret key or service_role key, and don't create .env.local. Then stop and tell me to create my admin user in the Supabase Dashboard. When I give you my admin email, never my password, add that user to public.admin_users with the SQL in docs/SUPABASE.md ("Your admin account"), through npx supabase db query --linked, and check that the row exists. Finally, tell me in plain words what passed and what is still left to do.

Supabase Project ID

abcdefghijklmnopqrst

Claude는 작업할 때마다 먼저 물어봅니다 — Allow를 클릭하세요. 내 차례가 되면 Claude가 멈춥니다.

Supabase CLI에 로그인하기

Claude가 요청하면 이 명령을 직접 한 번 실행하세요. 브라우저가 열립니다:

세션 제목 표시줄의 Terminal 클릭하기 아래 명령 실행하기 열린 브라우저 창에서 로그인 승인하기 로그인했다고 Claude에 알리기

npx supabase login

관리자 계정 만들기

Supabase Authentication Users

Add user를 클릭한 다음 Create new user 클릭하기 이메일과 강력한 비밀번호 입력하기 Auto Confirm User는 체크된 상태로 두고 사용자 만들기 Claude에게 관리자 이메일 알려 주기 — 비밀번호는 절대 알려 주지 않기

Supabase Authentication Sign In / Providers

Allow new users to sign up을 끄고 저장하기 — 이 스토어에는 고객 계정이 없습니다

Claude가 내 이메일을 스토어의 관리자 목록에 추가합니다. 5단계에서 라이브 스토어의 /admin 에서 로그인합니다.

Supabase CLI가 작동하지 않나요? 직접 설정하기

Supabase 프로젝트에서 SQL Editor를 엽니다. KAITEN 폴더에 있는 다음 파일 3개를 이 순서대로 한 번씩 실행하세요. 각 파일을 열어 전체를 복사하고, 새 쿼리에 붙여 넣은 뒤 Run을 클릭합니다.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Connect에서 Project URL과 Publishable key를 복사해 두세요. 5단계에서 Hostinger에 추가합니다. 위에서 관리자 계정을 만든 뒤, 아래에 이메일을 입력하고 SQL Editor에서 이 SQL을 실행하세요.

나를 관리자로 지정하기

insert into public.admin_users (user_id) select id from auth.users where email = '{{ADMIN_EMAIL}}';

관리자 이메일

you@example.com

Claude에게 레스토랑 설명하기

아는 내용만 채우세요. 나머지는 비워 두면 Claude가 KAITEN의 기본 내용을 유지합니다. 그런 다음 KAITEN 세션에서 보내세요:

내 스시 레스토랑 꾸미기

이름, 문구, 디자인을 리브랜딩하고 회전 벨트와 주문 기능은 그대로 유지한 채, 변경 사항을 내 GitHub 저장소에 푸시합니다.

This folder is my own copy of the KAITEN sushi restaurant. Before you change anything, read README.md ("How it works"), AGENTS.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the website for my restaurant. Restaurant name: {{RESTAURANT_NAME}} Our concept and story: {{RESTAURANT_STORY}} Visual identity: {{VISUAL_STYLE}} Where each change belongs: - The brand mark and its default name: src/components/site/brand-mark.tsx - Homepage and about copy: src/components/home/ and src/app/(store)/about/page.tsx - Colours and fonts: src/app/globals.css and src/app/layout.tsx The restaurant name guests see in the header, footer and page titles, plus the address, phone, opening hours, dishes, photos and plate prices, come from the database. Don't hard-code them: I'll set them in the admin after launch. Tell me which name to enter there. Keep these exactly as they are: - The sushi conveyor belt in src/components/ui/sushi-conveyor-menu.tsx: dragging, flicking, lifting a plate, the plate stack and every animation, timing and hit area - The menu, the order and checkout, pickup ordering, the admin, the Supabase migrations, KAITEN_MODE and the other environment variables - The dependencies: don't add new ones First show me a short plan: every file you will change, and what changes in it. Wait for my approval. Then make the changes, and run npm install, npm run lint and npm run typecheck so the build can't break. Fix anything they report. Don't start a local server. Then summarize what you changed and wait. I may ask for more changes. Only when I say it's ready: make sure .env.local and any other secrets are not committed, commit everything with a clear message and push it to the main branch of my own GitHub repository. Never push to any other repository. If GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me the commit you pushed.

레스토랑 이름

Sushi Nami

레스토랑의 콘셉트나 이야기

2009년부터 리옹에서 운영해 온 가족 경영 회전초밥 카운터. 생선은 아침 시장에서 들여오고, 밥은 매시간 새로 짓습니다.

비주얼 아이덴티티

Claude는 브랜드, 디자인, 코드를 바꿉니다. 요리, 사진, 접시 가격, 카테고리, 영업시간, 포장 정보, 주문은 출시 후 5단계에서 관리자 페이지로 관리합니다. Claude의 변경 사항을 검토하고, 같은 세션에서 추가 수정을 요청한 뒤, 준비되면 Claude에게 알려 주세요. Claude가 GitHub 저장소에 한 번 푸시하고, 5단계에서 이를 배포합니다.

Web App 만들기

아직 호스팅이 없나요? 준비물에서 플랜을 마련하세요.

Hostinger Websites Create site Web App

Hostinger에서 도메인을 선택할 수 있다면 내 도메인을 고르세요. 그렇지 않으면 앱이 임시 도메인에서 시작됩니다 Import Git Repository 선택하기 GitHub를 승인하고, 4단계에서 Claude가 푸시한 변경 사항이 담긴 내 KAITEN 사본을 선택하세요

다른 곳에서 등록한 도메인인가요? Hostinger가 보여 주는 DNS 레코드를 도메인 등록 업체에 추가하고, 기존 이메일 레코드는 그대로 두세요.

설정 및 배포하기

Hostinger가 감지한 Next.js 설정 유지하기 — 스토어 빌드와 실행은 Hostinger가 알아서 합니다 Node.js 22 이상 선택하기 빌드 명령이 npm run build이고 시작 명령이 npm start인지 확인하세요. 잠긴 데모를 빌드하는 npm run build:demo는 절대 사용하지 마세요

배포하기 전에 Environment variables를 열고 Edit를 클릭해 다음 3개를 추가하세요. KAITEN_MODE는 실제 주문과 관리자 페이지를 켭니다. 이 값이 없으면 사이트가 데모로 빌드됩니다. Supabase 값 2개는 3단계에서 Claude가 보여 준 값입니다. 이 값들은 스토어에 빌드되어 들어가므로, 나중에 하나라도 바꾸려면 다시 배포해야 합니다.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

소문자로 쓴 live라는 단어

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

Supabase 값은 Connect에 있습니다.

Connect 열기

https://supabase.com/dashboard/project/_?showConnect=true

공개 값만

Supabase의 Secret key나 service_role 키는 여기에 절대 넣지 마세요. NEXT_PUBLIC_으로 시작하는 값은 브라우저에서 누구나 볼 수 있습니다.

Finish, 이어서 Deploy를 클릭하고 빌드가 끝날 때까지 기다리기

임시 도메인에서 운영 중인가요?

내 도메인으로 바꾸려면 Hostinger에서 Web App을 열어 그곳에서 도메인을 연결하고, 표시되는 DNS 레코드를 도메인 등록 업체에 추가하세요. KAITEN은 자체 주소를 저장하지 않으므로 바꿀 것도 없고 다시 배포할 필요도 없습니다.

레스토랑 설정하기

라이브 스토어에서 /admin을 열고 관리자 이메일로 로그인하세요. 관리자 페이지에서 저장한 모든 내용은 데이터베이스에 바로 반영되며, 코드를 바꿀 필요가 없습니다.

Restaurant에서 먼저 Hours are in 아래에서 시간대를 선택한 다음, Restaurant name, 포장 수령 주소, 전화번호, 영업시간을 설정하고 Save restaurant details를 클릭하세요 Plates & prices에서 접시 색깔별 가격을 정하고 Save plate prices를 클릭하세요. 그 접시의 모든 요리가 이 가격을 따릅니다 Menu에서 요리의 Edit를 클릭해 세부 정보를 바꾸고, Replace photo로 내 사진을 넣은 뒤 Save changes를 클릭하세요. 새 요리는 Add dish로 추가합니다 제공하지 않는 요리는 On menu를 끄고, 그날 품절된 요리는 In stock을 끄세요 Categories에서 메뉴 섹션의 이름을 바꾸거나 순서를 바꾸거나 새로 추가하세요

오픈 전에 기본 사진 교체하기

기본 요리 사진 8장은 원본 컴포넌트의 데모에서 가져온 것으로, 권리가 확인되지 않았습니다. 직접 소유하거나 라이선스를 받은 사진을 사용하세요.

요리 사진 요건

정사각형, 최소 800 × 800 px

위에서 촬영하고, 접시가 화면을 가득 채울 것

투명 배경(PNG 또는 WebP)이어서 접시 주위로 벨트가 보일 것

최대 5 MB

확인하고 출시하기

도메인을 여세요. 자물쇠가 표시되고, 벨트가 돌아가며, 헤더에 영업 상태가 표시됩니다 접시 몇 개를 주문에 담고 Review order를 클릭한 다음 Checkout for pickup을 클릭하세요 이름과 전화번호를 입력하고 Place pickup order를 클릭하세요 관리자 페이지에서 Orders를 열고 주문을 찾아 Start preparing을 클릭하세요 주문 확인 페이지에서 Refresh status를 클릭하세요. 이제 Preparing이 표시됩니다

스토어는 영업시간 중이면서, 모든 관리자 페이지 상단의 Taking orders가 켜져 있을 때만 주문을 받습니다. 손님은 수령할 때 결제하며, 온라인 카드 결제는 없습니다.

이후 요리, 사진, 가격, 영업시간은 관리자 페이지에서 바꾸세요. 바로 반영됩니다. 디자인이나 코드를 바꾸려면 Claude에게 요청하고 푸시를 승인하세요. Hostinger는 main에 푸시할 때마다 스토어를 다시 빌드합니다.