피그마 기초 완전 정복 - 피그마 핵심 개념 학습 (자동 배치와 반응형 레이아웃 편)

1. 오늘 학습 키워드

- 오토레이아웃

- 컨스트레인트

---

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

 

<오토레이아웃 (Auto-layout)>

- 개체를 패딩으로 감싸 컨테이너(프레임)를 만드는 기능

- 컨테이너를 일정한 방향과 간격으로 자동 배치하는 기능

- 여러 컨테이너를 쌓아 UI 구조를 구성하는 기능

- 요소 간 간격과 정렬을 자동으로 관리하는 기능

- 콘텐츠 변화에 따라 레이아웃을 유연하게 조정하는 기능

 

 

코드 블록의 구조 = 컨테이너

- 화면을 구성하는 디자인 요소들은 코드 블록 구조로 이뤄짐

- 피그마에선 프레임으로 만들 수 있음

패딩(Padding)

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

보더(Border)

- 코드 블록 내부 공간 바로 바깥의 가장자리, 실제 코드 블록의 테두리

마진(Margin)

- 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

 

 

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

- 개체를 패딩으로 감싸 컨테이너(프레임)을 만들 때 사용함

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

- UI의 크기는 개체의 크기 + 패딩으로 결정됨

 

 

컨테이너 정렬과 오토레이아웃

- 오토레이아웃은 컨테이너를 일정한 간격으로 자동 정렬해주는 기능임

- 컨테이너는 개체와 패딩으로 구성됨

- 컨테이너는 중첩하여 화면 구조를 설계할 수 있음

- 컨테이너 간 간격과 배치를 효율적으로 관리할 수 있음

 

 

오토레이 컨테이너 만들기

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

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

- 마우스 우 클릭 후 오토레이아웃 추가를 누르면 적용됨

 

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

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

- 프레임에 오토레이아웃을 적용하기 위해 shift+A 눌러주기

- 오토레이아웃이 적용됨

 

 

오토레이아웃 패널

 

 

오토레이아웃 내부 프레임 순서

- 일반 레이어에서는 위에 있는 레이어가 더 앞에 있음
- 오토레이아웃 프레임 안에서는 아래에 있는 레이어가 더 앞에 있음

 

 

 

<컨스트레인트 (Constraint)> = 앵커, 닻 (Anchor)

- 제약(조건), 제한이란 의미

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

- 부모 컨테이너 크기 변화에 따른 자식 컨테이너의 동작 방식을 설정함

 

1. 두 개의 프레임 생성 (Parent Container, Child Container)

 

2. Child Container를 Parent Container 안으로 드래그

→ 프레임을 다른 프레임 안으로 드래그하면 자동으로 들어가짐

파란색 점선 = 컨스트레이트

- Child Container가 Parent Container에 대해 가진 조건

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

 

- 위치 패널을 통해 조절 가능

---

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

1) 

 학습 과정 도중 컨스트레인트가 실무에서 중요하다는 설명을 들었지만 실제로 어떤 상황에서 문제가 발생하는지 이해하기 어려웠다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 화면 크기가 변경되었을 때 버튼이나 이미지가 의도하지 않은 위치로 이동하거나 늘어나는 문제가 발생할 수 있으며, 이를 방지하기 위해 컨스트레인트를 활용한다는 것을 알게 되었다.

2) 

 학습 과정 도중 Left and Right, Top and Bottom, Scale, Center 옵션의 개념은 이해했지만 실제 적용 결과가 어떻게 달라지는지 헷갈렸다.

 이를 해결하기 위해 추가 학습을 진행한 결과, Left and Right는 양쪽 여백을 유지하며 늘어나고, Top and Bottom은 위아래 여백을 유지하며 늘어나며, Center는 부모 컨테이너의 중앙을 기준으로 위치를 유지하고, Scale은 부모 크기 변화 비율에 맞춰 함께 확대 또는 축소가 된다는 것을 알게 되었다.

3)
 학습 과정 도중 프레임을 코드 블록이라고 설명하는 부분이 다소 낯설게 느껴졌다. 프레임과 코드 블록이 같은 개념인지 혼란스러웠기 때문이다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 프레임 자체가 코드 블록인 것은 아니며 여러 요소를 담는 화면의 영역이고, 개발 과정에서는 이러한 프레임이 하나의 코드 영역(코드 블록)으로 구현된다는 것을 알게 되었다.