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

웹사이트의 레이아웃은 어떻게 구성될까요?
아무리 화려한 디자인이나 복잡한 UI라도 그 구조를 잘 들여다보면 결국 사각형(rectangle)으로 이루어져 있습니다. Framer에서는 이 사각형을 Frame이라고 부르며, 거의 모든 요소가 Frame을 기반으로 만들어집니다.

이번 글에서는 Framer에서의 핵심 구성 단위인 Frame이 정확히 무엇인지, 그리고 실제로 어떻게 사용하는지에 대해 자세히 살펴보겠습니다.

Frame이란?

Framer에서 Frame은 콘텐츠를 담는 기본 컨테이너이자, 구조와 정렬, 레이아웃을 구성하는 핵심 단위입니다. 프레임 안에는 다른 요소를 ‘포함’할 수 있으며, 이를 통해 계층 구조를 만들 수 있습니다.

프레임을 다루다 보면 자주 접하게 되는 용어들이 있습니다. Figma나 웹 개발 경험이 있다면 익숙하게 느껴질 수 있는 개념입니다. Framer에서도 이 계층 구조를 이해하는 것이 레이아웃 설계의 핵심이기 떄문에 헷갈리지 않도록 미리 익혀두는 것이 좋습니다.

• Nested: 어떤 레이어가 프레임 안에 들어가 있는 상태

• Child: 프레임 안에 있는 레이어 (자식)

• Parent: 레이어를 감싸고 있는 프레임 (부모)

• Siblings: 같은 부모 프레임 아래 있는 레이어들 (형제 관계)

Frame이 하는 일

Framer에서 Frame은 단순히 요소를 ‘감싸는 것’을 넘어 다양한 역할을 합니다.

• 요소들을 그룹화하거나 정렬하는 역할

• 자동으로 Stack 또는 Grid 구조 생성

• 유연한 사이징과 위치 지정

• 배경, 그림자, 테두리 등 시각적 스타일 지정

• 또는 단순히 사각형 그리기 용도로 활용

예를 들어 Insert 패널의 ‘Feature section’을 보면 다음과 같은 식으로 Frame이 쓰입니다.

• 전체 영역 → 큰 Frame

• 각 Feature → 개별 Frame

• 이미지 → 이미지 Frame

• 텍스트 → 텍스트 Frame

• 버튼 → 버튼 Frame

이처럼 모든 구성 요소가 Frame으로 구성되어 있다는 것을 알게 되면, 어떤 구조든 Frame 단위로 쉽게 분석하고 이해할 수 있습니다.

프레임은 눈에 보이지 않을 수도 있습니다

어떤 프레임은 시각적으로 스타일이 적용된 사각형처럼 보이지만,
어떤 프레임은 완전히 투명한 컨테이너일 수도 있습니다.

Note: Frame의 테두리, 배경색, 그림자, 변형 등 다양한 효과는 오른쪽 속성 패널에서 지정할 수 있습니다.

프레임을 만드는 방법

1. 상단 툴바의 Layout 메뉴에서 Frame 도구 선택

2. 또는 단축키 F 키를 눌러 Frame 도구로 전환

3. 캔버스에서 클릭한 후 드래그하여 원하는 위치에 프레임 생성

Note: 처음에는 대략적인 크기로 그린 후, 오른쪽 속성 패널에서 정확한 사이즈나 위치를 조정하는 경우가 많습니다.

드래그 중 쓸 수 있는 단축키

• Shift → 정사각형 그리기

• Alt / Option → 중심에서 바깥 방향으로 그리기

• Space → 드래그 중 위치 이동

프레임 안에 요소를 넣는 법 (Nesting)

어떤 레이어를 프레임 안으로 끌어다 놓기만 하면 자동으로 자식 요소로 들어갑니다.
프레임 주변에 파란 윤곽선이 나타나면 성공입니다.

• 이 기능은 자동 Nesting이라고 부릅니다.

• 만약 Nesting을 방지하고 싶다면 Spacebar를 누른 상태로 드래그하면 됩니다.

기존 요소들을 프레임으로 감싸기

이미 존재하는 여러 요소를 하나의 프레임으로 감싸고 싶을 때는 다음과 같이 하면 됩니다.

1. 감싸고 싶은 레이어들을 선택

2. 마우스 오른쪽 클릭 > ‘Add Frame’ 선택

3. 또는 Cmd + Enter (Mac) / Ctrl + Enter (Windows)

선택한 요소들을 포함하는 새로운 부모 프레임이 생성됩니다.
반대로, 프레임을 삭제하고 내부 자식만 남기고 싶다면?

• Mac: Cmd + Delete

• Windows: Ctrl + Delete

를 누르면 됩니다.

마무리

지금까지 살펴본 내용을 정리하면 다음과 같습니다.

• Framer에서는 거의 모든 것이 Frame으로 이루어져 있습니다.

• Frame은 콘텐츠를 감싸는 사각형일 뿐 아니라, 스타일과 구조를 모두 담당하는 핵심 단위입니다.

• 계층 구조(Nesting)와 부모-자식 개념을 이해하면, 복잡한 레이아웃도 쉽게 설계할 수 있습니다.

본 글은 Framer 공식 유튜브의 ‘Thinking in Frames (Fundamentals Lesson 4)’ 를 참고해 번역·각색한 콘텐츠입니다.