고정점(Constraints)의 이해

 

※ 본 문서의 주의사항

 

영어 단어 Constraint의 뜻은 구속, 제약, 제한조건이란 뜻으로 주로 쓰이는데, 

이렇게 이해하면 너무 어렵기 때문에 본 문서에서는 이를 '고정점'으로 번역하였습니다.

 

아래 설명에도 나타나듯, X,Y 좌표의 기준 값을 '고정'시켜 사용하는 기능이기 때문입니다.

이 부분에 대한 지적도 환영하며, 의견 주실 분들께서는 많은 피드백 부탁 드립니다.

 

 

---

1. 프레임과 X,Y위치 좌표 : 고정점(Constraints)는 프레임 하위 요소에만 쓸 수 있다.

그룹은 독자적인 X,Y 좌표 값을 가지지 않는데 반해

프레임 내에 배치된 모든 하위 요소는 프레임을 기준으로 X,Y 좌표값을 가진다.

 

즉, 정리하면 '프레임은 하위 요소들의 독자적인 위치 값을 지정한다.'고 볼 수 있을 것이다.

 

그리고 이 하위 요소들의 위치 값을 고정시켜, 

'프레임의 전체 크기가 변할 때, 하위 요소도 이에 맞춰 자동으로 변하도록 설정한다.'는 것이 

이 기능의 핵심이다.

 

---

2. 고정점(Constraints) 패널의 사용

프레임 내에 도형 요소를 배치하고 도형 요소를 클릭하면 우측 디자인 패널에

고정점(Constraints) 패널이 활성화 되어 있는 것을 확인할 수 있다.

 

이때 사용할 수 있는 고정점은 아래와 같다.

• 가로 : 왼쪽(Left),  오른쪽(Right), 왼쪽과 오른쪽(Left and Right)
• 세로 : 위쪽(Top), 아래쪽(Bottom), 위쪽과 아래쪽(Top and Bottom)
• 공통 : 비율(Scale) 

이제부터 크기가 변했을 때, 각 고정점들이 어떻게 변하는지 살펴보겠다.

---

3. 기본 고정점(Basic Constraints)

* 공식 명칭은 아니나, 편의상 이해하기 쉽도록 이름을 붙였습니다.

1) 위쪽(Top) & 왼쪽(Left)

요소의 왼쪽, 위쪽의 간격 유지한 채로 요소의 크기가 커진다.

 

2) 아래쪽(Bottom) & 오른쪽(Right)

요소의 아래쪽, 오른쪽쪽의 간격 유지한 채로 요소의 크기가 커진다.

→ 크기가 커질 때마다 우하단으로 밀려나감.

 

3) 중앙(Center) & 중앙(Center)

가운데를 중심으로 사이즈가 커진다.

→ 크기가 커질 때마다 상하좌우 여백이 커진다.

 

4) 비율(Scale) & 비율(Scale)

현재 비율을 그대로 유지한다.

---

4. 더블 고정점(Double Constraints)

* 공식 명칭은 아니나, 편의상 이해하기 쉽도록 이름을 붙였습니다.

1) 왼쪽(Left) & 오른쪽(Right)

왼쪽 및 오른쪽 간격은 유지하고

설정된 개체의 폭이 자동으로 넓어진 만큼을 채운다.

 

2) 위쪽(Top) & 아래쪽(Bottom) 

위쪽 및 아래쪽 간격은 유지하고

설정된 개체의 폭이 자동으로 넓어진 만큼을 채운다.

 

이 둘을 동시에 적용하면, 상하좌우 여백은 고정한 채로,

하위 요소의 크기를 늘릴 수 있습니다.

---

5. 팁+ )  하위 요소가 2개인 경우, 어떻게 변할지 상상해 보세요.

하위 요소가 여러개인 경우에는 어떻게 고정점을 설정해야 할지 생각해 봅시다.

아래를 눌러 정답을 확인해 보세요.

둘 이상의 하위 요소를 갖고 있어도 동작 원리는 항상 같다. 현재까지 배운 방법을 적용해서

'서로 다른' 고정점을 갖는 요소를 만들어서 넣어 보자. 

추후 이 파트는 컴포넌트 디자인에서 다시 반복된다.

 

---

이렇게 기본적인 리사이징의 기초, 고정점(Constraints)에 대해서 알아봤습니다.

 

이 기능을 응용하면 앞으로 여러 UI형태를 그려볼 때,

변하는 값에 맞춰서 고정된 버튼 위치 등을 규칙으로 지정할 수 있게 됩니다.

그러니까 추후 나올 리사이징과 반응형 디자인 두 파트를 다룰 때 핵심적인 영역이 될 것입니다.

이 기초 파트를 확실하게 잡고 넘어가셔야 진행에 어려움이 없으니

반드시 숙지하시길 바랍니다.