> For the complete documentation index, see [llms.txt](https://godomall-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://godomall-help.nhn-commerce.com/design-editor-guide/basics/popup.md).

# 10. 팝업 설정하기

### 🪟 팝업이란?

팝업은 메인 페이지에 접속했을 때 화면 가장 앞에 띄우는 안내창이에요.\
이벤트, 기획전, 공지사항처럼 고객에게 가장 먼저 알리고 싶은 내용을 효과적으로 보여줄 수 있어요.

팝업은 공통 섹션이지만 메인 페이지에서만 노출되고 설정할 수 있어요. 메인 페이지가 아닌 다른 페이지의 트리 메뉴에는 팝업 영역 자체가 표시되지 않으니 주의해 주세요.

### ✏️ 팝업 편집하기

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

메인 페이지로 이동한 뒤  (1) 왼쪽 사이드바 트리에서 \[팝업]을 선택하거나 (2) 캔버스 화면의 팝업 영역을 클릭해 보세요. 오른쪽 사이드바에서 세부 사항을 설정할 수 있는 창이 나타나요.

#### 팝업 표시 설정

<table><thead><tr><th width="180">설정</th><th>설명</th></tr></thead><tbody><tr><td>팝업 너비</td><td>데스크톱 화면에서 팝업이 표시될 너비를 정해요. (기본값은 400px이에요.)</td></tr><tr><td>팝업 위치</td><td>화면의 9개 위치(왼쪽 위부터 오른쪽 아래까지) 중 팝업이 나타날 자리를 선택해요.</td></tr><tr><td>오늘 하루 열지 않기</td><td>고객이 팝업을 닫을 때 "오늘 하루 열지 않기" 체크박스를 함께 보여줄지 선택해요.</td></tr></tbody></table>

#### 팝업 배경(오버레이) 설정

팝업 뒤쪽의 배경을 어둡게 덮어서, 고객이 팝업 내용에 더 집중할 수 있도록 만드는 오버레이 기능이에요.

* 오버레이 기능을 켜면 팝업 뒤쪽 화면이 어둡게 채워져요.
* 투명도를 조절해서 화면을 얼마나 어둡게 만들지 정할 수 있어요. (배경 색상은 검은색으로 고정되어 있어요.)

> 💡 **참고** 띄워야 할 팝업이 여러 장일 때 적용되는 '넘김 속도', '좌우 화살표 버튼', '페이지 표시(페이징) 버튼' 등은 모두 공통 스타일의 슬라이드 설정을 그대로 따라가요. 공통 스타일 설정법이 궁금하시다면 [02. 공통 스타일 설정하기](/design-editor-guide/essentials/global-style.md)가이드를 확인해 주세요.

### 🖼️ 팝업 이미지 넣기

팝업의 내용은 \[팝업 이미지] 위젯을 추가해 채울 수 있어요. 팝업 이미지는 오직 팝업 섹션 안에서만 사용할 수 있는 전용 위젯이에요.

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

<table><thead><tr><th width="150">설정</th><th width="585">설명</th></tr></thead><tbody><tr><td><ol><li>이미지</li></ol></td><td><p>팝업으로 보여줄 이미지를 등록해요. </p><p>PC와 모바일 화면에 각각 다른 이미지를 보여주도록 설정할 수도 있어요.<br>이미지는 파일 하나당 최대 5MB까지 올릴 수 있고, JPG · JPEG · PNG · GIF · WEBP · BMP · ICO · TIFF · TIF · AVIF 형식을 지원해요.</p></td></tr><tr><td><ol start="2"><li>노출 기간</li></ol></td><td><p>팝업이 나타날 시작 일시와 종료 일시를 지정해요. </p><p>설정한 기간에만 자동으로 화면에 노출돼요.</p></td></tr><tr><td><ol start="3"><li>링크</li></ol></td><td><p>팝업 이미지를 클릭했을 때 이동할 페이지 주소를 연결해요. </p><p>클릭 시 새 탭으로 열리게 할지도 선택할 수 있어요.</p></td></tr></tbody></table>

> 💡 **TIP** 노출 기간을 미리 지정해 두면 이벤트 시작과 종료 시점에 맞춰 팝업이 알아서 켜지고 꺼져요. 매번 이벤트 시간에 맞춰 직접 팝업을 올리고 내리지 않아도 되니 편리하게 활용해 보세요.

### 💡 자주 묻는 질문

<details>

<summary>팝업이 트리에 보이지 않아요.</summary>

팝업 섹션은 오직 '메인 페이지'를 편집할 때만 나타나고 설정할 수 있어요.

현재 편집 중인 페이지가 메인 페이지가 맞는지 확인해 보시고, 다른 페이지라면 메인 페이지로 이동한 뒤 다시 확인해 주세요.

</details>

<details>

<summary>이벤트 기간에만 팝업을 띄우고 싶어요.</summary>

\[팝업 이미지] 위젯의 '노출 기간' 설정에서 시작 일시와 종료 일시를 지정해 보세요.

기간이 끝나면 팝업이 자동으로 미노출되기 때문에, 운영자가 직접 확인하고 내리지 않아도 안전하게 관리할 수 있어요.

</details>

<details>

<summary>팝업을 잠시 내리고 싶어요.</summary>

팝업 섹션 자체는 삭제할 수 없지만, 화면에 보이지 않도록 숨길 수는 있어요.

왼쪽 사이드바 메뉴나 캔버스 화면에서 팝업 섹션 옆의 '눈 아이콘'을 클릭해 숨김 상태로 변경하면 쇼핑몰에 노출되지 않아요.

</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://godomall-help.nhn-commerce.com/design-editor-guide/basics/popup.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.