관리자 대시보드를 갖춘 AI 럭셔리 패션 스토어 만들기

Claude Desktop

데스크톱 앱의 Claude Code로 스토어를 설정하고 꾸미세요.

Claude Desktop 다운로드하기

https://claude.ai/download

GitHub 계정

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

GitHub 계정 만들기

https://github.com/signup

Node.js

현재 LTS 버전을 다운로드하세요. 내 컴퓨터에서 스토어를 실행하는 데 씁니다.

Node.js 다운로드하기

https://nodejs.org/en/download

Supabase 계정

무료 플랜이면 충분합니다. 상품, 사진, 주문, 소유자 로그인 정보를 보관합니다.

Supabase 계정 만들기

https://supabase.link/r4gdwhi

Cloudflare 계정

무료입니다. Turnstile 확인으로 결제 단계에서 봇을 막아 줍니다.

Cloudflare 계정 만들기

https://dash.cloudflare.com/sign-up

Hostinger 호스팅

STILLFORM은 무료입니다. 라이브 스토어는 여기서 실행됩니다.

Hostinger 플랜 선택하기

Unlimited 플랜이나 Cloud 플랜을 사용하세요. STILLFORM은 Node.js Web App으로 배포됩니다.

나만의 사본 만들기

먼저 라이브 데모에서 완성된 스토어를 둘러보세요. 옷걸이 레일에 마우스를 올리거나 드래그하고, 아이템을 열어 볼 수 있습니다. 데모에서는 결제와 Studio가 꺼져 있습니다.

GitHub에서 STILLFORM 열기

https://github.com/salhiworks/stillform-fashion-store

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

내 컴퓨터로 가져오기

Claude Desktop Code Local

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

사본 클론하기

나만의 STILLFORM 저장소를 새 하위 폴더로 내려받습니다.

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, or GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

새 저장소 주소

https://github.com/your-name/my-fashion-store

STILLFORM 폴더 열기

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

스토어를 로컬에서 실행하기

STILLFORM 세션에서 다음을 보내세요:

STILLFORM 준비 및 실행하기

프로젝트를 설치하고 내 컴퓨터에서 스토어를 데모 모드로 실행합니다.

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

