피그마에서 UI 화면을 디자인할 때 가장 많이 쓰이는 기능 중에 하나가 바로 그룹핑인데요. 이 그룹핑 방법들의 차이를 정확히 인지하고 있어야, 디자인 목적에 맞는 적절한 그룹핑을 선택해서 작업할 수 있습니다. 그래서 오늘은 각각의 그룹핑 방법의 특성과 차이점 그리고 각 그룹핑은 언제 사용하면 좋은지에 대해서 포스팅해보려고 합니다.
피그마에서 요소를 그룹핑하는 방법은 아래와 같이 4가지가 있습니다.
피그마 그룹핑 방법 4가지 & 정의
1. Group : 공간(페이지, 영역 등)이 아닌 단순히 요소들의 묶음
2. Frame : 화면(페이지) 단위 또는 헤더, 푸터와 같은 큰 틀을 의미
3. Autolayout : 요소들의 집합으로, 레이아웃(간격 등의)을 적용할 수 있는 작은 공간 단위를 의미
4. Section : 전체 그룹핑 방법의 상위 버전으로 페이지보다 더 상위 개념 의미
저는 작업 시 위와같은 기준을 바탕으로 그룹핑을 진행하고 있습니다. 이는 주관적인 기준이기 때문에 작업 시 참고정도만 해주시면 좋을 듯합니다.
그럼 이제 각각의 그룹핑 방법들의 차이점에 대해서 알아보겠습니다. Group, Frame, Autolayout, Section의 큰 차이점은 크게 정렬, Border, Scale을 들 수 있습니다.
Group
정렬& Border : 그룹은 기본적으로 공간이라는 개념이 아는 끈의 개념인 그룹핑 방식이라 정렬이나 border값을 그룹핑 자체에 부여할 수 없습니다.
Scale : 끈으로 묶인 개체의 개념이기 때문에 크기 조정시 바로 내부 요소의 크기가 자동으로 조정됩니다.
Frame
정렬 : 프레임은 그룹과 Autolayout의 상위 버전의 그룹핑으로 보통 화면단위(Main, 주문하기 등)를 나눌 때 보통 사용합니다. 따라서 자유롭게 화면 안에서 요소들이 배치될 수 도록 하기 위해 Autolayout처럼 자동 정렬은 지원되지 않습니다.
Border : 공간의 개념을 가지고 있기 때문에 그룹핑 자체에 라인을 부여할 수 있습니다.
Scale : Autolayout처럼 내부 요소를 컨트를 하는 기능(Fill, hug 등)이 없기 때문에 그룹핑의 크기에 따라 내부 요소의 크기를 조정할 수 없습니다.
Auto layout
정렬 : 위의 예시 이미지에서 보이듯이 유일하게 정렬이 가능한 그룹핑이 Autolayout입니다. 그룹핑 방식 중에서 유일하게 디자인패널에서(아래 이미지 참조) margin, padding 뿐만 아니라 정렬방식을 조정할 수 있어서 버튼, 레이블 등의 component를 디자인할 때 제일 많이 사용되는 방식입니다.
Border : 공간의 개념을 가지고 있기 때문에 그룹핑 자체에 라인을 부여할 수 있습니다.
Scale : 내부에 있는 자식 요소에 Fill값을 부여하면 Auto layout의 크기에 따라 자동으로 크기가 조정되게 부여할 수도 있습니다.
Section
정렬 : Section은 전체 그룹의 상위 버전으로 디자인을 하는 공간이라기보다는 이미 디자인된 화면들의 집합을 구분하기 위한 상위 개념입니다. 따라서 보통 모바일 section, WebSection 이런 식으로 구분하는 용도로 사용하기 때문에 자동 정렬은 지원되지 않습니다.
Border : 공간의 개념을 가지고 있기 때문에 그룹핑 자체에 라인을 부여할 수 있습니다.
Scale : 내부 요소를 컨트롤 하기 보다는 묶음의 기능이 더 크기 때문에 그룹핑의 크기에 따라 내부 요소의 크기를 조정할 수 없습니다.
이렇게 피그마의 4가지 그룹핑 방법에 대해서 알아보았습니다. 위의 내용에서도 언급하였듯이 사실상 피그마에서 가장 많이 사용되는 그룹핑 방법은 Auto layout입니다. Auto layout은 간격, 크기, 표현방식(fill, fixed, hug) 등을 조절하는 레이아웃의 개념을 가지고 있어서 요소를 디자인할 때 가장 많이 사용됩니다.
Auto layout을 적용하는 방법에 대해서 더 자세히 알고 싶다면 아래 포스팅을 참고해 주세요
2022.12.24 - [디자인 TIP] - 피그마 (Figam) 기초 : 오토레이아웃(Auto layou) 정복하기
'디자인 TIP' 카테고리의 다른 글
| 피그마(figma) 팁 : Autolayout 활용해서 인풋 콤포넌트 만들기 (Input, Label, Supporting text) (2) | 2024.01.05 |
|---|---|
| 피그마(Figam) 팁 : 상업 무료 이용 아이콘 플러그인 사용 방법 (2) | 2023.12.27 |
| 피그마 꿀팁: 'Mockup Library' 플러그인 사용해 피그마로 목업하기 (0) | 2023.05.13 |
| 피그마 (Figam) 꿀팁 : Absolute positioning 정복하기 (0) | 2023.04.02 |
| 피그마 (Figam) 기초 : 오토레이아웃(Auto layou) 정복하기 (2) | 2022.12.24 |
댓글