AI로 쉽고 빠르게 ‘나만의 블록’을 만들 수 있는 AI 블록 생성 가이드입니다!
AI로 블록 만들기
블록 생성 방법
① 디자인 에디터 상단 [섹션] 선택 후, 섹션 리스트에서 [+(섹션 or 블록 추가)] 클릭
② AI 블록 생성 버튼 클릭
③ 프롬프트 입력란에 요청 사항 입력 후 블록 생성 버튼 클릭
AI 블록 생성 팁!
•
스타일을 참조하면 여러 번 페이지나 블록을 생성하더라도 색상 등 핵심 디자인 요소가 매번 동일하게 유지되어 일관된 브랜드 스타일을 적용할 수 있어요. (④)
•
하단의 추천 프롬프트와 키워드를 클릭하면 입력 란에 빠르게 반영됩니다. 아직 디자인 구상 단계라면 여러 아이디어를 얻을 수도 있어요. (⑤)
자세한 설명은 스타일 참조하기를 확인해 주세요.
•
블록 생성 과정
블록 생성은 1~3분이 소요되어요. 완료되면 알려 드리니 잠시 다른 작업을 해 주셔도 괜찮아요.
AI 블록 생성 중에는 에디터를 종료하거나 브라우저 새로고침을 하지 않아야 해요.
작업 도중 에디터 종료 또는 브라우저가 갱신되면, ‘커스텀 블록 생성 중’이라는 블록이 페이지에 계속 남아 있게 됩니다. 해당 블록은 삭제하시고, 새로운 블록을 생성해 주세요.
완성된 블록 확인
블록 생성이 완료되면 현재 작업 중인 페이지에 자동으로 추가되어요.
만약 동일한 블록을 하나 더 추가하고 싶다면, 아래 경로에서 설치 가능해요.
① 디자인 에디터 상단 [섹션] 선택 후, 섹션 리스트에서 [+(섹션 or 블록 추가)] 클릭
② 섹션 추가 창의 전체 또는 콘텐츠의 각 메뉴에서 확인 가능
AI로 만든 블록 수정하기
AI로 제작된 블록은 오른쪽 설정 패널에서 AI 수정 또는 코드 수정 버튼으로 수정하실 수 있어요.
AI 수정
에디터에서 수정을 원하는 부분을 입력하면 AI가 알아서 수정해 드려요.
AI 수정을 진행하면 기존 블록이 새롭게 수정된 블록으로 교체됩니다.
① 페이지에 추가된 커스텀 블록 선택
② 오른쪽 설정 패널의 AI 수정 클릭
③ 프롬프트 입력란에 블록 설정 중 수정하려는 내용을 입력한 후 블록 생성 버튼 클릭
TIP! [요소 선택] 버튼을 활용하면 수정이 필요한 요소를 더 정확히 입력할 수 있어요.
코드 수정
블록 메이커에서 원하는 블록의 코드와 설정 패널을 직접 수정할 수 있어요.
디자인 에디터에서 블록의 오른쪽 설정 패널 상단 코드 수정을 클릭하면 빠르게 블록 메이커로 이동할 수 있어요.
[식스샵 프로 > 웹사이트 - 블록 메이커]로 이동하셔도 됩니다.
버전 기록
AI 수정, 코드, 설정 패널 수정 시 버전별로 수정 이력이 생성되어요.
디자인 에디터에서 버전 기록을 클릭하거나, 블록 메이커에서 블록 오른쪽 ••• 을 클릭하면 블록의 이전 버전을 확인할 수 있어요.
프롬프트 작성 꿀팁들
AI를 활용한 블록 제작이 처음이라면, 원하는 결과물을 효과적으로 만들어내는 프롬프트 작성법을 확인해 보세요.
자세히 작성하기
원하는 스타일, 레이아웃, 인터랙션, 콘텐츠 유형 등 자세히 입력해 보세요.
한 번에 원하는 결과가 나오지 않더라도, AI로 블록 수정하기 기능으로 계속 다듬으면 멋진 블록이 완성됩니다!
자세히 입력하기가 어렵다면?
GPT, 클로드 등 AI 서비스를 활용해 프롬프트를 추천 받는 것도 방법이에요!
(이미지나 URL 등 실제 레퍼런스 예시를 첨부하면 더욱 정확히 알려 줍니다.)
“이미지를 1:1 비율로 바꿔줘”처럼 특정 값으로 고정하기보다, ”이미지 비율을 변경할 수 있는 설정을 만들어줘”라고 요청하면 나중에 에디터에서 원하는 스타일로 언제든 손쉽게 바꿀 수 있어요.
[간단히 입력했을 때]
리뷰 슬라이드를 만들어 줘![자세히 입력했을 때]
리뷰와 상품 이미지로 구성된 좌우 분할 슬라이더를 만들어 줘! 좌측 상단으로 리뷰 콘텐츠 (별점, 내용, 작성자, 날짜 순으로)와 좌우 화살표 버튼을 포함하고, 우측 이미지 비율 설정을 추가해줘 동일 프롬프트로 여러 번 시도하기
같은 프롬프트를 입력해도 작업 결과는 다를 수 있어요. 여러 번 시도해 보고 마음에 드는 블록을 찾아보세요!
아래 예시는 ‘3D 슬라이더 이미지’라는 동일한 프롬프트로 만들어진 블록들이에요.
아래 예시는 ‘3D 슬라이더 이미지’라는 동일한 프롬프트로 만들어진 블록들이에요.
설정 변경 시 프롬프트 예시 활용하기
설정 패널에 새로운 설정을 추가하고 싶을 때, 어떻게 요청할지 막막하다면 아래 표를 활용해 보세요.
유형 | 프롬프트 예시 |
글자 | 글자 크기를 데스크톱, 모바일 각각 설정하고 싶어 |
색상 | 버튼의 배경 색과 글자 색을 편집하고 싶어 |
크기 | 버튼의 크기를 조정하고 싶어 |
레이아웃 | 슬라이드 방식으로 변경해 줘 |
데이터 | 이미지를 여러 장 등록할 수 있도록 해 줘, 동영상을 업로드할 수 있도록 해 줘 |
요소 | 블록 맨 아래에 버튼을 추가해 줘 |
스타일 | 상품 카드 뒤로 은은한 그림자를 추가하고, 테두리를 라운드 형태로 변경해 줘 |
기존 블록을 수정하는 방식으로 이용하기
AI로 블록을 만들기가 막막하다면, 기존의 블록을 변형/수정하는 것이 더 편할 수 있어요.
마켓플레이스에서 원하는 디자인과 유사한 커스텀 블록을 설치한 뒤, AI로 부분 수정해 보세요.
① 디자인 에디터 상단의 마켓플레이스 클릭
② 마켓플레이스에서 원하는 블록을 설치
③ 설치한 블록의 오른쪽 설정 패널에서 AI 수정 클릭
자세한 방법은 가이드를 참고해 주세요!
스타일 참조하기
AI가 페이지를 디자인할 때 참조할 기준 스타일을 선택할 수 있어요.
스타일을 참조하면 여러 번 페이지나 블록을 생성하더라도 색상, 버튼 둥글기 등 핵심 디자인 요소가 매번 동일하게 유지되어 일관된 브랜드 스타일을 적용할 수 있어요.
내 사이트
기본 제공 페이지를 포함해 현재 내 사이트에 있는 모든 페이지 중 참조할 대상을 직접 선택하여 동일한 스타일을 적용해요.
디자인 지침
색상, 글꼴, 여백, 레이아웃 등 AI가 참고할 핵심 디자인 스타일과 규칙을 적용해요. (대표 양식: design.md)
•
프리셋 (약 440여 개 브랜드 지침 제공)
◦
Apple, Nike, Airbnb 등 유명 브랜드 웹사이트의 디자인 규칙을 그대로 가져와 활용할 수 있어요.
◦
검색창에서 원하는 브랜드명을 검색하여 손쉽게 찾아 선택할 수 있어요.
◦
프리셋 지침은 사용자의 필요에 맞게 수정하여 사용할 수 있으며, 언제든지 [원본으로 되돌리기]를 통해 초기 상태로 복구할 수 있어요.
•
디자인 지침 추가
◦
디자인 지침 추가 버튼을 통해 직접 정의한 브랜드 디자인 규칙을 등록하고 사용할 수 있어요.
•
최근 사용 지침
◦
최근에 사용한 3개의 지침이 저장되어 따로 확인할 수 있어요.
URL
참조하고 싶은 외부 웹사이트의 URL을 입력하면, 해당 페이지의 디자인 톤앤매너와 주요 스타일 요소를 분석하여 반영해요.
고객 서비스 지원 범위 확인하기
AI로 생성된 블록의 수정/개선 작업 요청은 고객센터에서 지원해 드리지 않고 있어요.
블록(디자인)으로 돌아가기
식스샵 프로 가이드로 돌아가기