# 01. 디자인 에디터 시작하기

## 🎨 디자인 에디터란?

<figure><img src="/files/dYHBmL9s04JTeOkvO4ih" alt=""><figcaption></figcaption></figure>

코딩 지식 없이 드래그 앤 드롭과 클릭만으로 내 쇼핑몰의 디자인을 직접 꾸밀 수 있는 도구예요. HTML/CSS를 직접 수정하거나 외주 개발자에게 의뢰하지 않아도, 상품 진열·배너 교체·페이지 추가처럼 자주 바뀌는 영역을 셀러가 직접 빠르게 수정할 수 있어요. ✨

> 💡 **TIP** 디자인 에디터는 디자인 에디터 지원 스킨에서만 동작해요. 현재는 슬로우홈 테마를 제공하고 있으며, 이후 홈인테리어·푸드·뷰티·의류·전자기기 카테고리의 스킨이 차례로 추가될 예정이에요.

## 🚀 디자인 에디터 진입하기

다음 세 단계만 따라 하면 바로 에디터에 진입할 수 있어요.

<figure><img src="/files/0PQcZdAx0wzY8QoaEgBk" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
💡 **디자인 에디터 전용 스킨만 디자인 에디터 편집이 가능해요.**

디자인 에디터 전용 스킨을 사용 중이지 않다면, 먼저 \[디자인 > 디자인 관리]에서 반응형 스킨을 다운로드해 주세요.&#x20;

스킨 다운로드는 통합 계정(최고운영자)로 로그인해야 진행할 수 있어요.
{% endhint %}

{% stepper %}
{% step %}
고도몰 관리자 페이지에 로그인합니다.
{% endstep %}

{% step %}
디자인 > 디자인 관리 > 디자인 스킨 리스트에 진입합니다.
{% endstep %}

{% step %}
작업하려는 스킨에서 \[디자인 에디터로 편집하기] 버튼을 클릭합니다.

새 탭에서 디자인 에디터가 열리고, 메인 페이지가 기본으로 표시돼요.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
💻 **PC 환경만 지원돼요.**

디자인 에디터는 **PC 접속만 지원**해요. 모바일이나 태블릿에서는 접근이 차단됩니다.
{% endhint %}

## 🗺️ 화면 구성 한눈에 보기

디자인 에디터는 크게 다섯 영역으로 구성돼 있어요. \
각 영역의 역할을 먼저 이해하면 이후 가이드를 따라가기가 더 쉽게 따라갈 수 있어요.

<figure><img src="/files/Rlg2T9txOACy2vzeX05N" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="230">영역</th><th>역할</th></tr></thead><tbody><tr><td><ol><li>상단 메뉴</li></ol></td><td>스킨 정보, 페이지 정보, 뷰포트 전환, 미리보기, 저장/게시 기능 제공</td></tr><tr><td><ol start="2"><li>왼쪽 사이드바 - 작업도구</li></ol></td><td>섹션·공통 스타일·도움말 등 작업 도구를 선택</td></tr><tr><td><ol start="3"><li>왼쪽 사이드바 - 상세 패널</li></ol></td><td>작업도구에서 선택한 도구의 세부 작업 영역<br>(섹션 트리, 공통 스타일 설정 등)</td></tr><tr><td><ol start="4"><li>오른쪽 사이드바</li></ol></td><td>캔버스에서 선택한 섹션·위젯의 속성을 세밀하게 조정</td></tr><tr><td><ol start="5"><li>캔버스(미리보기)</li></ol></td><td>실제 쇼핑몰 화면을 실시간 미리보기 형태로 보며 직접 편집</td></tr></tbody></table>

#### 🔝 상단 메뉴 살펴보기

