개발 환경 구성하기
배너 정보(assets) 파일 등록하기
스킨에서 사용하는 배너그룹을 정의하는 메타정보와 배너에 사용되는 샘플 이미지가 포함된 정보입니다. 스킨을 사용하는 쇼핑몰이 생성될 때 해당 정보로 배너그룹이 생성됩니다.
◼︎ 등록 방법
셀러어드민 > 상품 > 디자인에서 배너 정보 등록이 필요한 스킨의
기본 정보클릭디자인 정보 수정에서 배너정보 등록
◼︎ zip 파일 구성 시 주의사항
20MB 이내의 zip 파일 형태
csv 파일 저장 시 utf-8 로 저장
배너 정보 등록 시 쇼핑몰 어드민 아래 경로에서 배너 이미지를 등록하거나 수정할 수 있습니다.
shop by pro: 디자인> 디자인설정> 스킨 배너관리
shop by premium: 전시관리> 스킨 배너관리배너 정보 (assets) 파일이란?
개념
스킨에서 사용하는 배너그룹을 정의하는 메타정보, 배너에 사용되는 샘플 이미지가 포함된 정보입니다.
필요한 이유
아래서 설명드리는 배너정보(asset파일)은 20MB 이내의 zip파일 형태로 업로드가 필요합니다.
이를 통해 해당 메타정보가 쇼핑몰 어드민(관리자)에 바로 노출되며, 이후 배너를 조회하는 API를 호출할 수 있는 개념입니다.
따라서 스킨이 사용할 배너와 배너그룹에 대한 정확한 정보를 반드시 bannerGroup.csv, banner.csv에 입력해야 합니다.
스킨 유형(platformType)별 zip파일 구조
앞선 문서에서 안내해 드린 대로 스킨은 적용되는 환경에 따라 아래와 같은 유형이 있습니다. 각 유형별로 아래와 같은 zip 파일 구조를 갖춰야 합니다.
개별형(PC + MOBILE) : 하나의 GitLab 프로젝트 내 PC스킨과 Mobile스킨의 소스코드가 모두 개발된 경우
개별형(PC) : PC스킨만 개발된 경우
개별형(MOBILE) : Mobile스킨만 개발된 경우
통합형(COMBINE) : PC스킨과 Mobile스킨의 소스코드가 하나의 형태로 개발된 스킨
◼︎ asset 디렉토리 구조
스킨 유형별로 아래와 같이 assets을 구성하세요.
/assets
ㄴ /img
ㄴ /banner
ㄴ 이미지파일1
ㄴ 이미지파일2
ㄴ banner.csv
ㄴ bannerGroup.csv◼︎ bannerGroup.csv
스킨에서 사용할 각 배너그룹을 정의하는 메타정보 파일입니다.
bannerGruop.csv 의 platformType은 아래와 같이 작성해 주셔야 합니다.
개별형(pc+mobile): pc/banner.csv, mobile/banner.csv
개별형(pc) : PC
개별형(mobile) : MOBILE_WEB
통합형 스킨: RESPONSIVE
배너 영역 가이드를 참고하시길 바랍니다.
(참고) <span style="color:#121212;">bannerGroupCode</span>: 쇼핑몰 스킨 내 배너의 위치와 bannerGroupCode 는 무관 (ex) BANNER03 을 BANNER04 보다 쇼핑몰 상단에 배치 가능
(참고) <span style="color:#121212;">bannerGroupName</span>: 자유롭게 입력가능
예제코드 (오로라 리액트 통합형 기준)
✓ 예제코드
,platformType,bannerGroupType,bannerGroupCode,bannerGroupName
,RESPONSIVE,LOGO,LOGO,로고 전용 - 상단로고
,RESPONSIVE,SLIDE,BNSLIDE,움직이는 배너 - 메인 상단 배너
,RESPONSIVE,NORMAL,BANNER01,일반 배너 - 메인 중간 배너 1
,RESPONSIVE,NORMAL,BANNER02,일반 배너 - 메인 중간 배너 2
,RESPONSIVE,NORMAL,BANNER03,일반 배너 - 메인 중간 배너 3
,RESPONSIVE,NORMAL,BANNER04,일반 배너 - 메인 중간 배너 4
,RESPONSIVE,NORMAL,BANNER05,일반 배너 - 메인 중간 배너 5
,RESPONSIVE,NORMAL,BNBOTTOM,일반 배너 - 메인 하단 배너
,RESPONSIVE,NORMAL,BNBGLEFT,일반 배너 - PC 배경 좌측 배너
,RESPONSIVE,NORMAL,BNDETAIL,일반 배너 - 상품상세 배너◼︎ banner.csv
스킨에서 사용하는 최초의 initial sample data를 입력하는 파일입니다. initial sample data란, 개발된 스킨이 배포되었을 때 샘플로서 보여지는 배너(즉 배너 이미지) 정보를 의미합니다.
하나의 배너그룹 안에 여러 개의 배너가 추가될 수 있으므로, <span style="color:#121212;">banner.csv</span>는 입력행 수 제한이 없습니다.
bannerGroupCode
해당 배너가 포함될 배너그룹 코드
bannerGroup.csv파일 내 bannerGroupCode 정의 선행 필수
bannerTitle: 배너명
bannerImage
배너에서 사용할 배너 이미지 파일명 (경로 포함)
스킨 내 이미지가 존재해야함
bannerGroupType 이 SLIDE 인 경우, 행 추가를 통해 여러 개의 이미지 등록가능
displayOrder
동일한 배너그룹에 속한 배너들 간 노출 순서
ex. 배너그룹 내 배너가 1개만 존재할 경우 default값은 ,1 으로 입력
✓ 예제코드
,bannerGroupCode,bannerTitle,bannerImage,displayOrder
,LOGO,로고 전용 - 상단로고,/assets/img/banner/header-logo.png,1
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner01.png,1
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner02.png,2
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner03.png,3
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner04.png,4
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner05.png,5
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner06.png,6
,BANNER01,일반 배너 - 메인 중간 배너 1,/assets/img/banner/main_banner01.png,1
,BANNER02,일반 배너 - 메인 중간 배너 2,/assets/img/banner/main_banner02.png,1
,BANNER03,일반 배너 - 메인 중간 배너 3,/assets/img/banner/main_banner03.png,1
,BANNER04,일반 배너 - 메인 중간 배너 4,/assets/img/banner/main_banner04.png,1
,BANNER05,일반 배너 - 메인 중간 배너 5,/assets/img/banner/main_banner05.png,1
,BNBOTTOM,일반 배너 - 메인 하단 배너,/assets/img/banner/main_bottom_banner.png,1
,BNBGLEFT,일반 배너 - PC 배경 좌측 배너,/assets/img/banner/pc_left_banner.png,1
,BNDETAIL,일반 배너 - 상품상세 배너,/assets/img/banner/productdetail_banner.png,1로컬 개발 환경 구성하기
기본 스킨을 코드 베이스로 개발하는 경우 참고하세요.
Last updated
Was this helpful?