# PC

## Step 1. 디자인 스킨 및 디자인 관리 구성

* 위치 : 디자인 > 디자인 설정 > 디자인 스킨 리스트
* 기능설명 : 현재 쇼핑몰 화면에 적용 중인 디자인 스킨과 보유스킨 확인 및 적용스킨과 작업스킨을 설정할 수 있습니다.

### 1-1. 사용중 디자인 스킨 or 작업중 디자인 스킨 확인

<figure><img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F7mEN1sR5hsBPFL8Z9pY0%2Fimage.png?alt=media&#x26;token=e9568574-afb3-4ece-87ac-9978e1540918" alt=""><figcaption><p>디자인 > 디자인 설정 > 디자인 스킨 리스트</p></figcaption></figure>

1. 고도몰의 경우, 여러 개의 다양한 디자인 스킨을 보유할 수 있으며, 그 중 원하는 스킨을 선택하여 쇼핑몰 디자인으로 적용할 수 있습니다.
   * 사용중인 스킨으로 설정된 스킨이 쇼핑몰 화면에서 실제 고객들에게 노출되고 있는 디자인 스킨입니다.
2. 보유하고 있는 스킨 중, 디자인 작업을 할 수 있는 스킨을 선택할 수 있습니다.
   * 현재 사용 중인 스킨이 아닌 다른 스킨을 작업 스킨으로 설정하면, 쇼핑몰에 노출되지 않고 디자인 작업을 진행할 수 있습니다.

### 1-2. 디자인 페이지 수정

<figure><img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F7qzP72pBusqNuKGcMpt2%2Fimage.png?alt=media&#x26;token=27723592-f5e6-4388-8775-de92f720cdb4" alt=""><figcaption><p>디자인 > 디자인 설정 > 디자인 스킨 리스트</p></figcaption></figure>

1. 현재 <mark style="color:blue;">**작업중인 스킨**</mark>에 대하여 모든 페이지를 수정할 수 있습니다.
   * 수정하고자 하는 페이지를 선택하여 페이지내 HTML를 직접 수정하실 수 있습니다.
   * 삭제시에는 복구가 불가능하며, 반드시 사용중인 스킨이 아닌 작업중인 스킨을 선택하여 작업하시기 바랍니다.
2. 기존 페이지 외에 새로운 페이지를 추가하여 작업하실 수 있습니다.
3. 쇼핑몰에서 사용하는 이미지들에 대한 FTP 접근이 가능합니다.

***

## Step 2. 무료 스킨 추가하기

* 위치 : 디자인 > 디자인 설정 > 디자인 스킨 리스트 & [무료스킨 리스트](https://design.nhn-commerce.com/freeskin.php)

### 2-1. 무료스킨 추가 방법

<figure><img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FrK08WhZH9twSKKpVN71D%2Fimage.png?alt=media&#x26;token=70c947f1-704d-46c9-acae-f3197b594d19" alt=""><figcaption><p>디자인 > 디자인 설정 > 디자인 스킨 리스트</p></figcaption></figure>

1. 디자인 스킨 리스트 화면에서의 정가운데 무료스킨 배너를 클릭하면 무료 스킨 제공화면으로 이동됩니다.
   * [**무료스킨**](https://design.nhn-commerce.com/freeskin.php) 제공화면으로 이동한 후, 고도몰을 지원하는 마음에 드는 스킨을 추가하시면 됩니다.
   * PC 용과 모바일용 스킨으로 분리되어 있으므로, 모바일용 스킨을 원하실 경우에는 모바일샵용 스킨을 선택하세요.
2. 무료스킨 제공화면에서 추가를 한 스킨은 보유 스킨 리스트에서 확인이 가능합니다.

***

## Step 3. 디자인 스킨 레이아웃 이해 및 편집하기

* 위치 : 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정
* 기능설명 : 현재 쇼핑몰 화면에 적용 중인 디자인 스킨과 보유스킨 확인 및 적용스킨과 작업스킨을 설정할 수 있습니다.

### 3-1. 레이아웃 설정과 디자인 페이지 설정

<figure><img src="https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FZ7ss8hbEL92GLRZR30rB%2Fimage.png?alt=media&#x26;token=8c131bb7-48a5-4035-8d38-608109d1d035" alt=""><figcaption><p>디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정</p></figcaption></figure>

1. 쇼핑몰 레이아웃에 따라 상단 레이아웃 / 상단 / 측면 / 본문 / 하단 / 스크롤 / 하단 레이아웃 영역으로 구성되어 있으며, 각 디자인 영역에 대한 편집이 가능합니다.
   * 상단 및 측면, 하단 디자인의 경우, 디자인 페이지를 다수 구성할 수 있으며 셀렉트박스를 선택하여 편집이 가능합니다.
2. 측면디자인의 위치를 본문을 기준으로 왼쪽 혹은 오른쪽으로 변경 가능합니다.
3. 쇼핑몰 화면의 배경 색상과 배경이미지를 적용할 수 있습니다.