Search

AI 블록 활용하기

AI로 쉽고 빠르게 ‘나만의 블록’을 만들 수 있는 AI 블록 생성 가이드입니다!
AI 블록, 이래서 좋아요!
디자인은 물론, 설정 패널까지 간편하게 만들 수 있어요!
코드를 모르는 비개발자도, 전문 개발자와 디자이너를 고용한 것처럼 완성도 높은 블록을 제작할 수 있어요!
제작된 블록의 수정/편집의 자유도가 높아요!
원하는 작업물이 나올 때까지 프롬프트(작업을 지시하는 명령문)로 여러 차례 다듬을 수 있어요. 개발 지식이 있다면 코드를 직접 수정할 수도 있죠!

AI로 블록 만들기

블록 생성 방법

① 디자인 에디터 상단 [섹션] 선택 후, 섹션 리스트에서 [+(섹션 or 블록 추가)] 클릭 ② AI 블록 생성 버튼 클릭 ③ 프롬프트 입력란에 요청 사항 입력 후 블록 생성 버튼 클릭
AI 블록 생성 팁!
•
하단의 추천 프롬프트와 키워드를 클릭하면 입력 란에 빠르게 반영됩니다. 아직 디자인 구상 단계라면 여러 아이디어를 얻을 수도 있어요. (④)

블록 생성 과정

블록 생성은 1~3분이 소요되어요. 완료되면 알려 드리니 잠시 다른 작업을 해 주셔도 괜찮아요.
AI 블록 생성 중에는 에디터를 종료하거나 브라우저 새로고침을 하지 않아야 해요.
작업 도중 에디터 종료 또는 브라우저가 갱신되면, ‘커스텀 블록 생성 중’이라는 블록이 페이지에 계속 남아 있게 됩니다. 해당 블록은 삭제하시고, 새로운 블록을 생성해 주세요.

완성된 블록 확인

블록 생성이 완료되면 현재 작업 중인 페이지에 자동으로 추가되어요. 만약 동일한 블록을 하나 더 추가하고 싶다면, 아래 경로에서 설치 가능해요.
① 디자인 에디터 상단 [섹션] 선택 후, 섹션 리스트에서 [+(섹션 or 블록 추가)] 클릭 ② 커스텀 블록 클릭하여 확인 및 추가 가능

AI로 만든 커스텀 블록 수정하기

AI로 제작된 커스텀 블록은 오른쪽 설정 패널에서 AI로 블록 수정 또는 블록 코드 수정 버튼으로 수정하실 수 있어요.

AI로 블록 수정

에디터에서 수정을 원하는 부분을 입력하면 AI가 알아서 수정해 드려요. → 기존 블록은 그대로 존재하고 수정 요청 사항이 반영된 ‘새로운 블록’이 하나 더 생성되는 방식이에요.
① 페이지에 추가된 커스텀 블록 선택 ② 오른쪽 설정 패널의 AI로 블록 수정 클릭 ③ 프롬프트 입력란에 블록 설정 중 수정하려는 내용을 입력한 후 블록 생성 버튼 클릭 ④ 생성 완료 시, 수정된 ‘새로운 블록’이 기존 블록 하단에 생성

블록 코드 수정

블록 메이커에서, 원하는 블록의 코드와 설정 패널을 직접 수정할 수 있어요. → 새로운 블록이 추가되는 AI로 블록 수정하기 방식과 달리, 해당 블록 자체가 수정되어요. 원본 블록을 보존하려면 복제 후 수정해 주세요.
블록 코드 수정
 코드 수정 시 기본적인 HTML/CSS/JavaScript 지식이 필요해요!
•
전문가라면 블록 메이커 가이드를 참고해 주세요.
•
비전문가라면 식스샵 프로의 공식 파트너에게 제작/수정을 의뢰해 보세요. 파트너 살펴보기
설정 패널 수정
 블록 설정 패널은 코드 지식 없어도 간단한 수정이 가능해요! (내용, 순서 편집 등)
•
다만, 새로운 설정을 추가하거나 상세한 속성 값을 수정하려면 코드 기본 지식이 필요해요.
•
설정 패널에서 추가/수정 가능한 항목이 궁금하다면 지원되는 세팅의 종류 가이드를 참고해 주세요.

