[Figma] 피그마 활용1-2

01. 디자인이 코드로 변환되는 과정 

1. 디자인을 코드로 변환

2. 코드는 디자인을 레고처럼 쌓음 

- 코드는 기본적으로 네모난 박스 영역을 만듦 (박스모델이라고 부름)

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

- UI를 설계할 때는 코드로 변환할 수 있는 구조로 만들어야 함 

02. 프레임과 그룹 

1. 프레임 Frame

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

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

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

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

2. 그룹 Greop

여러 개체를 하나로 담는 기능

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

- 그룹은 코드 블록으로 인식되지 않음

Q. 그룹은 구체적으로 언제 사용?

- 그룹 기능은 여러 요소를 한번에 담아서 움직일 때 주로 사용

- 복잡한 디자인들을 정리할 필요가 있을 때 그룹을 사용해서 정리하기도 함 

3. 프레임 VS 그룹

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

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

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

Q. 프레임과 그룹 차이?

1) Frame 1, 2, 3, 4 

2) Frame 1, 2 -> Frame Selection (프레임으로 묶기) => Frame 5

3) Frame 3, 4 -> Group Selection (그룹으로 묶기) => Group 1

1. 배경색 

Frame 5, Group 1에 배경색 

- 프레임 : 각각의 코드 블록에 따로 배경색 지정 가능

Frame 1, 2, 5 각각의 코드 블럭임 _ 각각 배경색 지정 가능함 

- 그룹 : 그룹 안 개체 배경색이 다같이 변경

Frame 3, 4의 속성이 Group 1에 묶임 _ Goup 1의 배경을 바꾼다? = Frame 3, 4의 배경색을 바꾼다

2. 윤곽선

Frame 5, Group 1에 윤곽선

- 프레임 : Frame 5에 윤곽선 적용됨

- 그룹 : Group 1에 들어있는 Frame 3, 4에 윤곽선 적용됨 

3. 크기

Frame 5, Group 1 크기 변경

- 프레임 : Frame 5의 크기가 커짐 

- 그룹 : Group 1에 들어있는 Frame 3, 4의 크기가 커짐 

📝정리

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

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

03. 레이어와 정렬

레이어를 알아야 하는 이유

레이어를 쌓은 구조가 곧 코드 구조 => 레이어로 뼈대를 만드는 법에 익숙해져야 함 

- 실제로 작동하는 앱과 웹사이트를 만들기 위해 피그마를 사용 => 피그마에 그리는 것들은 모두 개발과 밀접한 관련

- 개발에서 디자인을 더 쉽게 이해하려면 디자인 구조가 최대한 코드 구조와 같으면 됨 

- 이 코드 구조를 디자인에 반영하기 위해 레이어를 정렬하고 배치

1. 레이어의 개념

우리가 보는 화면들 안에 있는 UI들은 블록 모양으로 쌓임

UI가 쌓이는 방향은 화면 상단에서 하단으로 쌓이게 됨 (하단에 있는 블록이 상단에 있는 블록보다 더 나중에 쌓인 블록)

피그마 개체들이 만들어지면, 자동으로 한 장의 층(Layer)이 됨 

=> 레이어 : 개체 하나하나가 만드는 가상의 층

2. 레이어의 원근

1) 레이어가 쌓이는 방향

- 레이어는 화면 상단에서 하단으로 쌓이지만, 화면 앞에서부터 뒤라는 방향도 존재

- 레이어가 쌓이는 순서는 상하좌우의 평면적인 순서뿐만 아니라 입체적인 앞뒤 순서도 있음

2) 레이어 원근의 개념 

레이어의 원근 : 화면을 보고 있는 내가 느끼는 UI의 멀고 가까운 정도

- 레이어가 앞뒤로 쌓이는 걸 레이어가 멀거나 가깝다는 뜻에서 원근이라고 지칭

- 레이어가 멀고 가까운 걸 다른 말로, 레이어가 화면으로부터 얼마나 떠있는가?

- 화면을 보는 나한테 가까울수록 화면으로부터 더 높이 떠있고, 나한테서 멀수록 화면에 더 낮게 떠 있음

Q. 레이어가 떠 있다는 게 어떤 뜻인가요?

우리가 보는 화면은 평면이지만 화면이 겹쳐있거나 또는 그림자가 있다면 화면들이 입체적으로 느껴짐

우리가 보는 화면을 입체 도형에 대입해보면 X, Y ,Z 방향 존재 

(레이어가 떠 있다는 건 Z축 방향으로 레이어가 더 높이 올라와 있다는 뜻)

📌 입체도형의 축

입체도형의 가로 X, 세로 Y, 높이 Z (Z축 = 수직 높이)

📌 레이어의 높이

실무에서도 가로, 세로, 높이 사용!

개발과의 표현을 통일해서 각각 width, height, z-index (Z값이나 Z인덱스로 쓰임)

3. 레이어 패널 

좌측 사이드 바의 레이어 패널

1) 레이어의 부모-자식 관계

- 감싸고 있는 것과 감싸진 것의 관계를 부모-자식(Parent-Child) 관계라고 함 

