식스샵 블록 메이커로 만드는 나만의 웹사이트 구성 요소: 실전 예시 with GPT
웹사이트를 만드는 가장 쉬운 방법은? 웹빌더 서비스를 사용하는 것이죠. 복잡한 코딩 없이 홈페이지를 만들 수 있으니까요.
그런데 웹빌더를 쓰다 보면, 문득 이런 생각이 들기도 합니다.
“템플릿이 예쁘긴 한데… 내가 원하는 느낌은 아닌데?”
“이런 기능을 가진 특정 영역이 필요한데, 에디터에 없네.”
딱 내가 원하는 구성 요소나 디자인이 안 나올 때 아쉬움이 생기는데요. 이럴 때를 위한 식스샵 프로만의 특별한 기능이 있습니다.
바로, 원하는 구성 요소를 직접 만들어 쓸 수 있는 블록 메이커(Block Maker)예요.
🧱 블록 메이커란?
▶
블록메이커 소개 영상 보기
‘블록 메이커’는 HTML, CSS, JavaScript 코드를 활용해 내가 원하는 웹사이트 구성 요소(=블록)를 직접 만들 수 있는 기능이에요.
단순히 코드만 붙여넣는 게 아니라, 사용자가 내용을 수정하거나 스타일을 조절할 수 있도록 ‘에디터 패널’도 함께 구성할 수 있다는 것이 핵심입니다.
만든 블록은 원하는 위치에 자유롭게 배치할 수 있고, 다양한 페이지에서 재사용도 가능해요.
👉
블록메이커 사용 가이드
잠깐! 코딩을 못 하면 블록을 못 만드나요?
블록 메이커는 코드를 직접 입력해서 만드는 기능이기 때문에 HTML, CSS, JavaScript에 대한 기본 지식이 있으면 훨씬 수월해요.
하지만, 코딩을 할 줄 몰라도 걱정하지 마세요!
‘식스샵 블록 메이커 GPT’를 사용하면 코드 지식이 없어도 블록을 만들 수 있답니다.
🤖 블록 메이커 GPT란?
‘블록 메이커 GPT’는 원하는 블록의 기능과 스타일을 설명하면, GPT가 자동으로 그에 맞는 HTML/CSS/JS 코드를 생성해주고, 원하는 대로 계속 수정까지 할 수 있는 실시간
대응형 AI에요. 텍스트뿐만 아니라, 원하는 시안 이미지도 첨부해서 “이렇게 만들어줘!”라고 요청할 수 있어요.
예를 들어, “검은색 배경에 흰색 글씨, 24시간 형식의 카운트다운 타이머를 만들어줘.” 라고 입력하면, 그에 맞는 HTML/CSS/JS 코드는 물론, 사용자 설정 패널의 코드까지 한
번에 만들어줘요. 최대한 구체적으로 설명할수록 좋답니다.
👉
블록메이커 GPT 바로가기
👣 블록 메이커+GPT 실전 예시 따라하기
아래 순서대로 따라오면, 나만의 블록을 금방 만들 수 있어요!
▶
블록 메이커 GPT 활용 영상 보기
Step 1. 만들고 싶은 블록 구상하기
어떤 블록을 만들고 싶은지 먼저 정리해보세요. 블록의 목적과 사용 상황을 구체적으로 떠올리는 게 좋아요.
예시:
- 쇼핑몰 이용 정책을 보기 쉽게 정리한 FAQ 블록
- 고객 리뷰를 강조하는 후기 블록
- 이벤트 정보를 알리는 타이머 블록
- 눈에 띄는 내용을 강조하는 공지 블록
Step 2. 블록 GPT에 상세 프롬프트 입력하기
코드를 직접 짜기 어렵다면 GPT에게 설명해보세요. 프롬프트에 상세한 설명을 입력하면, 해당 내용에 맞는 코드를 자동으로 만들어줍니다.
프롬프트에는 기능, 디자인, 동작 방식을 최대한 구체적으로 적는 것이 포인트에요. 추가로 사용자가 편집할 수 있는 에디터 패널을 만들어주는 세팅 빌더에 들어가야 하는 내용까지 적어주면 더 좋습니다.
(작성 예시)
FAQ 블록을 만들어줘
• 기본적인 FAQ 기능을 포함해줘
• FAQ 항목들이 처음 열려있는 상태를 설정할 수 있어: 첫 항목만 열어놓기, 모두 열어놓기, 모두 닫아놓기
• 항목의 제목을 사용자가 클릭했을 때 항목이 열리면서 항목별 답변이 나오도록 설정해줘
Step 3. 블록메이커에 코드 붙여넣기
GPT가 생성한 코드를 복사해 블록메이커의 HTML/CSS/JS 입력창에 붙여넣으면 끝!
뿐만 아니라, 사용자가 블록의 내용을 바꿀 수 있도록 하는 에디터 패널도 함께 구성할 수 있어요.
예를 들어 글 내용, 글자 색 등을 바꿀 수 있는 텍스트 박스, 색상 선택기 같은 설정을 추가하려면 GPT가 함께 제공해준 세팅 코드를 복사해 Settings > 점 세 개 메뉴 > 붙여넣기 버튼을 활용하면 됩니다.
Step 4. 만든 블록을 웹사이트에 적용하기
코드를 저장하면, 이제 내가 만든 블록을 에디터에서 사용할 수 있어요.
식스샵 프로 디자인 에디터에서 ‘섹션 추가 > 확장 > 블록 메이커 > 블록 추가하기’으로 내가 만든 블록을 불러오면 끝! 필요한 모든 페이지에 반복 사용하거나 다른 디자인
요소와 조합해 활용할 수도 있어요.
이렇게 “구체적으로 정의하고 → 프롬프트 입력하고 → 코드 붙여넣고 → 적용하는” 4단계만 기억하면
복잡한 기능도, 내가 상상한 디자인도 손쉽게 구현할 수 있어요.
블록메이커로 만들 수 있는 다양한 구성요소
“어떤 걸 만들 수 있지?” 아래 예시를 참고해보세요.
모두 실제로 블록 메이커로 구현할 수 있는 요소들이에요.
GPT와 함께 만드는 경우, 프롬프트는 상세하게 작성할수록 좋지만 만약 원하는 블록의 ‘시안 이미지’를 첨부한다면 더욱 효과적으로 만들 수 있어요!
⏱ 타이머 블록: 이벤트나 세일 종료 시간을 안내할 때 유용해요.
(GPT 프롬프트 작성 예시)
검정 배경에 흰색 텍스트로 된 타이머 블록을 만들어줘.
타이머는 ‘남은 시간: 시:분:초’ 형식이고 실시간으로 줄어들어야 해.
시간이 다 되면 ‘이벤트가 종료되었습니다’라고 보여줘.
사용자가 블록 설정에서 종료 시간, 배경색, 텍스트 색상, 폰트 크기, 종료 후 문구를 변경할 수 있게 해줘.
⭐ 리뷰/후기 블록: 고객 피드백을 눈에 띄게 보여줄 수 있어요.
(GPT 프롬프트 작성 예시)
고객 리뷰를 카드 형태로 보여주는 블록을 만들어줘. 각 카드에는 사용자 이름, 별점(5점 만점), 리뷰 이미지, 리뷰 텍스트가 포함돼. 우성 첫 화면은 세팅 빌더에
기본 예시로 세팅된 리뷰로 노출되게 해줘.
카드는 가로 스크롤 형태로 배열하고, 반응형 디자인이 적용되도록 해줘. 또한 사용자가 아래 항목을 블록 에디터에서 직접 설정할 수 있게 구성해줘:
• 카드 개수 (1~10개 범위 슬라이더), 카드 배경색, 별점 색상, 글자 크기, 카드 간 간격, 사용자 이름, 별점, 리뷰 텍스트, 리뷰 이미지
📣 공지/이벤트 배너: 움직이는 텍스트로 공지사항을 더 눈에 띄게 강조할 수 있어요.
(GPT 프롬프트 작성 예시)
공지/이벤트 배너 블록을 만들어줘. 한 줄의 공지 문구가 좌우로 천천히 움직이는 스타일(마퀴 텍스트)이야.
텍스트를 자동 반복해서 무한히 움직이게 해줘. 사용자가 블록 설정에서 공지 문구, 배경색, 텍스트 색상, 텍스트 크기, 움직이는 속도를 설정할 수 있어야 해.
텍스트는 가운데 정렬되어야 해. 기본 스타일은 진한 파란 배경에 흰색 텍스트, 폰트 크기 16px로 해줘.
이 외에도 진짜 별의별 블록을 다 만들 수 있어요. 상상력만 있다면, 가능성은 무한대죠.
블록메이커는 웹빌더의 한계를 넘어서는 강력한 커스터마이징 도구예요.
에디터에 없는 기능이나 디자인도 내가 직접 정의하고 구현할 수 있기 때문에 웹사이트 구성의 자유도가 훨씬 넓어져요.
이제 식스샵 프로의 블록 메이커를 통해 진짜 ‘내가 원하는 웹사이트’를 만들어보세요.
누구나 쉽고, 빠르고, 아름답게 시작하는 온라인 쇼핑몰
식스샵과 함께 나만의 브랜드 상점을 만드세요.
지금 가입하고 14일 동안 모든 기능을 무료로 사용하세요.
식스샵팀
땅, 불, 바람, 물, 마음, 쇼핑몰 - 여섯 가지 힘을 하나로 모읍니다