Figma Text wrap, Balance와 Pretty를 고르는 6가지 기준

반응형 화면을 설계할 때 글자 크기만큼 자주 놓치는 것이 줄바꿈입니다. 같은 제목이라도 카드 폭이 조금만 달라지면 마지막 줄에 단어 하나가 남거나 첫 줄과 둘째 줄의 길이가 크게 벌어져 화면이 불안정해 보일 수 있습니다. 디자이너가 줄바꿈 위치를 직접 고정하면 한 화면에서는 보기 좋지만 다른 화면 크기나 번역 문구에서는 쉽게 깨집니다.
 

Figma는 2026년 8월 14일 Text wrap에 Balance와 Pretty 옵션을 추가했습니다. Balance는 여러 줄의 길이를 비교적 고르게 나누고, Pretty는 긴 문단의 마지막 줄에 단어 하나만 외롭게 남는 현상을 줄이는 방향으로 작동합니다. Dev Mode에서는 각각 text-wrap: balance와 text-wrap: pretty로 표시되어 디자인 의도와 구현 언어를 가깝게 연결하지만, Figma와 실제 브라우저의 줄바꿈 결과가 항상 같지는 않습니다. 이 글에서는 공식 자료를 기준으로 어떤 텍스트에 어떤 값을 써야 하는지 정리합니다.

 

아래는 이 글에서 다루는 6가지 선택 기준입니다.

• 한 줄이거나 아주 짧은 문구는 Auto를 유지합니다. 줄바꿈이 없으면 다른 옵션의 효과가 없습니다.
• 두세 줄 제목과 히어로 문구는 Balance로 줄 길이를 고르게 맞춥니다.
• 버튼·배지·짧은 툴팁도 형태가 중요하므로 Balance를 먼저 시험합니다.
• 여러 줄 본문과 설명은 Pretty로 마지막 줄에 남는 단어를 줄입니다.
• 여섯 줄을 넘는 긴 글에는 Balance를 쓰지 않고 Pretty나 Auto를 씁니다.
• 구현 결과가 중요한 화면은 실제 브라우저에서 다시 검수합니다.

 

Figma 공식 X 발표 영상 프레임 · 확인일 2026-08-19

 

Text wrap 업데이트에서 달라진 점

Auto 외에 두 가지 줄바꿈 의도가 생겼습니다

기존 기본값인 Auto는 한 줄에 들어갈 수 있는 단어를 가능한 만큼 채운 뒤 다음 줄로 넘깁니다. 빠르고 익숙한 방식이지만, 줄마다 길이가 크게 달라지거나 마지막 줄에 매우 짧은 문구가 남을 수 있습니다.
 
Balance는 모든 줄의 길이가 비슷해지도록 단어 배치를 조정합니다. Figma는 제목, 버튼, 배지, 툴팁처럼 텍스트 덩어리의 모양이 중요한 짧은 문구에 적합하다고 설명합니다. Pretty는 각 줄을 충분히 채우면서 마지막 네 줄을 조정해, 마지막 줄에 단어 하나만 남는 오펀을 피하는 데 초점을 둡니다. 설명문과 본문처럼 긴 텍스트에 더 어울립니다.
 

레이어·문단·스타일 세 수준에 적용할 수 있습니다

한 텍스트 레이어 전체에 같은 줄바꿈 규칙을 적용할 수 있고, 특정 문단만 다른 규칙으로 바꿀 수도 있습니다. 디자인 시스템을 운영한다면 텍스트 스타일에 값을 넣어 같은 스타일을 쓰는 여러 화면에 일관되게 적용할 수 있고, 이것이 파일 전체에 한 번에 적용하는 가장 빠른 방법입니다.
 
공식 도움말은 display와 headline 스타일에는 Balance, body 스타일에는 Pretty를 지정하는 방식을 빠른 적용 예로 듭니다. 다만 이 조합을 모든 서비스의 정답으로 보기는 어렵습니다. 실제 문구 길이, 한국어 조사, 영문 단어 길이, 카드 폭을 함께 확인해야 합니다.
 
 

Balance와 Pretty, 언제 무엇을 쓰나

Balance는 짧은 제목의 모양을 정리합니다

두 줄 제목의 첫 줄이 너무 길고 둘째 줄이 너무 짧으면 카드 전체가 한쪽으로 치우쳐 보입니다. Balance는 각 줄에 남는 공간의 차이를 줄여 텍스트 덩어리를 안정적으로 보이게 합니다. 카드 제목, 히어로 문구, 짧은 안내, 버튼 옆 보조 문구처럼 전체 실루엣이 중요한 곳에서 먼저 시험할 수 있습니다.
 
예를 들어 "새로운 디자인 시스템을 팀 전체에 적용하는 방법"이라는 제목이 좁은 카드에서 세 줄로 나뉜다고 가정해보겠습니다. Auto는 앞줄을 최대한 채우지만 Balance는 단어를 앞뒤 줄로 옮겨 세 줄의 길이를 더 가깝게 만들 수 있습니다. 사용자가 읽는 단어와 순서는 그대로이고, 줄이 끊기는 위치만 달라집니다.
 
