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

스크롤 및 호버 효과는 디자인에 시각적인 흥미와 상호작용성을 더할 수 있으며, Framer는 이러한 효과를 구현하는 데 매우 유용한 도구입니다. 이 튜토리얼에서는 스크롤 효과를 사용하여 텍스트와 배경색을 동적으로 변경하는 방법과 카드에 재미있는 3D 호버 효과를 적용하는 방법을 살펴보겠습니다.

히어로/배경 Variant 만들기

스크롤 효과의 출발점은 히어로 콘텐츠와 배경의 Variant를 준비하는 일입니다. 이미지 섹션이 세 구간이라면 이에 대응하는 세 가지 변형을 만들어 두면 관리가 깔끔합니다.

각 이미지 섹션 프레임에는 고유한 Scroll Section 이름을 지정합니다. 이후 히어로와 배경 컴포넌트에서 Scroll Variant를 사용하면, 현재 뷰포트에 보이는 섹션 이름을 기준으로 해당 Variant로 자동 전환됩니다.

은은한 3D 호버 효과 추가

스크롤 전환만으로도 충분히 생동감이 생기지만, 카드에 3D 호버를 얹으면 마이크로 인터랙션이 더 설득력 있게 느껴집니다. 속성 패널에서 Hover 효과를 선택한 뒤, 틸트와 깊이감을 과하지 않게 조정해 봅니다. 각도가 너무 크거나 이동량이 크면 정보 자체보다 효과가 먼저 보이기 쉬워요. 살짝 기울고, 살짝 떠오르는 정도로 조율하면 콘텐츠 주도권을 유지하면서도 상호작용의 즐거움을 줄 수 있습니다. 원하는 느낌이 나올 때까지 값을 조금씩 움직여 보세요.

마무리

디자인에 스크롤 및 호버 효과를 사용하면 새로운 차원의 인터랙티브와 시각적 흥미를 더할 수 있습니다. Framer를 사용하면 이러한 효과를 쉽게 만들고 원하는 결과를 얻을 때까지 다양한 변형을 시도해 볼 수 있습니다. 스크롤 및 호버 효과의 가능성을 탐색하면서 디자인 실력을 한 단계 끌어올리고 시선을 사로잡는 매력적이고 매력적인 디자인을 제작할 수 있습니다.

효과보고 프로젝트 따라해보기→

본 글은 Framer 공식 블로그의 ‘Exploring scroll and hover effects in Framer’를 번역·각색한 콘텐츠입니다.