3D 버거에서 맞춤 굿즈까지: AI로 스토어 만들기

번(번들)이 들리고 피클이 모습을 드러납니다. 치즈 한 장을 더 얹으면 영수증과 함께 버거의 모양이 바로 바뀝니다.다른 곳에서는 쇼핑객이 후드에 그림을 드롭하고 조금 위로 옮긴 다음 제품을 돌려 보며 느낌을 확인합니다. 그 간단한 상호작용 뒤에는 판매자가 이미 아트워크의 위치와 허용 가능한 크기를 정해 놓았습니다.두 경험은 매우 다르지만 공통된 유용한 아이디어를 가집니다. 즉, 매장은 판매하는 상품과 그 상품을 선택하는 방식에 맞춰 구성될 수 있다는 것입니다.우리는 시작점 두 가지를 Modern Shop 컬렉션(GitHub)에 올려두었습니다: 젤리바이트(Jelly Bites), 3D 패스트푸드 스토어프론트, 그리고 모크업 스튜디오(Mockup Studio), 맞춤 굿즈를 위한 제품 디자이너입니다. 소스는 MIT 라이선스로 공개되어 있으니 살펴보고, 수정하고, 확장해 보세요.아이디어와 브랜드, 그리고 Codex나 Claude Code 같은 AI 코딩 도구를 가져오면 흥미로운 출발점이 이미 준비되어 있습니다.

젤리바이트: 고객이 직접 점심을 조합하게 하세요

Jelly Bites 라이브 데모부터 시작해 보세요. 버거를 선택하고 드래그해 돌려 보며 재료를 바꿔 보세요. 음식은 부드럽게 흔들리며 반응합니다. 특정 레이어를 강조하면 쌓여 있는 단이 열려 내부를 확인할 수 있습니다.장난스럽지만 이 상호작용은 실용적인 목적이 있습니다. 고객은 자신이 선택하는 옵션을 직접 볼 수 있습니다. 피클, 소스, 치즈, 토핑이 일련의 선택지로만 머무르지 않고 주문의 눈에 보이는 부분이 됩니다.피자 빌더는 같은 아이디어를 다른 방향으로 확장합니다: 크기, 도우, 소스, 토핑을 선택하면 피자가 형태를 만들어 가는 걸 볼 수 있습니다. 라이브 영수증은 그 결정의 결과를 즉시 보여줍니다. 데모는 배달/픽업, 프로모션 코드, 체크아웃 및 주문 추적 화면도 다룹니다.사람들이 마음을 바꿀 때 중요한 작은 디테일이 하나 있습니다. 빌드 단계에 올라간 아이템은 고객이 "저장"을 선택할 때까지 초안 상태입니다. 장바구니에 담긴 항목은 다시 3D 빌더로 불러와 편집할 수 있습니다. 이런 상호작용은 식당이 고유하게 구현할 수 있는 부분입니다.3D 패스트푸드 스토어프론트 소스는 Vue, TypeScript, Three.js로 구성되어 있습니다. 데모를 시도하는 데 그 이름들을 알 필요는 없습니다. 개발자나 코딩 에이전트에게는 브라우저 기반의 친숙한 프로젝트로 식별되어 검토하고 확장하기에 좋습니다. 음식 형태는 코드로 생성되므로 외형과 동작을 바꿀 구체적인 출발점을 제공합니다.버거 가게는 자체 레시피와 포장에 맞춰 메뉴를 조정할 수 있습니다. 피자 브랜드는 시그니처 조합을 앞세울 수 있습니다. 색상, 언어, 문구, 재료 옵션, 주문 흐름을 비즈니스에 맞게 바꿔 보세요. 예제로 영어와 페르시아어 레이아웃이 이미 포함되어 있습니다.실제 주문에 사용하기 전 이해해야 할 경계 하나가 있습니다: 현재 데모는 샘플 카탈로그 데이터와 브라우저에 저장된 주문, 시뮬레이션된 체크아웃 및 추적을 사용합니다. Selldone 연결은 아직 구현되어야 합니다. 시각적 경험은 탐색할 수 있지만, 최종 카탈로그와 가격 검증, 결제, 이행은 실제 커머스 통합이 필요합니다. 3D 경험은 WebGL 2를 지원하는 브라우저가 필요하므로 고객이 사용하는 휴대폰과 브라우저에서 테스트해 보세요.

모크업 스튜디오: 판매자와 쇼핑객을 위한 서로 다른 경험

맞춤 티셔츠 가게는 다른 문제를 안고 있습니다. 고객은 자유롭게 실험하길 원합니다. 인쇄업체는 실제 인쇄 영역에 맞는 디자인이 필요합니다.Mockup Studio는 그 양측의 문제를 모두 해결하려고 합니다. 라이브 제품 디자이너 데모를 열면 명확히 구분된 두 가지 모드가 보입니다: 판매자용 템플릿 빌더와 쇼핑객용 에디터입니다.

판매자는 규칙을 한 번 정합니다

