실무에서 바로 쓰는 피그마 - 2.프레임과 페이지 : 효율적인 작업 공간 관리

지난 글에서 Figma의 기본적인 인터페이스를 탐색하고 개인 설정을 통해 작업 환경을 최적화하는 방법을 알아보았습니다. 이제 Figma 디자인 작업의 가장 기본적인 토대이자 핵심 개념인 프레임(Frame)과 페이지(Page)에 대해 심층적으로 다룰 차례입니다. Figma에서 디자인 작업을 시작하려면 이 두가지 개념을 명확히 이해하고 효율적으로 활용하는 것이 필수적입니다. 프레임은 디자인을 담는 그릇이며, 페이지는 이 그릇들을 정리하는 공간이라고 할 수 있습니다. 이 글을 통해 프레임과 페이지를 자유자재로 다루어 여러분의 디자인 워크플로우를 한 단계 업그레이드할 수 있는 방법을 제시하겠습니다.

 

2.1 프레임(Frame)이란 무엇인가? 디자인의 가장 기본적인 단위

Figma에서 프레임은 디자인 작업을 수행하는 일종의 디지털 캔버스 또는 아트보드입니다. 포토샵이나 일러스트레이터의 아트보드와 유사하지만, Figma의 프레임은 훨씬 더 강력하고 유연한 기능을 제공합니다. 모든 디자인 요소(동형, 테스트, 이미지, 컴포넌트 등)는 반드시 프레임 안에 존재해야 합니다.

 

2.2.1 프레임의 특성 및 중요성

• 디자인의 경계 설정 : 프레임은 디자인 영역의 명확한 경계를 정의합니다. 예를 들어, 모바일 앱의 한 화면, 웹사이트의 한 섹션, 또는 특정 컴포넌트의 상태 등을 담는 독립적인 영역이 됩니다.
• 반응형 디자인의 기반 : 프레임은 오토 레이아웃(Auto Layout) 및 제약조건(Constraints)과 결합하여 반응형 디자인을 구현하는데 핵심적인 역할을 합니다. 프레임의 크기가 변해도 그 안에 있는 요소들이 미리 설정된 규칙에 따라 자동으로 재배치되도록 할 수 있습니다.
• 요소의 그룹화 : 프레임은 여러 디자인 요소를 논리적으로 묶는 역할을 합니다. 단순히 요소를 그룹화(Group)하는 것과 달리, 프레임 내에 포함된 요소들은 프레임의 속성에 영향을 받으며, 프레임 자체를 이동하거나 복사할 때 내부 요소들이 함께 움직입니다.
• 클리핑 마스크 기능 : 프레임은 기본적으로 자식 요소를 자신의 경계 밖으로 벗어나지 않도록 잘라내는 클리핑 마스크(Clip content)기능을 가지고 있습니다. 이는 스크롤 되는 영역이나 특정 비율을 유지해야 하는 UI 요소를 디자인할 때 유용합니다.
• 프로토타이핑의 단위 : 각 프레임은 프로토타입 흐름에서 하나의 화면(Screen)으로 인식됩니다. 프레임 간의 연결을 통해 사용자 경험의 시뮬레이션할 수 있습니다.

2.1.2 프레임 생성 방법

프레임을 생성하는 방법은 매우 간단합니다.

1. Frame도구 선택 : 상단 툴바에서 Frame도구(F)아이콘을 클릭합니다.

2. 캔버스에 그리기 : 캔버스 위에서 마우스를 드래그하여 원하는 크기의 프레임을 직접 그릴 수 있습니다.

3. 프리셋 활용 : Frame 도구를 선택하면 우측 속성 패널(Design Panel)에 다양한 디바이스별 프레임 프리셋이 나타납니다.