<figure><img src="/files/oj8pvYBJH9Blum6QOJVa" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="230">작업 도구</th><th>설명</th></tr></thead><tbody><tr><td>1. 나가기</td><td>디자인 에디터를 종료하고 관리자 페이지로 돌아가요.</td></tr><tr><td>2. 스킨 정보</td><td>작업 중인 스킨명, 사용 스킨 여부를 한눈에 확인할 수 있어요. 현재 쇼핑몰에 적용된 스킨이라면 <strong>사용 스킨</strong> 배지가 함께 노출돼요.</td></tr><tr><td>3. 페이지 인포</td><td>현재 작업 중인 페이지명을 확인하고, 클릭해서 다른 페이지로 빠르게 전환할 수 있어요.</td></tr><tr><td>4. 뷰포트</td><td>데스크톱 / 모바일 / 전체화면을 전환하며 각각의 화면을 확인할 수 있어요.</td></tr><tr><td>5. 실행취소·재실행</td><td>직전 작업을 되돌리거나, 되돌린 작업을 다시 적용해요. </td></tr><tr><td>6. 미리보기</td><td>작업 중인 페이지를 새 탭으로 열어 실제 사용자 화면처럼 점검할 수 있어요.</td></tr><tr><td>7. 게시하기 / 저장하기</td><td>사용 스킨이면 <strong>[게시하기]</strong>, 보유 스킨이면 <strong>[저장하기]</strong> 버튼이 노출돼요. 마지막 저장 이후 변경사항이 있을 때만 활성화돼요. </td></tr></tbody></table>

#### 🛠️ 왼쪽 사이드바의 세 가지 작업 도구

<div align="left"><figure><img src="/files/W9Y4dxAeETzshpliAtjr" alt="" width="57"><figcaption></figcaption></figure></div>

<table><thead><tr><th width="230">작업 도구</th><th>설명</th></tr></thead><tbody><tr><td><ol><li>섹션</li></ol></td><td>본문의 섹션을 선택·추가·편집·삭제하는 기본 도구예요. 에디터에 진입하면 기본으로 활성화돼요.</td></tr><tr><td><ol start="2"><li>공통 스타일</li></ol></td><td>폰트, 색상, 버튼 형태 등 쇼핑몰 전반에 일괄 적용되는 디자인 요소를 한 번에 관리할 수 있어요.</td></tr><tr><td><ol start="3"><li>도움말</li></ol></td><td>에디터 사용법, 단축키, 가이드, 제안하기 등 지원 정보를 빠르게 확인할 수 있어요.</td></tr></tbody></table>

#### ⚙️ 오른쪽 사이드바의 반응형 노출 정책

브라우저 너비에 따라 오른쪽 사이드바의 표시 방식이 달라져요.

<figure><img src="/files/qsnhxgjtqoz0UUpgKlMC" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ZZnGFVbMGIf5KtFiiCmR" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="230">브라우저 너비</th><th>오른쪽 사이드바 표시 방식</th></tr></thead><tbody><tr><td><ol><li>1600px 초과</li></ol></td><td>항상 우측에 고정 노출돼요. 임의로 접을 수 없어요.</td></tr><tr><td><ol start="2"><li>1600px 이하</li></ol></td><td>기본적으로 노출되지 않아요. <br>캔버스나 왼쪽 사이드바에서 섹션·위젯을 선택하면 왼쪽 사이드바 상단을 덮는 오버레이 모달 형태로 노출돼요.</td></tr></tbody></table>

## 📖 용어 한 눈에 보기

쇼핑몰 화면을 구성하는 가장 기본이 되는 네 가지 단위예요. \
가이드 전반에서 반복해 등장하니 미리 알아두면 좋아요.

<figure><img src="/files/BS13h9LukUIWrmOsTQE6" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/rRpithEqVlzLnNjJykCR" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="230">용어</th><th>설명</th></tr></thead><tbody><tr><td><ol><li>폴더</li></ol></td><td>여러 페이지를 용도에 맞게 묶어 관리하는 가장 큰 단위예요. 폴더는 자유롭게 추가할 수 있어요.</td></tr><tr><td><ol start="2"><li>페이지</li></ol></td><td>쇼핑몰의 실제 화면 단위예요. 메인, 상품 목록 등 화면 하나하나가 페이지에 해당해요. 빈 페이지도 자유롭게 추가할 수 있어요. 단, 빈 페이지 추가하려면 먼저 폴더가 생성되어 있어야 해요.</td></tr><tr><td><ol start="3"><li>섹션</li></ol></td><td><p>페이지 본문을 구성하는 레이아웃의 기본 단위예요. </p><p>슬라이드 배너, 상품 목록처럼 한 묶음의 콘텐츠를 의미해요.</p></td></tr><tr><td><ol start="4"><li>위젯</li></ol></td><td><p>화면에 노출되는 가장 작은 단위예요. </p><p>이미지, 텍스트, 버튼처럼 관리자가 직접 추가 및 배치할 수 있어요.</p></td></tr></tbody></table>