템플릿 빌더에서 판매자는 제품을 선택하고 제품 뷰를 추가하며 인쇄 가능 영역을 정의합니다. 이 치수는 밀리미터 단위로 저장되며, 해상도와 재단 여분(bleed)에 대한 설정도 포함됩니다.그 다음 판매자는 쇼핑객이 무엇을 변경할 수 있을지 결정합니다: 예를 들어 아트워크의 이동, 크기 조정, 회전 등입니다. 가슴 인쇄는 별도의 경계가 있고 소매는 다른 영역을 가질 수 있습니다. 템플릿은 호스트 애플리케이션에 넘기기 전에 쇼핑객 관점에서 테스트할 수 있습니다.이런 분리는 단일 티셔츠를 넘어서서 유용합니다. 샘플 갤러리에는 티셔츠, 후드, 스웨터, 캡, 머그컵, 쿠션, 행택 등이 포함되어 있습니다. 준비된 3D 자산은 지원되는 모델 형식 내에서 사용할 수도 있습니다. 다른 제품 형태를 다루려면 모델과 인쇄 영역 매핑을 준비해야 합니다.스튜디오는 구성된 3D 모델에서 초기 제품 사진을 생성할 수도 있습니다. 이는 판매자가 에디터용 뷰를 준비하면서 제품 경험을 개발하는 또 다른 방법을 제공합니다.

고객은 마음껏 실험할 수 있습니다

쇼핑객용 에디터는 더 집중된 편입니다. 이미지를 업로드하고 위치를 조정하며 크기를 바꾸고 제품에서 미리 보기할 수 있습니다. 판매자가 설정한 규칙은 유지되면서 고객은 자유롭게 실험할 수 있습니다.사진 기반의 2D 뷰와 선택적인 회전 가능한 3D 뷰가 있습니다. 아트워크 변경 사항은 모델에 즉시 반영됩니다. 지원되는 소프트 제품에서는 천을 들어 올렸다가 다시 내려앉는 것을 보여주는 끌기 도구도 있습니다. 이는 미리보기 효과이며 인쇄로 보내지는 아트워크를 늘리지는 않습니다.프로젝트 전반에 걸쳐 명확한 구분이 있습니다: 하나는 고객에게 아이템이 어떻게 보일지 보여 주는 것(미리보기)이고, 다른 하나는 설정된 물리적 치수와 해상도를 사용한 투명한 PNG로서 인쇄 표면을 위한 파일입니다. 인쇄 품질 지표는 원본 이미지의 픽셀이 선택된 크기와 어떻게 관련되는지 설명하는 데 도움이 됩니다.실제 제작 워크플로에서는 인쇄업체가 치수, 색상, 파일 요구사항을 최종 승인해야 합니다. 현재 내보내기는 브라우저 렌더링된 RGB PNG이며 인쇄업체용 CMYK나 색상 프로파일 변환은 포함되어 있지 않습니다. 생성된 제품 형상은 실제 모든 의복의 정밀한 복제물보다는 일러스트레이션에 가깝습니다.데모는 템플릿과 디자인을 로컬에 보관합니다. 이를 비즈니스에 저장하고 주문에 정확한 디자인을 첨부하며 결제를 받고 작업을 제작으로 보내는 것은 완성된 상점의 통합 단계입니다. 텍스트/폰트 도구, 제품 옵션(variants), 3D 표면에서의 직접 드래그 같은 기능은 아직 로드맵에 남아 있습니다.

출발점은 AI와의 대화를 바꿉니다

"스토어를 만들어줘"라는 요청은 AI 어시스턴트에게 많은 것을 추측하게 만듭니다. "이 제품 에디터를 가져와 우리 브랜드를 적용하고 인쇄소에 맞는 고객 흐름으로 만들어줘"라고 말하면 더 구체적인 출발점을 제공합니다.그래서 소스를 공유하는 것입니다. 상호작용을 보고 시도해 보고 변경하고 싶은 부분을 지적할 수 있습니다. 스크린샷은 논의의 출발점이 되고 데모는 작동 참조가 됩니다. 코드가 있으면 개발자나 AI 코딩 에이전트가 시작할 곳을 가질 수 있습니다.ChatGPT를 사용해 비즈니스 아이디어를 다듬어 보세요: 누가 구매하는가? 어떤 옵션이 중요한가? 고객은 어디에서 망설이는가? 어떤 정보가 주방이나 인쇄팀에 전달되어야 하는가? 그런 브리프를 Codex, Claude Code 또는 프로젝트를 검사·수정할 수 있는 다른 AI 개발 환경으로 가져가세요.AI 도구는 구성 요소를 적응시키고 디자인을 수정하며 서비스 연결을 도와주고 테스트를 작성하며 익숙하지 않은 코드를 설명해 줄 수 있습니다. 좋은 결과는 여전히 명확한 브리프와 실제 경험 점검에 달려 있습니다. 어시스턴트에게 실용적인 마일스톤을 하나씩 주고 작동하는 것을 보여 달라고 요청하세요.

