피그마에서 여러 개의 요소를 자연스럽고 일정한 간격으로 정렬하고 싶을 때 매우 유용한 기능이 바로 **스마트 셀렉션(Smart Selection)**입니다.
이 기능은 요소 간의 간격이 동일할 때 자동으로 ‘스마트 셀렉션 UI’가 활성화되며,
간격 조정, 정렬 보정 등 레이아웃 작업을 빠르게 처리할 수 있도록 도와줍니다.
1. 스마트 셀렉션이란
스마트 셀렉션은
“여러 오브젝트 간 간격이 일정할 때 자동으로 활성화되는 정렬/간격 조절 기능”
입니다.
요소들이 일정한 간격으로 나열되어 있으면
피그마가 이를 자동 인식하여 간격 조절 핸들(분홍색 점) 을 보여줍니다.
이 핸들을 드래그하면
개별 요소 사이 간격을 한 번에 조정할 수 있습니다.


2. 스마트 셀렉션이 활성화되는 조건
스마트 셀렉션은 요소 간 간격이 동일할 때 자동으로 동작합니다.
예:
- 글자 간격이 일정할 때
- 카드들이 동일 간격으로 정렬되어 있을 때
- 버튼이나 이미지가 규칙적으로 나열되어 있을 때
이 경우, 이미지처럼 간격 수치가 나타나며 해당 값을 조정할 수 있게 됩니다.
3. 간격이 동일하지 않을 때는?
문제는 요소들 간 간격이 서로 다를 때입니다.
이 경우 스마트 셀렉션은 비활성화되어 간격 조절 핸들이 나타나지 않습니다.
이럴 때 활용하는 것이 바로 ‘Tidy Up(정렬)’ 버튼 입니다.
Tidy Up(자동 간격 맞추기) 사용 방법
- 여러 요소를 선택한 뒤
- 우측 하단 또는 레이어 선택 핸들에서 정렬 버튼(격자 모양 아이콘) 클릭
- 피그마가 자동으로 간격을 균등하게 정렬해줌
- 이후 스마트 셀렉션 기능을 사용할 수 있게 됨
즉,
간격이 제각각 → Tidy Up으로 간격 맞춤 → 스마트 셀렉션 활성화 → 세밀한 간격 조절
이 흐름대로 사용하면 됩니다.

정리하면
스마트 셀렉션은 작은 UI 정렬부터 복잡한 레이아웃 배치까지
효율을 극대화할 수 있는 필수 기능입니다.
- 간격이 균등하면 → 스마트 셀렉션 자동 활성화
- 간격이 제각각이면 → Tidy Up 버튼으로 간격을 먼저 맞춘 후 사용
- 핸들을 이용해 → 간격 수치를 자유롭게 조정 가능
이 흐름만 기억해두면 피그마 정렬 작업이 훨씬 더 빠르고 깔끔해집니다.
'웹 개발 기본 & 디자인' 카테고리의 다른 글
| [Figma] 컨스트레인트(Constraints) (0) | 2025.12.06 |
|---|---|
| [Figma] 오토 레이아웃 (0) | 2025.12.05 |
| [Figma] 컴포넌트와 인스턴스 (0) | 2025.12.05 |
| [Figma] 설렉션 컬러 (0) | 2025.12.05 |
| [Figma] 베리어블과 스타일 (0) | 2025.12.05 |