Constraints(제약조건)이란?
Constraints는 부모 Frame과 자식 요소가 있을 때, 부모를 기준으로 요소에 적용하는 조건입니다. 이때, 조건은 부모 Frame이 커지거나 줄어들 때, 요소가 미리 정해진 조건에 따라 크기와 위치를 변화시키는 것을 말합니다. Constraints를 사용하는 이유는 다양한 기기, 해상도에 적응하여 요소의 크기와 위치를 고정하기 위함입니다. Auto Layout과 함께 사용하면, 반응형 디자인을 만들 수 있습니다.
Figma의 변경된 UI에서는 X, Y 좌표 옆의 [+] 같이 생긴 버튼을 눌러보시면 Constraints 설정창이 펼쳐집니다.
저는 Constraints를 Vertical Constraints와 Horizontal Constraints로 두 가지로 나눠서 설명해 보겠습니다.
Horizontal Constraints
부모의 수평(가로)을 기준으로 요소의 위치와 크기를 어떻게 대응시킬지에 대한 조건입니다.
- Left : 부모의 Left에 위치&크기 고정
- Right : 부모의 Right에 위치&크기 고정, 앱 SideBar 고정할 때 활용한다.
- Center : 부모의 Center에 위치&크기 고정
- Left+Right(L+R) : 부모의 Left, Right 여백(padding)을 고정하고, 부모의 Width 크기 변화에 따라 자식의 Width 크기 가변
예: 부모W100>W200(+100), 자식W50>W150(+100)
- Scale : 부모의 가변 비율에 따라 자식의 크기 가변
예: 부모W100>W200(x2배), 자식W50>W100(x2배)
Horizontal Constraints 예제
Center, Scale, Left&Right의 자식 Width는 어떻게 변했을지 답을 맞혀보시고 , 이미지도 머릿속으로 그려보시면 좋습니다.
1. W50 : Center는 자식의 위치와 크기가 고정된다.
2. W150 : Scale은 부모가 늘어난 비율(2배)만큼 자식의 크기가 늘어났다.
3. W100 : Left&Right는 부모의 여백을 고정하고, 부모가 늘어난 크기만큼 자식의 크기가 늘어났다.
Vertical Constraints
부모의 수직(세로)을 기준으로 요소의 위치와 크기를 어떻게 대응시킬지에 대한 조건입니다.
- Top : 부모의 Top에 위치&크기 고정, 웹 상단 Menu 고정할 때 활용
- Bottom : 부모의 Bottom에 위치&크기 고정, 앱 하단 Navigation 고정할 때 활용
- Center : 부모의 Center에 위치&크기 고정
- Top&Bottom(T+B) : 부모의 Top, Bottom 여백(padding)을 고정하고, 부모의 Height 변화에 따라 자식의 Height 크기 가변
예: 부모H100>H200(+100), 자식H50>H150(+100)
- Scale : 부모의 가변 비율에 따라 자식의 크기 가변
예: 부모H100>H200(x2배), 자식H50>H100(x2배)
Vertical Constraints 예제
Center, Top&Bottom, Scale의 자식 Height은 어떻게 변했을지 답을 맞혀보세요.
1. H50 : Center는 자식의 위치와 크기가 고정된다.
2. H100 : Top&Bottom은 부모의 여백을 고정하고, 부모가 늘어난 크기만큼 자식의 크기가 늘어났다.
3. H150 : Scale은 부모가 늘어난 비율(2배)만큼 자식의 크기가 늘어났다.
Vertical, Horizontal 차이
차이를 정리해 보면,
Horizontal은 부모의 가로(Horizontal, Width) 변화에 따라 자식의 Left, Right가 관련이 있고,
Vertical은 부모의 세로(Vertical, Height) 변화에 따라 자식의 Top, Bottom이 관련이 있습니다.
Center, Scale의 개념은 둘 다 동일합니다.
Center, L+R/T+B, Scale의 차이
Left, Right, Top, Bottom은 위치를 한 곳으로 고정하는구나라고 직관적으로 이해할 수 있는 반면에 Center, L+R/T+B, Scale는 헷갈릴 수 있습니다. 차이를 제대로 구분하시면 Constraints를 자유롭게 활용할 수 있습니다.
- Center : 위치는 Center로 고정, 자식의 크기는 변하지 않음
- L+R/T+B : 부모의 좌우/상하 여백을 고정, 부모(화면 크기)의 가변 크기만큼 자식의 크기도 같이 변함
- Scale : 부모의 가변 비율(%)만큼 자식의 크기도 변함, 정밀한 레이아웃보다는 비율을 유지할 때 활용(예: 화면의 30% 유지)
Position 정렬과 Constraints의 관계
위치(Position)를 바꾸는 정렬(Align) 기능과 Constraints는 연결되어 있습니다.
Left, Right, Horizontal Center를 정렬하면 Horizontal Constraints도 함께 바뀌고,
Top, Bottom, Vertical Center를 정렬하면 Vertical Constraints도 함께 바뀝니다.
따라서, 일일이 자식 요소마다 Constraints를 설정할 필요는 없습니다.
정렬 외에 의도를 가지고 설정하는 것은 Left&Right / Top&Bottom, Scale입니다.
정리
Constraints를 처음 배울 때는 Center, Left&Right/Top&Bottom, Scale가 언제 필요한지 잘 안 느껴집니다. 하지만 그 차이를 이해한다면, Auto Layout과 함께 반응형 디자인을 더 쉽게 만들 수 있습니다.
정리해보면 정렬(Align)만 잘 써도 Constraints는 자동으로 따라옵니다. Left&Right/Top&Bottom, Scale은 필요에 따라 의도적으로 설정하면 됩니다.
이 글이 Constraints가 헷갈렸던 분께 도움이 되셨길 바랍니다.
다음 글에서 뵙겠습니다.👋
🖇️ 레퍼런스
'UIUX > Figma' 카테고리의 다른 글
| [피그마] 모바일 화면 사이즈 정하기: 기준 해상도는 어떻게 선택할까? (0) | 2025.12.05 |
|---|---|
| [피그마] 웹에서 로컬 폰트 사용하기 (2) | 2024.10.22 |
