배너 위에 투명한 링크 영역을 덮는 방식입니다. 따라서 영상 재생 컨트롤은 사용하지 않고, 배너 전체 영역을 클릭 이동 용도로 사용해요.
디자인플로어 배너매니저에 찰나 동영상 배너 추가하는 법
카페24 쇼핑몰을 운영 중이라면 이미 익숙한 디자인플로어의 배너매니저 앱을 사용해 찰나 플레이어를 추가하는 방법을 소개해드립니다.
Aug 07, 2026
Contents
1. 찰나 코드 준비STEP 1. 찰나에서 배너에 사용할 디스플레이어를 엽니다.STEP 2. 찰나 디스플레이어의 아이프레임 코드를 복사합니다.2. 디자인플로어 배너매니저 열기STEP 3. 카페24 관리자에서 배너매니저 앱을 엽니다.STEP 4. 찰나 배너를 추가할 배너 그룹을 선택합니다.3. 아이프레임 배너 추가STEP 5. 배너 추가 영역에서 [아이프레임 추가]를 클릭합니다.STEP 6. 아이프레임 소스와 HTML 코드를 입력합니다.4. 링크 코드 입력 및 저장STEP 7. HTML 코드 입력란에 아래 a 태그를 붙여 넣습니다.STEP 8. 입력이 끝나면 [저장]을 클릭합니다.STEP 9. 적용 여부를 확인하세요.이번 가이드에서는 카페24 쇼핑몰을 운영 중이라면 이미 익숙한 디자인플로어의 배너매니저 앱을 사용해 찰나 플레이어를 추가하는 방법을 소개해 드리려고 합니다. 찰나 플레이어를 아이프레임 배너로 등록하고 배너 클릭 시 지정한 상품이나 페이지로 이동하도록 설정하는 방법까지 알려드릴게요.
배너매니저는 이미지 파일뿐 아니라 유튜브·비메오 같은 아이프레임 소스도 함께 관리할 수 있도록 지원하는 무료 앱입니다. 아직 설치 전이라면 카페24 스토어에서 배너매니저 앱을 먼저 설치해주세요.
💡
설정 순서는 다음과 같습니다. 하나씩 설명드릴테니 그대로 따라와 주세요!
찰나 코드 준비 → 배너 그룹 선택→ 아이프레임 추가 → 링크 코드 입력 및 저장
1. 찰나 코드 준비
STEP 1. 찰나에서 배너에 사용할 디스플레이어를 엽니다.
가장 먼저 찰나에서 배너에 사용할 디스플레이어를 열어주세요. 여기서 플레이어 설정을 아래처럼 맞춰야 합니다.
활성화: 자동재생, 반복재생
비활성화: 전체, 컨트롤바, 동영상 채우기
🚨
설정을 변경 시 화면 우측 하단의 [저장 및 업데이트]를 꼭 클릭하셔야 변경사항이 반영됩니다. 특히 [동영상 채우기] 옵션은 반드시 Off 하셔야 아이프레임 소스로 정상적으로 활용할 수 있어요.
STEP 2. 찰나 디스플레이어의 아이프레임 코드를 복사합니다.
설정을 마쳤다면 화면 우측 상단의 링크/코드 복사 기능을 열고, <iframe>으로 시작해서 </iframe>으로 끝나는 코드 전체를 복사합니다.
💡
뒤에 나올 배너매니저의 [아이프레임 소스] 입력 란에는 URL만 넣는 게 아니라, 방금 복사한 iframe 태그 전체를 그대로 붙여 넣어야 합니다.
2. 디자인플로어 배너매니저 열기
STEP 3. 카페24 관리자에서 배너매니저 앱을 엽니다.
Cafe24 관리자 화면의 [앱] > [마이 앱]에서 디자인플로어 배너매니저를 찾은 후 [관리하기]를 클릭해 주세요.
STEP 4. 찰나 배너를 추가할 배너 그룹을 선택합니다.
배너매니저의 [배너 관리 화면]에 들어가면 실제 쇼핑몰에 노출 중인 배너 그룹들이 보일 거예요. 이 중 찰나 배너를 추가하고 싶은 그룹을 선택하고 [수정]을 눌러줍니다. 예시에서는 ‘메인 슬라이드 배너’ 그룹을 사용했어요.
🚨
쇼핑몰 디자인에 따라 배너 그룹 이름은 다를 수 있습니다. 현재 메인 화면에서 사용 중인 그룹이 맞는지 한번 더 확인 후 선택하세요.
3. 아이프레임 배너 추가
STEP 5. 배너 추가 영역에서 [아이프레임 추가]를 클릭합니다.
STEP 6. 아이프레임 소스와 HTML 코드를 입력합니다.
생성된 배너 항목에서 배너 이름을 입력하고, 다음 두 개의 입력란에 각각 코드를 붙여넣어야 해요.
아이프레임 소스: 찰나에서 복사한 iframe 코드 전체
HTML 코드: 배너 클릭 시 이동할 투명 링크(a 태그) 코드
두 입력란이 각각 어떤 역할을 하는지 헷갈리기 쉬운데, 간단히 정리하면 아이프레임 소스는 '무엇을 보여줄지'를, HTML 코드는 '클릭하면 어디로 갈지'를 담당한다고 생각하시면 됩니다.
4. 링크 코드 입력 및 저장
STEP 7. HTML 코드 입력란에 아래 a 태그를 붙여 넣습니다.
<a href="상품링크" target="_self" style="position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:block"></a>여기서 상품링크 부분만 실제로 이동시키고 싶은 상품 상세 페이지나 이벤트 페이지 주소로 교체합니다. 예를 들면 이런 식이에요.
<a href="https://ejune06.cafe24.com/product/test-5%EC%83%81%ED%92%88/13/category/1/display/2/?icid=MAIN.product_listmain_1" target="_self" style="position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:block"></a>이 HTML 코드가 하는 일은 아이프레임 위에 투명한 클릭 영역을 만드는 것이에요. 그래서 사용자가 배너 어디를 눌러도 영상이 아니라 설정해 둔 페이지로 이동하게 됩니다.
💡
target="_self"는 현재 쇼핑몰 창에서 링크를 여는 설정입니다. 새 창으로 열어야 하는 운영 정책이 있는 경우 target 값을 별도로 조정해야 해요.
STEP 8. 입력이 끝나면 [저장]을 클릭합니다.
아이프레임 소스와 HTML 코드가 모두 입력되었는지 확인한 후 화면 우측의 [저장] 버튼을 클릭합니다.
STEP 9. 적용 여부를 확인하세요.
저장 후에는 실제 쇼핑몰 배너 화면에서 아래 항목들을 하나씩 점검해보세요. 변경 내용이 바로 보이지 않으면 쇼핑몰 캐시 또는 브라우저 캐시의 영향일 수 있어요. 새로고침 후 PC와 모바일 화면 각각 확인하시기 바랍니다.
확인 항목 | 정상 설정 기준 |
|---|---|
찰나 플레이어 설정 | 자동재생 · 반복재생 활성화 / 전체 · 컨트롤바 · 동영상 채우기 비활성화 |
아이프레임 소스 | 찰나에서 복사한 전체 <iframe> 코드를 입력 |
HTML 코드 | 클릭 이동용 <a> 태그를 입력하고 상품 링크를 실제 주소로 교체 |
저장 | 배너 항목을 저장한 뒤 쇼핑몰 PC·모바일 화면에서 클릭 이동 확인 |
📌
Share article