---
url: "/ko/bannerify/animation/split-text.md"
description: "Bannerify에서 텍스트를 글자, 단어, 줄 단위로 애니메이션하세요. 현재 설정 단계, 지원되는 레이어 규칙, 내보내기 주의 사항을 안내해요."
---

# Split Text 애니메이션

> Bannerify에서 텍스트를 글자, 단어, 줄 단위로 애니메이션하세요. 현재 설정 단계, 지원되는 레이어 규칙, 내보내기 주의 사항을 안내해요.

### 영상 튜토리얼: Figma 배너에 Split Text 애니메이션 추가하기

Bannerify 플러그인으로 Figma 배너에 Split Text 애니메이션(글자, 단어, 줄 단위)을 추가하는 방법을 보여 주는 영상 튜토리얼이에요(영어).
[Embedded media](https://www.youtube-nocookie.com/embed/NrzaotL5IMw)

[Video](/assets/videos/bannerify/animation/bannerify-split-text.mp4)

## Split Text 애니메이션 사용하기 {#using-split-text-animations}

Bannerify에는 텍스트 레이어용 **Split Text** 애니메이션 전용 세트가 있어요. 레이어 전체를 한 덩어리로 움직이는 대신 텍스트를 **글자**, **단어**, **줄** 단위로 애니메이션할 수 있어요.

적용하는 방법은 다음과 같아요.

1. 배너에 일반 Figma **텍스트 레이어**를 추가하세요.
2. 레이어를 Bannerify 타임라인에 불러오세요.
3. 해당 텍스트 레이어의 **등장** 또는 **퇴장** 애니메이션 선택 상자를 클릭하세요.
4. **Split Text (GSAP Only)** 그룹을 여세요.
5. 원하는 Split Text 애니메이션을 고르세요.
6. Bannerify에서 결과를 미리 보고, 필요하면 타이밍을 조정하세요.

> **Tip:** Bannerify 전용 Split Text 런타임을 쓰려면 가장 깔끔한 최종 결과물을 얻을 수 있는 [HTML / GSAP 내보내기](/ko/bannerify/export/html)를 사용하세요.

## 등장과 퇴장 짝짓기 {#entry-and-exit-pairing}

Split Text는 **등장 애니메이션**, **퇴장 애니메이션**, 또는 둘 다에 사용할 수 있어요.

- 등장과 퇴장 Split Text 애니메이션은 선택 목록에서 같은 순서로 나열되어 짝을 맞추기 쉬워요.
- 퇴장 레이블은 가능한 한 등장과 대칭을 이뤄요. 예를 들어 **Type On / Type Off**, **Rise / Fall**, **Reveal / Conceal**처럼요.
- 최상의 결과를 얻으려면 퇴장 애니메이션이 등장 애니메이션이 끝난 **뒤에** 시작되게 하세요.

## 지원되는 텍스트 레이어 {#supported-text-layers}

Split Text는 선택한 레이어를 리치 HTML 텍스트로 안전하게 준비할 수 있을 때만 사용할 수 있어요.

텍스트 레이어는 다음 조건을 갖춰야 해요.

- 일반 **텍스트 레이어**일 것
- **웹 안전 폰트**, **Google Font**, 또는 Bannerify 사용자 지정 폰트 패널에 **.woff** / **.woff2** 직접 URL을 추가한 사용자 지정 폰트를 사용할 것
- 인라인 텍스트 링크가 없을 것
- 목록 서식이 없을 것
- 텍스트 서식 재정의가 없을 것
- Bannerify의 스크롤 텍스트 모드를 사용하지 않을 것

지원되는 레이어를 나중에 지원되지 않는 폰트나 텍스트 설정으로 바꾸면, Bannerify는 선택한 Split Text 애니메이션을 레이어에 그대로 두지만 레이어가 다시 조건을 갖출 때까지 사용할 수 없음으로 표시해요.

## 사용자 지정 폰트 URL {#custom-font-urls}

텍스트 레이어에 웹 안전 폰트나 Google Font로 제공되지 않는 사용자 지정 브랜드 폰트를 쓴다면, Bannerify 사용자 지정 폰트 패널에 **.woff** 또는 **.woff2** 폰트 파일의 직접 URL을 추가하세요.

URL은 `https://example.com/fonts/client-font.woff2`처럼 폰트 파일 자체를 직접 가리켜야 해요. 일반 폰트 페이지, 다운로드 페이지, CSS 파일, ZIP 파일은 이 필드에서 작동하지 않아요.

Bannerify는 Split Text 레이어에 쓰인 사용자 지정 폰트 스타일을 감지해 스타일마다 한 번씩만 나열해요. 그래서 모든 텍스트 레이어에 같은 URL을 넣을 필요 없이 폰트 스타일별로 URL을 붙여 넣으면 돼요.

사용자 지정 폰트 패널을 여는 방법은 다음과 같아요.

1. 사용자 지정 폰트를 쓰는 텍스트 레이어에 Split Text 애니메이션을 적용하세요.
2. 배너 미리보기 아래 경고에서 **Configure Fonts**를 클릭하거나, 타임라인에서 텍스트 레이어에 마우스를 올리고 **Fonts**를 클릭하세요.
3. 나열된 폰트 스타일마다 **.woff** 또는 **.woff2** 직접 URL을 붙여 넣으세요.
4. **Done**을 클릭한 다음 다시 미리 보거나 내보내세요.

Bannerify는 이 폰트 URL을 사용해 Split Text 미리보기, canvas/동영상 내보내기, HTML / GSAP 내보내기를 렌더링해요. HTML / GSAP 내보내기에는 일치하는 `@font-face` 규칙도 자동으로 추가해요.

폰트 URL을 추가하기 전에도 사용자 지정 폰트 레이어에 Split Text 애니메이션을 선택할 수 있어요. 유효한 **.woff** 또는 **.woff2** URL을 추가할 때까지 Bannerify가 배너 미리보기 아래에 경고를 표시해요.

> **Note:** 이전에 텍스트 레이어에 사용자 지정 Split Text 폰트 URL을 직접 추가했다면, 새 사용자 지정 폰트 패널을 열 때 Bannerify가 저장된 URL을 패널로 자동으로 옮겨요.

## Split Text를 사용할 수 없는 경우 {#when-split-text-is-unavailable}

다음 중 하나에 해당하는 레이어에서는 Bannerify가 Split Text를 막아요.

- 선택한 레이어가 텍스트 레이어가 아닌 경우
- 레이어에 **서식 재정의**가 있는 경우
- 해당 레이어에 **Scrollable Text**가 켜져 있는 경우
- 텍스트에 **인라인 링크**가 있는 경우
- 텍스트가 **목록** 서식으로 되어 있는 경우
- Bannerify가 Split Text 미리보기용으로 텍스트 레이어를 준비할 수 없는 경우

이럴 때 Bannerify는 애니메이션을 조용히 적용하는 대신 플러그인 UI에 바로 이유를 표시해요.

유일한 문제가 유효한 **.woff** / **.woff2** URL이 없는 사용자 지정 폰트라면, Bannerify는 옵션을 숨기지 않고 Split Text 애니메이션을 선택할 수 있게 한 뒤 경고를 표시해요.

## 일괄 적용, 붙여 넣기, 숫자 키패드 단축키 {#bulk-apply-paste-and-numpad-shortcuts}

여러 레이어에 한 번에 적용할 때 Split Text에는 일반 애니메이션보다 엄격한 규칙이 적용돼요.

- 선택한 모든 레이어가 **텍스트 레이어**여야 해요
- 선택한 모든 텍스트 레이어가 이미 Split Text를 쓸 **조건을 갖췄거나**, 사용자 지정 **.woff** / **.woff2** 폰트 URL만 필요한 상태여야 해요

이 규칙은 다음 작업에 적용돼요.

- **일괄 적용**
- **애니메이션 복사 / 붙여 넣기**
- **숫자 키패드 단축키 적용** 작업

선택한 레이어 중 하나라도 지원되지 않으면 Bannerify는 해당 Split Text 작업을 막고 경고를 표시해요.

## 미리보기 및 내보내기 참고 사항 {#preview-and-export-notes}

HTML / GSAP 내보내기는 Bannerify 전용 Split Text 런타임을 사용하기 때문에 Bannerify는 이 그룹에 **Split Text (GSAP Only)** 레이블을 붙여요.

현재 버전에서는 다음과 같아요.

- Bannerify 미리보기에서 Split Text를 지원해요
- 현재 canvas로 렌더링하는 내보내기 방식에서도 Split Text를 렌더링할 수 있어요
- 텍스트 기반 Split Text 애니메이션을 가장 충실하게 출력하려면 여전히 HTML / GSAP 내보내기가 가장 좋은 선택이에요

## 최상의 결과를 위한 팁 {#best-results}

- Split Text는 짧은 헤드라인, 강조 문구, 간결한 카피에 주로 사용하세요.
- 줄 단위 Split Text 애니메이션은 렌더링된 텍스트 레이아웃을 따르므로 의도한 줄바꿈을 염두에 두세요.
- 내보내기 전에 최종 배너 크기에서 애니메이션을 미리 보세요.