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

YouTube 채널을 구독하세요

페이지 세팅

첫 번째로 페이지 레이아웃을 준비해주세요. 튜토리얼에서는 특별한 설정이 없는 기본 페이지를 사용했어요.

우선 Frame을 전체 화면에 맞게 배치하고, Height를 Viewport로 설정합니다. (Frame이 브라우저 화면 100%를 차 지하게 됩니다)
그 안에 또 하나의 Frame을 만들어 비디오 그리드의 컨테이너로 사용합니다.

• 크기를 970 × 970으로 맞추고, 가로 세로 중앙에 정렬

• Fill은 제거

• 이름을 container로 변경

이렇게 하면 비디오들을 담을 큰 상자가 준비됩니다.

비디오 추가

이제 본격적으로 비디오를 넣어봅시다.
가장 중요한 메인 비디오를 컨테이너 정중앙에 배치하고, 나머지 비디오들을 주변에 배열하세요.
Note: 중앙 비디오가 고정된 기준점 역할을 하게 되므로, 배치 순서를 신경 쓰는 게 좋아요.

그리드 애니메이션 추가

그리드가 준비되었으니, 이제 회전을 적용해봅시다.

1. 모든 비디오가 포한된 container를 선택하고 스크롤 변형 효과를 추가합니다.

2. 스크롤 시 다음과 같이 변환이 일어나도록 설정합니다.
   초기 상태: Opacity 1, Scale 1, Rotation 0
   스크롤 시: Opacity 1, Scale 1, Rotation 450

이렇게 하면 스크롤에 따라 컨테이너 전체가 회전하는 효과가 생깁니다.

역회전 비디오

컨테이너가 회전하면 안에 있는 비디오들도 함께 돌아가 버리겠죠. 하지만 우리는 비디오는 제자리에 고정된 것처럼 보이게 만들고 싶습니다.

1. 컨테이너 안의 모든 비디오를 선택합니다.

2. 동일하게 스크롤 변형 효과를 적용하되, 회전을 반대로 줍니다.

   초기 상태: Opacity 1, Scale 1, Rotation 0

   스크롤 시: Opacity 1, Scale 1, Rotation -450

이렇게 하면 컨테이너는 시계 방향으로 돌지만, 비디오는 반대 방향으로 돌며 화면에 고정된 듯한 시각 효과가 만들어집니다.

마무리 작업

앞서 적용한 효과가 잘 작동하지만 조금 더 자연스럽게 다듬을 수 있습니다.

• Scroll Limit을 설정해 컨테이너가 지나치게 많이 회전하지 않도록 제한

• Easing을 적용해 부드러운 전환 효과 추가

• Remix Button을 넣어 다른 사람이 프로젝트를 쉽게 열어볼 수 있도록 공유

결론

Framer에서 회전하는 비디오 그리드를 만드는 과정은 생각보다 간단합니다. 컨테이너를 회전시키고, 내부 비디오에는 반대 회전을 적용하는 것. 이 두 가지 설정만으로 시선을 사로잡는 인터랙션을 구현할 수 있습니다.
Framer는 코드 없이 이런 효과를 만들 수 있기에, 누구나 손쉽게 도전해볼 수 있습니다.

효과 및 리믹스 프로젝트 보러가기→

본 글은 Framer 공식 블로그의 ‘Create a rotating video grid in Framer’를 번역·각색한 콘텐츠입니다.