[Figma] 피그마 간격 맞추기 & 정렬 단축키 총정리

피그마에서 오브젝트 정렬과 간격 맞추기

---

 

디자인을 하다 보면 가장 많이 하는 실수가 바로 '정렬과 간격'입니다.

버튼이 조금만 삐뚤어지더라도 카드 간격이 조금만 달라도 전체 화면이 어색해 보입니다.

웹 사이트나 앱 디자인처럼 여러 사용자가 동시에 보는 화면에서는 이런 작은 차이가 큰 차이를 만들어냅니다.

 

피그마는 이런 문제를 해결할 수 있는 강력한 기능을 제공합니다. 정렬(Align) 기능으로 오브젝트를 같은 선상에 맞출 수 있습니다.

간격 맞추기(Distribute) 기능으로 일정한 간격을 유지할 수 있도록 도와줍니다.

또한, Auto Layout을 활용하면 버튼, 카드, 리스트 같은 UI 요소를 반복해서 만들 때 훨씬 더 효율적으로 작업할 수 있습니다.

 

그래서 이 글에서는 간격 맞추기 방법을 소개하려고 합니다.

 

피그마 정렬 기능

정렬 기능은 여러 개의 오브젝트를 한 줄로 맞추거나, 중앙에 배치하거나, 위아래를 깔끔하게 정리할 때 사용합니다.

 

정렬 버튼 찾기

피그마 메뉴 바를 보면 Align을 사용할 수 있습니다.

좌측 정렬, 중앙 정렬, 우측 정렬, 상단 정렬, 세로 중앙 정렬, 하단 정렬 총 6가지 옵션을 제공합니다.

Align 기능

 

왼쪽 정렬: 여러 개 버튼을 선택하면 가장 왼쪽에 있는 오브젝트 기준으로 나머지를 맞춥니다.

가운데 정렬: 선택한 오브젝트들을 수평 중앙에 일렬로 정렬합니다.

오른쪽 정렬: 오른쪽 기준으로 오브젝트를 맞춥니다.

상단/세로 중앙/하단 정렬: 위, 가운데, 아래로 정확하게 맞출 수 있습니다.

 

정렬 단축키

피그마는 대부분 버튼 클릭으로 정렬하지만, Auto Layout이 사실 단축키 역할을 합니다.

Shift + A: 선택한 프레임이나 오브젝트에 Auto Layout 적용 > 자동 저렬 가능

Alt + 드래그: 개체 이동 시 보라색 가이드라인 표시 > 다른 개체와 정렬 맞출 때 유용

 

간격 맞추기  Distribute)

오브젝트를 3개 이상 선택한 상태입니다.

툴 바에서 Distribute horizontally(수평 분배) 또는 Distribute vertically(수직 분배)를 선택합니다.

그럼 선택한 오브젝트 사이가 자동으로 균등한 간격으로 배치됩니다.

간격 맞추기

 

 

그 외에도 오브젝트를 드래그하다 보면 라인이 나타납니다.

이 라인은 다른 오브젝트와의 간격이 동일해졌음을 알려주는 스마트 가이드입니다.

눈대중이 아닌 정확하게 간격을 유지할 수 있도록 도와줍니다.

 

간격 맞추기 팁

Auto Layout을 활용하면 간격 맞추기가 훨씬 더 편해집니다.

프레임에 오브젝트를 넣고 Auto Layout을 적용합니다.

아이템 간 간격(Spacing)을 숫자로 입력하면, 자동으로 일정하게 유지됩니다.

버튼, 카드 리스트, 갤러리, 메뉴 UI 등 반복될 수 있는 디자인 요소에 특히 유용한 기능입니다.

 

 

그럼 정리해 보겠습니다.

1. 피그마는 정렬 단축키가 따로 있을까요?
   • Auto Layout(Shift + A)이 정렬 자동화의 핵심 단축키입니다.
2. 가이드라인이 보이지 않는데요?
   •  메뉴에서 View - Show Smart Guides를 켜야 라인이 제대로 보입니다.
3. 오브젝트 간 간격을 숫자로 맞추려면 어떻게 해야 하나요?
   • Auto Layout으로 묶은 뒤 Spacing값을 입력하면 됩니다.
4. 정렬 기준은 어떻게 정해질까요
   • 선택한 오브젝트 중 첫 번째 또는 프레임 기준으로 적용됩니다.
5. 텍스트도 정렬할 수 있을까요?
   • 텍스트 상자도 오브젝트이므로 동일하게 정렬할 수 있습니다.
6. 간격 맞추기는 2개만 선택해도 될까요?
   • 간격 맞추기 기능은 3개 이상의 오브젝트부터 가능합니다.
7. 오브젝트 크기가 달라도 정렬이 될까요?
   • 크기와 관계없이 기준선에 맞춰 정렬됩니다.
8. 중앙 정렬을 했는데 조금 틀어져 보일 때는 어떻게 해야 할까요?
   • 텍스트는 박스 기준 정렬입니다. 그러므로 프레임 안에 넣고 정렬하는 것이 정확합니다.
9. Auto Layout 안에서 수동 정렬이 가능할까요?
   • 가능하지만 Auto Layout 규칙이 우선으로 적용됩니다.
10. 그리드(Grid)와 정렬은 다른 기능일까요?
    • 그리드는 배경 가이드, 정렬은 오브젝트 위치 맞춤입니다. 함께 쓰면 더 정확하게 사용할 수 있습니다.

피그마 정렬과 간격 맞추기 기능은 디자인의 기본입니다.

정렬 기능은 빠르게 위치를 통일할 수 있습니다.

간격을 맞추는 건 깔끔한 균형을 유지하게 도와줍니다.

Auto Layout은 반복 작업을 자동화합니다.

 

이 세 가지만 숙지해도 디자인 효율이 올라갑니다. 잘 정돈된 작업물을 만들어내는 그날까지 힘내시죠

읽어주셔서 감사합니다. 추가로 궁금하신 내용이 있으시면 하단의 링크를 참고해 주세요

 

https://bit.ly/46nLGKz

[Figma] 피그마 도형 도구(사각형, 원, 선) 사용법

 

https://bit.ly/4kI75Se

[Figma] 피그마에서 새 디자인 파일 만드는 법

 

https://bit.ly/4lGx3G0

[Notion] 노션에서 페이지 간 링크 연결하는 방법 총정리