LogoLogo
  • 샵바이 스킨 알아보기
    • 샵바이 스킨 설명서
    • 오로라 리액트(통합형) 스킨 개발 가이드
    • 오로라 리액트(통합형) 릴리즈 노트
    • 오로라 바닐라(개별형) 릴리즈 노트
    • 1:1 문의하기
  • 오로라 개별형 스킨 개발 가이드
    • 개발 프로세스
      • 등록
      • 개발
        • 개발 환경 구성하기
        • 스킨 디렉토리 구조
      • 설치
    • 기본 API 이해하기
      • 샵바이 API 호출 가이드
        • OAuth 2.0 적용 가이드
      • 외부 스크립트 호출 가이드
    • 화면별 API 활용 가이드
      • 공통 영역
        • 공통 상단
        • 공통 하단
        • 디자인 팝업
        • 슬라이드 메뉴 (모바일 전용)
        • 최근 본 상품
      • 메인 화면
        • 배너 영역
        • 상품진열 영역
        • 인스타그램 연동
      • 회원가입
      • 로그인
      • 간편 로그인
      • 휴대폰 본인인증
      • 상품 리스트
      • 상품 상세
        • 상품 기본 정보
        • 상품 상세 배너 (모바일 전용)
        • 상품 상세정보 (탭)
        • 배송/반품/교환 안내 (탭)
        • 상품후기 (탭)
        • 상품문의 (탭)
        • 관련상품
      • 장바구니
      • 주문서
      • 마이페이지 > 쇼핑정보
        • 주문목록/배송조회
        • 취소/반품/교환 내역
        • 주문 상세
        • 좋아요
      • 마이페이지 > 혜택관리
        • 쿠폰
        • 적립금
      • 마이페이지 > 회원정보
        • 회원정보 수정
        • 회원탈퇴
        • 배송지 관리
      • 마이페이지 > 나의 게시글
        • 1:1 문의
        • 상품문의
        • 상품후기
      • 상품후기 게시판
      • 일반 게시판
      • 기획전
    • KCP 휴대폰 본인인증 연동 (iOS/AOS)
  • 앱 개발 가이드
    • [샵바이] 웹훅(webhook) 가이드
    • [고도몰] 웹훅(webhook) 가이드
  • 추천 콘텐츠
    • 추천 콘텐츠
      • [간편 로그인] SNS 연동 기능 개발 가이드
      • [공통] 마이페이 API 화면가이드
      • [엔터프라이즈] 선물하기 기능 (배송지 나중입력)
      • [엔터프라이즈] 카카오 싱크 신청 가이드
      • [엔터프라이즈] 카카오 싱크 회원가입 API 화면가이드
      • [엔터프라이즈] 이니렌탈(렌탈결제) API 화면가이드
      • [엔터프라이즈] 외부 회원 연동 가이드
      • [엔터프라이즈] 외부 적립금 전환 가이드
      • [엔터프라이즈] 외부 적립금 연동가이드
      • [엔터프라이즈] 사은품 API 화면가이드
      • [엔터프라이즈] PG신청 가이드 (2024/4/1 업데이트)
      • [엔터프라이즈] 카카오 픽셀 설치 가이드
      • [엔터프라이즈]정기결제(배송) API 화면가이드
      • [프로/엔터프라이즈] 쇼핑몰에 인스타그램 위젯을 적용해보세요!
      • [베이직/프로] 카카오싱크 신청 가이드
      • [웹훅 추가] 주문정보 웹훅(Webhook)이란?
      • [웹훅 추가] 회원정보 변경 및 회원탈퇴
      • [웹훅 추가] 앱 설치 및 삭제
      • shop by API, POSTMAN에 추가하기
      • [글로벌] 글로벌 기능 가이드
        • 사용 프로세스
          • 엑심베이 PG 계약
          • 개발 환경 세팅
          • shop by 어드민 세팅
          • 쇼핑몰 스킨 개발
            • 언어/통화 설정
            • 상품/전시 설정
            • 주문서 조회
            • 주문 예약하기
            • 회원 등록
        • 글로벌 주문/환불 프로세스
    • FAQ
      • 에러코드_ (1) 주문
      • 에러코드_ (2) 프로모션
      • 에러코드_ (3) 클레임
      • 쿠폰 코드 API 에러메시지 안내
      • 장바구니/주문결제 에러코드 안내
      • 배송타입 및 택배사코드 안내
      • 파트너어드민 매출내역 조회기준
      • shop api error response 안내
      • server API로 주문의 외부 유입경로 집계 방법
      • 은행코드 안내
      • 7/15 스킨 에디터 업데이트 주의사항
        • 모바일_업데이트 전 템플릿 코드
        • PC_업데이트 전 템플릿 코드
        • 업데이트 후/전 템플릿 코드 비교
      • [샵바이 엔터프라이즈] server API 호출방법
      • [샵바이 엔터프라이즈] 파트너 어드민에서 상품 노출은 미리 해두고, 판매 기간은 미래시점으로 설정할 수 있는 기능이 있을까요?
      • [샵바이 엔터프라이즈] 파트너사 담당MD 일괄변경 어떻게하나요?
