캔버스 다루기 기초

디자인의 모든 것은 프레임(Frame) 에서 시작합니다.

프레임(Frame)이란?

프레임은 요소를 담는 상자입니다. HTML의 <div>라고 생각하면 됩니다.

• 페이지 자체도 큰 프레임입니다.
• 버튼, 카드, 섹션 모두 프레임 안에 만듭니다.

F를 누르고 캔버스에 드래그하면 프레임이 생깁니다.

요소 추가하기

툴바의 Insert(삽입) 또는 단축키로 추가합니다.

선택과 이동

• 클릭 — 선택
• 더블클릭 — 안쪽 요소로 들어가 선택
• 드래그 — 이동
• 방향키 — 1px씩 미세 이동 (Shift와 함께 10px)

화면 이동·확대

• 이동(Pan) — 스페이스바를 누른 채 드래그, 또는 트랙패드 두 손가락
• 확대/축소 — ⌘(맥) / Ctrl(윈도우) + 스크롤
• 화면 맞춤 — Shift + 1
• 선택 요소에 맞춤 — 요소 선택 후 Shift + 2

정렬 (Align)

여러 요소를 선택한 뒤 오른쪽 패널에서 가운데 정렬·간격 맞춤을 할 수 있습니다. 깔끔한 디자인의 기본은 정렬입니다.

다음 단계

레이아웃 (Stack·Grid)에서 요소를 자동으로 정렬하는 강력한 기능을 배웁니다.