AI로 인터랙티브 조명 스토어 만들기 (Supabase + Hostinger)

Claude Desktop

Claude Code가 그 안에서 실행되어 스토어를 꾸며 줍니다. 유료 Claude 플랜이 필요합니다.

Claude Desktop 다운로드하기

https://claude.ai/download

GitHub 계정

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

GitHub 계정 만들기

https://github.com/signup

Hostinger 호스팅

실제 스토어가 여기서 운영됩니다. 플랜은 2단계에서 고릅니다.

Node.js도, 코드 편집기도, 터미널도 필요 없습니다. Hostinger가 스토어를 빌드하고 운영하며, 수정은 Claude가 합니다.

LUMIÈRE 미리 보고 복사하기

먼저 완성된 스토어를 체험해 보세요. 황동 레일을 따라 마우스를 움직여 펜던트 조명을 켜고, 드래그해 보고, 하나를 클릭하면 밝기 조절기가 열립니다. 데모에는 관리자 화면과 결제가 없습니다.

LUMIÈRE 라이브 데모 열기

브라우저에서 실행되는 완성된 스토어프런트입니다.

https://lumiere-lighting-store.vercel.app/

GitHub에서 LUMIÈRE 열기

https://github.com/salhiworks/lumiere-lighting-store

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

내 사본이 맞는지 확인하기

저장소 주소가 github.com/로 시작하고 그 뒤에 내 사용자 이름이 있습니다

이름 아래에 salhiworks/lumiere-lighting-store에서 생성되었다고 GitHub에 표시됩니다

이제부터는 내 저장소만 사용합니다. Hostinger는 2단계에서 이 저장소를 배포하고, Claude Desktop은 3단계에서 이 저장소를 수정합니다. 원본 스타터는 절대 바뀌지 않습니다.

Node.js 호스팅 준비하기

먼저 공개하고, 나중에 꾸밉니다. 몇 분이면 스토어가 실제 웹사이트가 되고, 이후의 모든 변경이 그 사이트에 반영됩니다.

Hostinger 플랜 선택하기

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

저장소 가져오기

Hostinger Websites Create site Web App

처음에는 임시 도메인 선택하기 — 내 도메인은 5단계에서 연결합니다 Import Git Repository 선택하기 GitHub를 승인하고 1단계에서 만든 내 LUMIÈRE 사본을 선택하세요. 원본 스타터가 아닙니다

설정 및 배포하기

Hostinger가 감지한 Next.js 설정 유지하기 — 스토어 빌드와 실행은 Hostinger가 알아서 합니다 Node.js 22 선택하기 빌드 스크립트가 build인지 확인하기 — 잠긴 데모를 빌드하는 build:demo는 절대 쓰지 않기

배포하기 전에 사이트 주소를 환경 변수로 추가하세요. 방금 정한 임시 주소입니다. 아직 최종 도메인은 필요 없습니다 — 5단계에서 이를 바꾸고 다시 배포합니다.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

https://로 시작하는 임시 주소

스토어에 필요한 것은 이것이 전부입니다. Supabase와 Stripe는 둘 다 선택 사항이니 나중으로 미루세요.

Deploy를 클릭하고 빌드가 끝날 때까지 기다리기 임시 주소 열기

내 스토어가 공개된 모습 보기

임시 주소를 열면 내 LUMIÈRE 스토어가 나타납니다

레일을 쓸면 램프가 켜지고, 모든 사진이 로드됨

쇼핑 페이지와 상품 페이지가 열림

스토어가 공개되었습니다. 이제부터 내 저장소의 main 브랜치에 푸시되는 모든 변경은 Hostinger가 자동으로 다시 빌드해 게시합니다.

Claude Desktop에서 프로젝트 열기

Claude Desktop Code Local

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

사본 클론하기

내 LUMIÈRE 저장소를 새 하위 폴더로 내려받고, 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-lighting-store

LUMIÈRE 폴더 열기

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

Claude가 스토어의 이 사본을 수정하고 변경 내용을 내 GitHub 저장소로 보냅니다. 그러면 Hostinger가 실제 웹사이트를 업데이트합니다.

