[피그마 강의] 2주차: 프레임, 오토레이아웃 이해하기

 

2-2) 프레임과 그룹

 

프레임이란?

• 프레임은 피그마 디자인의 기본 단위이다.
• 프레임은 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체이다. 
• 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어진다. 
• 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너라고도 부른다. 

 

그룹이란?

• 여러 개체를 조정하거나 디자인을 정리하는 등 여러 개체를 하나로 담는 기능이다. 
• 프레임과 달리 그룹은 코드블록으로 인식되지 않는다. 
• 그룹은 SVG 이미지로 인식한다고 생각하면 된다. 
• 📌그룹은 언제 사용하는지?
  • 여러 요소를 한 번에 담아서 움직일 때 주로 사용한다. 
  • 복잡한 디자인들을 정리할 필요가 있을 때 그룹을 사용해서 정리하기도 한다. 

 

프레임 vs 그룹

• 프레임은 코드 블록으로 만드는 기능이고, 실제 코드로 바꿀 수 있다. .
• 그룹은 편집이나 조정이 필요할 때 쓰는 기능이다. 

1. 프레임*2개 씩 만들고 이를 복사하여, 각각 프레임 셀렉션 & 그룹셀렉션으로 묶어준다. 
2. fill을 눌러보면 프레임은 각각의 배경색 지정 가능하다. ▶️ 별개의 코드 블록이기 때문!
3. 그룹의 경우 하나의 색상으로 바뀜 ▶️ 여러 개체를 하나로 묶어둔 것이기 때문!

• 스타일 적용하거나 크기를 변경해봐도 차이를 느낄 수 있다. 
• UI 디자인 할 때 보통 그룹보단 프레임을 사용한다. 

---

2-3) 부모-자식 관계와 레이어 정렬

 

프레임 정렬하기

• 단일 개체 정렬
  : 📌부모 컨테이너를 기준으로 위치가 정해진다. 
• 다중 개체 정렬
  : 📌 여러 개체를 정렬하는 경우, 기준점에 가장 가까이 있는 개체를 기준으로 정렬된다. 
• 균등 분배
  📌 Tidy up: 선택된 개체들을 가로.세로를 딱 맞춰 정렬한다. 
  📌 distribute verical spacing: 세로 간격을 균일하게 맞춘다. 
  📌 distribute horizontal spacing: 가로 간격을 균일하게 맞춘다. 

---

2-4) 오토레이아웃 기능 살펴보기

 

오토레이아웃이란?

• 오토레이아웃은 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능이다. 
• 앱과 웹을 만들 때 크기가 바뀌어도 유연하게 대응할 수 있도록 만들어야 한다.
• 레이아웃에 유연함을 만들어주는 가장 중요한 기능이 바로 오토레이아웃이다. 

 

코드 블록의 구조

• 코드 블록은 피그마에서는 프레임으로 만들 수 있고, 컨테이너라고도 부른다. 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (2)

• 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
• 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리, 실제 코드 블록의 테두리
• 마진(Margin): 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

 

컨테이너가 만들어지는 원리

• 모든 코드 블록은 내부에 들어있는 개체와, 개체를 둘러싼 패딩(내부 여백)으로 만들어진다. 
• 우리가 만드는 UI 의 크기는 개체의 크기 + 패딩이다. 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (2)

 

컨테이너를 쌓으려면?

• 컨테이너는 개체+ 패딩으로 이루어진다.
• 컨테이너를 하나의 개체라고 본다면, 이 개체를 또 패딩으로 감싸서 컨테이너 안에 넣을 수 있다. 
• 이 컨테이너들을 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 편하게 만들 수 있다. 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (2)

💡 오토레이아웃은 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 수행!

 

 

정리

• 오토레이아웃은 말 그대로 레이아웃을 자동으로 조정할 수 있는 기능이다. 
• 오토레이아웃은 개체를 내부 여백(패딩)으로 감싸 컨테이너로 만든다. 
• 오토레이아웃은 간격에 맞게 컨테이너를 쌓을 수 있게 한다. 

 

오토레이아웃 만드는 방법

1. 프레임이 아닌 개체에 오토레이아웃 적용하기
   텍스트 ▶️ shift + a
2. 이미 있는 프레임에 오토레이아웃 적용하기
   텍스트 ▶️ frame selection ▶️ shift + a

💡 오토레이아웃은 아래로 쌓임