Getting Started
2025. 7. 8.
Framer 캔버스 조작법: 기본 도구와 활용 팁
Framer의 캔버스 조작법을 통해 팬 및 줌 기능을 활용하고, 단축키를 익혀 효율적인 디자인 작업을 할 수 있습니다. 캔버스 조작법을 알아보고, 최적의 작업 환경을 조성하여 생산성을 높여보세요.
Posted By
Framer Space
목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
캔버스 컨트롤 기본 구조
캔버스 조작 도구들은 Framer 하단 바에 위치해 있습니다.
포인터(Pointer) 도구: 개별 요소를 선택하거나 수정할 때 사용
팬(Hand) 도구: 화면을 드래그해서 이동할 때 사용
댓글(Comment) 도구: 작업에 주석을 남길 때
라이트/다크 모드 전환 버튼
줌 레벨 메뉴: 현재 줌 비율과 확대/축소 옵션들
팬(Pan)으로 캔버스 이동하는 방법
방법 1: 팬 도구 선택하기
하단 도구바에서 이동 도구로 손바닥 아이콘(Hand Tool)을 선택(단축키:H)하면 팬 모드로 전환되고 팬 모드에서는 마우스로 클릭 후 드래그하면 전체 화면이 움직입니다.
방법 2: 스페이스바 활용하기
디자인 도중에 팬 기능을 사용하려면 스페이스 키를 누른 상태로 마우스를 드래그하세요. 단축키 방식이라 훨씬 빠릅니다.
방법 3: 트랙패드 이용하기
트랙패드를 사용 중이라면, 손가락 두 개로 드래그하거나 스크롤 하면 팬이 가능합니다.Note : 자주 움직이며 작업하는 경우, 팬 도구 단축키와 트랙패드 활용을 익혀두면 생산성이 높아집니다.
줌(Zoom): 화면 확대/축소
줌 조절 방법
하단 바의
줌 드롭다운 메뉴클릭 후, 원하는 비율 선택키보드 단축키 사용
Mac:
⌘,+→ 확대 /⌘,-→ 축소, Windows:CTRL +→ 확대 /CTRL -→ 축소
각 단축키를 누를 때마다 줌 레벨이 배수 단위로 변경됩니다.(예: 100% → 200%)
기타 줌 옵션
항목 | 설명 |
|---|---|
Zoom In | 캔버스를 한 단계 확대합니다. |
Zoom Out | 캔버스를 한 단계 축소합니다. |
Zoom to 100% | 캔버스를 실제 픽셀 크기(100%)로 표시합니다. |
Zoom to Fit | 현재 작업 중인 모든 콘텐츠가 한 화면에 딱 맞게 보이도록 자동 조정합니다. |
Zoom to Selection | 선택한 객체가 한 화면에 딱 맞게 보이도록 자동 조정합니다. |
Fast Zoom | 줌 성능을 향상해 더 빠르게 확대/축소할 수 있는 모드를 활성화합니다. |
Nudge Amount | 요소를 방향키로 움직일 때의 이동 간격을 설정합니다. |
Note : 정밀 작업을 자주 한다면 선택한 오브젝트를 중심으로 화면이 맞춰지는 Zoom to Selection 기능이 특히 유용합니다.
트랙패드와 마우스 줌 조작법
트랙패드: 두 손가락을 벌리거나 오므리기
마우스:
⌘ Command (Mac)또는Ctrl (Windows)누른 채 스크롤
본 글은 Framer 공식 블로그의 ‘Using the canvas’를 번역·각색한 콘텐츠입니다.
