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

Framer YouTube 채널을 구독하세요

회전하는 비디오 그리드 만드는 방법

1단계: 페이지와 기본 프레임 설정

Framer에서 새 페이지를 생성합니다.

1. Frame(F)을 하나 추가하고, 가로 전체를 채우도록 배치합니다.

   • 높이는 1000px 정도로 설정 후 Height → Viewport로 바꿔 화면 전체 높이에 맞춥니다.

   • Fill은 제거합니다.

2. 이 프레임 안에 정사각형 프레임을 추가합니다.

   • 크기는 가로=세로로 설정하고(튜토리얼에서는 970으로 설정했습니다), 중앙 정렬합니다.

   • Fill은 제거합니다.

   • 이름을 Container로 변경합니다.

   • 이 컨테이너가 비디오 그리드를 담는 영역이 됩니다.

2단계: 비디오 그리드 배치

1. 첫 번째로 가운데 들어갈 비디오를 컨테이너 중앙에 배치합니다.

   • 반드시 정확히 중앙에 맞추어야 합니다.

2. 나머지 비디오를 그리드 형태로 배치합니다.

   • 모든 비디오가 컨테이너 안에 들어가도록 정렬합니다.

3단계: 컨테이너에 스크롤 애니메이션 적용

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

1. 모든 비디오가 포한된 컨테이너를 선택하고, Scroll Transform 효과를 추가합니다.

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

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

4단계: 비디오에 반대 방향 회전 적용

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

1. 컨테이너 안의 모든 비디오를 선택하고 Scroll Transform을 추가합니다.

2. 동일하게 스크롤 변형 효과를 적용하되, 회전을 반대로 줍니다.
   초기 상태: Opacity 1, Scale 1, Rotation 0
   스크롤 시: Opacity 1, Scale 1, Rotation -450

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

5단계: 비디오 크기 조정

• 회전 시 클리핑(잘림) 현상을 방지하려면 비디오 크기를 키워야 합니다.

• 모든 비디오를 선택해 컨테이너 대비 170% 크기로 설정합니다.

6단계: 스크롤 위치 고정

컨테이너가 스크롤되며 화면 밖으로 사라지지 않도록 설정해야 합니다. 가장 바깥 프레임(Height = Viewport)을 선택해 Position → Fixed로 변경합니다. 이렇게 하면 컨테이너는 고정되고, 스크롤 애니메이션만 적용됩니다.

추가 작업

1. 스케일 효과 추가

   • 컨테이너의 Scroll Transform에서 Scale을 조정해 더 역동적인 효과를 만듭니다.

   • 예: To 상태에서 Scale 2.0 설정 → 회전과 함께 확대되는 느낌 연출.

2. 인터랙션(Overlay) 추가

   • 중앙 비디오 위에 Play 버튼을 배치합니다.

   • 버튼 클릭 시 Overlay를 열리도록 설정합니다. (Overlay 안에는 전체 화면 비디오를 배치하고, 닫기 기능을 추가하여 다시 돌아갈 수 있도록 합니다)

이제 Framer에서 코드 없이도 트위터에서 본 회전하는 비디오 그리드 효과를 완성할 수 있습니다.
이 튜토리얼 처럼 Framer에서는Drag, Scroll Transform, Overlay 같은 기능만 활용해 복잡한 코드를 작성하지 않고도 강력한 인터랙션을 구현할 수 있습니다.

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

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