영상 튜토리얼: Figma 배너에 Split Text 애니메이션 추가하기
Bannerify 플러그인으로 Figma 배너에 Split Text 애니메이션(글자, 단어, 줄 단위)을 추가하는 방법을 보여 주는 영상 튜토리얼이에요(영어).
Split Text 애니메이션 사용하기
Bannerify에는 텍스트 레이어용 Split Text 애니메이션 전용 세트가 있어요. 레이어 전체를 한 덩어리로 움직이는 대신 텍스트를 글자, 단어, 줄 단위로 애니메이션할 수 있어요.
적용하는 방법은 다음과 같아요.
- 배너에 일반 Figma 텍스트 레이어를 추가하세요.
- 레이어를 Bannerify 타임라인에 불러오세요.
- 해당 텍스트 레이어의 등장 또는 퇴장 애니메이션 선택 상자를 클릭하세요.
- Split Text (GSAP Only) 그룹을 여세요.
- 원하는 Split Text 애니메이션을 고르세요.
- Bannerify에서 결과를 미리 보고, 필요하면 타이밍을 조정하세요.
Bannerify 전용 Split Text 런타임을 쓰려면 가장 깔끔한 최종 결과물을 얻을 수 있는 HTML / GSAP 내보내기를 사용하세요.
등장과 퇴장 짝짓기
Split Text는 등장 애니메이션, 퇴장 애니메이션, 또는 둘 다에 사용할 수 있어요.
- 등장과 퇴장 Split Text 애니메이션은 선택 목록에서 같은 순서로 나열되어 짝을 맞추기 쉬워요.
- 퇴장 레이블은 가능한 한 등장과 대칭을 이뤄요. 예를 들어 Type On / Type Off, Rise / Fall, Reveal / Conceal처럼요.
- 최상의 결과를 얻으려면 퇴장 애니메이션이 등장 애니메이션이 끝난 뒤에 시작되게 하세요.
지원되는 텍스트 레이어
Split Text는 선택한 레이어를 리치 HTML 텍스트로 안전하게 준비할 수 있을 때만 사용할 수 있어요.
텍스트 레이어는 다음 조건을 갖춰야 해요.
- 일반 텍스트 레이어일 것
- 웹 안전 폰트, Google Font, 또는 Bannerify 사용자 지정 폰트 패널에 .woff / .woff2 직접 URL을 추가한 사용자 지정 폰트를 사용할 것
- 인라인 텍스트 링크가 없을 것
- 목록 서식이 없을 것
- 텍스트 서식 재정의가 없을 것
- Bannerify의 스크롤 텍스트 모드를 사용하지 않을 것
지원되는 레이어를 나중에 지원되지 않는 폰트나 텍스트 설정으로 바꾸면, Bannerify는 선택한 Split Text 애니메이션을 레이어에 그대로 두지만 레이어가 다시 조건을 갖출 때까지 사용할 수 없음으로 표시해요.
사용자 지정 폰트 URL
텍스트 레이어에 웹 안전 폰트나 Google Font로 제공되지 않는 사용자 지정 브랜드 폰트를 쓴다면, Bannerify 사용자 지정 폰트 패널에 .woff 또는 .woff2 폰트 파일의 직접 URL을 추가하세요.
URL은 https://example.com/fonts/client-font.woff2처럼 폰트 파일 자체를 직접 가리켜야 해요. 일반 폰트 페이지, 다운로드 페이지, CSS 파일, ZIP 파일은 이 필드에서 작동하지 않아요.
Bannerify는 Split Text 레이어에 쓰인 사용자 지정 폰트 스타일을 감지해 스타일마다 한 번씩만 나열해요. 그래서 모든 텍스트 레이어에 같은 URL을 넣을 필요 없이 폰트 스타일별로 URL을 붙여 넣으면 돼요.
사용자 지정 폰트 패널을 여는 방법은 다음과 같아요.
- 사용자 지정 폰트를 쓰는 텍스트 레이어에 Split Text 애니메이션을 적용하세요.
- 배너 미리보기 아래 경고에서 Configure Fonts를 클릭하거나, 타임라인에서 텍스트 레이어에 마우스를 올리고 Fonts를 클릭하세요.
- 나열된 폰트 스타일마다 .woff 또는 .woff2 직접 URL을 붙여 넣으세요.
- Done을 클릭한 다음 다시 미리 보거나 내보내세요.
Bannerify는 이 폰트 URL을 사용해 Split Text 미리보기, canvas/동영상 내보내기, HTML / GSAP 내보내기를 렌더링해요. HTML / GSAP 내보내기에는 일치하는 @font-face 규칙도 자동으로 추가해요.
폰트 URL을 추가하기 전에도 사용자 지정 폰트 레이어에 Split Text 애니메이션을 선택할 수 있어요. 유효한 .woff 또는 .woff2 URL을 추가할 때까지 Bannerify가 배너 미리보기 아래에 경고를 표시해요.
이전에 텍스트 레이어에 사용자 지정 Split Text 폰트 URL을 직접 추가했다면, 새 사용자 지정 폰트 패널을 열 때 Bannerify가 저장된 URL을 패널로 자동으로 옮겨요.
Split Text를 사용할 수 없는 경우
다음 중 하나에 해당하는 레이어에서는 Bannerify가 Split Text를 막아요.
- 선택한 레이어가 텍스트 레이어가 아닌 경우
- 레이어에 서식 재정의가 있는 경우
- 해당 레이어에 Scrollable Text가 켜져 있는 경우
- 텍스트에 인라인 링크가 있는 경우
- 텍스트가 목록 서식으로 되어 있는 경우
- Bannerify가 Split Text 미리보기용으로 텍스트 레이어를 준비할 수 없는 경우
이럴 때 Bannerify는 애니메이션을 조용히 적용하는 대신 플러그인 UI에 바로 이유를 표시해요.
유일한 문제가 유효한 .woff / .woff2 URL이 없는 사용자 지정 폰트라면, Bannerify는 옵션을 숨기지 않고 Split Text 애니메이션을 선택할 수 있게 한 뒤 경고를 표시해요.
일괄 적용, 붙여 넣기, 숫자 키패드 단축키
여러 레이어에 한 번에 적용할 때 Split Text에는 일반 애니메이션보다 엄격한 규칙이 적용돼요.
- 선택한 모든 레이어가 텍스트 레이어여야 해요
- 선택한 모든 텍스트 레이어가 이미 Split Text를 쓸 조건을 갖췄거나, 사용자 지정 .woff / .woff2 폰트 URL만 필요한 상태여야 해요
이 규칙은 다음 작업에 적용돼요.
- 일괄 적용
- 애니메이션 복사 / 붙여 넣기
- 숫자 키패드 단축키 적용 작업
선택한 레이어 중 하나라도 지원되지 않으면 Bannerify는 해당 Split Text 작업을 막고 경고를 표시해요.
미리보기 및 내보내기 참고 사항
HTML / GSAP 내보내기는 Bannerify 전용 Split Text 런타임을 사용하기 때문에 Bannerify는 이 그룹에 Split Text (GSAP Only) 레이블을 붙여요.
현재 버전에서는 다음과 같아요.
- Bannerify 미리보기에서 Split Text를 지원해요
- 현재 canvas로 렌더링하는 내보내기 방식에서도 Split Text를 렌더링할 수 있어요
- 텍스트 기반 Split Text 애니메이션을 가장 충실하게 출력하려면 여전히 HTML / GSAP 내보내기가 가장 좋은 선택이에요
최상의 결과를 위한 팁
- Split Text는 짧은 헤드라인, 강조 문구, 간결한 카피에 주로 사용하세요.
- 줄 단위 Split Text 애니메이션은 렌더링된 텍스트 레이아웃을 따르므로 의도한 줄바꿈을 염두에 두세요.
- 내보내기 전에 최종 배너 크기에서 애니메이션을 미리 보세요.