# 샵바이 스킨 설명서

샵바이 기본 스킨은  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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://workspace-help.nhn-commerce.com/shopby-skin/skinguide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.