AI로 온라인 스토어 만드는 방법

작은 스토어는 기본 사항을 먼저 정해 둘 때 가장 잘 만들어집니다. AI는 코드를 빠르게 생성할 수 있지만, 명확한 브리프는 여전히 필요합니다.

다음 항목을 적어 두세요:

• 무엇을 판매하는지
• 첫 버전에서 몇 개의 상품이 필요한지
• 고객이 바로 구매할 수 있는지, 아니면 문의만 받는지
• 어떤 페이지가 필요한지
• 각 상품에 어떤 정보가 필요한지

간단한 스토어의 첫 버전에는 보통 다음이 필요합니다:

• 홈 페이지
• 쇼핑 또는 카탈로그 페이지
• 상품 상세 페이지
• 장바구니 페이지 또는 결제 버튼
• 소개 또는 문의 페이지

상품 데이터 처리 방식도 미리 정해 두세요. 상품이 몇 개뿐이라면 사이트 안에 하드코딩된 상품 콘텐츠로 시작할 수 있습니다. 나중에 상품, 고객 계정, 주문 데이터를 관리하고 싶다면 그때 데이터베이스가 중요해집니다.

첫 빌드는 범위를 좁게 유지하세요. 3개에서 6개 상품이면 흐름을 검증하기에 충분합니다.

Moremade에서는 평범한 언어로 웹사이트를 설명하면 AI 에이전트가 React와 Tailwind 코드를 작성합니다. 그런 다음 실시간 미리보기를 확인하고 채팅으로 사이트를 계속 수정할 수 있습니다.

첫 프롬프트에는 구조, 스타일, 핵심 상호작용이 모두 들어가야 합니다. 페이지에 무엇이 있어야 하는지는 구체적으로 적되, 모든 픽셀을 지정하려고 하지는 마세요.

좋은 첫 프롬프트에는 다음이 포함됩니다:

• 스토어의 종류
• 생성할 페이지
• 보여줄 상품 필드
• 레이아웃 스타일
• 결제 동작
• 콘텐츠 톤 또는 브랜드 제약

예시:

수제 캔들 브랜드를 위한 작은 온라인 스토어를 만들어 주세요. 홈 페이지, 쇼핑 페이지, 상품 상세 페이지, 장바구니 페이지, 문의 페이지를 만들어 주세요. 따뜻한 중립색과 깔끔한 상품 카드가 있는 미니멀한 레이아웃을 사용하세요. 이름, 가격, 짧은 설명, 향 노트, 상품 이미지 자리표시자가 포함된 예시 상품 6개를 추가해 주세요. 상품 페이지에는 이미지, 설명, 성분, 장바구니 담기 버튼이 있어야 합니다. 장바구니에서는 수량을 바꾸고 소계를 볼 수 있어야 합니다. 사이트는 반응형이어야 하며 모바일에서 사용하기 쉬워야 합니다.

첫 빌드가 끝나면 실시간 미리보기를 편집 도구처럼 사용하세요. 구조가 완전히 잘못된 경우가 아니라면 처음부터 다시 시작할 필요는 없습니다. 보통은 작고 직접적인 요청을 하는 편이 더 좋습니다.

Moremade에서는 채팅으로 변경을 요청하고, 시각적 인스펙터로 요소를 가리켜 수정할 수 있으며, 코드 보기를 통해 어떤 부분이 바뀌었는지도 확인할 수 있습니다.

좋은 후속 프롬프트는 구체적이고 국소적입니다. 한 번에 한 가지 개선만 요청하세요.

예시:

• "상품 그리드를 데스크톱에서는 3열, 태블릿에서는 2열로 바꿔 주세요. 상품 카드 높이를 같게 하고 장바구니 담기 버튼이 맨 아래에 고정되도록 해 주세요."
• "상품 페이지에서 향 노트를 성분보다 위로 옮기고, 장바구니 담기 버튼 아래에 작은 배송 안내를 추가하고, 데스크톱에서는 메인 이미지를 더 크게 해 주세요."
• "홈 페이지 히어로를 더 단순하게 해 주세요. 더 짧은 헤드라인, 한 줄의 보조 문장, 쇼핑 페이지로 연결되는 기본 버튼을 사용하세요."

이 단계에서 대부분의 품질이 결정됩니다. 간격, 상품 위계, 버튼 레이블, 빈 상태, 그리고 장바구니 흐름이 명확한지 확인하세요.

모든 첫 버전에 완전한 백엔드가 필요한 것은 아닙니다.

