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

Framer는 "Fit Text"이라는 새로운 기능을 출시했는데요, 이 기능을 사용하면 어떤 컨테이너에든 맞게 크기가 조절되는 제목을 만들 수 있습니다. 이 기능은 여러개의 라인, 인라인 서식, 최소/최대 너비에 대한 지원을 높은 성능을 유지하며 제공합니다.

도전 과제: 네이티브 CSS 해결책의 부재

처음에는 이미 있는 라이브러리들을 살펴봤지만, 모두 공통된 문제가 있었습니다. 바로 텍스트를 화면에 그리기 전에 크기를 먼저 재야 한다는 점이었죠. 하지만 Framer 사이트는 정적으로 만들어져서, JavaScript가 실행되기 전에도 모든 브라우저에서 제대로 보이는 상태여야 합니다. 그래서 이 방식은 사용할 수 없었습니다.

그다음으로 font-size: 100vw라는 CSS 속성을 써봤습니다. 이 방법은 텍스트가 화면 전체를 채울 때는 잘 작동합니다. 하지만 텍스트를 특정 박스(컨테이너) 안에 딱 맞추려면 상황이 달라집니다. 해당 경우에는 위쪽 부모 요소들의 크기를 전부 계산해서 % 단위로 나누고, 이를 calc() 같은 복잡한 수식으로 만들어야 합니다. 이론적으로는 가능하지만, 컴포넌트 단위 코드 안에서는 부모 요소 크기를 알 수 없기 때문에 현실적으로는 쓸 수 없는 방법이었습니다.

해결책: SVG + viewBox + foreignObject

다음으로 찾은 방법은 SVG의 viewBox와 foreignObject를 활용하는 것이었습니다. SVG 내부에 텍스트를 foreignObject로 렌더링하면 확대/축소 효과를 줄 수 있고, 접근성이나 SEO에도 문제가 없었습니다.

단, 여기에는 한 가지 조건이 있습니다. 텍스트의 정확한 bounding box를 계산해 viewBox에 반영해야 하고, 텍스트가 바뀔 때마다 이를 계속 동기화해야 한다는 점입니다. 그렇지 않으면 텍스트가 잘리거나 정렬이 틀어집니다. 따라서 일반적인 사용자의 사이트에서는 사실상 불가능한 접근법이었습니다.

자동화: Framer의 접근

Framer는 이 과정을 자동화하여 문제를 해결했습니다. 텍스트를 “Fit”으로 설정하면 Framer가 현재 폰트 크기에서 텍스트 크기를 측정하고 bounding box를 구한 뒤, 그에 맞는 SVG와 viewBox를 생성합니다.

사용자가 텍스트를 편집하면 Framer는 다시 이를 측정해 viewBox를 업데이트합니다. 편집할 때는 viewbox를 픽셀 단위로 다시 환산해 자연스러운 편집 경험을 제공하고, 편집이 끝나면 다시 viewBox에 기반하여 자동적으로 크기를 맞춰줍니다. 이 모든 과정은 캔버스에서의 성능에 영향을 주지 않고 매끄럽게 진행되죠.

결과: 매끄러운 리사이징

사이트를 배포할 때 이미 viewBox 계산이 끝나 있으므로, JavaScript가 로드되기 전에도 텍스트는 정확한 크기로 표시됩니다. 따라서 깜빡임이나 재조정 현상 없이 아주 부드러운 리사이징이 구현되는 거죠.

앞으로의 과제: 컨테이너 쿼리

향후 브라우저가 컨테이너 쿼리를 충분히 지원하게 되면, Framer도 이를 도입할 계획입니다. 단위는 일반 단위인 cqw 단위를 사용할 수 있지만, vw와 cqw컨테이너를 기준으로 합니다. 이는 뷰포트가 아닌 컨테이너를 기준으로 계산되므로 복잡한 CSS calc() 없이도 컴포넌트 단위에서 자연스럽게 작동할 수 있습니다.

Fit Text는 본래 구현하기 까다로운 기능을 Framer가 자동화해서, 사용자가 사이트 제작에만 집중할 수 있게 해주는 좋은 사례입니다. 앞으로 이 기능을 활용해 창의적인 결과물을 만들어보시길 바랍니다.

본 글은 Framer 공식 블로그의 ‘Advanced responsive typography: technical implementation of Fit Text’를 번역·각색한 콘텐츠입니다.