3단계

AI로 쇼핑몰 디자인 하기

고객이 실제로 보는 쇼핑몰 화면을 내 컴퓨터에 띄우고, 디자인이나 페이지 추가를 AI에게 말로 맡길 수 있어요.

준비 — 파일을 다룰 수 있는 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가 그 연결 정보로 화면을 설정합니다.

AI에게 쇼핑몰 화면 준비를 시키기

이 한마디면 필요한 프로그램 설치·파일 받기·설정을 AI가 알아서 해줘요.

AI에게 말하기AI에게 이렇게 말하기

프로셀 공식 스타터(npx create-prosell-app)로 내 쇼핑몰 화면을 띄울 준비를 해줘. Node.js 같은 필요한 프로그램이랑 파일을 알아서 설치하고, 쇼핑몰에 연결한 정보로 설정까지 해줘.

AI가 필요한 프로그램 설치 → 파일 내려받기 → 설정을 차례로 처리해줘요. 중간에 '설치해도 될까요?' 처럼 물어보면 '응, 진행해줘' 라고만 답하면 됩니다.

AI에게 화면을 켜달라고 하기

준비가 끝나면, 화면을 실행해 볼 수 있는 주소를 받아요.

AI에게 말하기AI에게 이렇게 말하기

이제 쇼핑몰 화면을 실행해서 볼 수 있는 주소를 알려줘.

AI가 알려준 주소(보통 http://localhost:3000)를 브라우저 주소창에 입력하면, 내 상품이 보이는 쇼핑몰 화면이 떠요.

AI에게 디자인 맡기기

상품·주문 같은 내용은 그대로 두고, 보이는 화면만 AI가 바꿔줘요. 이게 이 방법의 핵심이에요.

AI에게 말하기첫 화면 꾸미기

첫 화면에 인기 상품 모음을 큼직하게 추가해줘.

AI에게 말하기색감·분위기 바꾸기

전체 색을 어두운 톤에 민트색 포인트로 바꾸고, 모서리를 둥글게 해줘.

AI에게 말하기페이지 추가

브랜드 소개 페이지를 새로 만들어서 위쪽 메뉴에 넣어줘.

AI에게 말하기부분 수정

상품 카드에 '품절' 표시를 더 눈에 띄게 바꿔줘.

화면을 켜둔 채로 AI에게 말하면, 바뀐 모습이 브라우저에 바로 반영돼요. 마음에 안 들면 '좀 더 크게', '원래대로' 처럼 다시 말해서 고치면 됩니다.

(선택) 고객에게 공개하기

내 컴퓨터에서만 보이던 화면을 실제 인터넷 주소로 올려요. 이것도 AI에게 부탁하면 됩니다.

AI에게 말하기AI에게 이렇게 말하기

완성된 쇼핑몰 화면을 인터넷에 공개할 수 있게 준비하고, 올리는 방법을 알려줘.

AI가 공개용으로 묶고, Vercel 같은 무료 서비스에 올리는 방법을 안내해줘요. 인터넷 주소와 로그인 연결 주소만 맞추면 됩니다(이 부분도 AI가 챙겨줘요).