# 샵바이 스킨 설명서

샵바이 기본 스킨은  javascript와 react를 통해 고객들의 최접선에 있는 쇼핑몰 프론트 화면을 자유롭게 커스텀할 수 있도록 NHN커머스에서 제작한 스킨입니다.

> **스킨(skin)이란?** \
> 쇼핑몰 고객들이 보는 쇼핑몰 프론트 화면 디자인 (템플릿, 레이아웃)을 뜻합니다.

{% hint style="success" %}
️쇼핑몰 신규 생성 시, 기본 스킨으로 NHN커머스에서 제작한 샘플 (스킨명:오로라) 개별형 스킨이 세팅됩니다. \
본 설명서는 쇼핑몰 운영 방식이 '스킨'인 몰을 기준으로 안내합니다. 

샵바이 기본 스킨은 javascript 기반으로 제작된 오로라 개별형 (PC+모바일) 스킨과 react기반으로 제작된 오로라 리액트 통합형 스킨으로 제작되었습니다. 

샵바이 엔터프라이즈의 헤드리스(headless) 운영 방식인 몰은 [API문서](https://docs.shopby.co.kr/)를 확인하여 스킨 개발 진행이 필요합니다. 
{% endhint %}

***

### 용어 설명

#### ■ 스킨 구분

#### 개별형

* PC스킨과 Mobile스킨의 소스 코드가 각각의 형태로 개발된 스킨을 말하며 아래와 같이 분류됩니다. 
  * 개별형 (PC+Mobile) : 하나의 프로젝트 내 PC스킨과 Mobile스킨의 소스코드가 모두 개발된 경우
  * 개별형 (PC) : PC스킨만 개발된 경우
  * 개별형 (Mobile) : Mobile스킨만 개발된 경우

#### 통합형

* PC스킨과 Mobile스킨의 소스코드가 하나의 형태로 개발된 스킨으로 반응형으로 개발된 스킨도 통합형 스킨으로 분류됩니다. 

#### ■ 저장 방법

#### GitLab

* 소스코드를 GitLab에 저장하여 소스코드가 저장된 GitLab 프로젝트와 쇼핑몰을 연결하는 방식입니다.

***

### 오로라(Aurora) 스킨과 오로라 리액트(Aurora React) 스킨의 차이는 무엇인가요? 

#### ■ 오로라(Aurora) 개별형 스킨

<figure><img src="https://67612295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLt0GowPleXLWRjzGIAiV%2Fuploads%2FVqntDQOo7BqQS0TZwhBP%2F%E1%84%80%E1%85%A2%E1%84%87%E1%85%A7%E1%86%AF%E1%84%92%E1%85%A7%E1%86%BC%20%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B5%E1%86%AB.png?alt=media&#x26;token=d60a9380-5faf-407f-ae03-b6b29f27bae3" alt=""><figcaption><p>오로라 개별형 (PC+모바일)</p></figcaption></figure>

* 쇼핑몰 신규 생성 시 기본으로 세팅되는 스킨입니다.
* shop by basic, pro, enterprise 모두 적용이 가능합니다.
* 오로라 (Aurora) 스킨은 PC스킨과 Mobile스킨의 소스코드가 각각의 형태로 개발된 스킨으로 개별형(PC+모바일)으로 분류됩니다.
* javascript 기반으로 제작되었습니다.
* 스킨 에디터를 통해 디자인 수정이 가능합니다. [ 에디터 가이드 바로가기](https://nhnent.dooray.com/share/pages/7ik2itl8T6ew2JGRZa7sEQ)

#### ■ 오로라 리액트(Aurora React) 통합형 스킨

<figure><img src="https://67612295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLt0GowPleXLWRjzGIAiV%2Fuploads%2FA68FnRb2dIMPLCqb6d4M%2F%E1%84%90%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%86%B8%E1%84%92%E1%85%A7%E1%86%BC%20%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B5%E1%86%AB.png?alt=media&#x26;token=4c2ed66e-1345-4294-9417-b69846020dfb" alt=""><figcaption><p>오로라 리액트 통합형</p></figcaption></figure>

* shop by basic, pro, enterprise 모두 적용이 가능합니다.
* 오로라 리액트(Aurora React)스킨은 PC/Mobile 구분이 없는 통합형 스킨으로 모바일 퍼스트(Mobile frtst)스킨으로 제작되었습니다.
* react 기반으로 제작되었습니다.
* NHN 커머스에서 제공하는 @shopby 패키지를 활용하여 보다 손 쉬운 개발이 가능합니다.
* &#x20;[오로라 리액트 가이드 바로가기](https://nhnent.dooray.com/share/pages/WoOk8q6KT1K3MZcLSuyZsw)