• Phone : iPhone, Android Large/Small 등 모바일 기기 화면 크기
• Tablet : iPad, Surface Pro 등 태블릿 기기 화면 크기
• Desktop : Desktop, MacBook Pro, iMac 등 데스크톱 화면 크기
• Watch : Apple Watch 등 웨어러블 기기 화면 크기
• Paper : A4, Letter 등 인쇄용지 크기
• Social Media : Instagram Post, Facebook  Post, Twitter Header 등 소셜 미디어 이미지 크기
• Figma Community : Figma 커뮤니티에서 제공하는 추가 프리셋. 
  원하는 프리셋을 클릭하면 해당 크기의 프레임이 캔버스 중앙에 자동으로 생성됩니다.

 

2.1.3 프레임 속성 조절

프레임을 선택한 상태에서 우측 속성 패널(Design Panel)을 통해 다양한 속성을 조절할 수 있습니다.

• 위치 및 크기 :
  X, Y : 캔버스 내 프레임의 X,Y 좌표를 조절합니다.
  W(Witch), H(Height) : 프레임의 가로,세로 길이를 조절합니다.
  Lock Proportions(비율 잠금) : W 또는 H 값을 변경할 때 비율을 유지하려면 체인 아이콘을 클릭하여 잠급니다.
  Rotation(각도) : 프레임을 회전시킵니다.
  Corner Radius(모서리 곡률) :  프레임 모서리를 둥글게 만듭니다. 사각형 프레임에 특히 유용합니다.

 

• Clipping (Clip content) :  이 옵션을 활성화하면 프레임 경계를 벗어나는 자식 요소들이 보이지 않도록 잘라냅니다. 스크롤 가능한 콘텐츠를 디자인할 때 유용하며, 기본적으로 활성화되어 있습니다.
• Fill (배경채우기) : 프레임의 배경색, 그라데이션, 이미지 등을 설정합니다. 일반적으로 화면의 배경색으로 사용됩니다.
• Stroke (테두리 선) : 프레임의 테두리 선을 추가하고 색상, 두께, 스타일 등을 조절합니다.
• Effects (효과) : 그림자, 블러 등 시각적 효과를 추가합니다.
• Export (내보내기) : 프레임 전체를 이미지(PNG,JPG,SVG) 또는 PDF 파일로 내보낼 수 있습니다.

 

 

2.1.4 프레임과 그룹(Group)의 차이점

Figma에서 여러 요소를 묶는 방법에는 프레임 외에도 그룹(Group)이 있습니다. 두 가지는 비슷해 보이지만 중요한 차이점이 있습니다.

특징	프레임(Frame)	그룹(Group)
개념	독립적인 디지털 캔버스, 아트보드	단순히 여러 요소를 묶는 컨테이너
경계	명확한 경계를 가지며, 내부 요소를 자를 수 있음(Clip content)	명확한 경계가 없으며, 내부 요소가 밖으로 돌출 가능
반응형	오토 레이아웃, 제약 조건 적용 가능	제약 조건은 적용되지만, 오토 레이아웃은 적용 불가
속성	배경색, 테두리, 효과 등 독립적인 속성 가짐	내부 요소의 평균적인 속성을 따르거나 없음
레이어 구조	자식 요소 포함(컨테이너 역할)	내부 요소들을 단순히 묶음(조작 편리성)
용도	UI 화면, 컴포넌트, 반응형 디자인의 기본 단위	여러 요소를 함께 이동/조작할 때 편리

결론적으로, 디자인 요소들을 논리적인 단위로 묶고, 반응형 동작을 정의하며, 독립적인 속성을 부여하고 싶다면 프레임을 사용하는 것이 좋습니다. 단순히 여러 요소를 한 번에 이동하거나 크기를 조절하는 등의 편리성만을 원한다면 그룹을 사용해도 무방합니다. 하지만 복잡한 UI디자인에서는 그룹보다는 프레임을 활용하는 것이 훨씬 효율적이고 체계적입니다.

 

2.2 페이지(Page)란 무엇인가? 작업 공간의 체계적인 정리

