프레이머로 만드는 반응형 텍스트 비밀 공개! 쉽게 따라하기

Framer에서 텍스트 반응형 설정, 이제 더 쉽게 하자!

이전에는 웹사이트에서 텍스트 크기를 화면 크기별로(데스크톱, 태블릿, 모바일) 하나하나 직접 설정해야 했어. 그런데 이제 Framer에서 훨씬 쉬운 방법이 나왔다고 해!

이전 방식의 문제점

1. 번거로움: 각 텍스트 스타일에 대해 데스크톱, 태블릿, 모바일 크기를 따로따로 설정해야 했어. 텍스트 스타일이 많으면 정말 귀찮은 일이지.
2. 일관성 문제: 화면 크기(breakpoint)를 변경해도 텍스트 스타일 설정에 바로 반영되지 않는 경우가 있었어. 텍스트 스타일 설정은 특정 '최소 너비' 값에 연결되어 있어서, 실제 화면 크기와 다르게 작동할 수 있었지.
3. 스타일 강요: 이 반응형 설정은 텍스트 스타일에만 적용되었어. 그래서 텍스트 효과를 위해 특별한 컴포넌트를 사용해야 할 때는 텍스트 스타일을 적용할 수 없어서 반응형 설정을 못 하는 경우도 있었지.
4. 전체 크기 조절 어려움: 모든 텍스트 크기를 한 번에 키우거나 줄이고 싶을 때, 각 텍스트 스타일마다 일일이 값을 바꿔야 해서 불편했어.

새로운 방식: REM 단위 활용!

이제 Framer에서는 REM 단위를 사용해서 텍스트 반응형을 훨씬 쉽게 설정할 수 있어.

1. 기본 글꼴 크기 설정 (Base Font Size):

   • 각 화면 크기(breakpoint)별로 기본 글꼴 크기를 설정할 수 있어. 이걸 '루트 글꼴 크기'라고도 불러.
   • 이 기본 글꼴 크기는 레이아웃 템플릿에 설정하는 게 좋아. 그래야 모든 페이지에 일관되게 적용되거든.

2. REM 단위 사용:

   • 텍스트 크기를 설정할 때 '픽셀(px)' 대신 'REM'으로 바꿔봐.
   • REM은 설정한 기본 글꼴 크기에 비례해서 크기가 결정돼. 예를 들어, 기본 글꼴 크기가 20px이고 텍스트 크기를 3REM으로 설정하면, 실제 텍스트 크기는 60px이 되는 거지.

3. 마법 같은 반응형:

   • 이제 각 화면 크기별 기본 글꼴 크기만 바꿔주면, REM 단위로 설정된 모든 텍스트 크기가 자동으로 함께 커지거나 작아져!
   • 이전처럼 각 텍스트 스타일마다 일일이 값을 수정할 필요가 없어졌어.

REM 단위 사용의 장점

• 시간 절약: 텍스트 크기 조절이 훨씬 빨라지고 쉬워져.
• 유지보수 용이: 한 번 설정해두면 나중에 수정하기도 편해.
• 유연성: 컴포넌트 등 텍스트 스타일을 적용할 수 없는 경우에도 REM 단위를 사용하면 반응형으로 만들 수 있어.

처음에는 REM 단위가 익숙하지 않아서 조금 헷갈릴 수도 있지만, 익숙해지면 훨씬 효율적으로 웹사이트를 만들 수 있을 거야!