Figma 프레임(Frame) 완전 정복: 프레임 vs 그룹, Auto Layout까지 한 번에

-
Figma 프레임(Frame) 완전 정복: 프레임 vs 그룹, Auto Layout까지 한 번에

Figma 프레임(Frame) 완전 정복
: 프레임 vs 그룹, Auto Layout까지 한 번에

안녕하세요 😊
그동안 제가 작성한 Figma 관련 글들은, 기획자가 이미 Figma를 어느 정도 능숙하게 사용하고 있다는 전제에서 기획서 작성에 도움이 되는 내용 위주로 구성해 왔습니다.

그런데 최근 PPT를 처음 접하는 분들을 위한 글을 쓰다 보니, Figma 역시 처음 마주하는 분들도 분명히 있겠다는 생각이 들었습니다. 자연스럽게 제가 처음 Figma를 접했을 때 느꼈던 난감함도 함께 떠올랐고요.

그래서 이번 글부터는, 제가 처음 Figma를 배우면서 특히 생소하게 느꼈던 개념들을 중심으로 조금 더 기초적인 이야기부터 차근차근 풀어보려 합니다.

Figma를 처음 배우면 가장 먼저 부딪히는 단어가 바로 프레임(Frame)입니다. 화면을 만들고 싶은데, 어디에 담아야 안정적으로 굴러갈지 막막한 순간이 찾아오죠.

이 글에서는 프레임의 개념부터 그룹과의 차이, 프레임을 만드는 방법, Auto Layout과의 관계, 그리고 실무에서 자주 쓰는 패턴과 초보자가 자주 하는 실수까지 한 번에 정리해 보겠습니다.

Figma 프레임(Frame) 완전 정복 이미지

1) 프레임이 정확히 뭔가요?

프레임(Frame)은 화면 단위의 컨테이너입니다. 모바일 화면 하나, 웹 페이지 한 장, 모달 하나를 보통 프레임 1개로 시작합니다.

  • 화면 크기/해상도 기준을 가진다
  • 여러 오브젝트(텍스트, 버튼, 이미지 등)를 담는다
  • 반응형 제약조건(Constraints), 스크롤(Scrolling) 같은 화면 동작을 설정할 수 있다

프레임은 “무대”이고, 오브젝트는 “배우”입니다. 무대가 없으면 배우가 어디에서 연기해야 할지 헷갈립니다 🎭

2) 프레임 vs 그룹, 헷갈리면 여기서 끝

가장 많이 섞이는 개념이 그룹(Group)입니다. 결론부터 말하면: 화면은 프레임, 묶음은 그룹입니다.

프레임과 그룹 차이
구분 프레임(Frame) 그룹(Group)
크기 기준 화면 기준 가능 내용물 기준(자동으로 감싸는 느낌)
반응형(제약조건) 가능 불가(제한적)
Auto Layout 가능 제한적
스크롤 가능 불가

그룹은 “박스 없는 쇼핑백”, 프레임은 “규격 상자”입니다. 상자는 쌓아도 안정적이고, 쇼핑백은 흐느적합니다 🛍️📦

3) 프레임 만드는 방법(가장 빠른 루트)

  1. F 키를 누릅니다.
  2. 오른쪽 패널에서 디바이스 프리셋(예: iPhone, Desktop)을 선택합니다.
  3. 캔버스에 클릭해서 프레임을 생성합니다.

프리셋 기반 프레임을 쓰면 “이 화면이 몇 px인가요?” 같은 협업 질문이 줄어듭니다. 화면 기준이 딱 잡히면, 말이 덜 꼬입니다. (사람은 기준이 없으면 토론이 아니라 설전이 되기 쉽습니다…)

4) Auto Layout과 프레임의 관계

Auto Layout은 기본적으로 프레임에서 가장 깔끔하게 동작합니다. 버튼, 카드 리스트, 폼처럼 “규칙적으로 늘었다 줄었다” 하는 UI는 Auto Layout이 정답인 경우가 많습니다.

  • 버튼 패딩(여백) 자동 조정
  • 리스트 간격 유지
  • 텍스트 길이가 늘어나도 레이아웃 안정

Auto Layout은 “정리정돈 로봇”입니다. 프레임이라는 방이 있어야 로봇이 깔끔하게 정리합니다 🤖🧹

5) 실무 관점에서 프레임을 쓰는 패턴 3가지

관점 A. 기획자

  • 화면 단위로 커뮤니케이션이 명확해집니다.
  • 개발 전달 시 스펙의 기준점이 됩니다.

관점 B. 디자이너

  • 반응형 제어가 쉬워집니다.
  • 컴포넌트 재사용 흐름이 매끄러워집니다.

관점 C. 협업

  • 코멘트가 화면 기준으로 달려서 “어디 얘기죠?”가 줄어듭니다.
  • 버전 관리가 깔끔해집니다.

6) 초보가 자주 빠지는 함정

  • 프레임 없이 오브젝트부터 만들기
  • 그룹만 잔뜩 사용하기
  • 화면 전체를 하나의 거대한 프레임으로 뭉치기

이 상태로 시간이 지나면 수정할 때 “도대체 어디가 어디에 붙어 있지?”라는 퍼즐이 됩니다. 프레임은 퍼즐 조각에 번호를 붙이는 행동입니다. 번호가 있으면 맞추기 쉽습니다 🧩

7) 한 줄 결론

Figma 프레임은 디자인의 기준 좌표입니다. 좌표가 흔들리면 전체가 흔들리고, 처음에 잡아두면 끝까지 편해집니다.

FAQ

Q 프레임을 페이지 단위로 나누는 게 좋을까요, 한 페이지에 여러 프레임을 두는 게 좋을까요?

A 협업과 탐색 속도를 생각하면 한 페이지에 여러 프레임이 기본적으로 효율적입니다. 다만 화면 수가 너무 많아지면 페이지를 기능/플로우 기준으로 나누는 방식이 좋습니다.

Q 모바일과 웹을 동시에 디자인할 때 프레임 구조는 어떻게 잡는 게 효율적일까요?

A 페이지를 “Mobile”, “Web”로 나누고, 각 페이지 안에서는 화면(프레임) 단위로 나열하는 방식이 실무에서 안정적입니다. 공통 컴포넌트는 별도의 “Components” 페이지(또는 라이브러리 파일)로 분리하면 유지보수 비용이 줄어듭니다.

Q 프레임과 컴포넌트를 결합해서 수정 비용을 최소화하는 패턴이 궁금합니다.

A 화면 프레임 안에는 “인스턴스(컴포넌트)”를 배치하고, 레이아웃은 Auto Layout 프레임으로 구성하는 방식이 대표적입니다. 이렇게 하면 컴포넌트 수정이 전체 화면에 전파되며, 화면별 예외는 오버라이드로 관리할 수 있습니다.

출처