[피그마] Constraints 이해하기

피그마의 Constraints란?

부모 프레임을 변경할 때, 자식 객체가 어떻게 반응해야 할지 결정해 주는 속성이라고 설명할 수 있습니다. 물론, 파고든다면 상당히 심도 깊고 이해를 요하는 기능일 수도 있겠습니다만, 공부해 나가는 입장에서 이해한 내용을 바탕으로 작성해 봅니다. 

그림에서 볼 수 있듯이, 초록색을 감싸고 있는 파란색 부분을 Parent라고 합니다. Parent의 크기를 변경할 때 안에 있는 초록색 부분, 즉 children이 어떻게 반응할지 결정하는 것이 Constraints 속성입니다.

Constraints에는 크게 가로(Horizontal)와 세로(Vertical)가 있습니다. 

1. Horizontal : Left, Right, Left and right, Center, Scale

2. Vertical : Top, Bottom, Top and bottom, Center, Scale

위의 그림에서 텍스트로 간단하게 설명한 것처럼 각각 5종류가 있습니다. 

기본값은 Left, Top으로 되어 있습니다.

 

위의 설명에서도 주의 깊게 보시면 아시겠지만, 위치뿐만 아니라 '크기와 위치'를 동시에 변경시키는 선택값이 몇 가지 있습니다. 글로만 보면 어떻게 변하는지 이해하기 힘드니, 밑의 예시에서 확인해 볼까요?

원본

width와 height가 각각 100으로 설정된 자식 객체 동그라미와, 그를 감싸고 있는 width와 height가 각각 300으로 설정된 네모난 부모 프레임으로 구성되어 있습니다.

이제, 부모 프레임 width를 두 배로 늘려 보겠습니다. (300 > 600)

Vertical은 기본값인 'Top'으로 유지합니다.

1. Left

부모 프레임의 왼쪽을 기준으로 자식 객체의 위치를 유지합니다. 부모 프레임의 왼쪽을 기준으로 원본과 동일하게 100 만큼의 간격을 유지합니다.

2. Right

부모 프레임의 오른쪽을 기준으로 자식 객체의 위치를 유지합니다. 부모 프레임의 오른쪽을 기준으로 원본과 동일하게 100 만큼의 간격을 유지합니다.

3. Left and right

부모 프레임의 양옆을 기준으로 자식 객체의 크기와 위치를 결정합니다. 양 옆의 간격은 동일하게 100만큼을 유지하고 있습니다. 그리고, 이 양옆 간격 100을 유지하기 위해 자식 객체의 크기(width)가 증가했습니다. 양옆의 간격이 100만큼이니 자식 객체의 width는 400이겠죠?

4. Center

부모 프레임의 중앙을 기준으로 자식 객체의 위치를 유지합니다. 자식 객체의 크기는 그대로고, 부모 프레임을 기준으로 중앙에 위치하기 위해 양옆의 간격이 100이 아닌, 250으로 변했습니다.

5. Scale

부모 프레임의 크기(width)가 두 배로 커졌기 때문에, 자식 객체의 크기(width)도 두 배로 커집니다. (부모가 100%만큼 커졌으니, 자식도 100%만큼 커집니다.) 기존에 자식 객체의 크기(width)는 100이었기 때문에 두 배인 200으로 변경됩니다.

원본

width와 height가 각각 100으로 설정된 자식 객체 동그라미와, 그를 감싸고 있는 width와 height가 각각 300으로 설정된 네모난 부모 프레임으로 구성되어 있습니다.

이제, 부모 프레임 heigth를 두 배로 늘려 보겠습니다. (300 > 600)

Horizontal은 기본값인 'Left'으로 유지합니다.

1. Top

부모 프레임의 상단을 기준으로 자식 객체의 위치를 유지합니다. 부모 프레임의 상단을 기준으로 원본과 동일하게 100 만큼의 간격을 유지합니다.

2. Bottom

부모 프레임의 하단을 기준으로 자식 객체의 위치를 유지합니다. 부모 프레임의 하단을 기준으로 원본과 동일하게 100 만큼의 간격을 유지합니다.

3. Top and bottom

부모 프레임의 위아래를 기준으로 자식 객체의 크기와 위치를 결정합니다. 위아래의 간격은 동일하게 100만큼을 유지하고 있습니다. 그리고, 이 양옆 간격 100을 유지하기 위해 자식 객체의 크기(height)가 증가했습니다. 양옆의 간격이 100만큼이니 자식 객체의 height는 400이겠죠?

4. Center

부모 프레임의 중앙을 기준으로 자식 객체의 위치를 유지합니다. 자식 객체의 크기는 그대로고, 부모 프레임을 기준으로 중앙에 위치하기 위해 위아래의 간격이 100이 아닌, 250으로 변했습니다.

5. Scale

부모 프레임의 크기(height)가 두 배로 커졌기 때문에, 자식 객체의 크기(height)도 두 배로 커집니다. (부모가 100%만큼 커졌으니, 자식도 100%만큼 커집니다.) 기존에 자식 객체의 크기(height)는 100이었기 때문에 두 배인 200으로 변경됩니다.

---

Horizontal과 Vertical을 각각 사용하는 방법을 작성해 보았습니다. 두 가지를 한 번에 사용하는 것은 스스로도 해보시길 바랍니다.