Claude에게 스토어 설명하기

아는 내용만 채우세요. 비워 둔 항목은 Claude가 LUMIÈRE의 기존 내용을 그대로 유지합니다. 그런 다음 LUMIÈRE 세션에서 보내세요:

내 조명 스토어 꾸미기

이름, 상품, 문구, 디자인을 바꾸고, 램프 애니메이션과 사진 쌍은 그대로 유지합니다.

This folder is my own copy of the LUMIÈRE lighting store. Before you change anything, read README.md, AGENTS.md, docs/ARCHITECTURE.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the store for my business. Store name: {{STORE_NAME}} What makes us different: {{STORE_STORY}} Visual identity: {{VISUAL_STYLE}} Products: {{PRODUCTS}} Photos: {{PHOTOS}} Where each change belongs: - Name, description and navigation: lib/site.ts and the wordmark in components/layout/wordmark.tsx - Products and collections: lib/catalog/demo-data.ts. Make the same changes in supabase/seed.sql, so a database I connect later starts with the same catalog. - Homepage and studio copy: components/home/ - Colours and fonts: app/globals.css and app/layout.tsx Keep these exactly as they are: - The Pendant Lamp Rail in components/ui/pendant-lamp-rail.tsx: brushing the rail to switch lamps on, dragging, the detail view with its dimmer, and every animation, timing and hit area - The paired photos: every product keeps one OFF and one ON photo of the same size, at /lamps/<product-id>-off.webp and /lamps/<product-id>-on.webp, following the rules in docs/ASSETS.md - The admin, checkout, Supabase migrations and environment variables - The dependencies: don't add new ones Prices are in cents, as the catalog already stores them ($240 = 24000). The store uses one currency, USD by default. 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 and don't push anything yet: I'll ask you to publish when I'm ready.

스토어 이름

Atelier Nord

내 조명 스튜디오만의 특별한 점은 무엇인가요?

리스본에서 손으로 만들어 유럽 전역에 배송하는 소량 생산 세라믹·황동 펜던트 조명.

비주얼 아이덴티티

내 램프 — 한 줄에 하나씩: 이름, 마감, 가격

세라믹 돔, 샌드, $240 황동 콘, 브러시드, $310

램프 사진

승인하기 전에 계획을 읽어 보세요. 스토어가 마음에 들 때까지 같은 세션에서 Claude에게 추가 변경을 요청하세요.

내 램프 사진 사용하기

판매 전에 데모 사진 교체하기

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

램프마다 꺼진 사진 1장과 켜진 사진 1장, 총 2장이 필요합니다. 레일은 두 사진을 크로스페이드해 램프를 켜므로, 두 사진이 정확히 겹쳐야 합니다:

카메라, 위치, 크기는 똑같이 — 빛만 달라야 합니다

투명 배경, 그림자는 넣지 않기

전선은 위쪽 가장자리 가운데에서 나오게 하기

세로 방향, 모든 사진을 같은 캔버스로 — 데모는 557 × 900 px 사용

Supabase를 쓰지 않는 경우, 각 이미지 쌍을 프로젝트의 이 폴더에 상품 이름을 붙여 넣으세요(예: dome-enamel-off.webp와 dome-enamel-on.webp). 그런 다음 Claude에게 사용하고 게시해 달라고 요청하세요. Supabase를 쓰는 경우에는 관리자 화면에서 이미지 쌍을 업로드하면 자동으로 검사해 줍니다.

public/lamps/

변경 내용 게시하기

Claude가 꾸민 스토어를 내 GitHub 저장소로 보내고, Hostinger가 그것을 바탕으로 실제 웹사이트를 다시 빌드합니다. 변경 내용이 마음에 들면 다음을 보내세요:

내 변경 내용 게시하기

스토어를 점검한 다음 변경 내용을 커밋하고 내 저장소의 main 브랜치로 푸시합니다.

Publish my customized store. 1. Make sure npm run lint, npm run typecheck and npm run build all pass, and fix anything that fails. 2. Make sure .env.local and any other secrets are not committed. 3. Commit all my changes with a clear message and push them 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.

변경 내용이 공개된 모습 보기

