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
  • 용어 소개
  • 배너 그룹(Banner Group)
  • 배너 그룹 분류

Was this helpful?

  1. 오로라 개별형 스킨 개발 가이드
  2. 화면별 API 활용 가이드
  3. 메인 화면

배너 영역

쇼핑몰 메인페이지 화면 내 '배너(Banner)' 영역에 대한 정책과 기능, 사용할 수 있는 API를 소개합니다.

Previous메인 화면Next상품진열 영역

Last updated 11 months ago

Was this helpful?


용어 소개

◼︎ 배너(Banner)

  • 쇼핑몰에서 로고 혹은 프로모션 이벤트를 노출하기 위한 공간이자 이미지입니다.

쇼핑몰 어드민 아래 경로에서 관리할 수 있습니다.

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

◼︎ 배너 그룹(Banner Group)

  • 각각의 배너를 유형별로 분류한 개념입니다.

  • 모든 배너는 배너그룹으로 그룹핑하여 사용해야 하며, 하나의 배너그룹 안에 여러 개의 배너가 추가될 수 있습니다.


배너 그룹(Banner Group)

배너 그룹은 각각의 배너를 유형별로 분류한 개념입니다. 아래 예시는 오로라 개별형(PC+모바일) 기본 스킨을 기준으로한 분류입니다.

아래 소개 드릴 배너 그룹의 각 위치를 자유롭게 변경하여 스킨을 제작할 수 있습니다.

단, 오로라 개별형 기본 스킨의 경우, 프론트 소스 직접 수정 및 위치 변경이 불가합니다.

만약 수정이 필요한 경우 [디자인 > 디자인 관리 > 디자인 스킨리스트]에서 기본 스킨을 '복사' 후, [에디터]] 기능을 이용하여 소스 수정이 가능합니다.

배너 그룹 분류

◼︎ bannerGroupCode (배너그룹코드)

각 배너그룹은 고유의 배너그룹코드(bannerGroupCode)를 통해 구분됩니다. 위 도표에 기재된 고정된 12가지 배너그룹코드만 사용 가능합니다.

◼︎ bannerGroupName (배너그룹명)

◼︎ bannerGroupType (배너그룹타입)

배너그룹은 배너그룹 노출 유형에 따라 3가지 배너그룹타입(bannerGroupType)으로 분류됩니다. (LOGO, SLIDE, NORMAL로 제공)

LOGO 배너그룹은 LOGO(로고 배너)로 타입이 고정되어 있으며, 나머지 배너그룹은 SLIDE(움직이는 배너) 혹은 NORMAL(일반 배너)로 타입을 설정 가능합니다.

  • LOGO : 메인 상단에 노출되는 로고 유형

  • SLIDE : 슬라이드 효과가 추가된 배너 유형 (멀티 배너)

  • NORMAL : 배너 이미지를 노출해주는 기본 배너 유형 (단일 배너)

◼︎ platformType (디바이스 유형)

단, 오로라 개별형 스킨은 platformType이 PC or MOBILE_WEB 으로 구분됩니다.

►사용중인 스킨 정보 및 배너 그룹 조회하기 쇼핑몰에서 사용중인 스킨정보 및 배너그룹 정보를 조회합니다.

해당 API에서 리턴값으로 조회한 groupCode 정보를 바탕으로, 아래 소개드릴 GET /skin-banners API에서 배너 정보를 조회하여 고객들이 보는 쇼핑몰 화면에 배너를 노출합니다.

  • groupCode : 앞서 설명드린 배너그룹코드(bannerGroupCode)입니다. 참고로 bannerGruops.csv 파일에서는 bannerGroupCode로 정의하며, API 스키마에서는 groupCode로 정의하고 있습니다.

  • isLiveSkin(사용스킨) : 현재 쇼핑몰에 적용되어 있는 스킨을 의미합니다. 사용중이지 않은 그 외 스킨은 '보유 스킨'이 됩니다.

► 플랫폼 별 전체 스킨 배너 조회하기 쇼핑몰의 모든 배너 정보를 조회합니다.

groupCode(=즉 bannerGroupCode)에 연동되어 있는 쇼핑몰의 배너 정보를 조회합니다. (요청한 배너그룹 코드에 매칭되는 배너 정보만 조회합니다.)

만약 gruopCode로 전체 배너 리스트 정보를 조회하기 위해서는 GET /groups-by-skin API에서 리턴 값으로 내려주는 groupCode를 모두 요청해야만 전체 배너 리스트 정보를 조회할 수 있습니다. 해당 API를 통해 고객들이 보는 쇼핑몰 화면에 배너를 노출합니다.

배너 정보는 쇼핑몰 어드민 아래 경로에서 관리할 수 있습니다.

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

해당 배너 리스트 데이터에 쇼핑몰 로고(LOGO)가 포함되어 있습니다. 로고의 경우 화면이 바뀌어도 대부분의 스킨에서 고정된 자리에 위치해 있기 때문에 사실상 모든 화면에서 지속적으로 사용되는 API입니다.

► 스킨의 배너 ID를 통해 배너리스트 조회하기 스킨 배너 ID로 배너 정보를 조회합니다.

쇼핑몰에 등록된 모든 스킨에서 배너 ID로 배너 정보를 조회할 수 있습니다.

쇼핑몰 생성 시 오로라 개별형 기본 스킨에서는 배너 ID가 자동으로 입력되며, ID는 수정해서 사용하실 수 있습니다. '쇼핑몰 공용 배너'를 등록하면 스킨에 구애받지 않고 해당 쇼핑몰에 등록된 모든 스킨에서 배너 ID기준으로 사용하실 수 있습니다.

오로라 개별형 기본 스킨에서는 12개의 배너그룹이 배너그룹명(bannerGroupName)을 상단로고, 메인 상단배너, 메인 중간배너 1~5, 메인 중간좌측배너, 메인 하단배너, 스크롤 좌측 배너, 스크롤 우측 배너, 상품 상세 배너로 사용하고 있습니다. 해당 배너그룹명은 스킨 제작 시 에 자유롭게 입력할 수 있습니다.

bannerGroup.csv
GET /skin-banners/groups-by-skin
GET /skin-banners
GET /skin-banners/{bannerId}
용어 소개
배너 그룹(Banner Group)