Figma에서 페이지는 여러 프레임과 다른 디자인 요소를 담을 수 있는 최상위 작업 공간입니다. Figma 파일은 여러 개의 페이지를 가실 수 있으며, 각 페이지는 독립적인 캔버스를 제공합니다.

 

2.2.1 페이지의 중요성 및 활용 목적

• 프로젝트 관리 : 복잡한 디자인 프로젝트를 체계적으로 관리하는 데 필수적입니다.
  단계별 분리 : 디자인 프로세스의 각 단계를 페이지로 분리할 수 있습니다.(예 : 아이데이션, 와이어프레임, UI 디자인, 프로토타입, 디자인 시스템)
  기능별 분리 : 앱이나 웹사이트의 각 기능별로 페이지를 나눌 수 있습니다. (예 : 로그인/회원가입 페이지, 마이페이지, 상품 목록 페이지, 결제 페이지)
  버전 관리 : 특정 버전의 디자인을 별도 페이지로 저장하여 관리할 수 있습니다. (예 : v1.0 디자인, v1.1 업데이트)
  개인 작업 공간 : 팀 파일 내에서 개인적인 스케치나 실험을 위한 페이지를 만들 수 있습니다.
• 협업 효율성 증대 : 여러 디자이너가 동일한 Figma 파일에서 작업할 때, 각자 다른 페이지에서 작업하면 충돌을 줄이고 작업 흐름을 명확하게 유지할 수 있습니다.
• 성능 최적화 : 하나의 페이지에 너무 많은 오브젝트가 있으면 Figma의 성능이 저하될 수 있습니다. 중요한 디자인 요소들을 여러 페이지로 분산시키면 파일을 더 가볍고 빠르게 유지하는 데 도움이 됩니다.

2.2.2 페이지 생성 및 관리 방법

페이지는 좌측 하단의 페이지 패널(Page Panel)에서 관리합니다.

1. 새 페이지 추가 : 페이지 패널 하단의 +버튼을 클릭하여 새 페이지를 추가합니다. 기본 이름은 Page2,Page3 등으로 자동 지정됩니다.

2. 페이지 이름 변경 : 페이지 이름을 더블 클릭하여 프로젝트의 목적에 맞게 변경합니다. (예 : 01.Wireframes, UI Design-Homepage, Design System - Components)

3. 페이지 순서 변경 : 페이지를 드래그 앤 드룹하여 원하는 순서로 재배열 할 수 있습니다.

4. 페이지 복제 (Duplicate Page) : 특정 페이지를 마우스 우클릭하고 Duplicate Page를 선택하여 동일한 내용의 페이지를 복사할 수 있습니다. 이전 버전을 보존하고 새 작업을 시작할 때 유용합니다.

5. 페이지 삭제 (Delete Page) : 페이지를 마우스 우클릭하고 Delete Page를 선택하여 페이지를 삭제합니다.(주의 : 삭제된 페이지는 복구하기 어려울 수 있으니 신중하게 사용하세요.)

6. 페이지 찾기 (Find Page) : 페이지가 많아지면 페이지 패널 상단의 검색창을 이용하여 특정 페이지를 빠르게 찾을 수 있습니다.

 

2.2.3. 효과적인 페이지 명명 규칙(Naming Convention)

페이지가 많아질수록 혼란을 피하기 위해 일관된 명명 규칙을 사용하는 것이 매우 중요합니다.

• 숫자 접두사 사용 : 작업 흐름이나 중요도에 따라 01,02와 같이 숫자를 붙이면 정렬 및 찾기 편리성이 향상됩니다.
  예 : 01. Ideation & Flow, 02. Wireframes, 03. UI Screens - Core, 04. UI Screens - Secondary, 99.Archive