Hostinger가 스토어를 다시 빌드할 때까지 몇 분 기다리세요 공개 주소 새로고침하기 레일을 따라 움직이기 — 모든 램프가 켜지고 전선이 레일에 닿아야 합니다 램프를 클릭하고 밝기 조절기 움직이기 — 빛 외에는 아무것도 바뀌지 않아야 합니다 쇼핑 페이지와 상품 페이지를 열고 램프를 장바구니에 담기

몇 분이 지나도 바뀌지 않았나요? Web App에서 Settings & Redeploy를 열고 다시 배포하세요. 이상해 보이나요? 같은 세션에서 Claude에게 상황을 설명하고, 램프 레일은 건드리지 말고 고쳐 달라고 요청한 뒤 다시 게시하세요.

내 컴퓨터에서 미리 보고 싶으신가요? (선택)

꼭 할 필요는 없습니다. 게시하기 전에 변경 내용을 보고 싶다면 세션에서 Claude에게 이렇게 요청하세요: 의존성을 설치하고, npm run dev로 개발 서버를 시작한 다음, 로컬 주소를 알려 줘. Node.js 22 이상이 필요하며, 없으면 Claude가 알려 줍니다. 공개된 스토어는 이 과정에 의존하지 않습니다.

Supabase 프로젝트 만들기

공개된 스토어는 Supabase 없이도 이미 작동합니다. 그것으로 충분하다면 5단계로 건너뛰세요. 연결하면 /admin의 내 관리자 화면에서 상품, 사진, 재고, 주문을 관리할 수 있습니다.

Supabase 계정 만들기

https://supabase.link/r4gdwhi

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

Supabase Project Settings General

Claude가 프로젝트에 접근하게 하기

이렇게 하면 Claude가 데이터베이스를 대신 설정해 줍니다. Claude Desktop의 LUMIÈRE 세션에서:

사이드바에서 Customize를 열고 Connectors를 선택한 다음 Supabase를 추가하세요 — 또는 프롬프트 입력란 옆의 +를 클릭하고 Add connectors를 선택하세요 Connect를 클릭하고, 브라우저에서 프로젝트가 속한 조직을 선택해 접근을 승인 같은 폴더에서 새 Local 세션을 시작해 Claude가 연결을 인식하게 하기

Supabase 로그인은 브라우저에서 진행하므로 키나 비밀번호를 프롬프트에 넣지 않습니다. 이 연결은 승인한 조직의 모든 프로젝트를 볼 수 있으므로, 다음 프롬프트에서 Claude가 LUMIÈRE 프로젝트만 다루도록 제한합니다.

Supabase 커넥터를 찾을 수 없거나 사용하고 싶지 않다면 다음 프롬프트를 건너뛰고 4단계 끝의 수동 설정을 사용하세요. 같은 SQL 파일 3개를 쓰며 커넥터는 필요 없습니다.

Claude에게 데이터베이스 설정 요청하기

Supabase에 LUMIÈRE 설정하기

Claude가 스타터의 마이그레이션과 상품을 적용하고, 보안과 스토리지를 점검한 다음, Hostinger에 넣을 공개 값 두 개를 알려 줍니다.

Connect this LUMIÈRE store to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md ("Connect Supabase"), docs/SUPABASE.md and docs/ADMIN.md first, and follow them. 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. How to reach Supabase: - Use the Supabase connection in this session if it is connected. - Otherwise, use the Supabase CLI if I'm signed in, with the commands in docs/SUPABASE.md. - If neither works, stop and tell me exactly what to do. Never ask me for a password, an access token or a Secret key. Tell me what each step does before you run it: 1. Apply supabase/migrations/20261101120000_catalog_and_admin.sql, then supabase/migrations/20261101150000_orders_checkout.sql, in that order. They create the tables, the Row Level Security policies and the lamp-photos storage bucket. 2. Run supabase/seed.sql to add the three collections and the eight pendants. 3. Verify the setup: Row Level Security is on for every table, the lamp-photos bucket exists, there are 8 products and 3 collections, and Supabase's security advisor shows no warnings. Fix nothing by hand: tell me what's wrong. 4. Read my Project URL and Publishable key from the project, and show them to me as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger. 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/ADMIN.md, check that the row exists, and tell me to sign in at /admin on my live store.

