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

YouTube 채널을 구독하세요

웹사이트의 네비게이션을 더 직관적이고 접근하기 쉽게 만들 방법을 찾고 계신가요? 그렇다면 스크롤 시 나타나는 플로팅 네비게이션을 고려해보세요. 이번 튜토리얼에서는 사용자가 스크롤을 시작하는 순간 등장해 페이지 끝까지 유지되는 네비게이션을 만드는 방법을 단계별로 살펴봅니다.

프로젝트 세팅하기

시작하기 전에 프로젝트를 준비합니다. 일반적인 네비게이션을 페이지 상단에 고정해 두고, 별도로 플로팅 네비게이션을 만들어 줍니다. 플로팅 네비게이션은 위치를 fixed로 하고, 위쪽에서 20픽셀, 왼쪽과 오른쪽에서도 20픽셀 떨어지도록 설정합니다.

스크롤 섹션 정의하기

플로팅 네비게이션이 나타나는 시점을 정하기 위해 스크롤 섹션을 정의해야 합니다. 히어로 섹션에 스크롤 섹션을 추가하고 이름을 “hero”로 지정합니다. 플로팅 네비게이션을 선택한 뒤 스크롤 애니메이션 효과를 추가하고, 트리거를 section in view로 설정한 후 hero 섹션을 지정합니다. 뷰포트를 top으로 설정하면 히어로 섹션이 뷰포트의 상단에 닿는 순간 애니메이션이 실행됩니다.

애니메이션 커스터마이징하기

그 다음에는 플로팅 네비게이션의 애니메이션을 설정합니다. 불투명도를 1로 하고, 스케일도 1로 맞춥니다. 동시에 네비게이션을 화면 밖으로 빼내기 위해 Y 값을 -110으로 설정합니다. 이렇게 하면 미리보기를 했을 때 스크롤을 내리자마자 네비게이션이 자연스럽게 등장하는 것을 확인할 수 있습니다.

네비게이션 사라짐 문제 해결하기

가끔 네비게이션이 히어로 섹션이 뷰포트에서 사라지는 순간 함께 사라지는 문제가 생길 수 있습니다. 이럴 때는 스크롤 애니메이션의 enter와 exit 전환을 잠금 해제하고, exit 애니메이션을 제거하면 문제를 해결할 수 있습니다.

오프셋 추가하기

마지막으로 애니메이션이 조금 더 일찍 실행되도록 오프셋을 추가합니다. 히어로 섹션에 Y 오프셋을 10픽셀로 지정하면, 히어로 섹션이 뷰포트 상단에 닿기 10픽셀 전에 애니메이션이 발동합니다.

결론

Framer에서 스크롤 시 나타나는 플로팅 네비게이션은 간단하면서도 효과적인 방식으로 사용자 경험을 개선하고 네비게이션의 접근성을 높일 수 있습니다. 이 과정을 따라 하면 누구나 자신만의 웹사이트 네비게이션을 더 직관적으로 바꿀 수 있습니다.

예시보고 따라해보기 →

본 글은 Framer 공식 블로그의 ‘Advanced scroll-triggered navigation: implementation guide for UX designers’를 번역·각색한 콘텐츠입니다.