2) 레이어 접고 펴기 

 ✅ 레이어 전부 접기  

**MacOS** opt + L 

3) 레이어 순서 변경하기 

- Bring to front (위)(앞)

- Send to back (아래)(뒤)

4. 정렬 기능 

정렬은 컨테이너 안의 개체들을 정렬하고 배치하는 방법

우측 사이드 바의 디자인 패널 맨 위에 정렬 기능

- 단일 개체만 정렬하는 경우 부모 컨테이너를 기준으로 정렬

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

5. 균등 분배 

1) Frame 5안에 있는 1과 2를 누르고 복제

 ✅ 개체 복제 Duplicate

**MacOS** cmd + d

💡 프레임 이름 뒤에 숫자를 입력해 두면, 프레임이 추가됐을 때 자동으로 1씩 늘어남

예) Frame 1이 있을 때 새로운 프레임을 만들면 자동으로 Frame 2라는 이름이 붙음

2) 새로 생성된 Frame 3과 4, 그리고 1과 2까지 모두 선택

3) 정렬 메뉴의 맨 끝에 있는 아이콘 클릭

- 정리하기(Tidy up) : 선택된 개체들을 가로 세로를 딱 맞춰서 정렬

- 수직 간격 균등 분배(Distribute vertical spacing) : 선택된 개체들 사이의 세로 간격을 균일하게 맞춤

- 수평 간격 균등 분배(Distribute horizontal spacing) : 선택된 개체들 사이의 가로 간격을 균일하게 맞춤

04. 오토레이아웃

1. 오토레이아웃의 개념

Q. 오토레이아웃은 왜 알아야 할까?

앱과 웹을 만들 때 화면의 크기가 바뀌어도 유연하게 대응할 수 있도록 만들어야 함

- 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능

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

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

1) 코드 블록의 구조

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

- 이 코드 블록은 피그마에선 프레임으로 만들고, 다른 말로는 컨테이너라고 부름

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

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

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

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

 - UI의 크기 = 개체의 크기 + 패딩

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

 📌 오토레이아웃의 활용

오토레이아웃은 컨테이너를 만들 때도 사용하지만 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 수행

- 컨테이너 = 개체 + 패딩

- 컨테이너를 하나의 개체라고 본다면, 이 개체를 또 패딩으로 감싸서 컨테이너 안에 넣을 수 있음

- 컨테이너들을 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 만듦

4) 정리

- 오토레이아웃은 말 그대로 auto-layout, 즉 레이아웃을 자동으로 조정할 수 있는 기능

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

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

2. 오토레이아웃 만들기

1) 새 오토레이아웃 컨테이너 만들기

프레임이 아닌 상태에서 오토레이아웃을 적용하면 새로운 오토레이아웃 프레임으로 묶임

2) 기존 프레임을 오토레이아웃으로 변환하기

만들어둔 프레임에 오토레이아웃을 적용하면, 프레임에 오토레이아웃 속성이 생김

3) 정리 

오토레이아웃은 2가지 방법으로 만들 수 있음

1. 프레임이 아닌 개체에 오토레이아웃을 적용하기

  a. 기본 패딩값을 가진 오토레이아웃 프레임이 생김

2. 이미 있는 프레임에 오토레이아웃을 적용하기

  a. 프레임 자체가 오토레이아웃 속성으로 변환

3. 오토레이아웃 패널 

1) 오토레이아웃의 정렬 방향

오토레이아웃 안에 있는 프레임을 어떤 방향으로 쌓을 지

- 세로: 수직 방향으로 쌓음

- 가로: 수평 방향으로 쌓음

- 감싸기: 수평 방향으로 쌓다가, 일정 위치부터는 다음 줄에 쌓음

2) 정렬 위치

오토레이아웃의 사이즈가 변할 때, 안에 있는 프레임들이 어디를 기준으로 정렬되는 지 

3) 오토레이아웃 해제

오토레이아웃 속성 제거. 오토레이아웃이 아닌 일반 프레임으로 전환

4) 고급 옵션

오토레이아웃의 고급 속성을 설정

5) 간격

오토레이아웃 안에 프레임이 여러개 있을 때, 프레임 사이의 간격

6) 좌우 패딩

오토레이아웃의 좌우 여백값

7) 상하 패딩

오토레이아웃의 상하 여백값

8) 패딩 개별 조정

상하좌우 패딩을 각각 따로 설정 가능 

4. 오토레이아웃 설정

* 오토레이아웃 내 프레임을 선택할 때 : Ctrl+우클릭, 더블클릭, 레이어 패널에서 직접 클릭

1) 프레임 이름 변경

2) 패딩 조절

3) 간격 조절

4) 정렬 방향 변경

5) 정렬 순서 변경

- 오토레이아웃 내에서는 밑에 있을수록 앞에 있음 (일반 레이어의 순서와는 반대)

05. 컨스트레인트

Q. 컨스트레인트를 꼭 알아야 하나요?

- 오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있음

- 하지만 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어 줘야 함

