본문 바로가기
카테고리 없음

Figma 핵심 기능 (3편) : 오토 레이아웃, 컨스트레인트

by Rachel 2024. 8. 19.
반응형

이번 시간에는 프레임 크기에 유연하게 대응하는 기능을 알아보겠습니다. UI를 설계할 때 사용환경에 따라 프레임의 크기가 달라지게 되는데요. 이때 사용하는 기기에 맞는 프레임에서도 깨지지 않는 UI를 만들기 위해 디자인의 유연함이 필요합니다. 오토 레이아웃과 컨스트레인트 기능은 디자이너가 만든 규칙에 따라 요소를 재배치해 주는 기능으로 이해하시면 됩니다.  

 

1.  오토 레이아웃(Auto layout) 알아보기 

오토 레이아웃은 자동 배치입니다. 디자이너가 규칙을 만들면 그 규칙에 따라 피그마에서 자동으로 요소를 배치해주는 기능입니다. 우선 규칙을 설정하는 방법을 살펴보겠습니다. 모든 요소를 선택해서 마우스 오른쪽 버튼을 클릭한 후 Add auto layout 버튼을 클릭합니다. 단축키는 Shift + A 입니다. 그러면 오토 레이아웃이 생성되면서 요소들이 정렬된 것을 확인할 수 있습니다. 왼쪽 레이어 패널을 살펴보면 기존 프레임과는 다른 오토 레이아웃 프레임 안에 요소들이 있는 걸 볼 수 있습니다. 오른쪽 프로퍼티 패널에는 Auto layout이라는 항목이 추가되었습니다.

먼저 오토 레이아웃 첫 번째는 배치 방향을 설정할 수 있습니다. 두 번째는 요소 간 간격의 수치를 조정할 수 있습니다. 오른쪽은 요소들의 정렬을 조정할 수 있는 부분입니다. 마지막으로  좌우에 내부 여백을 조절하는 패딩을 상하좌우 방향으로 수정할 수 있습니다. 그리고 오토 레이아웃이 설정되면 내부 요소들은 설정된 규칙을 만족하는 형태로만 이동할 수 있습니다. 만일 프레임 바깥으로 요소를 하나 끌어내면, 남은 요소에 맞춰 프레임의 크기가 줄기도 합니다. 오토 레이아웃은 작은 UI부터 큰 화면까지 UI들이 규칙을 가지고 배치되어야 하는 모든 곳에 사용될 수 있습니다. 

오토-레이아웃-설정하는-방법
오토 레이아웃 설정하는 방법


이번에는 오토 레이아웃을 다르게 활용할 수 있는 방법을 알아봅시다. 우선 프레임이 요소에 따라 자동으로 설정되지 않고 프레임 사이즈에 맞춰 요소 너비가 자동으로 바뀌는 것부터 만들어봅시다. 오토레이아웃에 모든 요소를 선택하고 Fixed width로 설정된 너비를 Fill container로 변경해 줍니다. 이렇게 되면 Hug로 설정되어 있던 프레임이 Fixed로 바뀝니다. 이렇게 설정하면 프레임의 크기를 바꾸거나, 프레임 안에 있는 요소의 간격을 변경할 때 설정한 프레임에 맞게 요소의 크기가 자동적으로 변하게 됩니다. 

만약 1개 요소만 Fill container로 설정하면 다른 요소는 크기가 고정된 상태에서 Fill container을 설정한 요소만 모든 규칙에 맞게 변경할 수 있습니다. 가령, 요금제를 보여주는 UI처럼 정해진 여백이나 화면 너비가 있을 때 굳이 너비를 일일이 계산하지 않고 작업할 수 있어서 유용합니다. 

Fill-container-규칙으로-변경하기
Fill container 규칙으로 변경하기

 

이번에는 요소의 너비가 아니라 설정한 프레임의 크기와 요소 너비에 따라 간격이 자동으로 변경되게 만들어보겠습니다. 간격 부분을 auto로 변경하거나 더보기를 눌러서 Spacing mode를 Space between으로 설정하면 됩니다. 그럼 프레임의 크기와 요소들의 너비도 Fixed로 속성이 변경됩니다. 이제 프레임의 크기를 바꾸거나, 요소의 너비를 설정했을 때 요소 간의 간격이 자동으로 나머지 규칙에 부합되도록 유동적으로 변하게 됩니다. 이 기능은 전체 너비나 내부 요소의 너비가 변경됐을 때, 여백이 자동으로 조절되어야 하는 내비게이션 바와 같은 UI를 만들 때 유용하게 사용할 수 있습니다.

Space-between-규칙으로-변경하기
Space between 규칙으로 변경하기


마지막으로 모든 요소들에 고정된 값을 주는 방법이 있습니다. 이때는 요소의 간격을 조정해도 프레임의 크기는 변경되지 않으며, 프레임의 크기를 변경해도 내부 요소들은 영향을 받지 않습니다. 이것은 오토 레이아웃이 적용된 프레임 크기와 내부 요소들의 크기나 사이 간격을 독립적으로 적용하고 싶을 때 사용하면 됩니다. 

 

2. 컨스트레인트(Constraints) 알아보기 

컨스트레인트 기능은 프레임의 크기가 변했을 때 내부 요소는 어떻게 변해야 하는지 규칙을 정해주는 것입니다. 프레임의 크기를 늘이거나 줄였을 때, 내부 요소는 크기가 고정된 상태로 왼쪽 그리고 상단에 고정되어 있어야 하는 경우 등 다양하게 적용할 수 있습니다. 만일 컨스트레인트 기능을 활용해 오른쪽과 아래쪽 여백을 두고 고정시킨다면, 전체 프레임을 변경했을 때도 위에 설정한 규칙에 따라 오른쪽과 하단 여백은 고정된 채 프레임이 변경되는 걸 확인할 수 있습니다.

이렇게 컨스트레인트 기능을 활용한다면 프레임 변경이 필요한 여러 환경에서 유연하게 반응하는 UI를 만들 수 있습니다. 프레임이 변할 때마다 내부 요소를 일일이 수정해야 하는 번거로움을 피할 수 있습니다. 

컨스트레인트-기능-활용하기컨스트레인트-기능-활용하기컨스트레인트-기능-활용하기
컨스트레인트 기능 활용하기

 


※ 해당 글은 코드잇(codeit)의 [Figma 핵심 기능] 강의 내용에서 참고하여 작성하였습니다. 

반응형