에디터 화면 둘러보기

Framer 에디터는 크게 네 영역으로 나뉩니다. 처음엔 복잡해 보여도 역할만 알면 금방 익숙해집니다.

1. 캔버스 (가운데)

실제로 디자인하는 무대입니다. 여기에 텍스트, 이미지, 도형을 올리고 배치합니다.

• 스크롤: 마우스 휠 또는 트랙패드 두 손가락
• 확대/축소: ⌘(맥) / Ctrl(윈도우) + 스크롤
• 화면 맞춤: Shift + 1

2. 레이어 패널 (왼쪽)

캔버스에 올린 요소들의 목록입니다. Figma의 레이어와 같은 개념이에요.

• 페이지, 프레임, 텍스트 등이 트리 구조로 보입니다.
• 드래그로 순서·계층을 바꿀 수 있습니다.

3. 속성 패널 (오른쪽)

선택한 요소의 스타일을 조절하는 곳입니다.

• 크기, 위치, 색상, 폰트, 간격 등
• 레이아웃(가로/세로 정렬), 그림자, 모서리 둥글기 등

4. 툴바 (위쪽)

도구를 고르고 모드를 전환합니다.

• Insert(삽입) — 텍스트, 프레임, 이미지 등 추가
• 디바이스 미리보기 — 데스크톱/태블릿/모바일 화면 전환
• Preview(미리보기) — 실제 작동하는 모습 확인
• Publish(발행) — 인터넷에 공개

자주 쓰는 단축키

다음 단계

이제 첫 사이트를 발행해봅시다.