고객이 실제로 보는 쇼핑몰 화면을 내 컴퓨터에 띄우고, 디자인이나 페이지 추가를 AI에게 말로 맡길 수 있어요.
화면을 처음부터 만드는 게 아니에요. 설치만 하면 쇼핑몰에 필요한 화면이 이미 다 갖춰진 상태로 시작해요.
★먼저 알아두세요 — 화면을 «처음부터 만드는» 게 아니에요. 설치만 하면 쇼핑몰에 필요한 화면이 «이미 100% 갖춰진 상태»로 시작해요. 상품 목록·상품 상세·검색·장바구니·주문/결제·주문내역·취소/교환/반품·회원가입/로그인(소셜 포함)·마이페이지·쿠폰·적립금·리뷰·문의·공지까지, 실제로 파는 데 필요한 기능이 전부 들어 있고 내 상품·주문 데이터와 바로 연결돼요. 그래서 여러분이 할 일은 «만들기»가 아니라 «내 취향대로 바꾸기»예요 — 색, 글꼴, 배치, 새 페이지 추가처럼 보이는 부분만 AI에게 말로 바꾸면 됩니다. 기능은 그대로 두고 디자인만 갈아입는 셈이에요.
이 과정은 «내 컴퓨터의 파일»을 직접 다뤄야 해서, 파일을 읽고 실행할 수 있는 AI가 필요해요. 명령어를 칠 필요는 없어요 — 켜기만 하면 나머지는 AI가 합니다.
여기서 쓰는 AI는 내 컴퓨터 파일을 다룰 수 있는 «Code 모드»(또는 별도 프로그램 «Claude Code»)예요. 쇼핑몰을 연결할 때 이미 «Code 모드»를 켜봤다면 그대로 쓰면 되고, 처음이면 아래처럼 켜요.
Claude 데스크탑 왼쪽 메뉴에서 «Code» 선택(설치 없음, 권장), 또는 별도 프로그램 «Claude Code» 설치(https://claude.com/download). 유료 플랜(Pro/Max/Team/Enterprise)·데스크탑(macOS·Windows) 전용이에요.
작업할 폴더(예: 바탕화면의 새 폴더)를 하나 정해 AI에서 열어두세요. 그 폴더 안에 쇼핑몰 화면 파일이 만들어져요. Node.js 같은 프로그램은 다음 단계에서 AI가 알아서 설치하니 미리 준비 안 해도 돼요.
그리고 쇼핑몰 연결(커넥터 추가 + 관리자 승인)을 끝내 두세요. 이 AI가 그 연결 정보로 화면을 설정합니다. (아직 안 했으면 «1단계» 페이지에서 먼저 연결하세요.)
이 한마디면 필요한 프로그램 설치·파일 받기·설정을 AI가 알아서 해줘요.
프로셀 공식 스타터(npx create-prosell-app)로 내 쇼핑몰 화면을 띄울 준비를 해줘. Node.js 같은 필요한 프로그램이랑 파일을 알아서 설치하고, 쇼핑몰에 연결한 정보로 설정까지 해줘.
AI가 필요한 프로그램 설치 → 파일 내려받기 → 설정을 차례로 처리해줘요. 중간에 '설치해도 될까요?' 처럼 물어보면 '응, 진행해줘' 라고만 답하면 됩니다.
준비가 끝나면, 화면을 실행해 볼 수 있는 주소를 받아요.
이제 쇼핑몰 화면을 실행해서 볼 수 있는 주소를 알려줘.
AI가 알려준 주소(보통 http://localhost:3000)를 브라우저 주소창에 입력하면, 내 상품이 보이는 쇼핑몰 화면이 떠요.
상품·주문 같은 내용은 그대로 두고, 보이는 화면만 AI가 바꿔줘요. 이게 이 방법의 핵심이에요.
첫 화면에 인기 상품 모음을 큼직하게 추가해줘.
전체 색을 어두운 톤에 민트색 포인트로 바꾸고, 모서리를 둥글게 해줘.
브랜드 소개 페이지를 새로 만들어서 위쪽 메뉴에 넣어줘.
상품 카드에 '품절' 표시를 더 눈에 띄게 바꿔줘.
화면을 켜둔 채로 AI에게 말하면, 바뀐 모습이 브라우저에 바로 반영돼요. 마음에 안 들면 '좀 더 크게', '원래대로' 처럼 다시 말해서 고치면 됩니다.
내 컴퓨터에서만 보이던 화면을 실제 인터넷 주소로 올릴 수 있어요. 올릴 수 있는 곳은 여러 곳인데, 초보자는 «Vercel»이나 «Cloudflare»가 가장 쉬워요. 하나만 고르면 됩니다.
★가장 쉬운 두 곳 (초보자 추천) ① Vercel — Next.js를 만든 회사라 가장 매끄러워요. 무료(Hobby) 플랜으로 시작 가능. 요금: https://vercel.com/pricing ② Cloudflare (Workers/Pages) — 무료 한도가 넉넉하고 빠르며 전 세계에 퍼져 있어요. 개발자 플랫폼: https://www.cloudflare.com/ko-kr/plans/developer-platform/
★그 외에도 가능해요 (설정이 조금 더 복잡) · AWS — Amplify Hosting 이 Next.js를 지원해요: https://aws.amazon.com/amplify/ · Google Cloud — Cloud Run(https://cloud.google.com/run) 또는 Firebase App Hosting(https://firebase.google.com/docs/app-hosting) · Netlify — https://www.netlify.com/ 이런 곳으로 올리고 싶으면 AI에게 «AWS(또는 Google Cloud)에 배포해줘»라고 하면 방법을 안내해줘요.
아래 «7번(Vercel)»과 «8번(Cloudflare)»에 가장 쉬운 두 방법을 정리해 뒀어요. 둘 중 하나만 따라 하면 됩니다. 어느 곳이든 «무료 회원가입 → AI에게 배포 부탁 → 환경변수 넣기» 순서는 똑같아요.
내 컴퓨터에서만 보이던 화면을 실제 인터넷 주소로 올려요. 코드는 «GitHub»에 보관하고, «Vercel»이 그걸 실제 주소로 띄워줘요. 올리는 일은 AI에게 맡기면 됩니다.
★먼저 준비(회원가입) — 이 방법은 두 곳에 «무료 회원가입»이 되어 있어야 해요. ① GitHub — https://github.com (코드를 보관하는 곳) ② Vercel — https://vercel.com (그 코드를 실제 인터넷 주소로 띄워주는 곳) 이 회원가입만 미리 해두면, 아래 배포는 AI에게 맡기면 됩니다.
★★ 제일 중요 — Vercel 가입은 반드시 «Continue with GitHub»로 하세요. 이메일로 가입하면 Vercel이 내 GitHub 계정을 알지 못해서, 나중에 배포할 때 «commit email could not be matched to a GitHub account» 오류로 «모든 배포가 막혀요». (이메일 값을 바꿔도 소용없어요 — 연결 자체가 없어서예요.) GitHub로 가입/로그인해야 이 연결이 생겨 배포가 통과합니다.
★이미 이메일로 Vercel에 가입했다면 — 나중에라도 연결할 수 있어요. 아래 주소로 바로 가서 GitHub «Connect»를 눌러 승인하면 배포 차단이 사라져요: https://vercel.com/account/settings/authentication (경로로 찾으려면: Vercel → Settings → Authentication(로그인 연결) → GitHub «Connect». 이 승인은 브라우저에서 본인이 직접 해야 하고, AI가 대신 못 해요.)
완성된 쇼핑몰 화면을 GitHub에 올려줘. 새 저장소(repository)를 비공개로 만들고 코드를 전부 올려줘.
이 프로젝트를 Vercel에 배포해줘. .env.local 에 있는 쇼핑몰 연결 정보(환경변수)도 Vercel에 똑같이 넣어서, 실제 인터넷 주소로 열리게 해줘.
# ① GitHub 준비 (처음 한 번) — gh 설치 + 로그인 winget install GitHub.cli # 윈도우 (맥은: brew install gh) gh auth login # 브라우저로 GitHub 로그인 (1회) # git 이메일·이름을 GitHub 계정과 «같게» 맞추기 (안 맞으면 배포가 막혀요) git config --global user.email "GitHub에_등록된_이메일" git config --global user.name "GitHub_사용자명" # ② GitHub에 올리기 git init && git add -A && git commit -m "내 쇼핑몰 화면" gh repo create my-shop --private --source=. --push # ③ Vercel에 배포 — 설치 + 로그인 후 올리기 npm i -g vercel vercel login # 브라우저로 Vercel 로그인 (1회) vercel # 미리보기 배포 vercel --prod # 실제(프로덕션) 공개
잘 모르겠으면 위 git 이메일·이름 맞추기는 AI에게 «git 이메일을 내 GitHub 계정에 맞춰줘»라고 하면 알아서 처리해줘요.
★환경변수 꼭 넣기 — 화면이 상품을 불러오려면 «쇼핑몰 연결 정보»를 Vercel에도 똑같이 넣어야 해요: PROSELL_API_BASE · PROSELL_CLIENT_ID · PROSELL_CLIENT_SECRET. 내 컴퓨터 .env.local 파일에 있는 값을 그대로 쓰면 되고, AI에게 «환경변수도 Vercel에 넣어줘»라고 하면 챙겨줘요. (안 넣으면 화면은 떠도 상품이 안 보여요.)
★회원(SNS·본인인증) 로그인까지 쓰려면 — 로그인 콜백 주소는 «배포된 공개주소»로 자동으로 잡히지만(별도 환경변수 필요 없음), 그 공개주소를 쇼핑몰에 «허용된 주소»로 등록해 둬야 로그인이 돌아가요. AI에게 «이 공개주소로 connect 다시 해줘»라고 하면 됩니다. (상품만 보이면 되는 경우엔 건너뛰어도 돼요.)
★회원 로그인(아이디·비밀번호)을 켜면 — «PW_RSA_PRIVATE_KEY»(고정 RSA 개인키) 환경변수도 넣는 걸 권장해요. 비밀번호 암호화 키인데, 없으면 서버 인스턴스가 늘어날 때(스케일아웃) 로그인이 «간헐적으로» 막힐 수 있어요. AI에게 «PW_RSA_PRIVATE_KEY용 RSA 개인키를 만들어서 Vercel에 넣어줘»라고 하면 돼요. (Cloudflare에선 이게 «필수»예요 — 7번 참고.)
★그다음 다시 올릴 때 — 두 경우로 나뉘어요. ① 가입할 때 «Continue with GitHub»로 Vercel↔GitHub를 이어 뒀다면 → 이후엔 «GitHub에 올리기»만 하면 Vercel이 알아서 다시 올려줘요(자동 배포). AI에게 «바뀐 내용 GitHub에 올려줘»라고 하면 끝. ② 아직 안 이어 뒀다면(«…add a Login Connection…» 같은 안내가 뜬 적 있으면) → 자동은 아직이라, AI에게 «바뀐 내용 Vercel에 다시 배포해줘»(vercel --prod)라고 하면 됩니다.
⚠ 문제해결 — 배포가 막히거나(«Blocked») 계속 «UNKNOWN»으로 멈출 때. · 원인: 대부분 Vercel↔GitHub 연결이 없어서예요(위 «★★»·«이미 이메일로 가입했다면» 참고). · 바로 해결: AI에게 «Git 정보 없이 배포해줘»라고 하세요 — 작성자 확인을 건너뛰고 올려줘요. · 여러 번 눌러 배포가 쌓였다면: 새로 막 누르지 말고 AI에게 «멈춘 배포 정리하고 다시 배포해줘»라고 하세요. (무료 플랜은 동시에 1개만 빌드돼서, 여러 번 누르면 대기열에 쌓여 더 느려져요.)
Vercel 대신 «Cloudflare»에 올려도 돼요. 둘 중 하나만 고르면 됩니다. 이 스타터(Next.js)는 Cloudflare Workers에 올릴 때 «OpenNext» 어댑터를 쓰는데, 그 설정도 AI가 알아서 해줘요.
★언제 이걸 골라요? — 이미 Cloudflare를 쓰거나(도메인·DNS 등), Vercel 대신 Cloudflare로 통일하고 싶을 때요. «6번 Vercel»과 «7번 Cloudflare»는 둘 중 하나만 하면 돼요(둘 다 할 필요 없어요).
★먼저 준비(회원가입) — Cloudflare 무료 계정이 필요해요: https://dash.cloudflare.com/sign-up . 코드는 여기서도 «GitHub»에 두면 편해요(6번에서 이미 올렸으면 그대로 재사용). 이 회원가입만 해두면 나머지는 AI에게 맡기면 됩니다.
이 Next.js 스타터를 Cloudflare Workers에 올릴 수 있게 OpenNext(@opennextjs/cloudflare) 어댑터를 설치하고 설정 파일(wrangler, open-next 설정)을 만들어줘. 그리고 Next 16 미들웨어(proxy.ts)는 OpenNext(Cloudflare)와 호환되지 않아 빌드가 막히니, Cloudflare 빌드에선 proxy.ts를 비활성화(제외)해줘. 회원 세션 토큰 갱신은 클라이언트 SessionKeeper가 대신하니 로그인 기능엔 문제 없어.
⚠ 왜 이걸 시키나요? — 이 스타터엔 로그인 토큰을 미리 갱신하는 서버 파일 «proxy.ts»가 있는데, Cloudflare(OpenNext)는 이 방식을 아직 지원하지 않아 그대로 두면 «빌드 오류»가 나요. 그래서 Cloudflare에 올릴 때만 이 파일을 비활성화하면 빌드가 통과해요. 회원 로그인·세션 유지는 «SessionKeeper»(화면이 열려 있는 동안 자동으로 토큰을 갱신하는 장치)가 대신하므로 로그인은 정상 동작해요. 영향은 «토큰이 만료된 뒤 오랜만에 다시 들어온 첫 화면»에서 잠깐 로그아웃처럼 보였다가 곧 자동 복구되는 정도예요.
이제 Cloudflare에 배포해줘. .env.local 에 있는 쇼핑몰 연결 정보(환경변수)도 Cloudflare에 똑같이 넣어서 실제 인터넷 주소로 열리게 해줘.
# ① Cloudflare 도구 설치 + 로그인 (처음 한 번) npm i -g wrangler wrangler login # 브라우저로 Cloudflare 로그인 (1회) # ② OpenNext 어댑터 추가 (설정 파일은 AI가 만들어줌) npm add -D @opennextjs/cloudflare # ③ 빌드 + 배포 npx opennextjs-cloudflare build npx opennextjs-cloudflare deploy # 실제(프로덕션) 공개
★환경변수 꼭 넣기 — Vercel과 똑같이 «쇼핑몰 연결 정보»를 Cloudflare에도 넣어야 상품이 보여요: PROSELL_API_BASE · PROSELL_CLIENT_ID · PROSELL_CLIENT_SECRET. 비밀값인 PROSELL_CLIENT_SECRET은 «wrangler secret put PROSELL_CLIENT_SECRET»(또는 Cloudflare 대시보드 → 프로젝트 → Settings → Variables)로 넣고, 나머지도 대시보드에서 넣으면 돼요. AI에게 «환경변수도 Cloudflare에 넣어줘»라고 하면 챙겨줍니다. (안 넣으면 화면은 떠도 상품이 안 보여요.)
★Workers vs Pages — 위 방법은 «Workers»(OpenNext)로, 이 스타터처럼 서버 기능을 쓰는 Next.js에 권장돼요. «Pages»에 GitHub 저장소를 연결하면 Vercel처럼 «GitHub에 올리기만 하면 자동 배포»도 되지만, 프레임워크 프리셋 설정이 더 필요해요. 잘 모르겠으면 위 «Workers + OpenNext» 한 가지로 진행하고, 다시 올릴 땐 AI에게 «바뀐 내용 Cloudflare에 다시 배포해줘»라고 하면 됩니다.
★회원(SNS·본인인증) 로그인 — 6번과 동일해요. 로그인 콜백은 배포된 공개주소로 자동으로 잡히지만, 그 공개주소를 쇼핑몰에 «허용된 주소»로 등록해 둬야 해요. AI에게 «이 공개주소로 connect 다시 해줘»라고 하면 됩니다. (상품만 보이면 되면 건너뛰어도 돼요.)
★★ 회원 로그인(아이디·비밀번호)까지 쓰려면 — Cloudflare에선 «PW_RSA_PRIVATE_KEY»(고정 RSA 개인키)를 시크릿으로 꼭 넣어야 해요. 왜냐면 비밀번호는 암호화해서 주고받는데, 이 키가 없으면 서버가 «요청마다 임시 키»를 만들어요. Cloudflare Workers는 요청마다 다른 실행 환경(isolate)이라 로그인 페이지가 준 키와 제출을 처리하는 키가 달라져 «보안 처리 오류(400)»로 로그인이 전부 막혀요. 해결: AI에게 «PW_RSA_PRIVATE_KEY용 RSA 개인키(PEM)를 만들어서 Cloudflare 시크릿으로 넣어줘»라고 하면 만들어서 등록해줘요. (로그인·회원가입·비번찾기·정보수정 등 «비밀번호를 쓰는 모든 화면»에 적용돼요. 상품만 보이면 되면 건너뛰어도 돼요.)
⚠ 문제해결 — 빌드가 «proxy» 또는 «middleware» 관련 오류로 멈추면. · 원인: Next 16의 proxy.ts를 Cloudflare(OpenNext)가 아직 지원하지 않아서예요(위 ①·«왜 이걸 시키나요?» 참고). · 해결: AI에게 «Cloudflare 빌드에서 proxy.ts 비활성화하고 다시 빌드해줘»라고 하면 통과해요. 회원 세션은 SessionKeeper가 대신 갱신하니 로그인은 그대로 동작해요.
⚠ 문제해결 — 로그인 시 «보안 처리 오류»나 400 오류가 나면. · 원인: 위 «PW_RSA_PRIVATE_KEY» 시크릿이 없어서예요(요청마다 암호화 키가 달라짐). · 해결: AI에게 «PW_RSA_PRIVATE_KEY 시크릿 넣고 다시 배포해줘»라고 하면 돼요.