피그마 Constraints, 컨스트레인트

안녕하세요

찐망고입니다 오늘은 피그마의 Constraints에 대해서 포스팅 해볼까 해요

일단 피그마 이전글들을 참고해주시구요

 

 

0. styles등록 (text, color) - 이전글 참조

2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기

피그마 ui-스타일가이드, 스타일 등록하기

1. Layout grid

2023.07.05 - [피그마] - 피그마 Layout grid

피그마 Layout grid

2. Auto Layout

2023.07.07 - [UIUX디자인/피그마] - 피그마 Auto Layout (오토레이아웃)

피그마 Auto Layout (오토레이아웃)

3. Constraints

2023.07.11 - [UIUX디자인/피그마] - 피그마 Constraints, 컨스트레인트

피그마 Constraints, 컨스트레인트

4. Component & Variant

2023.07.13 - [UIUX디자인/피그마] - 피그마 컴포넌트, 베리언트 (Component, Variants)

피그마 컴포넌트, 베리언트 (Component, Variants)

5. Plugins

6. Prototype

 

 

피그마의 constraints는 디자인 요소의 크기와 위치를 프레임안에서 제어하는 기능인데요.

 

컨스트레인트를 사용하면 디자인요소(예: 프레임, 그룹, 컴포넌트 등)를

다른 요소나 프레임에 상대적으로 맞출 수 있습니다. 

이를 통해 디자인 요소의 크기를 유지하거나, 요소 간의 간격을 일정하게 유지하거나, 

요소를 중앙에 정렬하는 등의 작업을 수행할 수 있어요.

 

아래 그림을 볼까요?

베스킨라빈스 모바일 리뉴얼 와이어프레임 컨스트레인트 미적용 예시

 

모바일 사이트를 디자인 하는 중인데 당연히 모바일 viewport도 하나의 사이즈는 아니잖아요?

해당 사이즈에서 각각의 디자인요소들이 viewport의 크기에 따라 어떤식으로 보여줘야 할지

컨스트레인트기능을 사용하여 보여줄 수 있는거죠

 

아래그림에서 달라진게 느껴지나요?

 

베스킨라빈스 모바일 리뉴얼 와이어프레임 컨스트레인트 적용 예시

베스킨라빈스 모바일 리뉴얼 와이어프레임 컨스트레인트 적용 예시

 

신제품 이름 섹션도 컨스트레인트를 어떤식으로 설정하느냐에 따라

저렇게 가운데 정렬을 시킬 수도 늘어나게 놔둘수도 있습니다.

 

일단 각각의 옵션을 볼까요?

 

// 가로 기준

Left - 요소의 왼쪽 가장자리를 기준으로 위치를 제어

Right - 요소의 오른쪽 가장자리를 기준으로 위치를 제어

Left and Right - 요소의 왼쪽과 오른쪽 가장자리를 기준으로 위치를 제어

Center - 요소를 수평방향으로 중앙에 위치

Scale - 요소의 크기를 유지하면서 화면 크기에 맞게 비율을 조정

 

// 세로 기준

Top - 요소의 상단 가장자리를 기준으로 위치를 제어, 상단에 고정

Bottom - 요소의 하단 가장자리를 기준으로 위치를 제어, 하단에 고정

Top and Bottom - 요소의 상단과 하단 가장자리를 기준으로 위치를 제어

Center - 요소를 수직 방향으로 중앙에 위치, 수직방향으로 중앙에 정렬

Scale - 요소의 크기를 유지하면서 화면 크기에 맞게 비율을 조정

 

 

헤더섹션을 가지고 예를 들어볼게요.

저렇게 프레임을 잡으면 오른쪽 패널에 컨스트레인트가 활성화 됩니다.

기본 옵션은 left, top이구여

저 큰 프레임도, 이전버튼그룹도, 로고도, 햄버거버튼조차도 모두 left, top의 기본속성이 적용됩니다.

이건 프레임의 왼쪽 탑에 고정시킨다는 의미가 되는거고 그래서 고대로 전체프레임을 늘려보면

컨스트레인트 미적용

이런 왼쪽에 다 몰린 상황이 되어버리는 거죠 ㅎㅎ

 

모바일 뷰포트가 늘어나면 이전버튼은 고대로 왼쪽에 고정하고

오른쪽 햄버거 버튼은 오른쪽에 고정하고

로고는 가운데 정렬이 되는게 좋을 거 같지 않나요? 

그렇게 수정해보겠습니다.

컨스트레인트 left and right, top

컨스트레인트 left, top

컨스트레인트 center, center

컨스트레인트 right center

 

각각의 요소들을 상황에 맞게 수정한 후 뷰포트를 넓혀볼게요

컨스트레인트 적용

컨스트레인트 적용

가로로 늘렸을때 어때요 아까보다 훨씬 보기 좋지 않나요?

참고로 이전버튼은 위아래 정렬을 top으로 고정했었거든요. 그래서 헤더 프레임의 높이를 저렇게 늘리니

이전버튼만 top에 고정되고 나머지 요소들은 center정렬되는것도 체크해주세요 ㅎㅎ

 

 

베스킨라빈스 모바일 리뉴얼 와이어프레임 컨스트레인트 적용 예시

위에 이렇게 늘어나는 요소들은

컨스트레인트scale적용

각각 Scale을 적용하였는데요 Scale은 뷰포트 크기에 따라 사이즈를 비율에 맞춰 늘리는거에요

left and right 와의 가장 큰 차이는 지금 저 신제품 요소들을 각각 left and right를 적용시키면 

요소들끼리 겹치는 상황이 됩니다 

컨스트레인트 left and right 와 scale의 차이

 

피그마의 컨스트레인트는 디자인 요소의 크기와 위치를 유지하면서 화면 크기를 조정하거나

다른 요소들과 상호 작용할 때 효과적으로 작업할 수 있습니다.

잘 사용하면 좋겠죠?