> For the complete documentation index, see [llms.txt](https://nhn-commerce.gitbook.io/shopby_enterprise_manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nhn-commerce.gitbook.io/shopby_enterprise_manual/appearance/skin/editor.md).

# 에디터

**✅&#x20;**<mark style="background-color:red;">**에디터는 쇼핑몰 디자인 스킨 소스 코드를 수정 및 편집할 수 있는 기능입니다.**</mark>&#x20;

<figure><img src="/files/npYJTh3J1Btuy1lFFfLe" alt=""><figcaption><p>&#x3C;스킨 에디터></p></figcaption></figure>

**① 메뉴트리**\
스킨을 구성하고 있는 **html 파일**과 **css 파일**을 메뉴별로 확인할 수 있습니다.\
특정 메뉴의 폴더를 클릭하면 오른쪽 편집영역에 해당 메뉴를 구성하는 소스 코드가 확인돼요.

**②  히스토리 보기**\
\[히스토리 보기] 버튼을 클릭하면, 소스 코드 수정을 진행한 일자가 리스트로 노출됩니다. \
해당 일자를 클릭하면 소스 코드 수정 내역을 확인할 수 있는 '히스토리 코드' 화면과, 현재 수정이 가능한 \
'편집 코드' 화면으로 분할되어 나타나요.

<figure><img src="/files/1gEsSOIscIn6to78JvlD" alt=""><figcaption><p>&#x3C;히스토리 보기></p></figcaption></figure>

**③ 미리보기**\
\[미리보기] 버튼을 클릭하면 수정한 소스 코드가 반영된 해당 메뉴의 쇼핑몰 미리보기 페이지로 이동됩니다.\
📍 \[미리보기] 버튼은 html 파일 편집 영역에만 노출돼요.

**④ 저장**\
소스 코드 수정을 완료하고, 반드시 \[저장] 버튼을 클릭해야 수정한 소스 코드가 스킨에 최종 반영돼요.

<figure><img src="/files/fMJ1L4xbRMoNOrFwsTvV" alt=""><figcaption><p>&#x3C;페이지추가></p></figcaption></figure>

**⑤ 페이지 추가**\
스킨에 새로운 페이지를 생성하여 쇼핑몰 컨텐츠를 추가할 수 있습니다.\
\[페이지 추가] 버튼을 클릭하면 나타나는 '페이지 추가' 창에서 새로운 페이지 이름인 파일명을 입력하고, \
\[저장] 버튼을 클릭합니다.\
📍새로운 페이지는 '기타' 폴더 내에 생성되는 점을 참고해 주세요.

<figure><img src="/files/CWwZkCle0mG6X8arJzGW" alt=""><figcaption><p>&#x3C;페이지 추가 소스코드 입력></p></figcaption></figure>

**⑦** '기타' 폴더 내에 새롭게 추가한 페이지의 html 파일이 확인됩니다.

{% hint style="success" %}
**새로운 컨텐츠 추가를 위한 소스 코드는 \<main> 과  \</main> 사이에 입력합니다.**\
&#x20;**"여기에 소스코드를 입력해 주세요."를 삭제하고 입력해 주세요.**
{% endhint %}

<figure><img src="/files/K85VBavdX7gSRkLwcsle" alt=""><figcaption><p>&#x3C;<strong>모듈추가></strong></p></figcaption></figure>

**⑨ 모듈추가**

* 모듈명을 클릭하면, 모듈을 구성하고 있는 소스 코드가 자동으로 복사돼요.
* 메뉴트리로 이동해 주세요.
* 복사한 모듈을 추가하고 싶은 메뉴의 페이지와 해당 위치에 붙여넣기 하여 활용할 수 있어요.

{% hint style="warning" %}
**모듈이란,  스킨을 구성하고 있는 여러 기능을 구분한 최소한의 단위를 의미해요.**
{% endhint %}

<details>

<summary>🤚 <strong>에디터 제공 모듈</strong></summary>

* **상단 레이아웃(헤더) / 하단 레이아웃(푸터)**\
  해당 모듈의 복사가 가능합니다.
* **상품 진열 모듈**\
  &#x20;[전시관리 > 상품 진열 관리 > 상품 진열 등록](/shopby_enterprise_manual/appearance/product-main/add.md) 메뉴에서 신규 등록한 상품 진열 모듈을 검색해   \
  &#x20;복사하여 활용할 수 있습니다.
* **배너 모듈**\
  [전시관리 > 스킨 배너 관리 > 스킨 배너 등록](/shopby_enterprise_manual/appearance/skin-banners/add.md) 메뉴에서 신규 등록한 배너 모듈을 검색해 복사하여 활용할 수 있습니다.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://nhn-commerce.gitbook.io/shopby_enterprise_manual/appearance/skin/editor.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.