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

이 프로젝트를 리믹스하면서 배울 수 있는 것은, 애니메이션 세그먼트 컨트롤을 어떻게 설정하는지, 이벤트를 이용해 다른 컴포넌트와 어떻게 결합하는지, 그리고 자동 재생 갤러리를 만드는 방법입니다.

예시를 통해 여러분은 애니메이션 세그먼트 컨트롤을 만들고, 이벤트를 활용해 다른 컴포넌트와 연결하고, 자동으로 재생되는 갤러리를 구현하는 과정을 익힐 수 있습니다. 가장 좋은 점은, 이 프로젝트를 직접 리믹스해서 여러분의 필요에 맞게 커스터마이즈할 수 있다는 것입니다.

제어 구성 요소

먼저 Control 컴포넌트를 자세히 살펴보겠습니다. 이 컴포넌트는 두 개의 스택으로 이루어져 있습니다. 위쪽 스택에는 클릭할 수 있는 아이템이 들어 있으며, 각 아이템은 다른 Variant로 전환되고 동시에 이벤트를 발생시킵니다. 이 이벤트는 나중에 Gallery 컴포넌트에서 올바른 Variant로 전환하는 데 사용되기 때문에 중요합니다.

아래쪽 스택은 버튼이 어디에 위치해야 하는지를 제어합니다. 활성 상태를 애니메이션하면 버튼이 각 Variant에서 다른 위치로 움직이게 되고, 나머지는 Framer가 알아서 처리합니다. 이렇게 하면 깔끔하고 완성도 높은 세그먼트 컨트롤을 쉽게 만들 수 있습니다.

자동 재생 갤러리

다음으로 사진 컴포넌트를 살펴봅시다. 이 컴포넌트는 몇 장의 사진을 겹쳐 놓은 단순한 구조입니다. 각 Variant에서는 불투명도(opacity)가 서로 바뀌면서 어떤 사진이 보이는지가 달라집니다. 여기에 일정 시간이 지나면 다음 사진으로 넘어가도록 설정하면, 자동 재생되는 갤러리를 손쉽게 만들 수 있습니다.

갤러리 컴포넌트

이제 Control과 Photos 컴포넌트를 결합해 Gallery 컴포넌트를 만듭니다. 여기서는 세 가지 Variant를 만들고, 두 컴포넌트를 각각 올바른 Variant에 맞춰 설정합니다. 앞서 Control 컴포넌트에서 만들어 두었던 이벤트를 활용해, 이벤트가 발생할 때 Gallery 컴포넌트가 해당 Variant로 전환되도록 연결하는 방식입니다.

갤러리 컴포넌트 커스터마이징

마지막 단계에서는 Variant에 간단한 인터랙션을 추가합니다. 이렇게 하면 일정 시간이 지난 후 자동으로 다음 Variant로 전환되도록 설정할 수 있습니다.

또한 Control과 Photos 컴포넌트의 변수를 Gallery 컴포넌트를 통해 노출시켜 두었습니다. 덕분에 이 컴포넌트를 재사용하기도 쉽고, CMS와 연결하기도 간편합니다.

결론

전체적으로 이번 프로젝트는 코드 한 줄도 쓰지 않고, 재사용 가능하고 반응형인 갤러리 컴포넌트를 만드는 과정을 배울 수 있는 좋은 기회입니다. 더 나아가, 리믹스해서 원하는 대로 커스터마이즈할 수도 있습니다.

그러니 주저하지 말고 프로젝트를 직접 열어보고 시작해 보세요.

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

본 글은 Framer 공식 블로그의 ‘Creating an auto-playing gallery — learn with a free Framer project’를 번역·각색한 콘텐츠입니다.