UI_UX Design/Figma

ch03_3_반응형 디자인을 위한 콘스트레인트와 그리드

jsBae 2024. 11. 12. 23:17

콘스트레인트(Constraint)

•어떤 오브젝트의 위칫값을 상하좌우에 ‘강제＇로 고정하는 기능

콘스트레인트(Constraint) 부모 프레임의 크기를 조정할 때 객체가 어떻게 반응하는지 정의할 수 있습니다. 즉, 객체의 상대적 위치와 크기를 모두 제어할 수 있습니다.

1. 제약 조건 (Constraints)

  • 제약 조건을 사용하면 부모 프레임의 크기가 조정될 때 객체가 어떻게 반응하는지 설정할 수 있다.
  • 객체의 상대적 위치와 크기를 제어하여 다양한 화면 크기에 대응할 수 있는 유연한 레이아웃을 구현할 수 있다.
  • 예를 들어, 특정 객체에 Center Constraint를 적용하면 부모 프레임이 크기를 조정해도 객체가 항상 중앙에 위치하게 된다.

2. 레이아웃 그리드 (Layout Grid)

  • 레이아웃 그리드는 프레임 내 객체를 정렬하는 시각적 보조 도구로, 사용자가 프레임 내에서 객체를 정렬할 때 큰 도움을 준다.
  • 그리드를 활성화하면 피그마는 해당 프레임의 객체를 그리드에 맞춰 정렬하게 된다.
  • 프레임 크기가 변경될 때, 그리드 자체를 고정된 치수로 유지하거나 유연하게 확장할 수 있다.

3. 제약 조건과 레이아웃 그리드의 결합

  • 제약 조건과 레이아웃 그리드를 함께 사용하면 강력하고 유연한 레이아웃을 구축할 수 있다.
  • 이를 통해 객체 크기 조정 시 어떻게 반응할지를 세밀하게 제어할 수 있다.
  • 예를 들어, 카드 디자인에서 더하기(+) 아이콘에 Center Constraint를 적용했을 때, Figma의 그리드 타입에 따라 객체가 화면의 중앙에 고정되거나 상황에 맞게 반응하게 할 수 있다.

Stretch Layout Grids

  • Stretch Layout Grid는 프레임 크기에 맞춰 자동으로 조정되는 레이아웃 그리드이다.
  • 프레임의 크기가 변할 때, 그리드의 너비와 높이도 프레임 크기에 맞게 자동으로 늘어나거나 줄어든다.
  • 이를 통해 프레임 크기가 변하더라도 디자인이 그에 맞춰 자동으로 대응할 수 있다.

객체의 제약 조건과 Stretch Layout Grid의 상호작용

  • Stretch Layout Grid가 활성화된 경우, Figma는 객체의 제약 조건을 그리드의 가장 가까운 열이나 행을 기준으로 설정한다.
  • 예를 들어, 특정 객체가 오른쪽 열의 중앙에 위치하도록 제약 조건을 설정하면, 프레임 크기가 변해도 해당 객체는 항상 그 열의 중앙에 위치하게 된다.

적용 예시

  • 디자인 사례: 카드 디자인에 Stretch Layout Grid를 적용한 경우, 프레임 크기에 따라 카드와 내부 요소들이 유동적으로 배치된다.
  • 기기별 대응: iPhone 11 Pro와 iPad Pro 11"과 같이 화면 크기가 다른 기기에서도 Stretch Layout Grid가 프레임 크기에 맞춰 늘어나며, 더하기(+) 아이콘과 같은 객체가 설정한 열이나 행의 중앙에 계속 위치하도록 한다.

장점

  • 반응형 디자인 구현: 프레임 크기 변화에 따라 자동으로 조정되므로, 다양한 기기에서 일관된 디자인을 제공할 수 있다.
  • 디자인 일관성 유지: 그리드와 객체의 제약 조건이 함께 적용되어, 디자인의 위치나 비율이 유지되며 사용자 경험의 일관성을 높인다.

Fixed Layout Grids

  • 고정 레이아웃 그리드는 사용자가 그리드의 열과 행 수를 선택하고, 각 열의 너비와 행의 높이를 직접 설정하는 그리드이다.
  • 이 그리드는 부모 프레임 내에서 고정 위치에 설정할 수 있으며, 프레임의 크기가 변해도 그리드 자체는 설정된 위치와 크기를 유지한다.

고정 위치 옵션

  • 행(Row): 그리드를 프레임의 상단 또는 중앙에 고정할 수 있다.
  • 열(Column): 그리드를 프레임의 왼쪽 또는 중앙에 고정할 수 있다.
  • 이러한 설정을 통해 그리드가 프레임 내에서 고정된 위치에 배치되도록 할 수 있다.

객체 제약 조건과의 상호작용

  • 고정 레이아웃 그리드를 사용하는 경우, Figma는 그리드가 아닌 프레임과 관련된 제약 조건을 따른다.
  • 예를 들어, 카드 디자인에서 플러스(+) 아이콘이 중앙 제약을 사용할 때, 객체는 프레임의 중앙을 기준으로 배치된다. 따라서 프레임 크기가 달라지면 객체는 프레임 중앙을 기준으로 위치를 유지하게 된다.

적용 예시

  • 디자인 사례: 고정 레이아웃 그리드를 사용한 카드 디자인은 화면 크기가 변하더라도 그리드 자체는 변하지 않고, 객체들이 프레임을 기준으로 배치된다.
  • 기기별 대응: iPhone 11 Pro와 iPad Pro 11"와 같은 화면 크기가 다른 기기에서도, 플러스 아이콘은 프레임의 중앙에 고정되며 위치가 일관되게 유지된다.

장점

  • 정밀한 위치 고정: 특정 열이나 행의 고정 위치를 설정하여, 프레임의 크기 변경에도 그리드가 일관된 위치를 유지하도록 할 수 있다.
  • 디자인 일관성 유지: 그리드를 프레임의 고정된 위치로 설정하면, 프레임 크기에 관계없이 안정적인 레이아웃을 유지할 수 있다.

 

제약 조건 무시

때로는 프레임이나 레이어의 크기를 조정하고 싶을 수 있는데, 적용된 제약 조건을 사용하지 않고 말입니다. 수정자 키를 누르고 있으면 레이어에 적용된 모든 제약 조건을 일시적으로 무시할 수 있습니다.

  • Mac:Command 크기 조절 시 길게 누르기
  • Windows:Ctrl 크기 조절 시 길게 누르기

연습 : 반응형 카드를 만들어 보자.

728x90
반응형