[사전캠프] 피그마_핵심 개념 ★

2. 피그마 핵심 개념 학습

 

1. 프레임과 그룹

 

1) 프레임의 개념

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

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

- 박스 모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 셈이다.

- 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, 컨테이너(Container)라고도 불린다. 

 

2) 그룹의 개념

• 그룹: 여러 개체를 하나로 묶어주는 기능

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

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

- 그룹은 SVG 이미지로 인식된다고 생각하면 된다.

- When? 여러 요소를 한 번에 담아서 움직일 때 주로 사용한다. 실무에서 그룹을 사용하는 빈도는 적다. 

 

3) 프레임 VS 그룹

- 프레임은 코드 블록을 만드는 기능이고, 실제 코드로 바꿀 수 있는 개체다. 

- 그룹은 편집이나 조정이 필요할 때, 또는 편의를 위해 여러 개체를 하나로 담는 기능이다.

- 프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없다. 

---

2. 부모 자식 관계와 레이어 정렬

---

3. 오토레이아웃

 

1) 개념

• 오토레이아웃: 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능

- 앱과 웹을 만들 때는 크기가 바뀌어도 유연하게 대응할 수 있도록 해야 한다.

- 레이아웃에 유연함을 만들어주는 가장 중요하나 기능

- 프레임을 배치하고 정렬해 레이어를 코드 블록처럼 쌓는 핵심 레이아웃 기능이다. 

 

(1) 코드 블록의 구조

- 우리가 보는 화면의 디자인들은 모두 코드 블록으로 이루어져 있다. 

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

• 패딩(Padding): 코드 블록 안에 개체와 함께 실제 블록의 사이즈가 되는 내부 여백

• 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리

• 마진(Margin): 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

 

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

- 오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용한다. 

- 모든 코드 블록은 내부에 들어있는 개체와, 개체를 둘러싼 패딩(내부 여백)으로 만들어진다. 

- 우리가 만드는 UI의 크기는 '개체의 크기 + 패딩'이다. 

 

(3) 컨테이너를 쌓으려면?

- 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 수행한다.

- 컨테이너를 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 편하게 만들 수 있다. 

 

(4) 정리

- 오토레이아웃은 레이아웃을 자동으로 조정할 수 있는 기능이다.

- 오토레이아웃은 개체를 내부 여백(패딩)으로 감싸 컨테이너로 만든다.

- 오토레이아웃은 간격에 맞게 컨테이너를 쌓을 수 있게 해준다. 

 

2) 만들기

 

• 방법

- 프레임이 아닌 개체에 오토레이아웃을 적용한다.

- 이미 있는 프레임에 오토레이아웃을 적용한다.

---

4. 프레임과 컨스트레인트

 

• 컨스트레인트: 오토레이아웃을 오토레이아웃답게 만들어주는 기능

- 컨스트레인트는 제약(조건), 제한의 뜻이다. 

- 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다는 뜻

- 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있다. 

---

5. 프레임 리사이징

 

1) 개념

• 리사이징

- 프레임은 기본적으로 가로와 세로 길이가 고정이다. 이 상태를 Fixed라고 불린다. 

- 프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈값이 생긴다. 

- 이걸 피그마에서는 리사이징(Re-sizing)이라고 불린다. 사이즈가 변경된다는 뜻이다. 

 

2) 종류

- 피그마에서 리사이징은 3가지 값이 있다. 

- 리사이징의 가로 길이와 세로 길이에 각각 적용할 수 있다. 

 

• 리사이징의 관계 ★

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 쓸 수 있음
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 쓸 수 있음

 

- 어떤 부분을 반응형으로, 동적형으로 만들 것인가 

---

6. 포지션 이해하기

 

1) 개념

• Position

- 포지션은 실제 개발에서도 사용하는 개념이다. 디자인과 레이아웃을 위한 코드인 CSS에서 사용할 수 있다.

- 앱과 웹사이트에 있는 모든 요소들은 스크롤하게 되면 스크롤을 따라 같이 움직인다.

- 이렇게 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 개발에서 포지션이라는 속성을 조정해서 만든다. 

- 피그마에서 이 포지션 값을 조정할 수 있도록 하는 기능이 있다. 

 

2) 종류

 

(1) Static (스태틱)

- 일반적인 요소들이 가지고 있는 포지션이다.

- 기본값이자 스크롤을 하면 같이 따라 움직인다.

 

(2) Fixed (픽스드, 고정된) - 화면 전체

- 화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있다. 

- 우리가 아는 웹사이트의 헤더, 하단의 버튼 등

 

(3) Absolute (앱솔루트) - Parent Container

- Fixed와 유사하지만, 고정되는 기준이 컨테이넌 안이다.

- 즉, Fixed는 화면 전체를 기준으로 하고, Absolute는 본인이 담겨 있는 부모 컨테이너를 기준으로 한다. 

 

(4) Sticky (스티키)

- 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션이다. 

- 스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정되는 것을 뜻한다. 

 

3) 피그마 내 설정

- 프로토타입 패널에서 설정할 수 있다. 

---

숙제