다만 Figma 공식 도움말은 Balance를 여섯 줄보다 긴 텍스트 블록에는 권장하지 않습니다. 긴 문단의 모든 줄을 비슷하게 맞추면 문장 흐름이 인위적으로 보이고 화면 폭이 바뀔 때 줄 이동이 커질 수 있습니다. 짧은 제목이라도 한 줄, 두 줄, 세 줄 상태를 모두 확인하고, 문구가 자주 바뀌는 컴포넌트라면 가장 짧은 사례와 가장 긴 사례를 함께 테스트해야 합니다.
 

Pretty는 긴 설명문의 마지막 줄을 다듬습니다

긴 문단의 마지막 줄에 "합니다"나 짧은 단어 하나만 남으면 시선이 불필요하게 아래로 끌리고 카드 높이도 한 줄만큼 늘어날 수 있습니다. Pretty는 줄 전체를 균등하게 만들기보다 마지막 부분의 줄바꿈을 조정해 이런 상황을 줄이는 방향입니다.
 
제품 설명, 온보딩 안내, 도움말, 긴 캡션처럼 여러 줄을 자연스럽게 읽어야 하는 텍스트가 우선 대상입니다. 본문 읽기 흐름을 유지하면서 마지막 줄이 지나치게 짧아지는 문제를 완화합니다.
 
Pretty를 적용하면 일부 폭에서 줄 수가 달라질 수 있습니다. 줄 수가 바뀌면 카드 높이, 버튼 위치, 목록 정렬에도 영향을 주므로 텍스트만 보지 말고 부모 프레임까지 확인해야 합니다. 특히 동일 높이 카드가 반복되는 목록에서는 가장 긴 설명문을 기준으로 테스트하고, 줄 수 제한과 말줄임을 함께 쓴다면 핵심 정보가 말줄임 뒤로 밀리지 않는지 살펴야 합니다.
 

Figma Help Center 공식 GIF · 확인일 2026-08-19

 

Auto width와 반응형 폭을 먼저 확인합니다

Figma 공식 도움말에 따르면 Wrap style은 두 줄 이상으로 실제 줄바꿈이 일어나는 텍스트에만 영향을 줍니다. Text resizing이 Auto width이면 사용자가 Enter나 Return을 누르기 전까지 텍스트 상자가 가로로 늘어나므로 자동 줄바꿈이 생기지 않습니다.
 
따라서 Balance나 Pretty를 선택했는데 화면이 바뀌지 않는다면 기능 오류로 판단하기 전에 텍스트 레이어의 리사이징 설정과 가로 폭을 먼저 확인해야 합니다. Auto height나 고정 폭처럼 줄바꿈이 가능한 상태에서 여러 화면 너비를 시험하는 것이 기본입니다.
 
반응형 컴포넌트는 한 가지 폭만 사용하지 않습니다. 모바일 카드의 최소 폭, 태블릿의 중간 폭, 데스크톱의 최대 폭에서 제목과 본문이 각각 몇 줄이 되는지 비교해야 합니다. 다음 세 경우를 테스트하면 문제를 빠르게 찾을 수 있습니다.

• 가장 짧은 실제 문구가 한 줄로 유지되는지 확인합니다.
• 평균 길이 문구가 두세 줄에서 자연스럽게 끊기는지 확인합니다.
• 가장 긴 문구가 말줄임·카드 높이·다음 요소를 깨뜨리지 않는지 확인합니다.

 
 

한국어와 영문은 결과가 다를 수 있습니다

영문은 공백 단위의 단어 길이 차이가 크고, 한국어는 조사와 어미가 문장 끝 모양에 영향을 줍니다. 같은 Balance 설정이라도 영어 제목에서는 긴 고유명사가 한 줄을 크게 차지하고, 한국어에서는 짧은 어절이 다른 줄로 이동할 수 있습니다.
 
번역 서비스라면 한 언어의 화면만 보고 텍스트 스타일을 확정하지 않습니다. 한국어, 영어, 숫자와 영문이 섞인 문구, 긴 제품명이 들어간 문구를 각각 테스트해야 합니다. 줄바꿈 결과는 글꼴, 글자 크기, 자간, 텍스트 상자 폭에도 영향을 받습니다.
 
줄 길이가 균형을 이뤄도 의미가 어색하게 나뉠 수 있습니다. 가격과 단위, 날짜와 시간, 숫자와 퍼센트, 제품명과 버전처럼 함께 읽어야 하는 요소가 다른 줄로 갈라지면 이해가 늦어집니다.
 
Balance와 Pretty는 줄 위치를 계산하는 도구이지 문장의 의미를 판단하는 편집자는 아닙니다. 핵심 CTA, 법적 안내, 오류 메시지처럼 오해 비용이 큰 문구는 사람이 직접 읽고 의미 단위를 조정해야 합니다.
 
 

Dev Mode와 실제 브라우저 구현은 따로 검증합니다

