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

이번 튜토리얼에서는 Framer를 활용해 멋진 스크롤 효과를 구현하는 과정을 살펴봅니다. 이 효과는 Framer 커뮤니티에서 꾸준히 요청되어 왔고, 애플과 같은 인기 사이트에서 자주 볼 수 있습니다. 특히 Apple TV Plus 페이지가 좋은 예로, 스크롤할수록 한 섹션이 점차 축소되며 슬라이드쇼로 변하는 흐름을 명확히 보여줍니다.

YouTube 채널을 구독하세요

데모 준비

이번 튜토리얼을 위해 이미지 대신, 비디오로 동일한 효과를 구현한 데모를 준비했습니다. 스크롤을 내리면 비디오가 점점 축소되며 슬라이드쇼로 전환되고, 스케일링 구간이 끝나면 자연스럽게 다음 섹션으로 이어집니다. 슬라이드쇼에서 다음 아이템을 클릭한 뒤 위로 스크롤하면, 비디오는 다시 확대되어 원래 상태로 돌아옵니다.

Framer로 시작하기

먼저 Framer 프로젝트를 열어 충분히 긴 스크롤 섹션을 만듭니다. 예시에서는 높이를 약 2800px로 설정했지만, 페이지 리듬과 콘텐츠 길이에 맞춰 자유롭게 조정해도 됩니다. 이 섹션의 높이는 비디오가 얼마나 멀리 스크롤되어야 스케일이 줄어드는지를 결정합니다.

다음으로 스크롤 섹션 안에 프레임을 하나 더 그리고, 크기를 Width: 100%, Height: 100vh로 설정합니다. 이 프레임의 이름을 ‘slideshow container’로 바꾸고 Position: Sticky로 지정하면 페이지를 내려도 이 영역이 상단에 고정됩니다. 마지막으로 프레임의 Layout을 활성화하고 기본값을 그대로 두면 배치가 안정적으로 유지됩니다.

슬라이드쇼 추가하기

이제 Insert 메뉴의 Interactive 섹션에서 슬라이드쇼를 끌어와 프로젝트에 추가합니다. 슬라이드쇼의 크기는 Height: 100%, 비디오 종횡비에 맞춰 Width: 약 1900px로 설정하고, 비율이 깨지지 않도록 Lock Aspect Ratio를 켜세요. 화면 가로폭을 언제나 꽉 채우기 위해 Min-width: 110%도 잊지 말고 지정합니다. 그런 다음 멀티핀 커넥터로 슬라이드쇼에 비디오들을 연결합니다. 이제 스크롤 트랜스폼 효과를 적용할 차례입니다. 슬라이드쇼를 선택한 상태에서 속성 패널의 Effects로 이동해 Scroll Transform을 추가하고, 기준을 Section in View로 설정한 뒤 앞서 만든 비디오 섹션을 대상으로 지정하면 됩니다.

슬라이드쇼 다듬기

프로젝트에 맞게 슬라이드쇼 속성을 다듬어 주세요. 예를 들어 Interval을 5초로 설정하면 다음 항목으로 넘어가기 전에 비디오가 화면에 더 오래 머물러 안정적으로 감상할 수 있습니다. 이번 예제에서는 하단 점 표시인 Dots가 필요하지 않으니 비활성화하고, 슬라이드 간 간격은 약 50px로 넉넉히 주면 전환 단계가 더 또렷해집니다. 탐색성을 높이기 위해 화살표 크기도 조금 키워 주세요.

가장자리에서 다른 비디오가 살짝 보이도록 Clipping > Overflow: Show로 설정해 가시성을 확보합니다. 또한 텍스트 레이어에도 Scroll Transform을 추가해 스크롤에 따라 Opacity가 서서히 줄어들게 만들면, 시선이 자연스럽게 비디오와 슬라이드 전환에 집중되어 전체 흐름이 더 매끄럽게 느껴집니다.

Ticker 컴포넌트 추가하기

다음 섹션의 인상을 더 좋게 만들기 위해 Insert > Interactive에서 Ticker 컴포넌트를 추가하세요. 이 Ticker를 복제해 세 줄을 만들고, 각 줄을 이미지에 연결합니다. 이어서 Gap과 Speed 값을 적절히 조정하고, 줄마다 서로 다른 Direction을 지정해 좌우 스크롤 방향을 달리해 주세요. 이렇게 하면 화면에 리듬감이 생겨 전환 이후의 섹션이 한층 살아납니다.

최종결과

이제 스크롤할수록 화면이 부드럽게 축소되며 슬라이드쇼로 전환되는 스크롤 효과가 완성되었습니다. 최종 결과는 애플 웹사이트에서 볼 수 있는 연출과 유사한 느낌을 줄 거예요.

효과보고 따라해보기→

본 글은 Framer 공식 블로그의 ‘Creating a cool scrolling effect like Apple with Framer’를 번역·각색한 콘텐츠입니다.