- 실무에서 많이 사용하는 기능이고, 또 활용하기에 따라 정말 다양한 움직임을 연출해 낼 수 있음

1. 컨스트레인트의 뜻

컨스트레인트(Constraint) : 제약, 제한

오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다

**부모 컨테이너의 크기나 위치가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?** 

2. 컨스트레인트 알아보기

 1) Child Container와 Parent Container 사이의 파란색 점선

파란색 점선이 Child Container가 Parent Container에 대해 가진 제한 =  Constrain

 **‘부모 사이즈가 변할 때, 자식 사이즈는 어떻게 되는지’**

- 자식 컨테이너가 부모에 고정되어 움직이는 일종의 ‘핀’ 위치

- 파란 점선 : 자식 컨테이너의 왼쪽과 위쪽에 있음 

- 부모 컨테이너의 사이즈가 변할 때 자식 컨테이너는 왼쪽과 위쪽 방향으로 고정됨 (Constraint 다른 말로 Anchor(앵커;닻) )

2) 디자인 패널에서 컨스트레인트 확인

캔버스 상에서 보이는 파란 점선은 컨스트레인트 패널 값과 같음

파란 점선이 왼쪽과 위쪽에 있음 -> 컨스트레인트 패널 확인 - Left, Top 

Q. 만약 Left가 아니라 Right라면 점선은 어떻게 나올까?

3. 컨스트레인트 관찰하기

오른쪽으로 고정 변경하기 

1) 컨스트레인트 패널은 Left, Top으로 되어 있는지 확인 

2) 정렬 메뉴에서 오른쪽으로 정렬

- 부모 컨테이너의 오른쪽 가장자리로 이동

- 그때, 컨스트레인트 패널의 Left가 Right로 변경됨

= 오른쪽 정렬을 하면 컨스트레인트도 오른쪽에 생김 

📌즉, 정렬을 사용하면 부모 컨테이너 안에서 어떻게 정렬할 건지 뿐만 아니라, 어디를 기준으로 고정되어야 하는지도 자동으로 변경

4. 컨스트레인트 패널 살펴보기

1. 컨스트레인트 조건을 바로 선택할 수 있어요.

- 우측의 조건값(2,3)을 눌러 선택 or 여기서(1) 바로 선택 

- 하이라이트되는 부분을 누르면 그 부분에 맞는 컨스트레인트 조건이 바로 적용

2. 가로 방향의 컨스트레인트 조건을 선택할 수 있어요.

 

Left	부모의 왼쪽 가장자리를 기준으로 고정
Right	부모의 오른쪽 가장자리를 기준으로 고정
Left and right	부모의 왼쪽 가장자리와 오른쪽 가장자리 모두 기준으로 고정
Center	부모 길이의 중간을 기준으로 고정
Scale	부모 길이에 비례해서

 

3. 세로 방향의 컨스트레인트 조건을 선택할 수 있어요.

 

Top	부모의 위쪽 가장자리를 기준으로 고정
Bottom	부모의 아래쪽 가장자리를 기준으로 고정
Top and bottom	부모의 위쪽 가장자리와 아래쪽 가장자리 모두 기준으로 고정
Center	부모 높이의 중간을 기준으로 고정
Scale	부모 높이에 비례해서

 

5. 프레임 리사이징

1) 리사이징의 개념

- 프레임은 기본적으로 크기가 고정. 이 상태를 Fixed(픽스드;고정된)라고 함 

- 프레임을 오토레이아웃으로 감싸는 순간, Fixed외의 다른 사이즈값이 생김 => 피그마에서는 리사이징이라고 부름

- 부모의 사이즈 값에 따라 자식의 사이즈값이 영향 받음 반대로, 자식의 사이즈 값에 따라 부모의 사이즈값도 영향 받음 

2) 리사이징의 종류 

피그마에서 리사이징은 3가지 값 - Fixed, Hug, Fill

리사이징은 가로 길이와 세로 길이에 각각 적용 가능 

* 기본 프레임은 Fixed 상태, 오토레이아웃을 걸면 Hug, Fill을 가질 수 있게 됨

 

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

 

3) 리사이징 값 확인하기

부모 Hug, 자식 Fixed 상태 -> 자식 Fill 바꾸면 부모 Fixed 됨 -> 부모를 다시 Hug로 바꾸면 자식 Fixed 됨

- 자식이 고정값(fixed)이라면, 부모는 그걸 감싼다(hug).

- 자식이 부모에 맞게 쭉 늘어나야 한다면(fill), 부모는 고정값으로 멈춰야 한다(fixed).

- 반대로, 부모가 자식을 감싸기로 한다면(hug), 자식 사이즈는 고정되어야 한다(fixed).

- 부모와 자식 둘 다 고정일 수도 있다.

4) 정리 

- 보이는 디자인 결과물에는 차이가 없을 수 있지만, 부모와 자식의 리사이징 관계에 따라 실제로 변하는 부분들이 달라짐

- 오토레이아웃 컨테이너를 여러개 쌓기 시작하면 리사이징을 꼼꼼하게 신경써야 동적으로 변하는 레이아웃을 설계할 수 있음