목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
사이트 최적화를 해야하는 이유
Framer는 사이트 속도를 유지하기 위해 여러 최적화를 자동으로 적용하고 있습니다. 하지만 이 외에도 성능 향상을 위해 추가적인 조취를 취할 수 있으며, 사이트 속도가 원하는 만큼 빠르지 않다면 아래에 제안하는 추가 조치들을 시도해 보시길 바랍니다.
이미지 최적화
Framer는 대부분의 이미지를 자동으로 최적화해주기 때문에, 사용자가 따로 WebP로 변환하거나 리사이징할 필요가 없습니다. 자세한 내용은 Framer에서 이미지가 어떻게 최적화되는지 해당 아티클에서 확인해보세요.
일반 이미지: 이미지를 그대로 업로드하고 해상도를
Auto로 설정하세요. Framer가 WebP 변환 및 크기 조절을 처리해 드려요.SVG 이미지: 프레임을 만든 후 그 안에 이미지를 끌어다 놓아 업로드하면 됩니다.
폰트 최적화
폰트는 사이트의 로딩 속도와 가독성에 많은 영향을 줍니다. Framer는 폰트 로딩을 자동으로 최적화하지만, 몇 가지 원칙을 따르면 더 안정적이고 빠른 경험을 줄 수 있습니다. 자세한 내용은 Framer에서 글꼴을 최적화하는 방법 아티클을 참조해보세요.
Light부터 Extra Bold까지의 폰트 웨이트를 사용하기
: 이렇게 하면 폰트가 로딩될 때 텍스트가 사라지지 않고font-display: swap덕분에 대체 폰트가 먼저 보였다가 자연스럽게 교체돼요.Google Fonts를 사용하기
: Google Fonts는 필요한 문자만 다운로드하므로 불필요한 용량을 줄여 빠르게 로딩돼요.2023년 11월 이전에 업로드한 커스텀 폰트가 있다면 다시 업로드하기
: 이 과정을 통해 WOFF2 포맷으로 변환되는데, 이는 파일 크기를 줄여 성능을 개선해줘요.
영상 최적화
영상은 사이트의 품질을 향상시켜줄 수도 있지만 속도를 저하시키는 요인이 되기도 합니다. 그래서 몇 가지 원칙을 기억하는 것이 좋아요. 이보다 더 자세한 내용은 Framer에서 비디오를 최적화하는 방법을 참조하세요.
YouTube 또는 Vimeo 사용하기
: 이 플랫폼들은 자동으로 원래 해상도로 동영상을 제공하는 Framer와 달리, 네트워크 속도와 화면 크기에 따라 동영상 화질을 조정합니다.Insert메뉴에서 YouTube 및 Vimeo 요소를 사용할 수 있습니다.Auto Play 지양하기
: 자동재생은 불필요한 대역폭을 소모하므로 다른 사이트 로딩 속도를 느리게 할 수도 있습니다.
배경으로 쓰는 영상이라면 소리를 끄고(
Muted), 반복(Loop)으로 설정하고, 조작 버튼은 제거하는 방식이 좋습니다. 이렇게 하면 화면에 보여질 때만 영상이 로드되어 대역폭을 절약할 수 있습니다.
최적화 상태 확인
Framer에서는 사이트가 올바르게 최적화되었는지 직접 확인할 수 있는 기능이 있습니다.
상단 메뉴에서 Site Settings → Versions로 들어가 최신 버전에 Optimized라는 표시가 있는지 확인해보세요. 만약 Optimization Error가 표시된다면 문제가 있다는 의미이므로 다시 확인 후 재퍼블리시를 해야 합니다.
커스텀 코드 관리
Framer는 <head>나 <body>에 직접 커스텀 코드를 추가할 수 있습니다. 하지만 이 기능을 무분별하게 쓰면 성능이 떨어질 수 있습니다.
꼭 필요한 코드만 추가하기
: 예를 들어 MailChimp 스크립트가 필요한 페이지가 있다면, 해당 페이지에서만 로드되도록 설정하는 것이 좋아요.스크립트별 적절한 코드 사용하기
: 사이트 전체에 적용할 코드는Project settings → Custom code에서 관리하고, 특정 페이지만 필요한 코드는Page settings → Custom code를 사용하세요.스크립트 배치 구간 유의하기
: 보통은<body>태그의 끝부분에<script>를 넣고defer속성을 추가하는 것이 권장됩니다.
만약 코드가 최대한 빨리 실행되어야 한다면 async를 사용할 수 있습니다. 단, 아무 속성도 쓰지 않고 바로 삽입하면 오히려 사이트 속도를 느리게 할 수 있으니 주의해야 합니다.
스크립트가 최대한 빨리 로드되어야 하는 경우 async대신 사용하되, 둘 다는 사용하지 않는 게 좋아요. 사이트 속도가 느려질 수 있습니다. 인라인 스크립트는 defertype="module"로 최적화되어 있는 상태입니다.
애니메이션 효과 관리
애니메이션은 사용자 경험을 향상시킬 수 있지만, 최적의 성능을 위해서는 신중하게 사용해야 합니다.
페이지 상단의 중요한 요소에는 Appear Effect를 사용하세요. 이 효과는 JavaScript가 로드되기 전에 실행되기 때문에 사용자 경험이 더 부드럽습니다. 하지만 같은 요소에 Scroll Animation 효과를 주면 초기 로딩 성능이 떨어질 수 있어 피하는 것이 좋습니다.
그림자와 블러
그림자와 블러는 디자인에 깊이감을 주지만 브라우저 성능에는 영향을 미칠 수 있습니다. 로딩 시간에 영향을 미치지 않더라도, 애니메이션이나 스크롤 속도 자체를 느리게 만들 수도 있습니다.
가능하다면 최소한으로 사용하고, 성능을 유지하기 위해 블러 값은 10 이하로 유지하는 것이 좋습니다.
외부 임베드와 iFrame
외부 콘텐츠를 불러오는 경우도 성능에 영향을 줄 수 있습니다. HubSpot 폼이나 Spline 3D 일러스트레이션 같은 외부 요소들은 기본적으로 Framer에서 Lazy-load 방식으로 처리되지만, 여전히 코드가 추가로 실행되어 사이트가 무거워질 수 있습니다.
이럴 땐 사이트를 복제한 뒤 해당 임베드를 제거해보고 속도 변화를 비교해보세요. 이런 점검만으로도 성능이 향상되는지 확인해볼 수 있습니다.
이러한 단계를 따른 후에도 문제가 해결되지 않으셨다면, 문의 페이지에서 도움을 받아보세요.
본 글은 Framer 공식 블로그의 ‘Optimizing your site for speed and performance’를 번역·각색한 콘텐츠입니다.
