배너에 스크롤 가능한 잘린 텍스트 레이어 추가

Figma의 잘린(Truncate) 텍스트 레이어로 Bannerify에서 스크롤 가능한 HTML 텍스트나 자동으로 스크롤되는 GIF·동영상 텍스트를 내보내세요.

영상 튜토리얼: Figma 배너 내보내기에 스크롤 가능한 고지 문구 추가

Bannerify 플러그인으로 Figma 배너 내보내기에 스크롤 가능한 고지 문구(자동 스크롤 포함)를 추가하는 방법을 보여 주는 영상이에요.

긴 법적 고지, 안전 관련 문구, PI 콘텐츠를 좁은 영역에서도 읽을 수 있게 해야 한다면, Bannerify는 잘린 텍스트 레이어를 네이티브 스크롤 HTML 텍스트로 내보내고 GIF/동영상 출력에는 자동으로 스크롤되는 텍스트를 렌더링할 수 있어요.

인라인 스크롤 텍스트 대신 닫을 수 있는 오버레이가 필요하다면 팝업 오버레이 추가를 참고하세요.

1단계. Figma에서 잘린 텍스트 레이어 만들기 ​

텍스트 상자 크기가 고정된 텍스트 레이어를 만들고, 자동으로 커지는 대신 Truncate로 설정되어 있는지 확인하세요.

HTML 내보내기에서는 보이는 텍스트 상자 크기가 스크롤 컨테이너가 되고, 전체 텍스트 내용은 그 안에 그대로 유지돼요. GIF/동영상 내보내기에서는 같은 텍스트 상자가 렌더링된 자동 스크롤 움직임을 잘라 내요.

2단계. Bannerify에서 스크롤 텍스트 켜기 ​

해당 텍스트 레이어의 레이어 설정을 열고 다음 옵션을 켜세요.

  • Enable scrollable text

이 기능은 잘린 텍스트 레이어에서만 사용할 수 있어요.

3단계. 스크롤 동작 선택 ​

옵션을 켜면 다음 모드 중 하나를 선택하세요.

  • Manual User Scrollable: 타임라인 전체에서 사용자가 직접 스크롤해요.
  • Auto Scroll on Layer Enter: 레이어가 등장할 때 자동 스크롤을 시작해요.
  • Auto Scroll on Banner End: 배너 타임라인이 끝나면 자동 스크롤을 시작해요.

GIF/동영상 내보내기에서도 두 자동 스크롤 모드는 HTML 내보내기와 같은 스크롤 속도를 사용해요. 스크롤에 원래 배너 타임라인보다 더 많은 시간이 필요하면, 텍스트가 그 속도로 끝까지 스크롤될 수 있도록 내보낸 파일이 길어져요.

  • 재생 횟수가 정해져 있으면 Auto Scroll on Banner End는 마지막 재생에서만 실행돼요.
  • 배너가 무한 반복으로 설정되어 있으면 Auto Scroll on Banner End는 건너뛰어요.

4단계. 내보내기 참고 사항 확인 ​

  • HTML 출력에서는 수동 모드가 계속 사용자 스크롤로 작동해요. 두 자동 모드에서는 휠, 터치, 스크롤바 입력이 들어오면 자동 움직임이 현재 위치에서 멈추고, 사용자가 이어서 직접 스크롤할 수 있어요.
  • GIF/동영상 출력에서는 자동 스크롤 모드가 내보낸 프레임에 렌더링돼요. 내보낸 파일은 상호작용할 수 없으므로 수동 모드는 정지된 상태로 남아요.
  • 브라우저/기기의 기본 스크롤바 스타일이 사용돼요.
  • 해당 레이어에 이미지 형식 재정의가 적용되어 있으면 그 레이어의 스크롤 텍스트는 꺼져요.

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

잘린 스크롤 텍스트 레이어나 팝업 오버레이 텍스트의 스크롤바 스타일을 바꾸고 싶다면, 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가 적용돼요.

스크롤 텍스트는 잘린 텍스트 레이어 전용으로 설계됐어요. 레이어가 잘린 상태가 아니라면 일반 텍스트/이미지 방식으로 내보내야 해요.