Powered by GitBook
On this page
  • 배너 정보(assets) 파일 등록하기
  • 배너 정보 (assets) 파일이란?
  • 스킨 유형(platformType)별 zip파일 구조
  • ◼︎ asset 디렉토리 구조
  • ◼︎ bannerGroup.csv
  • ◼︎ banner.csv
  • 로컬 개발 환경 구성하기

Was this helpful?

  1. 오로라 개별형 스킨 개발 가이드
  2. 개발 프로세스
  3. 개발

개발 환경 구성하기

Previous개발Next스킨 디렉토리 구조

Last updated 11 months ago

Was this helpful?


배너 정보(assets) 파일 등록하기

스킨에서 사용하는 배너그룹을 정의하는 메타정보와 배너에 사용되는 샘플 이미지가 포함된 정보입니다. 스킨을 사용하는 쇼핑몰이 생성될 때 해당 정보로 배너그룹이 생성됩니다.

◼︎ 등록 방법

  • 에서 배너 정보 등록이 필요한 스킨의 기본 정보 클릭

  • 디자인 정보 수정에서 배너정보 등록

◼︎ zip 파일 구성 시 주의사항

  • 20MB 이내의 zip 파일 형태

  • csv 파일 저장 시 utf-8 로 저장

배너 정보 등록 시 쇼핑몰 어드민 아래 경로에서 배너 이미지를 등록하거나 수정할 수 있습니다.

shop by pro: 디자인> 디자인설정> 스킨 배너관리
shop by premium: 전시관리> 스킨 배너관리

배너 정보 (assets) 파일이란?

  • 개념

    • 스킨에서 사용하는 배너그룹을 정의하는 메타정보, 배너에 사용되는 샘플 이미지가 포함된 정보입니다.

  • 필요한 이유

    • 아래서 설명드리는 배너정보(asset파일)은 20MB 이내의 zip파일 형태로 업로드가 필요합니다.

    • 이를 통해 해당 메타정보가 쇼핑몰 어드민(관리자)에 바로 노출되며, 이후 배너를 조회하는 API를 호출할 수 있는 개념입니다.

    • 따라서 스킨이 사용할 배너와 배너그룹에 대한 정확한 정보를 반드시 bannerGroup.csv, banner.csv에 입력해야 합니다.

단, csv파일 작성 후 저장 시 한글이 깨질 수 있으니 반드시 UTF-8로 저장해야하는 점을 확인부탁드립니다.

(참고) cs파일 UTF-8저장 방법 엑셀 파일 > 다른 이름으로 저장 > 팝업창 우측 하단 '도구(L)'메뉴 버튼 > '웹 옵션(W)' 선택 > 웹 옵션 창에서 '인코딩' 탭 진입하여 '문서를 다음 형식으로 저장(S)' 내 유니코드(UTF-8) 선택


스킨 유형(platformType)별 zip파일 구조

앞선 문서에서 안내해 드린 대로 스킨은 적용되는 환경에 따라 아래와 같은 유형이 있습니다. 각 유형별로 아래와 같은 zip 파일 구조를 갖춰야 합니다.

오로라 기본 스킨은 개별형(PC+모바일) 스킨이며, 본 스킨 개발 가이드는 개별형을 기준으로 안내합니다.

  • 개별형(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

로컬 개발 환경 구성하기

기본 스킨을 코드 베이스로 개발하는 경우 참고하세요.

를 참고하시길 바랍니다.

aurora :

aurora react :

배너 영역 가이드
https://skins.shopby.co.kr/shopby/aurora-vanilla/-/blob/main/README.md
https://skins.shopby.co.kr/shopby/aurora-skin/-/blob/main/README.md
셀러어드민 > 상품 > 디자인
배너 정보 (asset) 파일 등록하기
배너 정보 (asset) 파일이란?
스킨 유형 (platformType)별 zip 파일 구조
로컬 개발 환경 구성하기