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

YouTube 채널을 구독하세요

웹사이트를 방문했는데 그 인터랙티브하고 역동적인 모습에 감탄해 본 적 있으신가요? 최근 인기 있는 인터랙션 중 하나가 프레임워크 캔버스 효과입니다. 실제 캔버스처럼 화면을 드래그하고 요소를 움직일 수 있게 만드는 방식이죠. Sketch와 Jitter는 이미 이 효과를 웹사이트에 도입했습니다. 이 튜토리얼에서는 Framer에서 이 효과를 만드는 방법을 단계별로 안내합니다.

캔버스 효과 만들기

1. 페이지 세팅

F 키로 새 프레임을 만든 뒤, 페이지 전체를 덮도록 만듭니다. 왼쪽과 오른쪽 상단에 핀으로 고정하고 높이는 뷰포트로 설정합니다. Fill은 제거하고 프레임 이름을 'Frame Canvas'로 지정합니다. 가운데에 프레임을 하나 더 만들고 크기를 2500 × 2500으로 설정한 뒤, 흰색으로 채웁니다. 이 레이어 이름을 'draggable'로 지정합니다. 이후 효과를 적용할 객체는 여기에 추가합니다.

2. 드래그 효과 추가

‘draggable’ 레이어를 선택하고 오른쪽 Effects 패널에서 Drag를 추가합니다. 우선 자유형으로 유지하고, Snapback과 Momentum을 끕니다. 미리보기로 드래그가 되는지 확인하세요.

3. 제약 조건 설정

'Frame Canvas' 레이어를 선택해 속성 패널의 Scroll 섹션에서 섹션 이름을 지정합니다. 그런 다음 ‘draggable’ 레이어의 드래그 효과로 돌아와 Freeform을 No로 바꾸고, 방금 만든 섹션을 선택합니다. 프리뷰로 ‘draggable’ 레이어가 'Frame Canvas' 안에서만 움직이는지 확인합니다.

4. 요소 추가

조작하고 싶은 객체를 ‘draggable’ 레이어에 추가합니다. 페이지와 'Frame Canvas' 레이어의 Overflow를 Visible로 설정해 ‘draggable’ 전체를 볼 수 있게 합니다.

5. 호버 상태와 회전

객체를 드래그하기 시작할 때 호버 상태와 회전을 추가합니다. onDragStart를 사용해 드래그 시 객체의 불투명도를 변경하고 약간 회전시키는 식으로 구현할 수 있습니다.

웹사이트에 인터랙션 더하기

이제 Framer에서 실제 캔버스처럼 컴포넌트를 자유롭게 조작할 수 있는 프레임워크 캔버스 효과를 완성했습니다. 이 효과는 웹사이트에 보다 인터랙티브하고 역동적인 느낌을 더해 주며, Framer의 드래그 효과만으로도 손쉽게 구현할 수 있습니다.

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

본 글은 Framer 공식 블로그의 ‘Create a canvas effect in Framer with draggable elements’를 번역·각색한 콘텐츠입니다.