# 02. 공통 스타일 설정하기

## ✨ 공통 스타일이 무엇인가요?

공통 스타일은 **쇼핑몰 전체에 일괄 적용되는 디자인 요소를 한 곳에서 관리**하는 기능이에요. \
한 번 설정해 두면 쇼핑몰 전체에 일괄 적용돼서, 페이지마다 따로 디자인을 수정할 필요가 없어요. \
디자인 에디터를 처음 열었다면 이 항목부터 먼저 설정하세요. 🎨

## 🚀 공통 스타일 설정 방법

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

{% stepper %}
{% step %}
디자인 에디터 진입하여 좌측 하단에 \[공통 스타일] 아이콘을 클릭해주세요.
{% endstep %}

{% step %}
원하는 항목을 펼쳐 값을 조정해보세요.
{% endstep %}
{% endstepper %}

> 💡 **TIP** 공통 스타일은 디자인 에디터에서 한 번만 설정하면 돼요! 이후 개별 섹션이나 위젯을 편집할 때는 공통 스타일에서 정한 값을 기본으로 사용하므로 작업 시간이 크게 줄어들어요.

### 🎯 공통 스타일 설정 항목

공통 스타일에서 설정할 수 있는 항목들이에요. \
각 항목의 세부 옵션을 살펴보고 내 쇼핑몰에 어울리는 값으로 설정하세요.

<table><thead><tr><th width="230">그룹</th><th>설명</th></tr></thead><tbody><tr><td>색상</td><td>내 쇼핑몰을 대표하는 색을 정할 수 있어요.</td></tr><tr><td>글자 - 글꼴</td><td>기본 제공 폰트 중에서 제목용·본문용 글꼴을 각각 선택할 수 있어요. <br>(외부 폰트 파일을 직접 올리는 기능은 미지원이에요)</td></tr><tr><td>글자 - 크기 </td><td>제목과 본문 글자 크기를 조정할 수 있어요. <br>버튼명 크기는 본문 크기 설정에 따라 함께 반영돼요.<br>(쇼핑몰 전체 텍스트 크기를 한 번에 키우거나 줄이는 기능은 추가 제공될 예정이에요.)</td></tr><tr><td>레이아웃</td><td>화면 가운데에 보이는 본문 영역의 최대 너비를 정해요. <br>좁게 잡으면 깔끔한 느낌, 넓게 잡으면 시원한 느낌이 들어요.</td></tr><tr><td>버튼</td><td>쇼핑몰 곳곳에 쓰이는 기본 버튼의 색을 한 곳에서 관리해요.<br>매번 따로 수정하지 않아도 일관된 디자인이 유지돼요.</td></tr><tr><td>슬라이드</td><td>배너 슬라이드의 좌우 화살표와 페이징 점 디자인을 한 곳에서 관리해요. <br>모든 슬라이드 섹션에 동일하게 적용할 수 있어요.</td></tr></tbody></table>

> 💡 **TIP** 처음 스킨을 만든다면 색상 → 글자 → 레이아웃 → 버튼 → 슬라이드 순서로 살펴보면 디자인이 자연스럽게 잡혀요. 물론 원하는 항목부터 자유롭게 설정해도 좋아요!

## 🔄 공통 적용 범위 알아보기

공통 스타일은 디자인 에디터에서 직접 편집할 수 없는 페이지에도 동일하게 적용돼요.\
페이지 종류마다 어떤 차이가 있는지 아래 표에서 한눈에 확인해 보세요.

<table><thead><tr><th width="280">페이지 종류</th><th>에디터에서 직접 편집</th><th>공통 스타일 적용</th></tr></thead><tbody><tr><td>기본 제공 페이지 <br>(메인, 상품 목록, 상품상세,  검색결과, 장바구니, 주문서, 회원가입, 로그인)</td><td>✅</td><td>✅</td></tr><tr><td>빈 페이지 <br>(관리자가 직접 추가)</td><td>✅</td><td>✅</td></tr><tr><td>시스템 페이지 <br>(게시판, 1:1 문의, 마이페이지 등)</td><td>❌</td><td>✅</td></tr></tbody></table>

공통 스타일을 적용하면 게시판이나 마이페이지처럼 디자인 에디터에서 직접 수정할 수 없는 페이지도 \
쇼핑몰 전체와 일관된 디자인을 유지할 수 있어요. 👍

## 💡자주 묻는 질문

<details>

<summary>폰트 파일을 직접 업로드해 사용할 수 있나요?</summary>

현재는 에디터가 기본 제공하는 폰트 목록에서만 선택할 수 있어요.&#x20;

</details>

<details>

<summary>본문 텍스트 크기를 전체적으로 한 번에 키우고 싶어요.</summary>

제목과 본문 위젯의 글자 크기를 조정할 수 있어요. \
버튼명은 별도 항목이 없으며, 본문 크기 설정에 따라 함께 반영돼요.

쇼핑몰 전체 텍스트 크기를 한 번에 키우거나 줄이는 기능은 추가 제공될 예정이에요.

</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/global-style.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.