식스샵 프로 AI/에디터 기능 잘 쓰는 법

별도 AI 도구와 식스샵 프로 MCP를 연동해서 쓰시는 분들도 많이 계시지만, 식스샵 프로를 쓰시는 첫날부터 바로 이렇게 하시기는 살짝 어렵고, 적응 및 학습이 필요합니다.

그래서 식스샵 프로를 처음 쓰시는 분들을 위해 AI/에디터 기능들의 사용법과 꿀팁들을 소개해 드리고자 합니다.

에디터 기능과 식스샵 AI 기능을 활용한 제작 방식

1) 템플릿 선택 또는 AI 페이지 생성 → 2) 페이지의 레이아웃 구성 → 3) 블록 채우기 - AI 블록 생성/수정, 블록별 컨텐츠/디자인 설정

1) 템플릿 선택 또는 AI 페이지 생성

템플릿 선택 또는 AI 페이지 생성 기능으로 웹사이트 제작을 시작하실 수 있습니다.

1-1) 식스샵 프로 템플릿의 특징

템플릿들은 다양한 식스샵 파트너분들과 함께 만들어 가고 있습니다. 템플릿마다 제작한 파트너분들이 다르기에 구성 블록들도 다르고, 템플릿마다 제공되는 기능/디자인이 다릅니다.

다만, 템플릿의 상위 개념인 테마는 총 3종류가 존재하며(Essential, Grid, Round), 테마마다 제공되는 기본 블록들은 같은 테마 기반의 템플릿들일 경우 모두 동일하게 제공됩니다. 또한, 테마마다 상품 상세/주문 결제/장바구니 등 시스템에서 제공되는 페이지의 디자인이 다릅니다.

1-2) HTML 코드/파일 → 페이지 변환

피그마/스티치/클로드 디자인 등 다양한 도구로 디자인한 페이지를 HTML 코드/파일 변환 기능으로 식스샵 프로의 페이지로 한방에 변환하는 기능입니다. 단순히 HTML을 그대로 옮기는 게 아니라, 식스샵 프로 에디터에서 재편집 가능한 섹션/블록들로 재구성된 페이지로 변환을 해줍니다.

**스티치 → 식스샵 프로** 왼쪽 토글을 열어서 시연 영상을 확인하세요.
**피그마 → HTML 추출(Locofy) → 식스샵 프로**
**클로드 디자인 → 식스샵 프로** 기능 준비 중

추가적인 AI 페이지 생성 기능들(프롬프트 기반 생성, URL/이미지 기반 생성 등)이 2~3주 간 출시될 예정

2) 페이지의 레이아웃 구성

개발에 자신이 없을수록 가능하면, AI로 자유롭게 수정 가능한 블록 1개를 작은 단위로 구성하는 게 좋습니다.

블록 1개를 작게 구성하려면, 에디터에서 제공하는 레이아웃/컨테이너 관련 기능들을 최대한 사용해서, 레이아웃 및 구조를 에디터 기능으로 잡고, 거기에 들어가는 컨텐츠들만 블록으로 채우면 됩니다.