Selldone MCP의 역할

매장의 앞면은 고객이 마주하는 부분입니다. 그 뒤에는 제품, 재고, 결제, 배송, 그리고 누군가가 이행해야 할 주문들이 있습니다.Selldone MCP는 연결된 AI 어시스턴트에 권한 있는 Selldone 상점에 대한 구조화된 접근을 제공합니다. 빌드 중에 이는 에이전트가 별도의 데모 데이터 집합을 추측하는 대신 상점의 카탈로그, 콘텐츠, 지원되는 설정을 사용하여 작업할 수 있게 도와줍니다. 접근 권한은 여러분이 선택한 상점과 권한 내에서만 유지됩니다.배포된 스토어프론트는 자체적으로 구현된 Selldone API나 서비스 통합이 필요합니다. MCP는 어시스턴트가 개발 및 승인된 상점 작업을 수행하도록 도와주지, 데모의 체크아웃 버튼을 자동으로 실결제 흐름으로 바꾸지는 않습니다.젤리바이트의 경우 메뉴와 주문 흐름을 실제 커머스 서비스에 연결해야 합니다. 모크업 스튜디오의 경우 판매자의 템플릿과 고객이 선택한 디자인을 안정적으로 저장하고 그 디자인을 정확한 제품과 주문에 보존해야 합니다. 고객이 보는 경험은 독창적으로 유지하면서 Selldone이 커머스 기반을 제공합니다.그 기반 위에 구축하는 방법은 다양합니다. 전체 스토어프론트는 Selldone Layout 워크플로를 통해 맞춤화할 수 있고, 더 전문화된 애플리케이션은 별도의 프런트엔드를 사용할 수 있습니다. Selldone Genesis 개요가 그런 경로들을 설명합니다. 올바른 선택은 기존 상점의 어느 부분을 유지하고자 하는지, 고객 여정이 얼마나 특이해야 하는지에 달려 있습니다.

AI에 더 나은 첫 브리프를 주세요

코딩 환경에서 다음 요청으로 시작할 수 있습니다. 괄호 안을 여러분 비즈니스 세부 정보로 바꾸세요.

Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [내 비즈니스]. Read its documentation, then clone the chosen project into a new folder. Show which features work today and which need integration. Adapt the customer journey to [내 브랜드, 제품, 및 요구사항], keeping it usable on mobile.

방향을 정한 뒤 다음 마일스톤을 요청하세요:

Connect the intended Selldone shop through MCP with the permissions this task needs. Plan and implement the real catalog, design-storage where relevant, cart, checkout, and order integration using supported Selldone services. Replace demo assumptions with actual shop data. Test the complete flow and show a preview for review before deployment.

이 프롬프트들은 빌드 대화의 시작입니다. 좋은 에이전트는 프로젝트를 검사하고 누락된 부분을 식별하며 여러분과 함께 그것들을 해결할 것입니다.첫 번째 식당 마일스톤으로는 하나의 완전한 주문을 요청할 수 있습니다: 하나의 아이템을 커스터마이즈하고, 올바른 가격을 확인하고, 지원되는 테스트 결제 흐름에서 결제하고, 비즈니스가 주문을 수신했음을 검증하는 것입니다. 인쇄소라면 업로드에서 미리보기, 그리고 주문에 첨부된 정확한 저장 아트워크까지 한 디자인의 전체 흐름을 따라가 보세요.기존 상호작용 코드와 커머스 플랫폼을 활용하면 맞춤형 스토어프론트가 더 경제적인 프로젝트가 될 수 있습니다. 최종 비용은 여전히 디자인, 통합, 자산, 호스팅, 테스트 등 여러분 비즈니스의 필요에 따라 달라집니다. MIT 라이선스는 샘플 소스를 재사용 가능하게 하지만 그 서비스들을 무료로 포함하지는 않습니다.

직접 만드세요, 아니면 저희 팀에 맡기세요

저희는 Modern Shop 샘플을 계속 다듬고 컬렉션을 발전시킬 것입니다. 지금 공개된 버전에서 시작해 전체 경험을 조정하거나 특정 문제를 해결하는 부분만 차용할 수 있습니다.브랜드에 맞춰 결과물을 전문가에게 맡기고 싶다면 Selldone의 공식 설치 및 디자인 팀에 맞춤형 스토어프론트 견적을 요청할 수 있습니다. 좋아하는 데모와 제품, 고객에게 제공하고 싶은 경험을 가져오세요. 프로젝트 시작 전에 디자인과 구현 범위를 함께 협의할 수 있습니다.여러분의 상점은 화면에서 분해되는 버거로 시작할지도 모릅니다. 작은 머그컵 위의 일러스트에서 시작할지도 모릅니다. 데모를 열어 무언가를 바꿔 보고 어떤 아이디어가 여러분 비즈니스에 어울리는지 확인해 보세요.Modern Shop(GitHub) 탐색 · 3D 푸드 빌더 시도 · 모크업 스튜디오 시도