AI로 쉽고 빠르게 ‘나만의 블록’을 만들 수 있는 AI 블록 생성 가이드입니다!
AI로 블록 만들기
블록 생성 방법
① 디자인 에디터 상단 [섹션] 선택 후, 섹션 리스트에서 [+(섹션 or 블록 추가)] 클릭
② AI 블록 생성 버튼 클릭
③ 프롬프트 입력란에 요청 사항 입력 후 블록 생성 버튼 클릭
AI 블록 생성 팁!
•
하단의 추천 프롬프트와 키워드를 클릭하면 입력 란에 빠르게 반영됩니다. 아직 디자인 구상 단계라면 여러 아이디어를 얻을 수도 있어요. (④)
•
블록 생성 과정
블록 생성은 1~3분이 소요되어요. 완료되면 알려 드리니 잠시 다른 작업을 해 주셔도 괜찮아요.
AI 블록 생성 중에는 에디터를 종료하거나 브라우저 새로고침을 하지 않아야 해요.
작업 도중 에디터 종료 또는 브라우저가 갱신되면, ‘커스텀 블록 생성 중’이라는 블록이 페이지에 계속 남아 있게 됩니다. 해당 블록은 삭제하시고, 새로운 블록을 생성해 주세요.
완성된 블록 확인
블록 생성이 완료되면 현재 작업 중인 페이지에 자동으로 추가되어요.
만약 동일한 블록을 하나 더 추가하고 싶다면, 아래 경로에서 설치 가능해요.
① 디자인 에디터 상단 [섹션] 선택 후, 섹션 리스트에서 [+(섹션 or 블록 추가)] 클릭
② 커스텀 블록 클릭하여 확인 및 추가 가능
AI로 만든 커스텀 블록 수정하기
AI로 제작된 커스텀 블록은 오른쪽 설정 패널에서 AI로 블록 수정 또는 블록 코드 수정 버튼으로 수정하실 수 있어요.
AI로 블록 수정
에디터에서 수정을 원하는 부분을 입력하면 AI가 알아서 수정해 드려요.
→ 기존 블록은 그대로 존재하고 수정 요청 사항이 반영된 ‘새로운 블록’이 하나 더 생성되는 방식이에요.
① 페이지에 추가된 커스텀 블록 선택
② 오른쪽 설정 패널의 AI로 블록 수정 클릭
③ 프롬프트 입력란에 블록 설정 중 수정하려는 내용을 입력한 후 블록 생성 버튼 클릭 TIP!
TIP! [요소 선택] 버튼을 활용하면 수정이 필요한 요소를 더 정확히 입력할 수 있어요.
④ 생성 완료 시, 수정된 ‘새로운 블록’이 기존 블록 하단에 생성
블록 코드 수정
블록 메이커에서, 원하는 블록의 코드와 설정 패널을 직접 수정할 수 있어요.
→ 새로운 블록이 추가되는 AI로 블록 수정하기 방식과 달리, 해당 블록 자체가 수정되어요. 원본 블록을 보존하려면 복제 후 수정해 주세요.
AI로 블록 수정하기 방식과 달리, 해당 블록 자체가 수정되어요. 원본 블록을 보존하려면 복제 후 수정해 주세요.
.png&blockId=1594b16e-2bf1-80c3-b713-e8c0dbabb5db)
설정 패널 수정
블록 설정 패널은 코드 지식 없어도 간단한 수정이 가능해요! (내용, 순서 편집 등)•
다만, 새로운 설정을 추가하거나 상세한 속성 값을 수정하려면 코드 기본 지식이 필요해요.
•
프롬프트 작성 꿀팁들
AI를 활용한 블록 제작이 처음이라면, 원하는 결과물을 효과적으로 만들어내는 프롬프트 작성법을 확인해 보세요.
자세히 작성하기
원하는 스타일, 레이아웃, 인터랙션, 콘텐츠 유형 등 자세히 입력해 보세요.
한 번에 원하는 결과가 나오지 않더라도, AI로 블록 수정하기 기능으로 계속 다듬으면 멋진 블록이 완성됩니다!
자세히 입력하기가 어렵다면?
GPT, 클로드 등 AI 서비스를 활용해 프롬프트를 추천 받는 것도 방법이에요!
(이미지나 URL 등 실제 레퍼런스 예시를 첨부하면 더욱 정확히 알려 줍니다.)
[간단히 입력했을 때]
리뷰 슬라이드를 만들어 줘![자세히 입력했을 때]
리뷰와 상품 이미지로 구성된 좌우 분할 슬라이더를 만들어 줘! 좌측 상단으로 리뷰 콘텐츠 (별점, 내용, 작성자, 날짜 순으로)와 좌우 화살표 버튼을 포함하고, 우측에 1:1 고정 비율의 이미지를 적용해 줘. 동일 프롬프트로 여러 번 시도하기
같은 프롬프트를 입력해도 작업 결과는 다를 수 있어요. 여러 번 시도해 보고 마음에 드는 블록을 찾아보세요!
아래 예시는 ‘3D 슬라이더 이미지’라는 동일한 프롬프트로 만들어진 블록들이에요.
아래 예시는 ‘3D 슬라이더 이미지’라는 동일한 프롬프트로 만들어진 블록들이에요.
설정 변경 시 프롬프트 예시 활용하기
설정 패널에 새로운 설정을 추가하고 싶을 때, 어떻게 요청할지 막막하다면 아래 표를 활용해 보세요.
유형 | 프롬프트 예시 |
글자 | 글자 크기를 데스크톱, 모바일 각각 설정하고 싶어 |
색상 | 버튼의 배경 색과 글자 색을 편집하고 싶어 |
크기 | 버튼의 크기를 조정하고 싶어 |
레이아웃 | 슬라이드 방식으로 변경해 줘 |
데이터 | 이미지를 여러 장 등록할 수 있도록 해 줘, 동영상을 업로드할 수 있도록 해 줘 |
요소 | 블록 맨 아래에 버튼을 추가해 줘 |
스타일 | 상품 카드 뒤로 은은한 그림자를 추가하고, 테두리를 라운드 형태로 변경해 줘 |
기존 블록을 수정하는 방식으로 이용하기
AI로 블록을 만들기가 막막하다면, 기존의 블록을 변형/수정하는 것이 더 편할 수 있어요.
마켓플레이스에서 원하는 디자인과 유사한 커스텀 블록을 설치한 뒤, AI로 부분 수정해 보세요.
① 디자인 에디터 상단의 마켓플레이스 클릭
② 마켓플레이스에서 원하는 블록을 설치
③ 설치한 블록의 오른쪽 설정 패널에서 AI로 블록 수정 클릭
유의 사항 확인하기
사용량 제한
1.
AI 블록은 한번에 1개씩 생성할 수 있어요.
동시에 2개 이상 생성 불가하며, 작업 중인 블록이 생성된 이후 다른 블록을 생성해 주세요.
2.
사용 중인 플랜에 따라 월 최대 사용량 제한이 상이해요.
•
무료 플랜: 사용 불가
•
체험판: 스토어당 월 10개
•
홈페이지 플랜: 스토어당 월 35개
•
쇼핑몰 플랜: 스토어당 월 70개
FAQ
Q1. 커스텀 블록 외, 다른 블록이나 섹션은 AI 수정 및 코드로 수정할 수 없나요?
식스샵 프로 가이드로 돌아가기