---
url: "/ko/bannerify/design/popups.md"
description: "Bannerify로 배너의 특정 레이어를 클릭하면 나타나는 간단한 오버레이 팝업을 추가해 리치 텍스트(예: 면책 문구나 이용 약관)를 표시할 수 있어요."
---

# 배너에 클릭 가능한 리치 텍스트 팝업 오버레이 링크 추가하기

> Bannerify로 배너의 특정 레이어를 클릭하면 나타나는 간단한 오버레이 팝업을 추가해 리치 텍스트(예: 면책 문구나 이용 약관)를 표시할 수 있어요.

### 영상 튜토리얼: Figma HTML 배너에 리치 텍스트 팝업 오버레이 추가하기

Bannerify 플러그인으로 Figma HTML 배너에 리치 텍스트 팝업 오버레이를 추가하는 방법을 보여 주는 영상 튜토리얼이에요(영어).
[Embedded media](https://www.youtube-nocookie.com/embed/fOlw2ghGcIc)

[Video](/assets/videos/bannerify/design/popup-overlays.mp4)

배너 타임라인의 특정 레이어를 클릭해 열 수 있는, 스크롤 가능하고 닫을 수 있는 리치 텍스트 팝업 오버레이를 배너에 넣어야 한다면, 각 배너에서 [트리거로 쓸 레이어를 선택](/ko/bannerify/animation/animating-banners#quick-selecting-similar-layers)하세요. 그런 다음 플러그인 하단의 일괄 작업 창(타임라인에서 여러 레이어를 체크하면 나타나요)에 있는 **Generate Popup Overlay Disclaimers** 섹션에서 원하는 애니메이션 옵션을 고르세요.

팝업 애니메이션 설정이 마음에 들면 **Create Popup Links** 버튼을 클릭하세요. Figma 페이지에 “Popup” 컴포넌트(텍스트 레이어와 닫기 버튼 포함)가 자동으로 만들어지고, 선택한 각 레이어가 Figma 기본 프로토타입 링크 기능을 통해 이 새 Popup 컴포넌트를 가리키는 트리거로 자동 연결돼요.

텍스트 레이어의 내용을 수정하고, 폰트 크기를 조정하고, 팝업 배경, 닫기 아이콘, 텍스트 레이어의 단색 채우기 색상을 자유롭게 바꿔도 돼요.

HTML 배너를 내보내면 플러그인이 이 Figma 프로토타입 링크와 링크가 가리키는 Popup 컴포넌트를 자동으로 찾아, 최종 내보낸 배너 세트에 클릭 가능한 트리거와 팝업 오버레이 코드를 생성해요.

## 스크롤바 스타일 사용자 지정하기 {#customizing-scrollbar-styles}

잘린 스크롤 텍스트 레이어나 팝업 오버레이 텍스트의 스크롤바 스타일을 바꾸고 싶다면, HTML 내보내기 설정에서 **Inject Custom Code**를 켠 다음 **Custom CSS** 필드에 아래 코드를 붙여 넣으세요.

```css
:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}
```

맨 위의 값을 바꾸면 스크롤바 색상, 트랙 색상, 너비, 높이, 모서리 반경을 바꿀 수 있어요. 일부 브라우저와 모바일 기기에서는 여전히 시스템 기본 스타일로 스크롤바가 표시될 수 있지만, 사용자 지정 스크롤바 스타일을 허용하는 환경에서는 이 CSS가 적용돼요.

> **Warning:** 참고로 이 컴포넌트는 면책 문구용 텍스트 레이어 하나와 닫기 버튼만 있는 아주 단순한 구조로 설계되었어요. 텍스트 내용, 폰트 스타일, 색상은 자유롭게 바꿔도 되지만, **그 밖의 수정이나 레이어 추가는 내보낸 HTML을 망가뜨릴 수 있어요**.