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

Bannerify 플러그인으로 Figma HTML 배너에 리치 텍스트 팝업 오버레이를 추가하는 방법을 보여 주는 영상 튜토리얼이에요(영어).

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

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

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

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

스크롤바 스타일 사용자 지정하기

잘린 스크롤 텍스트 레이어나 팝업 오버레이 텍스트의 스크롤바 스타일을 바꾸고 싶다면, HTML 내보내기 설정에서 Inject Custom Code를 켠 다음 Custom 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가 적용돼요.

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