웹지원 배너 매니저 - 사용방법

 

 

 

CTRL + F로 찾는 내용을 검색해 보세요

 

[매뉴얼 목차] 클릭시

각 사용방법 항목으로 이동됩니다.

 

 

---

 

 

* 웹지원 배너 매니저란?

 

쇼핑몰의 배너 이미지, 텍스트, 링크, 색상 등의 정보를 쉽고 빠르게 등록하고 관리할 수 있는 앱입니다.

배너매니저에서 배너 내용을 변경하고 저장하면 연결된 쇼핑몰의 배너에 변경된 내용이 적용됩니다.

 

※ 사용 전 확인

웹지원 디자인은 웹지원 배너매니저와 함께 사용할 수 있습니다.

타사 디자인에서는 아래에서 안내하는 설치 코드를 쇼핑몰 디자인에 직접 적용해야 합니다.

 

 

 

---

 

 

* 배너매니저 앱 설치

 

- 웹지원 배너매니저 설치

카페24 관리자 접속 > 앱 > 앱스토어 바로가기

 

앱스토어에서 "웹지원 배너 매니저"를 검색합니다.

웹지원 배너매니저의 [설치하기]를 클릭하여 앱을 설치합니다.

설치된 앱을 실행하면 현재 접속한 쇼핑몰 정보로 자동 연결됩니다.

 

 

 

 

---

 

 

* 스킨 추가

 

배너매니저에서 배너를 관리하려면 먼저 관리할 Cafe24 디자인을 스킨으로 등록합니다.

 

- 스킨 추가 방법

① 배너매니저 상단의 [스킨 추가] 버튼을 클릭합니다.

② 스킨 추가 탭에서 배너를 관리할 Cafe24 디자인을 선택합니다.

③ [스킨 추가하기]를 클릭하여 배너매니저 목록에 등록합니다.

 

스킨 추가 → 디자인 선택 → 스킨 추가하기 순서로 진행합니다.

 

 

 

 

---

 

 

* 설치 코드 복사

 

타사 디자인 등 배너매니저 설치 코드가 적용되어 있지 않은 디자인은 설치 코드를 디자인에 직접 추가해야 합니다.

 

카페24 관리자 접속 > 앱 > 마이 앱 > 웹지원 배너 매니저 [관리하기]

웹지원 배너 매니저 경로 캡처본 보기

 

- 설치 코드 확인 방법

① 상단에서 적용할 스킨을 선택합니다.

② 스킨 선택 영역 오른쪽의 ⋮ 버튼을 클릭합니다.

③ [설치코드]를 클릭합니다.

④ 팝업에 표시되는 설치 코드를 클릭하면 클립보드에 복사됩니다.

 

이미지 넣는곳

 

설치 코드 예시

<script src="https://webjione.com/banner-manager/front-loader.js?v=2"
data-mall-id="현재 쇼핑몰 ID"
data-shop-no="1"></script>

 

※ 설치코드 팝업에 표시되는 현재 쇼핑몰용 코드를 그대로 복사하여 사용합니다.

 

 

 

---

 

 

* 설치 코드 디자인에 적용

 

복사한 설치 코드를 Cafe24 디자인의 공통 레이아웃 파일에 적용합니다.

 

- 디자인 편집 경로

카페24 관리자 접속 > 디자인(PC/모바일) > 디자인 보관함 > 디자인 편집

디자인 편집 경로 캡처본 보기

 

디자인 편집창에서 아래 경로로 이동합니다.

스마트디자인 편집창 > 전체화면보기 > 레이아웃(layout) > 기본 레이아웃(basic)

스마트디자인 편집창내의 경로 예시 캡처본 보기

 

공통 레이아웃 파일의 </body> 태그 바로 위에 복사한 설치 코드를 붙여넣습니다.

 

 

<!-- 웹지원 배너매니저 -->
<script src=".../front-loader.js" ...></script>
</body>

 

설치 코드 적용이 완료되면 저장합니다.

 

※ 디자인 파일을 수정하기 전에는 디자인 백업을 먼저 진행 바랍니다.

 

 

---

 

 

* 배너 그룹 추가

 

배너를 등록하기 전 먼저 배너를 관리할 그룹을 생성합니다.

메인 슬라이드, 팝업, 상품 배너 등 쇼핑몰의 각 배너 영역을 그룹별로 구분하여 관리할 수 있습니다.

 

카페24 관리자 접속 > 앱 > 마이 앱 > 웹지원 배너 매니저 [관리하기]

웹지원 배너 매니저 경로 캡처본 보기

 

- 배너 그룹 추가 방법

① 관리할 스킨을 선택합니다.

② 왼쪽의 [배너 그룹 추가]를 클릭합니다.

③ 그룹명, 설명, 배너 코드, 노출 방식, 사용 여부 등을 입력합니다.

④ 입력이 완료되면 저장합니다.

 

 

 

