개발 환경 구성하기
Last updated
Last updated
스킨에서 사용하는 배너그룹을 정의하는 메타정보와 배너에 사용되는 샘플 이미지가 포함된 정보입니다. 스킨을 사용하는 쇼핑몰이 생성될 때 해당 정보로 배너그룹이 생성됩니다.
셀러어드민 > 상품 > 디자인에서 배너 정보 등록이 필요한 스킨의 기본 정보 클릭
디자인 정보 수정에서 배너정보 등록
20MB 이내의 zip 파일 형태
csv 파일 저장 시 utf-8 로 저장
배너 정보 등록 시 쇼핑몰 어드민 아래 경로에서 배너 이미지를 등록하거나 수정할 수 있습니다.
개념
스킨에서 사용하는 배너그룹을 정의하는 메타정보, 배너에 사용되는 샘플 이미지가 포함된 정보입니다.
필요한 이유
아래서 설명드리는 배너정보(asset파일)은 20MB 이내의 zip파일 형태로 업로드가 필요합니다.
이를 통해 해당 메타정보가 쇼핑몰 어드민(관리자)에 바로 노출되며, 이후 배너를 조회하는 API를 호출할 수 있는 개념입니다.
따라서 스킨이 사용할 배너와 배너그룹에 대한 정확한 정보를 반드시 bannerGroup.csv, banner.csv에 입력해야 합니다.
단, csv파일 작성 후 저장 시 한글이 깨질 수 있으니 반드시 UTF-8로 저장해야하는 점을 확인부탁드립니다.
(참고) cs파일 UTF-8저장 방법 엑셀 파일 > 다른 이름으로 저장 > 팝업창 우측 하단 '도구(L)'메뉴 버튼 > '웹 옵션(W)' 선택 > 웹 옵션 창에서 '인코딩' 탭 진입하여 '문서를 다음 형식으로 저장(S)' 내 유니코드(UTF-8) 선택
앞선 문서에서 안내해 드린 대로 스킨은 적용되는 환경에 따라 아래와 같은 유형이 있습니다. 각 유형별로 아래와 같은 zip 파일 구조를 갖춰야 합니다.
오로라 기본 스킨은 개별형(PC+모바일) 스킨이며, 본 스킨 개발 가이드는 개별형을 기준으로 안내합니다.
개별형(PC + MOBILE) : 하나의 GitLab 프로젝트 내 PC스킨과 Mobile스킨의 소스코드가 모두 개발된 경우
개별형(PC) : PC스킨만 개발된 경우
개별형(MOBILE) : Mobile스킨만 개발된 경우
통합형(COMBINE) : PC스킨과 Mobile스킨의 소스코드가 하나의 형태로 개발된 스킨
스킨 유형별로 아래와 같이 assets을 구성하세요.
스킨에서 사용할 각 배너그룹을 정의하는 메타정보 파일입니다.
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>: 자유롭게 입력가능
예제코드 (오로라 리액트 통합형 기준)
스킨에서 사용하는 최초의 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 으로 입력
기본 스킨을 코드 베이스로 개발하는 경우 참고하세요.