• 명확하고 간결한 이름 : 페이지의 목적을 명확하게 나타내면서도 너무 길지 않게 이름을 짓습니다.
• 대시(-) 또는 언더스코어(_) 사용 : 단어와 단어 사이를 구분할 때 활용합니다.
• 이모지 활용(선택사항) : 일부 디자이너들은 페이지의 성격을 나타내는 이모지를 사용하여 시각적으로 구분하기도 합니다. (예 : 🎯Player, 📱Mobile UI 등)

2.3 프레임과 페이지의 실제 활용 시나리오

실무에서 프레임과 페이지를 어떻게 활용하는지 몇 가지 시나리오를 통해 이해를 높여보겠습니다.

 

시나리오 1 : 모바일 앱 UI 디자인

• 페이지 구성
  01. User Flows : 앱의 주요 사용자 흐름을 나타내는 와이어프레임 또는 스케치 프레임들.
  02. Core Screens : 로그인, 홈, 마이페이지 등 핵심 UI 화면 프레임들.
  03. Secondary Screens : 설정, 알림, 상세 페이지 등 보조 UI 화면 프레임들.
  04. Prototype : 핵심 화면들로 구성된 프로토타입 흐름.
  05. Components : 버튼, 입력 필드, 카드 등 재사용 가능한 UI 컴포넌트 프레임들.
  99. Archive : 사용하지 않게 된 이전 버전 디자인이나 참고 자료 프레임들.

• 프레임 활용 : 
  각 화면(로그인, 홈 등)은 별도의 모바일 프리셋 프레임으로 만듭니다.
  로그인 화면 내의 입력 필드, 버튼 등은 각각 작은 프레임으로 만들어 오토 레이아웃을 적용하여 반응성을 확보하고, 나중에 컴포넌트로 만듭니다.
  스크롤이 긴 화면은 프레임의 높이를 늘리고 Clip content 옵션을 사용하여 화면 밖으로 나가는 콘텐츠를 숨깁니다. 

시나리오2 : 웹사이트 랜딩 페이지 디자인

• 페이지 구성
  01. Concepts : 다양한 랜딩 페이지 레이아웃 아이디어를 담은 프레임들.
  02. Final Design : 최종 확정된 랜딩 페이지의 프레임(데스크톱, 태블릿, 모바일 각 프레임)
  03. Components : 랜딩 페이지에 사용된 섹션별 컴포넌트 프레임들(예 : 히어로 섹션, 특장점 섹션 등)
  04. Marketing Assets : 랜딩 페이지에서 파생된 배너, 소셜 미디어 이미지 등을 담는 프레임들.
• 프레임 활용 :
  데스크톱, 태블릿, 모바일 등 다양한 해상도별 프레임 프리셋을 사용하여 반응형 디자인을 동시에 고려합니다.
  각 섹션(헤더, 히어로, 푸터 등)은 별도의 프레임으로 만들고, 이들을 다시 하나의 큰 랜딩 페이지 프레임 안에 배치하여 전체 구조를 시각화합니다.
  섹션 프레임 내의 텍스트나 이미지는 제약조건(Constraints)을 사용하여 브라우저 크기 변화에 따라 요소들이 어떻게 반응할지 설정합니다.

시나리오3 : 디자인 시스템 구축

• 페이지 구성 : 
  01. Foundations : 컬러 팔레트, 타이포그래피, 스페이싱 가이드 등 기본 스타일을 정의하는 페이지. 
  02. Buttons : 버튼 컴포넌트의 모든 상태와 종류를 담는 페이지.
  03. Forms : 입력 필드, 체크박스, 라디오 버튼 등 폼 관련 컴포넌트 페이지.
  04. Navigation : 내비게이션 바, 탭, 브레드크럼 등 내비게이션 요소 페이지.
  05. Data Display : 카드, 테이블, 차트 등 데이터 표시 컴포넌트 페이지.
  99. Examples : 구축된 컴포넌트들을 활용한 실제 UI 예시 페이지.
