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

텍스트 스타일이란?

텍스트 스타일은 폰트, 크기, 색상 등 텍스트의 시각적 속성을 미리 정의해서 재사용할 수 있는 기능입니다.
한 번 스타일을 만들어 두면 사이트 전체에서 동일하게 적용할 수 있습니다.

텍스트 스타일의 장점

• 수정이 필요할 때 한 곳만 바꾸면 전체에 반영 가능

• 디자인 시스템을 일관되게 유지

텍스트 스타일 적용하기

적용 방법

1. 텍스트 요소 또는 일부 텍스트 선택

2. 우측 속성 패널에서 Text → Styles 클릭

3. 원하는 스타일 선택

스타일 제거

속성 패널에서 적용된 스타일 옆의 × 버튼을 클릭

텍스트 스타일 브레이크포인트 추가하기

다양한 화면 사이즈에서 텍스트가 자연스럽게 보이도록, 브레이크포인트를 설정할 수 있습니다.

설정 방법

1. Assets → Styles에서 원하는 텍스트 스타일 클릭

2. Edit Style 모달이 열리면 Breakpoints 항목에서 Add Breakpoint 클릭

3. 기본 제공: Desktop (L), Tablet (M), Mobile (S)

4. 각 기기별로 폰트 크기, 줄 간격, 자간, 단락 간격을 개별 설정

텍스트 스타일 관리하기

• 왼쪽 패널 Assets → Styles에서 프로젝트 상황에 맞게 스타일을 생성, 수정, 삭제할 수 있습니다.

• 하나의 텍스트 박스에서 여러 스타일을 적용하고 싶다면 Markdown을 활용하세요.

리치 스타일드 텍스트(Markdown 활용)

하나의 텍스트 블록 안에서 여러 스타일을 혼합 적용하고 싶을 때는 Markdown 형식을 사용할 수 있습니다.
(예시: 문장 중 특정 단어만 Strong 또는 Highlight로 강조)

적용 방법

1. 특정 텍스트 드래그 선택

2. 오른쪽 속성 패널에서 개별 스타일 적용 (예시: 한 문장 안에서 특정 단어만 Bold로 강조)

CMS 텍스트에도 스타일 적용하기

CMS에서 입력된 텍스트에도 동일하게 텍스트 스타일을 적용할 수 있습니다.
CMS 텍스트 요소 선택 → 속성 패널에서 텍스트 스타일 지정을 하면 블로그, 뉴스, 상품 설명 등 콘텐츠 중심 사이트에서도 스타일 일관성을 유지할 수 있습니다.

링크 텍스트 스타일링

링크 텍스트는 기본, Hover, Active, Current 상태별로 각각 스타일을 지정할 수 있습니다.

1. 텍스트 요소 선택 후 Link 항목 클릭

2. 링크 스타일 속성 지정 (예: 색상, 밑줄 등)

3. 각 상태별로 다른 색상이나 효과 설정 가능

특정 텍스트 색상만 오버라이드하는 방법

전체 텍스트에 스타일을 적용한 뒤에도, 일부만 색상을 바꾸고 싶을 때에는 색상을 바꿀 단어나 문장을 드래그하고 속성 패널에서 Color만 따로 설정 (새 스타일을 만들지 않고도, 세부 강조가 가능하다는 점이 장점) 하면 됩니다.

본 글은 Framer 공식 문서 ‘Using text styles’를 번역·각색한 콘텐츠입니다.