[Figma] 🖼️ 기획의 시작은 프레임부터 – 피그마 프레임 만들기 실습

피그마에서의 작업은 ‘프레임’이라는 개념에서부터 시작된다.
프레임은 PPT의 슬라이드, 엑셀의 시트 같은 개념으로 기획자에게는 ‘하나의 화면’을 구성하는 기본 단위라고 볼 수 있다.

단순히 사각형을 그리는 것 같지만, 실제로 써보면 피그마의 프레임은 꽤 강력하고 유연하다.
이번 포스팅에서는 프레임을 어떻게 만들고, 어떻게 써야 기획서 작업이 수월해지는지 직접 실습해보며 정리해보려 한다.

---

📐 프레임이란 무엇인가요?

피그마에서 프레임(Frame)은 화면을 구성하는 '기본 틀'이다.
디자이너들이 말하는 아트보드(Artboard)와 비슷한 개념이고, 기획자 입장에서는 ‘한 페이지에 해당하는 영역’ 정도로 이해하면 쉽다.

프레임을 잘 구성해두면 
✔ 화면별 레이아웃 정리
✔ 실제 서비스 흐름 구상
✔ 컴포넌트 배치
까지 훨씬 수월해진다.

---

🧩 프레임 만들기 실습 – 기본 조작 따라해보기

1. 툴 선택하기
   왼쪽 상단의 ‘Frame’ 아이콘(또는 단축키 F)을 클릭한다.
   마우스 커서가 십자 모양으로 바뀌면 준비 완료!
   

   

   
   
   
2. 화면 사이즈 선택하기
   프레임을 누르면 오른쪽 패널에 다양한 기기 사이즈가 나타난다. 
   (프레임을 누르지 않은 상태에서 오른쪽을 아무리 찾아봐도 사이즈는 나오지 않는다. 나도 초반에 이것을 잘 몰라서 헤맸었다)
   
   보통 기획자는
   • 모바일: iPhone 13 / Galaxy S20
   • 웹: Desktop (1440px)
     을 기준으로 프레임을 만든다.
     

     

3. 캔버스에 프레임 생성하기
   원하는 사이즈를 클릭하면 캔버스에 프레임이 생성된다.
   또는 직접 드래그해서 원하는 크기로 만들 수도 있다.
   
   
4. 프레임 이름 변경하기
   생성된 프레임을 클릭 후 좌측 레이어에서 이름을 변경하기도 하고 조금더 직관적으로는 저 프레임 좌측 상단 부분에 마우스를 클릭하면 텍스트를 변경할 수 있도록 모드가 바뀐다. 
   ex) Main_Home, 상품상세_버전1

 

---

💡 팁: 프레임은 기획 흐름의 기준점이다

프레임이 깔끔하게 정리돼 있으면 기획 의도도, 서비스 흐름도 더 쉽게 설명할 수 있다.
특히 프레임 간 거리나 정렬이 일정하면 디자이너와 개발자 모두 보기 편하고, 커뮤니케이션도 원활해진다.

예를 들어, 화면 흐름을 왼쪽에서 오른쪽으로 배치하거나 기능별로 상하 정렬을 하면 보기 좋다.

---

🧠 '프레임, 섹션, 사각 도형' 비교 정리

초반에 나는 이 셋의 용도 활용의 차이를 잘 몰랐었다. 
이야기의 시작은 '프레임'이라고 하는데 섹션도 나오고 도형도 나왔다. 
PPT 작업할 때는 주로 '도형'을 활용해서 했으니 프레임으로 모바일 화면을 만들면 되지 않나 싶었다. 
하지만 직접 써보니 이 셋은 활용도 면에서 차이가 있었다. 

프레임이 가장 기본 화면 단위이고, 사각형은 그 안에 화면을 구성하는 요소라 보면 될것 같다. 
섹션은 그들을 다시 그룹화할 수 있는 큰 단위. 

항목	주된 용도	기능적 특징	예시
프레임	화면 단위	Auto Layout, 반응형, 내보내기 가능	앱 화면 설계
섹션	그룹화 + 발표용	프레임 묶기, 슬라이드 구성, 발표 모드	회원가입 흐름도
사각형	시각 요소 제작	단순 도형, UI 구성요소로 활용	버튼, 박스

기획자 입장에서...
프레임에서는 '회원가입'이라는 큰 섹션 안에 '회원가입 정보입력, 인증, 가입완료' 등등의 각각의 화면을 프레임으로 만들어 넣고, 그 각각의 화면의 버튼, 박스 등을 입력하는 것을 도형으로 구분한다고 해야 이해가 될까?
(아래 파란색이 섹션, 빨간색이 프레임, 초록색이 사각형 영역이다.)

 

🔧 마무리하며 – 프레임은 ‘정리의 시작점’이다

기획자가 피그마를 사용할 때 가장 먼저 익혀야 할 기능이 바로 프레임 만들기이다.
처음엔 단순히 사각형 그리는 것처럼 느껴질 수 있지만, ‘정리하고 흐름을 설계한다’는 관점에서 보면 프레임 하나가 훨씬 많은 역할을 하고 있다는 걸 알게 될 것이다.