• 프레임 활용 : 
  각 컴포넌트(예 : 기본 버튼, 호버 상태 버튼, 비활성화 버튼 등)는 각각 별도의 프레임으로 만들고, 이들을 하나의 큰 프레임(예 : Buttons 페이지 내의 Primary Button 프레임) 안에 모야 베리언트(Variants)로 관리합니다.
  컴포넌트의 상태별로 명확한 이름을 가진 프레임을 사용하여 나중에 컴포넌트로 만들 때 구조를 명확히 합니다.
  
  

2.4 효율적인 작업 공간 관리를 위한 팁

프레임과 페이지를 더욱 효율적으로 사용하기 위한 몇 가지 추가 팁입니다.

1. 메인 작업 페이지는 하나로 유지 : 너무 많은 페이지를 동시에 오가기보다, 현재 가장 활발하게 작업하는 페이지를 명확히 하고, 나머지 페이지는 참고용이나 보관용으로 활용합니다.

2. 커버 페이지 만들기: Figma 파일 대시보드에서 파일을 썸네일로 보이는 커버 프레임을 만드는 것이 좋습니다. 새페이지를 만들고 이름을 Cover로 지정한 뒤, 이 페이지 안에 파일을 대표할 수 있는 디자인을 담은 프레임을 하나 만들어두면, 대시보드에서 파일 내용을 쉽게 파악할 수 있습니다.(권장 크기 : 640 x 320 px 또는 1280 x 640 px emd 2:1비율)

3. 레이어 정리 습관 : 프레임 안에 많은 요소가 쌓일수록 레이어 패널이 복잡해집니다. 주기적으로 레이어의 이름을 명확하게 지정하고, 관련 요소들을 프레임이나 그룹으로 묶어 정리하는 습관을 들여야 합니다. Cmd/Ctrl + Shift + G 는 그룹 해제, Cmd/Ctrl + Alt + G는 프레임입니다.

4. 그리드(Grid) 및 레이아웃 그리드 활용 : 프레임 내에 그리드 시스템을 적용하여 디자인 요소들의 정렬을 일관성 있게 유지합니다. 프레임을 선택한 상태에서 우측 속성 패널의 Layout grid에서 설정할 수 있습니다. 이는 특히 웹/앱 디자인에서 일관된 간격과 정렬을 유지하는 데 필수적입니다.

5. 컴포넌트화 고려 : 자주 사용되는 UI 요소는 프레임으로 만들어 컴포넌트화하여 재사용을 높이고 디자인 일관성을 유지합니다. (이는 다음 주제에서 더 자세히 다룰 예정입니다.)

 

2.5 마치며 : 디자인 구조화의 시작 

이 글을 통해 Figma의 프레임과 페이지 개념을 깊이 있게 이해하고, 이를 통해 디자인 작업을 어떻게 효율적으로 관리하고 구조화할 수 있는지 알아보았습니다. 프레임은 디자인을 담는 개별적인 화면 또는 섹션이며, 페이지는 이러한 프레임들을 논리적으로 분류하고 정리하는 사위 공간입니다.

 

이 두 가지 개념을 마스터하는 것은 Figma를 통한 체계적인 디자인 워크플로우를 구축하는 데 있어 가장 기본적이면서도 중요한 단계입니다. 처음에는 조금 어렵게 느껴질 수 있지만, 실제 프로젝트를 진행하며 직접 프레임과 페이지를 나누고 정리하는 연습을 반복하면 곧 익숙해질 것입니다.

 

다음 글에서는 Figma의 가장 강력한 기능 중 하나인 오토 레이아웃(Auto Layout)에 대해 다룰 예정입니다. 프레임 내에서 요소들을 자동으로 정렬하고 반응형으로 만드는 오토 레이아웃은 여러분의 디자인 생산성을 비약적으로 높여줄 것입니다. 프레임과 페이지로 다져진 기반 위에 오토 레이아웃이라는 강력한 도구를 더해 더욱 멋진 디자인을 만들어 나가는 여정을 계속 함께 하시죠!