[내일배움캠프] Figma 기초 - 프레임, Constraint, 오토레이아웃 및 리사이징

썸넬 따봉냥이

 

이번 시간엔 피그마의 핵심 개념이 되는 프레임(컨테이너), 컨스트레인트, 오토레이아웃 및 리사이징 등에 대해 알아보았다.

 

배우면서 느낀 점은 예전에 웹 공부할 때 배웠던 css 와 상당히 유사하다고 생각되어서 배움에 지장은 없었따~

 

그럼 빠르게 공부한 내용을 정리해보자.

---

◆ 프레임과 그룹 

프레임과 그룹 이 둘의 개념을 혼동하기 쉽다. 둘 간 차이점에 초점을 둬서 알아보겠다.

 

일단 개념 간의 차이를 살펴보자.

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

'컨테이너'라고도 부르며, 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어진다.

 

프레임 안에 다른 개체나 프레임을 넣을 수 있다.

 

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

 

한글이나 파워포인트 등의 문서를 작업해보신 분들은 한 번쯤은 반드시 사용해본 경험이 있을 것이다.

 

여러 개체를 한번에 정리하고 디자인을 정리하는 데 사용파는 편의 기능이다.

 

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

 

따라서 프레임과 달리 개발에 필요한 속성들을 적용할 수 없다.

 

그렇다면 차이점을 직접 알아보자.

 

 

위는 프레임 두개를 '프레임'으로, 아래는 프레임 2개를 '그룹'으로 묶엇다.

 

 

그리고 각각 안의 요소들에 색깔을 넣어주었다.

 

이제 이 프레임 / 그룹의 배경색을 넣어준다면?

이제 차이가 보인다.

 

그룹은 그룹 안에 있는 개체들의 배경색이 변경되는 반면,

 

프레임은 두 프레임을 묶은 별개의 '개체'로 인식하며 배경에 색깔이 들어갔다.

 

따라서 프레임화된 개체의 안에 있는 프레임은 영향을 받지 않고, 그룹화된 개체는 조졍 편의를 위해 하나에 담았기 때문에 모든 개체들이 동시에 영향을 받는다는 점에서 차이점이 존재한다.

 

색깔 말고도 크기 변경에도 똑같은 개념이 적용된다.

---

◆ 오토레이아웃

 

오토레이아웃(Auto-Layout) 이름 그대로, 레이아웃을 자동으로 조정해주는 기능이다.

 

개체를 내부 여백(패딩)으로 감싸 컨테이너로 만들어준다. 이를 통해 간격에 맞게 컨테이너를 쌓을 수 있다.

 

 

프레임안에 프레임을 넣어주고, Add Auto-layout 옵션을 통해 오토레이아웃을 생성해주면 위와 같은 섹션이 새로 보인다.

 

이 프레임을 양 옆으로 쭉~ 늘려본다면

 

 

내부의 하얀색 프레임도 같이 양 옆으로 크기가 같이 늘어나는 것을 볼 수 있다.

 

오토레이아웃의 Fill / Hug / Fix 옵션을 통해 내부의 크기가 늘어나거나 줄어드는 기준을 정할 수 있다.

 

현재 위는 가로 세로 둘다 Fill 옵션을 주었기에 같이 늘어난 것.

 

그럼 아래 그림을 보자.

 

 

이번엔 내부에 있는 개체 2개 둘다 width(가로) 옵션에 Fix를 줘봤다. 결과는?

 

 

가로를 늘려도 개체들의 가로 값이 고정되어 있기 떄문에 변화하지 않는다!

 

그리고 오토레이아웃의 내부 프레임 순서는 일반적인 레이어 패널과 반대로 '더 밑에 있는 레이어가 더 우선순위를 가진 레이어'가 된다!

---

◆ 컨스트레인트(Constraint)

 

프레임 안에 프레임을 넣어봤따.

 

그림을 잘 보면 파란색 점선이 나타나진 것을 볼 수 있는데, 이것이 Constraint, 컨스트레인트이다.

 

앵커(Anchor;닻)이라고도 불리며, '자식 컨테이너가 부모에 고정되어 움직이는 일종의 핀'이라고 볼 수 있다.

 

자식 컨테이너가 부모의 사이즈가 변할 때 저 파란 점선의 위치에 고정된 채 따라가게 된다.

 

컨스트레인트 패널.

 

위 그림과 같은 컨스트레인트의 패널에서 어디에 고정시킬지 방향을 설정할 수 있다. 예를 들어 Left + Right, Top + Bottom으로 바꿔본다면?

 

 

상하좌우 둘다 파란 점선이 추가된 것을 볼 수 있다.

 

해당 조건을 통해서 내부 프레임의 위치를 고정하고 다른 프레임의 크기를 조정할 수 있다.

 

---

◆ 프레임 리사이징

프레임은 기본적으로 Fixed, 즉 가로와 세로 길이가 고정된다.

 

이때 프레임을 오토레이아웃으로 감싸는 순간 Fixed 외의 다른 사이즈값이 생긴다. -> 이걸 Re-sizing (리사이징)이라고 부른다.

 

리사이징의 종류는 3가지가 있다.

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 사용 가능
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 사용 가능

 

아까 그림을 다시 보자.

 

 

내부 프레임 2개를 Fill로 되어있고, 외부(배경) 프레임은 Fixed로 설정되어있다.

 

여기서 외부 프레임을 Hug로 바꿔본다면?

 

 

자동으로 내부 프레임의 속성이 Fixed로 바뀐다.

 

여기서 알 수 있듯 리사이징은 자식의 설정값이나 부모의 설정값에 따라 리사이징 값이 자동적으로 바뀐다.

 

• 자식이 Fixed -> 부모는 Hug
• 자식이 Fill -> 부모는 Fixed
• 부모가 Hug -> 자식은 Fixed
• 부모 / 자식 둘 다 Fixed

와 같은 규칙이 존재한다.

 

 

 

 

 

 

 

 

 

이번 주차의 내용은 여기까지만 다뤄보겠다! 포지션 관련 내용은 이후에 더 자세히 다루는 게 나을 것 같아서.. 뿅