스킨 디렉토리 구조
이해하기
스킨 소스 내 루트에는 플랫폼 별 디렉토리(PC, Mobile)가 각각 별도로 존재합니다.
배포 시 GitLab Runner에서는 스킨 소스 내 루트에 위치한 PC /Mobile 디렉토리를 참조하여, 해당 디렉토리 내 파일들을 각 플랫폼에 맞는 위치에 업로드해야 합니다.
shop by pro 스킨은 PC 버전과 Mobile버전이 각각 별도로 업로드해야하며 각 디렉토리에는 최소한 4가지 파일 (index.html / environment.json / banner.csv / bannerGroup.csv)이 반드시 존재해야 합니다.
그 외에는 자유롭게 디렉토리 구조를 설계하실 수 있습니다.
단, 실제 배포 단계에서는 pc/mobile 디렉토리 내 파일을 업로드하기 때문에 각 디렉토리에 소스가 존재해야 하며, 파일명은 반드시 소문자(pc, mobile)로 지정되어 있어야 합니다.
- index.html
- environment.json
- banner.csv
- bannerGroup.csv
environment.json
enviroment.json 은 스킨 배포 시, NHN커머스에서 각 쇼핑몰별로 스킨 소스 내 루트에 생성해 드립니다.
따라서 스킨 소스 내 environment.json이 반드시 포함될 필요는 없으나, 일반적으로 로컬 환경에서의 개발 및 테스트를 위해 스킨 소스에 포함하고 있습니다.
또한 environment.json 은 각 쇼핑몰 스킨 동작에 필수적인 정보인 아래 2가지 환경 변수를 포함하고 있습니다.
클라이언트 아이디로서, 쇼핑몰 사이트를 출력하기 위해 할당된 각 상점의 쇼핑몰 구분 값입니다.
샵바이 API 를 호출 시 environment.json 에 포함된 clientId 값을 읽어서 Request header 정보를 요청할 때 사용합니다.
샵바이프로의 경우 clientId 는 쇼핑몰 생성 시점에 NHN커머스에서 enviroment.json 내 생성하여 드리고 있으나,
만약 로컬 환경에서의 개발 및 테스트를 위해 clientId를 알아야 할 경우 NHN커머스로 별도 문의 부탁드립니다.
샵바이프리미엄의 경우 서비스어드민 > 서비스관리 > 쇼핑몰관리 > (쇼핑몰 선택) > 개발연동정보 > 클라이언트 아이디에서 확인 가능합니다.
쇼핑몰이 실행된 환경을 구분해주는 값입니다. real 환경만 제공하고 있습니다.
아래는 기본 스킨에서 enviroment.json 을 불러오는 코드입니다.
1
2 const result = await fetch('/environment.json');
3 const {(clientId, profile)} = await result.json();
4 
shop by pro에서는 스킨 최초 업로드 시, 스킨 내 bannerGroup.csv , banner.csv 파일 속 메타 정보를 샵바이 DB 서버에 등록합니다.
DB서버에 해당 메타 정보 등록 시 shop by pro 어드민(관리자)에 바로 노출되며, 이후 배너를 조회하는 API를 호출할 수 있습니다.
따라서 스킨이 사용할 배너와 배너그룹에 대한 정확한 정보를 반드시 bannerGroup.csv , banner.csv 에 입력하여 스킨 소스 루트 경로에 업로드해야 합니다.
- 스킨(Skin)
- 쇼핑몰 고객들이 보는 쇼핑몰 프론트 화면 디자인 (템플릿, 레이아웃)을 뜻합니다.
- 배너(Banner)
- 쇼핑몰에서 로고 혹은 프로모션 이벤트를 노출하기 위한 공간이자 이미지입니다.
- 배너그룹(Banner Group)
- 각각의 배너를 유형별로 분류한 개념입니다.
- 모든 배너는 배너그룹으로 그룹핑하여 사용해야 하며, 하나의 배너그룹 안에 여러 개의 배너가 추가될 수 있습니다.
| 배너그룹 코드 bannerGroupCode | 배너그룹명 bannerGroupName | 배너그룹 타입 bannerGroupType |
|---|---|---|
| LOGO0001 | (ex) 상단 로고 | LOGO (로고 배너) |
| BANNER01 ~ BANNER10 | (ex) 메인상단배너 메인중간 좌측배너 메인 중간배너 1~5 스크롤 우측배너 스크롤 좌측배너 메인 하단배너 | NORMAL (일반 배너) |
| NORMAL (일반 배너) |
PC/ 모바일 각각 다른 개수로 노출 가능하며, 11개를 초과하여 노출할 수 없습니다.
각 배너그룹은 고유의 배너그룹 코드를 통해 구분됩니다.
위 도표에 기재된 고정된 11가지 배너코드만 사용 가능합니다.
기본 스킨 Another에서는 11개의 배너그룹의 배너그룹명(bannerGroupName)을
상단로고, 메인 상단배너, 메인 중간배너 1~5, 메인 중간 좌측배너, 메인 하단배너, 스크롤 우측배너,스크롤 좌측배너로 사용하고 있습니다.
해당 배너그룹명은 스킨 제작 시 bannerGroups.csv에 자유롭게 입력할 수 있습니다.
배너그룹은 배너그룹 노출 유형에 따라 3가지 배너그룹 타입으로 분류됩니다.( LOGO , SLIDE , NORMAL 로 제공)
LOGO0001 배너그룹은 LOGO (로고배너)로 타입이 고정되어있으며, 나머지 배너그룹은 SLIDE (움직이는 배너) 혹은 NORMAL (일반배너)로 타입을 설정 가능합니다.
- 배너 노출 유형 (LOGO, SLIDE, NORMAL 총 3개의 유형 제공)
- LOGO : 메인 상단에 노출되는 로고 유형
- SLIDE : 슬라이드 효과가 추가된 배너 유형 (멀티 배너)
- NORMAL : 배너 이미지를 노출해주는 기본 배너 유형 (단일 배너)
스킨에서 사용할 각 배너그룹을 정의하는 메타정보 파일입니다.
- platformType
- PC, MOBILE_WEB, AOS, IOS
- bannerGroupType
- bannerGroupCode 가 LOGO0001인 경우, LOGO 입력
- 이외의 경우 SLIDE 혹은 NORMAL 입력
- bannerGroupCode
- 최대 11개의 지정된 배너코드만 입력가능 (ex) LOGO0001 ~ BANNER10
- 쇼핑몰 스킨 내 배너의 위치와 bannerGroupCode 는 무관 (ex) BANNER03 을 BANNER04 보다 쇼핑몰 상단에 배치 가능
- bannerGroupName
- 자유롭게 입력 가능
1
2 ,platformType,bannerGroupType,bannerGroupCode,bannerGroupName
3 ,PC,LOGO,LOGO0001,로고
4 ,PC,SLIDE,BANNER01,움직이는 배너
5 ,PC,NORMAL,BANNER02,일반 배너 1
6 ,PC,NORMAL,BANNER03,일반 배너 2
7 ,PC,NORMAL,BANNER04,일반 배너 3
8 ,PC,NORMAL,BANNER05,일반 배너 4
9 ,PC,NORMAL,BANNER06,일반 배너 5
10 ,PC,NORMAL,BANNER07,일반 배너 6
11 ,PC,NORMAL,BANNER08,일반 배너 7
12 ,PC,NORMAL,BANNER09,일반 배너 8
13 ,PC,NORMAL,BANNER10,일반 배너 9
14 스킨에서 사용하는 최초의 initial sample data를 입력하는 파일입니다.
initial sample data란, 개발된 스킨이 배포되었을 때 샘플로서 보여지는 배너(즉 배너 이미지) 정보를 의미합니다.
- bannerGroupCode
- 해당 배너가 포함될 배너그룹 코드
bannerGroup.csv파일 내 bannerGroupCode 정의 선행 필수
- bannerTitle
- 배너명
- bannerImage
- 배너에서 사용할 배너 이미지 파일명 (경로 포함)
- 스킨 내 이미지가 존재해야함
- bannerGroupType 이 SLIDE 인 경우, bannerGroupCode, bannerTitle은 동일하게 입력 후 bannerImage를 별개의 행으로 구분하여 입력필요 (단, displayOrder은 순차적으로 수정)
- displayOrder
- 동일한 배너그룹에 속한 배너들 간 노출 순서 ( 배너그룹 내 배너가 1개만 존재할 경우 default값은 ,1 으로 입력)
1
2 ,bannerGroupCode,bannerTitle,bannerImage,displayOrder
3 ,LOGO0001,로고,/assets/img/banner/top-logo.png,1
4 ,BANNER01,움직이는 배너,/assets/img/banner/bigbanner-01.jpg,1
5 ,BANNER01,움직이는 배너,/assets/img/banner/bigbanner-02.jpg,2
6 ,BANNER01,움직이는 배너,/assets/img/banner/bigbanner-03.jpg,3
7 ,BANNER02,일반 배너 1,/assets/img/banner/main-banner01.png,1
8 ,BANNER02,일반 배너 1-1,/assets/img/banner/main-banner01.png,2
9 ,BANNER02,일반 배너 1-2,/assets/img/banner/main-banner01.png,3
10 ,BANNER03,일반 배너 2,/assets/img/banner/main-banner02.png,1
11 ,BANNER04,일반 배너 3,/assets/img/banner/main-banner03.png,1
12 ,BANNER05,일반 배너 4,/assets/img/banner/main-banner04.png,1
13 ,BANNER06,일반 배너 5,/assets/img/banner/main-banner05.png,1
14 ,BANNER07,일반 배너 6,/assets/img/banner/main-banner06.png,1
15 ,BANNER08,일반 배너 7,/assets/img/banner/main_left_banner.png,1
16 ,BANNER09,일반 배너 8,/assets/img/banner/main_right_banner.png,1
17 ,BANNER10,일반 배너 9,/assets/img/banner/main-banner07.png,1
18