0115_[이론] figma (+오토레이아웃, 컨스트레인트)

1) 오토레이아웃의 개념

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

- 우리는 모두 다양한 크기의 핸드폰과 모니터를 사용해요.

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

- 레이아웃에 유연함을 만들어주는 가장 중요한 기능이 바로 오토레이아웃이에요.

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

 

1) 코드 블록의 구조

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

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

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

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

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

 

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

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

- 즉, 우리가 만드는 UI의 크기는 개체의 크기 + 패딩이에요.

 

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

- 컨테이너는 개체와 패딩으로 이루어져요.

- 컨테이너를 아래로 쌓아 내려가는 게 코드 블록이 쌓이는 원리라는 걸 배웠어요.

- 그렇다면, 피그마에서도 컨테이너가 자동으로 아래로 쌓이게 한다면 매우 편리하겠죠?

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

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

 

4) 정리

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

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

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

 

---

2) 오토레이아웃 만들기

 

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

- 1) 텍스트 레이어 2개 만들기

텍스트 레이어를 만들고 컨테이너 1, 컨테이너 2라고 적어 주세요.

- 2) 컨테이너 1 이라고 쓴 텍스트 레이어를 선택해 주세요.

- 3) 캔버스에서 컨테이너 1 레이어에 마우스를 대고, 마우스 오른쪽 버튼을 눌러 주세요.

- 4) 메뉴에서 Add auto layout을 적용해 주세요.

 

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

- 1) 컨테이너 2라고 쓴 텍스트 레이어를 선택해 주세요

- 2) 캔버스에서 컨테이너 2 레이어에 마우스를 대고, 마우스 오른쪽 버튼을 눌러 주세요.

- 3) 메뉴에서 Frame Selection을 눌러 프레임으로 담아주세요.

- 4) Frame 2를 선택하고, 오토레이아웃을 적용해주세요

 

정리!

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

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

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

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

---

3) 오토레이아웃 패널 둘러보기

1. 오토레이아웃의 정렬 방향: 오토레이아웃 안에 있는 프레임을 어떤 방향으로 쌓을 지를 정해요.

a. 세로: 수직 방향으로 쌓아요

b. 가로: 수평 방향으로 쌓아요

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

 

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

3. 오토레이아웃 해제: 오토레이아웃 속성을 제거해요. 오토레이아웃이 아닌 일반 프레임으로 변경돼요.

4. 고급 옵션: 오토레이아웃의 고급 속성을 설정할 수 있어요.

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

6. 좌우 패딩: 오토레이아웃의 좌우 여백값이에요.

7. 상하 패딩: 오토레이아웃의 상하 여백값이에요.

8. 패딩 개별 조정하기: 상하좌우 패딩을 각각 따로 설정할 수 있어요.

 

패딩 조절하기

1) 컨테이너1을 선택합니다.

2) 오토레이아웃 패널에서 좌우 패딩을 20으로, 상하 패딩을 16으로 바꿉니다.

 

---

 

05. 컨스트레인트

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

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

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

- 실무에서 많이 사용하는 기능이고, 또 활용하기에 따라 정말 다양한 움직임을 연출해 낼 수 있기 때문에 반드시 알아야 해요!

 

1) 컨스트레인트의 뜻

- 컨스트레인트(Constraint)는 제약, 제한이라는 뜻이에요.

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

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

 

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

부모 사이즈가 변할 때, 자식 사이즈는 어떻게 되는지에 대한 것.

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

 

3) 컨스트레인트 패널 살펴보기

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

우측의 조건값을 눌러 선택할 수도 있지만, 여기서 바로 선택하는 방법도 있어요.

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

5) 프레임 리사이징

리사이징의 개념

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

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

- 이걸 피그마에서는 리사이징이라고 불러요.

- 부모의 사이즈 값에 따라 자식의 사이즈값이 영향을 받아요.

 

리사이징의 종류

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

- 리사이징은 가로 길이와 세로 길이에 각각 적용할 수 있어요.

정리

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

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

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

- 부모와 자식 둘 다 고정일 수도 있어요 🙂