카페24 기획전 페이지 만드는 법 (코딩 없이 5단계)

기획전 제작 · 약 6분 분량

기획전 페이지는 단순한 이미지 한 장이 아니라, 방문자가 위에서 아래로 스크롤하며 자연스럽게 구매로 이어지도록 설계된 흐름입니다. 이 글에서는 카페24 퍼블리셔 에디터로 기획전을 처음부터 완성하는 다섯 단계를 정리합니다.

1단계 — 기획전 구조부터 잡기

좋은 기획전은 디자인보다 순서가 먼저입니다. 일반적으로 다음 흐름이 전환율이 높습니다.

1. 히어로 배너 — 행사명·핵심 혜택·기간을 한눈에
2. 혜택 요약 — 쿠폰, 적립, 무료배송 등 이유를 3~4개로
3. 대표 상품 — 가장 잘 팔리는 상품을 상단에 배치
4. 카테고리·상품 그리드 — 더 많은 상품을 탐색하도록
5. 마무리 CTA — "지금 구매하기" 같은 행동 유도

2단계 — 블록 배치하기

에디터 왼쪽 블록 패널에서 필요한 블록을 캔버스로 끌어다 놓습니다. 히어로 배너, 캐러셀, 상품 카드, 아코디언, 핫스팟 등 15종 블록을 조합하면 대부분의 기획전 구조를 만들 수 있습니다. 순서는 드래그로 언제든 바꿀 수 있으니 1단계에서 잡은 흐름대로 위에서 아래로 쌓아 보세요.

3단계 — 이미지와 텍스트 채우기

각 블록을 선택하면 오른쪽 속성 패널에서 이미지 URL, 문구, 링크, 색상을 바꿀 수 있습니다.

4단계 — 미리보기로 확인하기

상단 미리보기 버튼으로 실제 화면을 확인합니다. 데스크탑과 모바일을 모두 전환해 보며 글자가 잘리거나 버튼이 너무 작지 않은지 점검하세요. 쇼핑몰 트래픽의 대부분이 모바일에서 발생하므로 모바일 화면을 기준으로 다듬는 것이 안전합니다.

5단계 — HTML 추출하기

완성되면 코드 보기 버튼을 눌러 HTML을 복사합니다. 카페24에는 두 가지 형태로 넣을 수 있습니다.

• DIV 코드 — 기존 페이지 안에 일부 영역으로 삽입할 때
• Full Page HTML — 기획전 전체를 한 페이지로 구성할 때

복사한 코드를 카페24에 적용하는 구체적인 방법은 ③ 완성된 HTML 카페24에 적용하기 글에서 이어집니다.

← 가이드 목록으로 돌아가기