Figma는 Balance가 적용된 레이어를 Dev Mode에서 text-wrap: balance;, Pretty가 적용된 레이어를 text-wrap: pretty;로 표시합니다. Auto는 브라우저 기본 동작을 사용하므로 별도 속성이 추가되지 않습니다.

 
이 표기는 디자이너의 줄바꿈 의도를 개발자에게 구체적으로 전달하는 데 도움이 됩니다. "두 줄을 비슷하게 맞춰주세요"라는 주관적 요청 대신, 어떤 텍스트 스타일에 어떤 CSS 성격을 기대하는지 분명히 전달할 수 있습니다.
 
다만 Figma 공식 도움말은 브라우저 지원 수준이 다르고 브라우저가 줄바꿈을 계산하는 방식도 Figma와 다를 수 있다고 명시합니다. W3C CSS Text Module Level 4 역시 세부 알고리즘을 사용자 에이전트가 정할 수 있는 부분으로 설명합니다.
 
그래서 Dev Mode의 속성을 복사한 것만으로 구현 검수가 끝나지 않습니다. 지원 대상 브라우저와 실제 폰트가 로드된 화면에서 최소·중간·최대 폭을 확인하고, 디자인과 다른 줄바꿈이 있으면 허용 범위나 예외 규칙을 합의해야 합니다.
 
 

실무에서 적용하는 6가지 기준

앞의 6가지 선택 기준을 실제 화면에 적용할 때는 한 번의 선택보다 반복 검수가 중요합니다.
 

반복 검수 순서로 확인합니다

아래 순서로 최소·중간·최대 폭을 오가며 확인하면 문제를 빠르게 찾을 수 있습니다.

1. 텍스트 레이어가 실제로 줄바꿈 가능한 폭인지 확인합니다.
2. 제목은 Balance, 본문은 Pretty를 후보로 적용합니다.
3. 최소·중간·최대 컴포넌트 폭을 비교합니다.
4. 한국어와 영문, 긴 고유명사 사례를 넣어봅니다.
5. 말줄임·최대 줄 수·카드 높이가 깨지지 않는지 확인합니다.
6. Dev Mode 속성과 실제 브라우저 결과를 함께 검수합니다.

 

자체 제작 · 반응형 타이포그래피 적용 전 확인할 문구·폭·언어·구현 기준 6가지 · 확인일 2026-08-17

 

핵심 정리

Balance는 제목, 배지, 툴팁처럼 짧고 형태가 중요한 텍스트의 줄 길이를 고르게 만드는 데 적합합니다. Pretty는 본문과 설명처럼 긴 텍스트에서 마지막 줄에 단어 하나가 남는 상황을 줄이는 데 적합하며, Auto는 기존의 빠르고 일반적인 줄바꿈을 유지합니다.
 
Wrap style은 Auto width처럼 자동 줄바꿈이 없는 레이어에는 효과가 없고, Figma와 브라우저의 계산이 다를 수 있습니다. 그래서 텍스트 스타일을 지정한 뒤에는 실제 문구, 언어, 화면 폭, 브라우저에서 결과를 다시 확인해야 합니다. 좋은 줄바꿈은 옵션 하나가 아니라 문구, 폭, 글꼴, 구현을 함께 검수할 때 완성됩니다.
 
 

FAQ

Balance와 Pretty 중 무엇을 기본값으로 써야 하나요?

전체 파일에 하나를 기본값으로 정하기보다 텍스트 역할에 따라 나누는 편이 좋습니다. 짧은 제목과 배지는 Balance, 긴 본문과 설명은 Pretty를 후보로 삼고 실제 문구와 화면 폭에서 확인하세요.
 

Balance를 적용했는데 아무 변화가 없는 이유는 무엇인가요?

한 줄 텍스트이거나 Text resizing이 Auto width일 가능성이 큽니다. Wrap style은 두 줄 이상으로 자동 줄바꿈이 일어나는 텍스트 상자에서 효과가 나타납니다.
 

Dev Mode의 CSS를 그대로 적용하면 디자인과 같아지나요?

항상 같지는 않습니다. Figma는 브라우저 지원과 줄바꿈 계산 차이 때문에 최종 구현의 줄 위치가 디자인과 다를 수 있다고 안내합니다. 지원 브라우저와 실제 폰트 환경에서 다시 검수해야 합니다.
 

기존 텍스트 레이어도 자동으로 바뀌나요?

Text wrap 옵션은 사용자가 텍스트 레이어, 문단 또는 텍스트 스타일에 선택해 적용합니다. 기존 화면은 영향 범위를 확인한 뒤 컴포넌트와 스타일 단위로 점진적으로 적용하는 편이 안전합니다.
 

---

 

공식 출처

- Figma Release Notes, Text wrap 업데이트: https://www.figma.com/release-notes/
 
- Figma Help Center, Explore text properties: https://help.figma.com/hc/en-us/articles/360039956634-Explore-text-properties
 
- W3C, CSS Text Module Level 4: https://www.w3.org/TR/css-text-4/