Claude가 알려 주는 주소(보통 http://localhost:5173)를 여세요. Supabase가 없으면 스토어는 내장 컬렉션을 사용하는 데모 모드로 실행됩니다. 레일, 상품 페이지, 장바구니는 작동하고, 결제는 3단계까지 꺼져 있습니다.

Supabase 프로젝트 만들기

Supabase 대시보드 열기

https://supabase.com/dashboard

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

Supabase Project Settings General

Claude에게 필요한 프로젝트 정보는 Project ID뿐입니다. Project URL과 Publishable key는 Claude가 Supabase CLI로 직접 읽어 옵니다.

Supabase CLI에 로그인하기

브라우저가 열리므로 이 명령은 직접 한 번만 실행하세요:

STILLFORM 세션 위쪽의 Terminal 버튼 클릭하기 아래 명령 실행하기 열린 브라우저 창에서 로그인 승인하기

npx supabase login

Turnstile 위젯 만들기

Cloudflare 대시보드 열기

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

위젯 이름을 스토어 이름으로 정하기 호스트 이름에 localhost 추가하기 쇼핑몰 도메인을 이미 알고 있다면 함께 추가하기 — 아니면 5단계에서 추가합니다 Managed 모드를 선택하고 위젯 만들기 페이지는 열어 두기: 3단계에서 사이트 키와 시크릿 키가 필요합니다

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

STILLFORM 세션에서 아래에 Project ID를 넣고 보내세요:

STILLFORM을 Supabase에 연결하기

Claude가 프로젝트를 연결하고, 데이터베이스와 스타터 컬렉션을 설정한 뒤 결제 함수를 배포합니다.

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

Supabase Project ID

abcdefghijklmnopqrst

Claude는 명령을 실행하기 전마다 물어봅니다 — Allow를 클릭하세요. 내가 할 차례가 되면 Claude가 멈춥니다.

Terminal에서 비밀 정보 입력하기

Claude가 요청하면 Terminal에서 스토어 자체 설정을 실행하세요. Claude가 이미 끝낸 작업은 모두 건너뛰고, 비공개 정보만 물어봅니다:

npm run setup

결제 보호 단계에서 1을 선택한 다음 Turnstile 사이트 키와 시크릿 키 붙여넣기 place-order 함수를 다시 배포할지 물으면 n 입력하기 — Claude가 이미 배포했습니다 소유자 계정에 쓸 이메일과 12자 이상의 비밀번호 입력하기 요청이 나오면 Supabase 대시보드에서 Allow new users to sign up을 끈 다음 Enter 키 누르기 — 꺼졌는지는 설정이 확인합니다 완료했다고 Claude에 알리기

Supabase Authentication Sign In / Providers

비공개로 지키세요

Turnstile 시크릿 키와 비밀번호는 Terminal의 숨김 입력란에만 입력하세요. 채팅에는 절대 붙여넣지 마세요.

설정 확인 후 로그인하기

Claude가 스토어 점검을 실행하고 스토어를 다시 시작합니다. 모두 통과했다고 하면:

로컬 스토어 새로고침하기 — 이제 데이터베이스에서 컬렉션을 불러옵니다 /admin을 열고 소유자 이메일과 비밀번호로 로그인하기

여기가 스토어 대시보드인 Studio입니다. 스토어 관리자 목록에 있는 계정만 열 수 있고, 아무도 회원가입할 수 없습니다.

상품 추가하기

Studio에서 저장한 내용은 모두 바로 데이터베이스에 반영됩니다. 코드를 바꿀 필요가 없습니다.

Studio Products Add a product

Name, Category, One-line summary 입력하기 Photos에서 정면 사진 추가하기 Price, sizes and stock에서 Price를 정하고 Sizes 선택하기 첫 번째 색상의 이름을 정하고, 색상 견본을 고른 뒤 사이즈별 재고 입력하기 다른 색상마다 Add a colour 클릭하기 Publish 클릭하기

선택 사항: 내 아이템을 추가한 뒤 Products에서 데모 상품 8개를 보관하거나 삭제할 수 있습니다.

사진을 레일에 맞추기

정면 사진을 추가하면 레일 편집기가 열립니다. 위쪽에 옷걸이 고리가 있는 투명 PNG 누끼 사진이 가장 보기 좋고, 밝은 단색 벽 앞에서 찍은 사진도 괜찮습니다.

사진이 누끼 사진이 아니면 Remove the plain background 켜기 Size와 위치를 조정하거나 미리보기에서 사진 드래그하기 스크린 리더용 사진 설명 쓰기 Use this photo 클릭하기

Preview on the rail에서 확인하세요. 마우스를 올리면 아이템이 돌아가고, 클릭하면 클로즈업이 열립니다. 뒷면과 옆면 사진이 있으면 한 바퀴 돌릴 수 있습니다.

레일 정리하기

Studio Rail

Add a piece에서 새 상품과 색상 선택하기 아이템을 드래그하거나 화살표로 순서 정하기 홈페이지에 두고 싶지 않은 아이템 빼기 Save rail 클릭하기

데스크톱 화면에는 6~10개가 알맞습니다. 휴대폰에서는 레일이 넘겨 볼 수 있는 캐러셀이 됩니다.

컬렉션과 룩북 다듬기

Studio Collections

Homepage selection에서 홈페이지 맨 앞에 보일 아이템을 고르고 Save 클릭하기 New collection을 클릭하거나 기존 컬렉션을 편집해 아이템 추가하기

Studio Lookbook

제목과 소개 글 편집하기 각 펼침면에 내 사진과 캡션 업로드하기 펼침면을 숨기거나 순서를 바꾼 다음 Save lookbook 클릭하기

설정 업데이트하고 결제 열기

Studio Settings

Store에서 스토어 이름과 통화 설정하기 Contact, Shipping, Policies에 내 정보 넣기 Homepage에서 레일 주변 문구 바꾸기 Checkout에서 Cash on delivery, Bank transfer 또는 Pay at studio pickup을 켜고 안내 문구 편집하기 Open checkout 켜기 Save settings 클릭하기

STILLFORM은 카드 정보를 받지 않습니다. 쇼핑객이 내가 정한 방법 중 하나를 고르고, 돈이 들어오면 내가 각 주문을 결제 완료로 표시합니다.

테스트 주문하기

로컬 스토어를 열고 아이템을 장바구니에 담아 결제하기 확인 페이지의 주문 번호 메모하기 Studio에서 Orders를 열고 테스트 주문 클릭하기 Cancel order 클릭하기 — 재고가 다시 판매 상태로 돌아갑니다

Web App 만들기

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

Hostinger Websites Create website Web App

내 도메인을 선택하거나, 처음에는 임시 도메인 사용하기 Import your Git repository 선택하기 Continue with GitHub로 진행하고 Hostinger에 STILLFORM 저장소 접근 권한 주기 저장소와 main 브랜치 선택하기

설정 및 배포하기

Hostinger가 감지한 Vite 프레임워크 프리셋 유지하기 Node.js 22 선택하기 빌드 명령을 npm run build로 설정하기 — build:demo는 절대 쓰지 않기 출력 디렉터리를 dist로 설정하고 진입 파일은 비워 두기

첫 빌드 전에 다음 환경 변수 세 개를 추가하세요. 값은 .env.local과 같고, Claude에게 보여 달라고 할 수 있습니다. 값은 스토어에 빌드되어 들어가므로, 나중에 바꾸면 다시 배포해야 합니다.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Supabase Publishable key

VITE_TURNSTILE_SITE_KEY

Turnstile 사이트 키

Supabase 값은 Connect에 있습니다. 사이트 키는 Turnstile 위젯에 있습니다.

Connect 열기

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

공개 값만

Turnstile 시크릿 키, Supabase Secret key, service_role 키는 절대 Hostinger에 추가하지 마세요. VITE_로 시작하는 값은 모두 브라우저에서 보입니다.

스토어의 출시 점검인 npm run preflight를 Claude에게 실행해 달라고 하고, 통과할 때만 배포하기 Deploy를 클릭하고 빌드가 끝날 때까지 기다리기 라이브 주소 열기

라이브 도메인 연결하기

Supabase Authentication URL Configuration

Site URL을 https://로 시작하는 라이브 주소로 설정하기 같은 주소를 Redirect URLs에 추가하기 Save 클릭하기

Cloudflare Turnstile

STILLFORM 위젯 열기 라이브 도메인을 호스트 이름에 추가하고 저장하기

Supabase의 Allow new users to sign up은 계속 꺼 둡니다.

라이브 스토어 테스트하기

상품 페이지 하나를 주소로 직접 연 다음 새로고침하기 라이브 주소의 /admin에서 로그인하기 아이템을 장바구니에 담고 결제하기 — Turnstile 확인은 보이지 않거나 체크박스 하나만 나옵니다 Orders에서 테스트 주문을 찾아 취소하기

이 스토어의 직접 링크를 Hostinger가 어떻게 처리하는지는 아직 확인되지 않았습니다. 상품 페이지를 열거나 새로고침할 때 404가 나오면, docs/DEPLOY.md의 Hostinger 섹션을 함께 살펴봐 달라고 Claude에게 요청하세요.

나중에 스토어 업데이트하기

상품, 사진, 재고, 주문, 설정: Studio에서 바꾸면 바로 반영됩니다

디자인이나 코드 변경: Claude에게 변경과 main 푸시를 요청하세요 — 푸시할 때마다 Hostinger가 스토어를 다시 빌드합니다