본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

텍스트 스타일 브레이크포인트란?

웹사이트를 다양한 기기에서 볼 수 있게 만들려면, 텍스트 크기와 간격도 화면 크기에 따라 조절되어야 합니다. Framer에서는 이걸 아주 간단하게 설정할 수 있는 기능을 제공합니다. 바로 Text Style Breakpoints입니다.

텍스트 스타일 브레이크포인트 만드는 법

1. 왼쪽의 Assets 탭을 열고 Styles 섹션으로 이동

2. 원하는 텍스트 스타일(예: H1, Body M 등)을 선택

3. Edit Style 모달 아래쪽 Breakpoints 항목에서 Add Breakpoints 버튼을 클릭

기본으로 제공되는 세 가지 브레이크포인트

• Desktop (L) Min width: 1200

• Tablet (M) Min width: 810

• Mobile (S)

브레이크포인트의 속성

• Font Size (폰트 크기)

• Line Height (줄 간격)

• Letter Spacing (자간)

• Paragraph Spacing (단락 간격)

Note: 브레이크포인트별로 속성을 조정 가능하기 때문에, 데스크톱에서는 H1 크기를 56px로 하고, 모바일에서는 32px로 줄이는 식의 설정이 가능합니다.

왜 이 기능이 중요할까요?

디자인에서 가장 자주 쓰는 요소는 텍스트입니다. 텍스트가 화면 크기에 따라 가독성이 떨어지거나, 너무 커서 레이아웃이 무너지는 경우도 많기 때문에 화면 사이즈에 적합한 브레이크포인트를 설정하는 것이 중요합니다.

브레이크포인트 설정의 장점

• 반응형 UI에 맞게 글자 크기를 자동 조절 가능

• 디자이너가 미리 설계한 스타일을 일관되게 유지

본 글은 Framer 공식 문서 ‘Setting Text Styles breakpoints’를 번역·각색한 콘텐츠입니다.