그냥 브로슈어형 쇼핑몰이나 클릭 가능한 데모가 필요하다면, 상품을 프런트엔드 코드에 넣고 거기서 멈춰도 됩니다. 고객 결제가 필요하면 Stripe를 추가하세요. 로그인, 저장된 사용자 데이터, 저장된 상품 기록이 필요하면 Supabase를 추가하세요.

Moremade에는 두 가지를 위한 기본 연결 기능이 있습니다.

다음이 필요하면 Stripe를 사용하세요:

• 직접 설정한 실제 가격으로 결제
• 작은 카탈로그를 위한 간단한 결제 경로

다음이 필요하면 Supabase를 사용하세요:

• 고객 로그인
• 상품 또는 주문용 데이터베이스
• 파일 저장소

많은 소규모 스토어에서 Stripe는 가장 먼저 추가할 실제 연동입니다. 실용적인 후속 프롬프트는 다음과 같습니다:

• "사이트에 표시된 상품 가격을 사용해 결제를 Stripe에 연결해 주세요. 장바구니 페이지는 유지하고, 결제 전에 주문 요약을 보여 주며, 모바일에서도 결제 버튼이 명확하게 보이도록 해 주세요."

나중에 고객 계정이나 재고 관련 데이터가 필요해지면, 버전 1에 억지로 넣기보다 Supabase를 도입할 적절한 시점입니다.

대부분의 작은 스토어는 데스크톱보다 모바일에서 먼저 평가됩니다.

다음 부분을 꼼꼼히 확인하세요:

• 홈 페이지 히어로 높이와 버튼 가시성
• 상품 카드 가독성
• 상품 페이지의 이미지 잘림 현상
• 장바구니 수량 조절
• 결제 버튼 위치
• 입력 필드와 터치 영역

문제는 평이한 말로 수정 요청을 하세요. 예를 들면:

• "모바일 메뉴를 더 단순하게 만들고 터치 영역을 더 크게 해 주세요. 헤더에서는 장바구니 아이콘이 계속 보이게 해 주세요."
• "휴대폰에서는 상품 이미지를 상품 상세 정보 위에 배치하고 좌우 여백을 조금 줄여 주세요."

뭔가 어색해 보이는데 잘 설명하기 어렵다면, 먼저 시각적 인스펙터로 해당 요소를 가리킨 다음 변경을 요청하세요.

사이트가 마음에 들면 게시하세요.

Moremade는 한 번의 클릭으로 무료 yourname.moremade.ai 서브도메인에 게시할 수 있습니다. 유료 요금제에서는 맞춤 도메인을 연결할 수 있습니다. 도메인은 Moremade 안에서 구매할 수도 있습니다.

간단한 출시 흐름은 다음과 같습니다:

• 검토용으로 무료 서브도메인에 게시
• 링크, 장바구니 흐름, 결제 테스트
• 스토어가 준비되면 실제 도메인 연결

플랫폼 밖에도 복사본을 보관하고 싶다면, 언제든지 전체 소스를 ZIP으로 내보내거나 GitHub에 푸시할 수 있습니다. 웹사이트는 실제 React와 Tailwind 코드로 만들어지므로, 독점 형식에 묶이지 않습니다.

가장 흔한 실패 원인은 AI에게 너무 많은 일을 너무 일찍 시키는 것입니다.

다음 실수는 피하세요:

• 단순한 카탈로그와 결제 대신 20개의 기능으로 시작하기
• "온라인 스토어 만들어 줘"처럼 제품이나 페이지 세부 정보가 없는 모호한 프롬프트 작성하기
• 고객이 왜 계정이 필요한지 알기 전에 로그인 추가하기
• 한 요청에 여러 디자인 방향을 섞기
• 마지막까지 모바일 테스트를 건너뛰기
• 문제를 디버깅할 때 구조와 스타일을 같은 프롬프트에서 동시에 바꾸기

더 나은 패턴은 여러 단계로 만드는 것입니다:

1. 기본 스토어 구조를 생성합니다.
2. 레이아웃과 콘텐츠를 수정합니다.
3. 고객이 지금 결제해야 한다면 Stripe를 추가합니다.
4. 저장된 데이터나 로그인이 필요할 때만 Supabase를 추가합니다.
5. 게시하고, 테스트하고, 그다음 반복 개선합니다.

이 방식은 프로젝트를 이해하기 쉽게 유지하고, 피할 수 있는 재작업에 Build Units를 낭비하지 않게 해 줍니다.