프롬프트 작성 꿀팁들

AI를 활용한 블록 제작이 처음이라면, 원하는 결과물을 효과적으로 만들어내는 프롬프트 작성법을 확인해 보세요.

자세히 작성하기

원하는 스타일, 레이아웃, 인터랙션, 콘텐츠 유형 등 자세히 입력해 보세요. 한 번에 원하는 결과가 나오지 않더라도, AI로 블록 수정하기 기능으로 계속 다듬으면 멋진 블록이 완성됩니다!
자세히 입력하기가 어렵다면?
GPT, 클로드 등 AI 서비스를 활용해 프롬프트를 추천 받는 것도 방법이에요! (이미지나 URL 등 실제 레퍼런스 예시를 첨부하면 더욱 정확히 알려 줍니다.)
[간단히 입력했을 때]
리뷰 슬라이드를 만들어 줘!
[자세히 입력했을 때]
리뷰와 상품 이미지로 구성된 좌우 분할 슬라이더를 만들어 줘! 좌측 상단으로 리뷰 콘텐츠 (별점, 내용, 작성자, 날짜 순으로)와 좌우 화살표 버튼을 포함하고, 우측에 1:1 고정 비율의 이미지를 적용해 줘.

동일 프롬프트로 여러 번 시도하기

같은 프롬프트를 입력해도 작업 결과는 다를 수 있어요. 여러 번 시도해 보고 마음에 드는 블록을 찾아보세요! 아래 예시는 ‘3D 슬라이더 이미지’라는 동일한 프롬프트로 만들어진 블록들이에요.

설정 변경 시 프롬프트 예시 활용하기

설정 패널에 새로운 설정을 추가하고 싶을 때, 어떻게 요청할지 막막하다면 아래 표를 활용해 보세요.
유형
프롬프트 예시
글자
글자 크기를 데스크톱, 모바일 각각 설정하고 싶어
색상
버튼의 배경 색과 글자 색을 편집하고 싶어
크기
버튼의 크기를 조정하고 싶어
레이아웃
슬라이드 방식으로 변경해 줘
데이터
이미지를 여러 장 등록할 수 있도록 해 줘, 동영상을 업로드할 수 있도록 해 줘
요소
블록 맨 아래에 버튼을 추가해 줘
스타일
상품 카드 뒤로 은은한 그림자를 추가하고, 테두리를 라운드 형태로 변경해 줘

기존 블록을 수정하는 방식으로 이용하기

AI로 블록을 만들기가 막막하다면, 기존의 블록을 변형/수정하는 것이 더 편할 수 있어요. 마켓플레이스에서 원하는 디자인과 유사한 커스텀 블록을 설치한 뒤, AI로 부분 수정해 보세요.
① 디자인 에디터 상단의 마켓플레이스 클릭 ② 마켓플레이스에서 원하는 블록을 설치 ③ 설치한 블록의 오른쪽 설정 패널에서 AI로 블록 수정 클릭
자세한 방법은 디자인 블록 활용하기 가이드를 참고해 주세요!

유의 사항 확인하기

사용량 제한
1.
AI 블록은 한번에 1개씩 생성할 수 있어요.
동시에 2개 이상 생성 불가하며, 작업 중인 블록이 생성된 이후 다른 블록을 생성해 주세요.
2.
사용 중인 플랜에 따라 월 최대 사용량 제한이 상이해요.
•
무료 플랜: 사용 불가
•
체험판: 스토어당 월 10개
•
홈페이지 플랜: 스토어당 월 35개
•
쇼핑몰 플랜: 스토어당 월 70개
고객 서비스 지원 범위
AI로 생성된 블록의 수정/개선 작업 요청은 고객센터에서 지원해 드리지 않아요.
AI로 생성된 블록을 수정/개선하고 싶다면?
1.
블록 메이커 가이드를 참고하여, AI 또는 코드로 직접 수정해 보세요.
2.
식스샵 프로의 공식 파트너(전문가)들에게 블록 제작과 디자인을 의뢰할 수 있어요. 파트너 살펴보기

FAQ

Q1. 커스텀 블록 외, 다른 블록이나 섹션은 AI 수정 및 코드로 수정할 수 없나요?