## 💻 에디터 사용 환경 안내

디자인 에디터가 어떤 환경에서 동작하는지 안내해 드릴게요.\
아래 두 가지만 미리 체크해 두시면 갑작스러운 제약을 만나지 않고 매끄럽게 작업을 진행할 수 있어요. 😊

<table><thead><tr><th width="230">항목</th><th>정책</th></tr></thead><tbody><tr><td>🖥️ 접속 환경</td><td>PC만 허용 (모바일·태블릿 접속 시 차단)</td></tr><tr><td>🎨 지원 스킨</td><td>디자인 에디터 전용 스킨<br>- 슬로우홈(slowhome)</td></tr></tbody></table>

## 💡 자주 묻는 질문

<details>

<summary>디자인 에디터로 만든 스킨은 모바일에서도 잘 보이나요?</summary>

네, 잘 보여요.\
\
디자인 에디터는 디자인 에디터 전용 스킨에서만 동작하므로 데스크톱, 모바일 모두 깔끔하게 노출됩니다.\
작업 중에 모바일 뷰포트로 전환해 미리 점검할 수도 있어요.

</details>

<details>

<summary>작업 중에 화면이 좁아 보여요. 오른쪽 사이드바를 잠시 접을 수 있나요?</summary>

브라우저 너비가 1600px을 초과하는 환경에서는 사이드바가 상시 고정되어 임의로 접을 수 없어요.&#x20;

<figure><img src="/files/GHJ2Q9blRl0tllA9mxnK" alt=""><figcaption></figcaption></figure>

캔버스를 더 넓게 보고 싶다면 상단의 **전체화면 뷰포트**로 전환하세요.\
양쪽 사이드바가 모두 숨겨져 디자인 결과에 집중할 수 있어요.

</details>

<details>

<summary>슬로우홈 외 다른 테마는 언제 추가되나요?</summary>

현재는 슬로우홈 테마를 제공하고 있으며, \
26년 상반기 푸드, 뷰티, 의류, 전자기기 카테고리의 전용스킨이 순차적으로 추가될 예정이에요.

</details>

<details>

<summary>HTML이나 CSS를 직접 수정할 수 있나요?</summary>

현재 디자인 에디터에서는 CSS 직접 수정 기능은 지원하지 않아요. \
디자인 조정은 **공통 스타일이나 각 섹션, 위젯의 설정 옵션을 활용**해 주세요.&#x20;

HTML 편집 자유도는 추후 디자인 에디터 내에서 단계적으로 확대될 예정이에요. \
단, 기존 고도몰의 FTP 기반 스킨 파일 직접 편집은 디자인 에디터의 대상이 아닌 점 참고해 주세요.

</details>

<details>

<summary>이런 기능도 있으면 좋겠어요! 어디에 제안하면 될까요?</summary>

<figure><img src="/files/oFHPLnliqGoVOVa4S8ic" alt=""><figcaption></figcaption></figure>

디자인 에디터에 더해졌으면 하는 기능이나 개선 아이디어가 있다면 \[[제안하기](https://www.godo.co.kr/support/inquiry/contact)]에 의견을 남겨주세요.

활용 사례(레퍼런스 사이트, 기대 동작 등)를 함께 전달해 주시면 적극 반영해 드릴게요. \
셀러의 목소리는 디자인 에디터를 더 좋은 도구로 만드는 데 큰 도움이 돼요.

</details>


---

# 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://godomall-help.nhn-commerce.com/design-editor-guide/essentials/getting-started.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.