[Figma] 컨스트레인트(Constraints)

피그마로 디자인을 하다 보면, 프레임 크기가 변할 때 내부 요소들의 위치가 흐트러지는 일이 자주 생깁니다.
이 문제를 해결해주는 기능이 바로 컨스트레인트(Constraints) 입니다.

 

컨스트레인트는

“부모 프레임 크기가 변할 때, 자식 요소가 어떤 방식으로 따라 움직일지 지정하는 규칙”

이라고 이해하면 쉽습니다.

 

1. 컨스트레인트는 어디에 쓰일까?

컨스트레인트는 다음 상황에서 특히 유용합니다:

• 반응형 UI 만들 때
• 카드나 팝업처럼 프레임 크기가 달라질 수 있는 구성에서
• UI 요소가 프레임 안에서 좌측/우측/가운데 등 고정된 위치를 유지해야 할 때

즉,
프레임이 변경되더라도 요소의 상대적 위치가 유지되도록 만드는 기능입니다.

 

2. 컨스트레인트의 주요 옵션

컨스트레인트는 수평(Horizontal)·수직(Vertical) 축 기준으로 설정합니다.

 

1️⃣ 수평(Horizontal) 옵션

• Left : 왼쪽에 고정
• Right : 오른쪽에 고정
• Left & Right : 좌우 모두 고정 → 요소가 프레임 변경에 따라 폭이 함께 늘어남
• Center : 수평 가운데 위치 유지
• Scale : 프레임의 비율 변화에 맞춰 요소도 함께 비율로 이동/확장

2️⃣ 수직(Vertical) 옵션

• Top : 위쪽 고정
• Bottom : 아래 고정
• Top & Bottom : 상하 모두 고정 → 요소의 높이가 함께 늘어남
• Center : 수직 중앙 정렬 유지
• Scale : 세로 비율에 맞게 변화

컨스트레인트 버튼

 

 

3. 예시로 쉽게 이해하기

1️⃣ 버튼이 프레임 오른쪽 상에 고정되도록 만들고 싶다면

→ Vertical: 오른쪽, Horizontal: 상단

프레임이 커지거나 작아져도 버튼은 항상 아래쪽에 위치하게 됩니다.

 

2️⃣검색창이 프레임 양끝을 기준으로 넓어지게 하고 싶다면

→ Horizontal: Left & Right

프레임 가로폭이 변하면 검색창도 함께 늘어나 반응형 구조가 됩니다.

 

3️⃣  가운데 정렬 텍스트를 유지하고 싶다면

→ Horizontal: Center, Vertical: Center

프레임 크기가 바뀌어도 텍스트는 항상 정중앙에 위치합니다.

 

컨스트레인트 오른쪽 상단 고정

 

고정 전

고정 후

 

 

정리하면

 

피그마의 컨스트레인트는 반응형 디자인의 핵심 개념입니다.
프레임 크기가 달라져도 UI가 깨지지 않도록 해주기 때문에,
웹·앱 디자인 모두에서 필수적으로 사용되는 기능입니다.

• 컨스트레인트는 부모 프레임 변화에 따른 요소 위치·크기 유지 규칙
• Left / Right / Center / Scale 등 직관적 옵션 제공
• 반응형 UI 제작에 필수
• 오토 레이아웃과 함께 사용하면 더욱 강력함

컨스트레인트 개념만 잘 이해해도 반응형 구조 이해도가 크게 올라가니,
여러 프레임을 테스트하며 조정해보시면 금방 익숙해질 거예요!