---

 

 

* 배너 이미지 추가

 

배너 그룹을 생성한 후 해당 그룹 안에 실제로 사용할 배너를 등록합니다.

 

카페24 관리자 접속 > 앱 > 마이 앱 > 웹지원 배너 매니저 [관리하기]

웹지원 배너 매니저 경로 캡처본 보기

 

- 배너 추가 방법

① 왼쪽에서 배너를 등록할 배너 그룹을 선택합니다.

② 상단의 [배너 추가]를 클릭합니다.

③ 필요한 배너 정보를 입력합니다.

 

등록 가능한 주요 정보

- PC 이미지

- 모바일 이미지

- 텍스트1 ~ 텍스트4

- 링크

- 색상

- HTML

- 노출기간

 

내용을 입력한 뒤 [등록하기]를 클릭합니다.

배너 등록이 완료되면 [배너 저장]을 클릭하여 최종 저장합니다.

 

배너 그룹내의 배너 사용 방법 예시 캡처본 보기

 

 

※ 배너 그룹마다 실제 사용하는 입력 항목이 다를 수 있습니다.

각 배너 그룹에 표시되는 설명을 확인한 후 필요한 항목을 입력합니다.

 

 

---

 

 

* 배너 적용

 

배너매니저에 등록한 배너가 쇼핑몰에 표시되려면 배너 그룹과 쇼핑몰의 배너 영역이 서로 연결되어 있어야 합니다.

 

- 배너 코드란?

배너 그룹 등록시 입력하는 "배너 코드"를 이용하여 쇼핑몰의 각 배너 영역과 배너매니저의 배너 그룹을 연결합니다.

 

사이트에 입력된 배너 코드와 배너 그룹에 등록한 배너 코드가 동일해야 서로 연결됩니다.

두 코드가 동일하면 해당 배너 그룹에 등록한 내용이 쇼핑몰의 해당 배너 영역에 정상적으로 표시됩니다.

 

예)

배너 그룹의 배너 코드 : MAIN_SLIDE

쇼핑몰에 작성된 배너 코드 : MAIN_SLIDE

 

위와 같이 두 배너 코드가 동일하면 서로 연결됩니다.

 

배너 그룹내의 배너 사용 방법 예시 캡처본 보기

 

 

- 쇼핑몰에 적용된 배너 코드 확인

카페24 관리자 접속 > 디자인(PC/모바일) > 디자인 보관함 > 디자인 편집

디자인 편집 경로 캡처본 보기

 

배너가 적용되어 있는 파일의 경로로 이동합니다.

스마트디자인 편집창내의 경로 예시 캡처본 보기

 

 

 

 

※ 배너 코드가 서로 다르면 해당 배너 그룹의 내용이 쇼핑몰에 표시되지 않습니다.

 

 

---

 

 

* 배너 백업 / 복구

 

배너매니저에 등록한 배너 데이터는 스킨별로 JSON 파일로 백업할 수 있습니다.

 

카페24 관리자 접속 > 앱 > 마이 앱 > 웹지원 배너 매니저 [관리하기]

웹지원 배너 매니저 경로 캡처본 보기

 

- 배너 백업

① 백업할 스킨을 선택합니다.

② 스킨명 오른쪽의 ⋮ 메뉴를 클릭합니다.

③ [배너 백업]을 클릭합니다.

④ 해당 스킨의 배너 데이터가 JSON 파일로 다운로드됩니다.

 

- 배너 복구

① 복구할 스킨을 선택합니다.

② 스킨명 오른쪽의 ⋮ 메뉴에서 [배너 복구]를 클릭합니다.

③ 이전에 백업한 JSON 파일을 선택합니다.

④ 백업된 배너 데이터가 현재 선택한 스킨에 복구됩니다.

 

 

※ 배너 복구는 현재 선택한 스킨에만 적용됩니다.

다른 스킨에 등록된 배너 데이터는 변경되지 않습니다.

 

 

---

 

 

* 배너매니저 사용 순서 정리

 

① 웹지원 배너매니저 설치

② 관리할 스킨 추가

③ 필요한 경우 설치 코드를 디자인에 적용

④ 배너 그룹 추가

⑤ 배너 이미지 및 정보 등록

⑥ 배너 저장

⑦ 쇼핑몰에서 적용 여부 확인

 

※ 배너가 표시되지 않는 경우 배너 그룹의 배너 코드와 쇼핑몰에 적용된 배너 코드가 동일한지 먼저 확인합니다.

 

 

• 웹지원 배너 매니저란?
•  
• 배너매니저 앱 설치
• 스킨 추가
• 설치 코드 복사
• 설치 코드 디자인에 적용
•  
• 배너 그룹 추가
• 배너 이미지 추가
• 배너 적용
•  
• 배너 백업 / 복구
• 배너매니저 사용 순서 정리

매뉴얼 목차

매뉴얼 닫기