피그마 기초 완전 정복 - 피그마 핵심 개념 학습 (프레임과 화면 구조 이해 편)

1. 오늘 학습 키워드

- 프레임(Frame)

- 그룹(Group)

- 레이어의 부모 자식 관계

- 정렬 기능

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<프레임과 그룹>

프레임(Frame)

- 단축키 F로 사용 가능

- 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체

- 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐

- 다른 개체나 프레임을 넣을 수 있기 떄문에 컨테이너(Container)라고도 불림

 

1. 디자인을 코드로 변환

 

2. 코드는 디자인을 레고처럼 쌓음
- 코드는 기본적으로 네모난 박스 영역을 만듬 = 박스 모델

 

3. 웹과 앱은 코드를 읽고 디자인을 다시 바꿔서 화면에 보여줌

 

→ UI를 설계할 때는 코드로 변환할 수 있는 구조로 만들어야 함
→ 구조를 위한 기능이 프레임임

 

그룹(Group)

- 여러 개체를 하나로 묶어주는 기능

- 여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능

- 프레임과 달리 그룹은 코드 블록으로 인식되지 않음

- 그룹은 SVG 이미지로 인식

- 여러 요소를 한번에 묶어주거나 복잡한 디자인을 정리할 때 그룹을 사용해 정리함

- 실무에서는 그룹을 사용하는 빈도가 매우 적은 편임

 

 

프레임 VS 그룹

프레임
- 코드 블록을 만드는 기능

- 실제 코드로 바꿀 수 있는 개체

- 개발에 필요한 속성 적용 가능

그룹

- 편집이나 조정이 필요할 때 여러 개체를 하나로 묶는 기능

- 개발에 필요한 속성 적용 불가

 

[위는 프레임, 아래는 그룹]

 

1. 배경색 지정

• 프레임은 각각 블록에 배경색을 따로 지정할 수 있음
  → 각각의 프레임이 별개의 코드 블록이기 때문
• 그룹은 그룹 안에 있는 개체들의 배경색이 변경됨
  → 여러 개체를 하나의 그룹으로 묶었기 때문
  

  

 

2. 윤곽선 변경

• 프레임은 각각의 블록에 윤곽선을 따로 지정할 수 있음
• 그룹은 그룹 안에 있는 개체들의 윤곽선이 변경
  

  

3. 크기 변경

• 프레임은 일반적으로 크기가 고정되어 있음
  둘러싸고 있는 프레임의 사이즈를 변경하더라도 안에 있는 프레임은 영향 받지 않음
• 그룹은 조정 편의를 위해 하나에 담았기 때문에 그룹 안의 모든 개체가 동시에 영향을 받
  

  

 

→ 프레임은 코드 블록을 만드는 기능이면서 동시에 코드 블록 그 자체임

→ 그룹은 여러 개체를 하나로 담아두는 기능임

 

 

 

<레이어의 부모-자식 관계 (Parent-Child)>

- 다른 개체를 포함하는 개체를 부모(Parent), 포함되는 개체를 자식(Child) 이라고 함

- 자식 개체는 부모 안에 포함되어 함께 이동하고 관리됨

- 레이어 패널에서 #은 프레임을 뜻함

- 레이어 패널에서 화살표를 누르면 부모를 펼처서 자식을 보거나 또는 접을 수 있음

- 레이어 전부 접기
MacOS → opt+L

Windows → alt+L

 

 

 

<정렬 기능>
정렬
- 컨테이너 안의 개체들을 정렬하고 배치하는 방법

- 프레임을 선택하면 위치 패널에서 정렬 기능이 활성화됨

 

 

단일 개체 정렬하기

1. 왼쪽에 붙이기 (Align left)

- 부모 컨테이너의 좌측 가장자리에 붙임

2. 수평 가운데에 놓기(Align horizontal-center)

- 부모 컨테이너의 가로를 기준으로 가운데에 놓임

3. 오른쪽에 붙이기(Align right)

- 부모 컨테이너의 우측 가장자리에 붙임

 

4. 위에 붙이기(Align top)

- 부모 컨테이너의 위쪽 가장자리에 붙임

5. 수직 가운데에 놓기(Align vertical-center)

- 부모 컨테이너의 세로를 기준으로 가운데에 놓임

6. 아래에 붙이기(Align bottom)

- 부모 컨테이너의 아래쪽 가장자리에 붙임

 

→ 단일 개체만 정렬하는 경우, 부모 컨테이너를 기준으로 위치가 정해짐

 

 

다중 개체 정렬하기

1. 왼쪽에 붙이기 (Align left)

- 가장 좌측에 있는 개체를 기준으로 정렬함

2. 수평 가운데에 놓기(Align horizontal-center)

- 두 개체의 가운데 평균 위치에 가까운 것을 기준으로 정렬함

3. 오른쪽에 붙이기(Align right)

- 가장 우측에 있는 개체를 기준으로 정렬함

 

4. 위에 붙이기(Align top)

- 가장 위쪽에 있는 개체를 기준으로 정렬함

5. 수직 가운데에 놓기(Align vertical-center)

- 두 개체의 가운데 평균 위치에 가까운 것을 기준으로 정렬함

6. 아래에 붙이기(Align bottom)

- 가장 아래쪽에 있는 개체를 기준으로 정렬함

 

→ 여러 개체를 정렬하는 경우, 기준점에 가장 가까이에 있는 개체를 기준으로 정렬함

 

 

균등 분배하기

 

1. 정리하기(Tidy up)

- 균등 간격

- 선택된 개체들을 가로 세로를 딱 맞춰서 정렬함

- 어떤 식으로 정렬될지는 선택된 개체들의 배치에 따라 달라짐

 

2. 수직 간격 균등 분배(Distribute vertical spacing)

- 새로 간격 분배

- 선택된 개체들 사이의 세로 간격을 균일하게 맞춰줌

 

3. 수평 간격 균등 분배(Distribute horizontal spacing)

- 가로 간격 고르게 분배

- 선택된 개체들 사이의 가로 간격을 균일하게 맞춰줌

---

3. 학습하며 겪었던 문제점 & 에러

1) 

 학습 과정 도중 프레임과 그룹을 구분하며 실습하는 과정에서 프레임으로 제대로 묶였는지 확인하기 어려웠다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 레이어 패널을 통해 부모-자식 구조와 프레임 생성 여부를 확인할 수 있다는 것을 알게 되었다.

2)

 학습 과정 도중 여러 부모 개체가 있을 때 하나의 부모 개체를 다른 부모 개체 안에 넣을 수 있는지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 프레임은 다른 프레임 안에 포함될 수 있으며 부모-자식 관계가 중첩되어 구성될 수 있다는 것을 알게 되었다.

3)

 학습 과정 도중 균등 분배 기능의 개념은 이해했지만 실제로 적용했을 때 어떤 기준으로 간격이 조정되는지 이해하기 어려웠다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 여러 예제를 직접 만들어 보며 기능의 동작 방식을 확인할 수 있었다.