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

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

문제점: CSS의 한계

기존 라이브러리들을 먼저 살펴봤지만 공통적인 문제가 있었습니다. 텍스트를 늘리기 위해 렌더링 전에 반드시 텍스트의 실제 크기를 측정해야 한다는 점이었죠. 하지만 Framer 사이트는 정적으로 생성되며, 자바스크립트가 실행되기 전에 어떤 브라우저에서도 완벽하게 렌더링되어야 합니다.

다음으로 font-size: 100vw를 시도했는데, 화면 전체를 채우는 경우에는 잘 작동했습니다. 그러나 임의의 컨테이너에 텍스트를 맞추려면 모든 상위 요소의 크기를 vw 단위로 계산한 복잡한 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가 이미 계산된 상태로 포함되므로, 자바스크립트가 로드되기 전에도 텍스트가 정확한 크기로 렌더링됩니다. 플리커(flash) 현상이나 크기 조정 지연, 페이드인 없이 매끄럽게 크기가 조정됩니다.

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

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

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

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