[Figma] 피그마로 블로그 대표이미지 만들기2 - Constraints & Auto layout

저번 시간에는 컴포넌트 활용법에 대해 알아봤다.

컴포넌트는 한마디로 대표 하나만 바꾸면 자식 인스턴트들까지 한번에 변경할 수 있는 것을 말한다!

이번에는 오토레이아웃을 활용하여 구성요소의 크기가 변해도 반응적으로 대응할 수 있는 방법에 대해 알아보자!

피그마는 UI/UX 디자인 툴이다.

UI/UX는 디바이스 화면에서 보여지는 것이기 때문에, 디바이스 크기가 모두 달라서 각 화면에 맞는 디자인 가이드를 제시해주어야 한다.

일일이 모든 디바이스에 대한 화면을 그리는 것 보다, 오토레이아웃을 적용해두면 자동으로 달라지는 화면에 맞게 변하게 되니 편리하게 사용할 수 있다!

오늘은 오른쪽 디자인 탭에서 Auto layout과 Constraints 부분에 대해 알아 볼 예정이다.

 

---

대표이미지 모양 만들기

우선, 전에 만들어 둔 컴포넌트를 사용하여 대표이미지로 사용할 모양을 만들어보자.

Rectangle1의 이름을 background로 변경한다.

그리고 색상을 하얀색 (#FFFFFF)으로 채운다.

 

 

background 크기보다 살짝 작은 크기의 Frame를 만들어준다.

이름은 stroke로 변경한다.

속성은 다음과 같이 설정한다.

• 크기 : 370 * 370
• Fill 색상 : #FFFFFF 0%
• Stroke 색상 : #000000 100%
• Stroke 굵기 : 3

 

디자인 탭의 맨위 아이콘들은 현재 뷰가 부모 뷰에 대해서 어떻게 정렬되도록 할 것인지 설정하는 부분이다.

stroke의 부모 뷰는 background이므로, stroke가 background의 중앙에 정렬이 되도록 하려면 빨간 박스로 표시된 두개의 아이콘을 누르면 된다.

 

 

이런 모양으로 이미지를 구성하고 싶다!

카테고리/구분선/포스팅제목 이렇게 3개의 구역으로 구분하려고 한다.

stroke 내부에 2개의 Frame과 1개의 Line으로 구성해보자.

 

 

이름은 각각 category, division, title로 변경해주었다.

사진으로 잘 보이게 하려고 Frame에 임의로 색상(#EEEEEE)를 넣어주었다.

---

 

Constraints & AutoLayout

전체적인 틀은 잡혔으니, 이제 레이아웃 가이드를 설정해주자.

Constraints는 부모-자식 뷰, 또는 형제 뷰 끼리 간격을 얼마나 띄울 것인지 정확한 수치로 정하는 속성이다.

Auto layout은 화면 크기가 변할 때 마다 유동적으로 뷰 간의 관계를 설정해주는 속성이다.

 

부모뷰의 크기에 따라 늘어나는 자식뷰 (+ 중앙 정렬)

먼저, stroke와 background의 stroke를 지정해주자.

현재 크기는 background 400*400, stroke 370*370이고 중앙 정렬 되어 있다.

하지만 background 크기가 가로로 조금 길어진다면 어떻게 될까??

 

 

stroke는 미동도 하지 않고 370*370을 유지하고 있다.

하지만 부모 뷰의 크기가 변해도 항상 상하좌우 간격이 15pt이고, 중앙 정렬을 유지하고 싶다.

background를 선택하고 Auto layout 메뉴를 확장해보면 다음과 같다.

1. Vertical direction / Horizontal direction : background의 자식 뷰를 세로로 차곡차곡 나열할지, 가로로 나열할지 정하는 속성
2. Spacing between items : 가로 또는 세로로 나열한 자식 뷰들 간의 간격을 지정하는 속성
3. Padding arround items : 각 자식뷰가 부모뷰 안쪽으로 떨어질 간격을 지정하는 속성

 

우리는 다른 속성은 그대로 두고, 3번 Padding arround items만 15로 설정해주면 stroke가 background 왼쪽과 위 안쪽으로 15만큼 떨어진 크기를 유지하게 된다. 그래도 아직 부모 뷰의 크기에는 반응하지 않는 것 같다..!

이제 stroke에 대한 설정이다.

현재 크기가 370*370이고, Resizing을 보면 가로 세로가 모두 Fixed width, Fixed height로 지정되어 있다.

이걸 모두 Fill container로 변경해준다! 370으로 고정되어있던 크기를 부모뷰에 꽉 채우도록 설정한다는 뜻이다.

위에서 background의 Padding arround items 속성을 15로 지정해주었기 때문에 부모뷰를 꽉 채운다 해도 15pt의 간격은 유지된 채로 채워진다.

 

 

성공! 이제 background 크기대로 stroke가 따라서 커지는 것을 볼 수 있다~

 

자식 뷰를 세로로 나열하기

이제 stroke 내부에 있는 category, division, title을 세로로 같은 간격을 가지도록 나열하고 싶다.

stroke의 Auto layout을 설정해보자.

 

stroke Auto layout

• Vertical direction
• Spacing between items : 10
• Padding arrounds items : 10

 

category, division, title의 Resizing에서 가로를 모두 Fill container로 설정한다.

그러면 위와 같이 stroke 안쪽으로는 10pt의 패딩이, category, division, title 사이도 10pt의 간격이 생긴 것을 볼 수 있다!

(아직 세로 설정은 안했음)

 

내부 컨텐츠 크기에 따라 바뀌도록 설정하기

category와 title에는 각각 텍스트가 들어간다. 고정 크기로 설정해두면, 텍스트가 길어질 경우 글씨가 잘리거나 레이아웃이 어긋날 가능성이 있다. category의 텍스트가 길어지면 category 영역이 넓어지고, division과 title은 상대적으로 아래쪽으로 위치하도록 만들어보자!

 

category 안에 Text를 넣어준다. 글자크기는 40으로 설정했고, 가로 왼쪽, 세로 중앙에 오도록 정렬한다.

현재 상태로는 Category Text가 길어지면 글자가 잘린다!

 

 

** category Frame에 해당하는 속성 변경 (Text 속성 아님!)

category의 Auto layout에서 Vertical directions / Spacing between items(0) / Padding around items(5/5/5/5)를 설정해주자.

Auto layout을 활성화하면 Resizing에서 선택할 수 있는 항목이 하나 더 추가되는데, height를 Hug contents로 지정한다.

category 안의 아이템 크기에 딱 맞게 높이를 조절하겠다는 뜻이다.

 

 

이제 글자 길이가 길어져도 category의 높아기 자연스럽게 늘어나고 줄어드는 모습을 볼 수 있다.

 

나머지 부분 레이아웃 조절해주기

category에 따라 우선적으로 높이가 정해지도록 만들었으니, 이제 title이 남는 부분을 꽉 채우도록 하자.

 

 

title의 Resizing에서 가로 세로를 모두 Fill container로 지정해준다.

Title에 Text를 추가하고, Auto layout과 Resizing을 다음과 같이 설정한다.

• Vertical direction
• Spacing between items : 0
• Padding around items : 5
• width : Fill container
• height : Fill container

 

그리고 프레임 영역을 구분하기 위해서 #EEEEEE 색상으로 칠했던 색을 원래대로 #FFFFFF로 돌려놓는다!

그럼 완성💖