Supabase Project ID

abcdefghijklmnopqrst

Claude는 작업할 때마다 먼저 물어봅니다. 내용을 읽고 허용하세요. 내 차례가 되면 Claude가 멈춥니다.

관리자 계정 만들기

Supabase Authentication Users

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

Supabase Authentication Sign In / Providers

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

Supabase 연결이 안 되나요? 직접 설정하기

Supabase 프로젝트에서 SQL Editor를 여세요. LUMIÈRE 폴더에 있는 다음 세 파일을 이 순서대로 실행합니다. 파일마다 열어서 전체를 복사하고, 새 쿼리에 붙여 넣은 뒤 Run을 클릭합니다. 모두 다시 실행해도 안전합니다.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Connect에서 Project URL과 Publishable key를 복사해 다음 단계처럼 Hostinger에 넣으세요. 위에서 관리자 사용자를 만든 뒤, 아래에 내 이메일을 넣고 SQL Editor에서 다음을 실행하세요:

나를 관리자로 지정하기

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

관리자 이메일

you@example.com

Hostinger에 Supabase 변수 추가하기

공개된 스토어는 두 개의 공개 값으로 Supabase를 읽습니다. Web App 대시보드에서 Environment Variables를 열고 다음을 추가하세요:

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

두 값은 Claude가 알려 주었습니다. Connect에서도 확인할 수 있습니다.

Connect 열기

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

공개 값만

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

변수를 저장하세요. Hostinger가 그 값으로 스토어를 다시 빌드합니다 다시 빌드되지 않았나요? Settings & Redeploy에서 다시 배포하세요 공개 주소 뒤에 /admin을 열고 관리자 이메일로 로그인하세요

관리자 화면에서는 상품을 추가·편집하고, OFF/ON 사진 쌍을 업로드하고, 재고와 주문을 관리합니다. 저장할 때마다 레일, 쇼핑 페이지, 상품 페이지가 업데이트됩니다.

도메인 연결하기

Hostinger Your Web App Connect domain

도메인을 입력하고 연결 단계 따르기 다른 곳에서 등록한 도메인인가요? Hostinger가 보여 주는 DNS 레코드를 도메인 등록 업체에 추가하기 기존 이메일 레코드는 그대로 두기 도메인이 연결됨으로 표시되고 SSL이 활성화될 때까지 기다리기

DNS 변경 사항이 모두에게 반영되기까지 몇 시간, 길게는 24시간이 걸릴 수 있습니다.

웹사이트나 웹 앱에 개인 도메인 연결하기

다른 곳에서 등록한 도메인까지 다루는 전체 안내입니다.

/video/connect-a-custom-domain-to-your-website-or-web-app

내 도메인으로 바꾸고 다시 배포하기

스토어는 링크, 사이트맵, 관리자 화면의 보안 로그인을 이 주소 하나로 만듭니다. Web App 대시보드에서 Environment Variables를 열고 이 값을 내 도메인으로 바꾸세요:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

https://로 시작하는 내 도메인

변수 저장하기 Settings & Redeploy에서 다시 배포해 새 주소가 빌드에 반영되게 하기 빌드가 끝날 때까지 기다리기

라이브 스토어 테스트하기

내 도메인을 열고 확인하세요:

주소가 https://로 시작하고 자물쇠 아이콘이 보임

레일을 쓸면 램프가 켜지고, 모든 사진이 로드됨

쇼핑 페이지와 상품 페이지가 열리고, 램프가 장바구니에 담깁니다

Supabase를 쓴다면: /admin에서 로그인할 수 있음

/shop/no-such-lamp 같은 없는 주소에서 '페이지를 찾을 수 없음' 화면이 나옴

조명 스토어가 내 도메인에서 공개되었습니다. 나중에 바꾸려면 관리자 화면에서 상품을 수정하거나, Claude에게 코드 변경과 게시를 요청하세요. main에 푸시할 때마다 Hostinger가 스토어를 다시 빌드합니다.