웹 개발 기본 & 디자인

[Figma] 스마트 설렉트

Data Jun 2025. 12. 5. 21:13

피그마에서 여러 개의 요소를 자연스럽고 일정한 간격으로 정렬하고 싶을 때 매우 유용한 기능이 바로 **스마트 셀렉션(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