피그마 오토 레이아웃의 간격 정렬 옵션이 세 가지로 늘었습니다. 기존에는 요소 사이 간격만 균등하게 벌리는 방식 하나뿐이었지만, 이제는 가장자리 여백까지 규칙대로 맞춰주는 옵션을 골라 쓸 수 있습니다. 상세페이지나 배너처럼 카드·아이콘을 가로로 나열하는 작업이 많은 브랜드 디자인팀이라면, 이 옵션 하나로 반응형 레이아웃 작업 시간을 꽤 줄일 수 있습니다.
오토 레이아웃 간격 정렬, 무엇이 새로 추가됐나요?
오토 레이아웃이란 피그마에서 프레임 안의 요소 간격과 정렬을 자동으로 계산해 주는 기능입니다. 이 기능에 딸린 자동 간격 설정에는 원래 요소 사이 간격만 균등하게 벌리는 방식 하나만 있었는데, 피그마 공식 릴리즈 노트에 따르면 여기에 Around와 Evenly 두 옵션이 새로 추가되고, 기존 방식은 Between이라는 이름으로 정리됐습니다. 이름 자체가 CSS에서 쓰는 정렬 값과 맞춰져 있어, 디자인 도구와 실제 코드 사이의 표현 방식이 한층 가까워졌습니다.
Between·Around·Evenly는 어떻게 다른가요?
| 옵션 | 동작 방식 | 대응하는 CSS 값 |
|---|---|---|
| Between | 요소 사이 간격만 균등, 가장자리에는 별도 여백 없음 | space-between |
| Around | 요소 사이 간격을 균등하게 벌리고, 가장자리에는 그 절반만큼 여백 | space-around |
| Evenly | 가장자리를 포함한 모든 간격이 동일 | space-evenly |
세 옵션 모두 요소 개수나 프레임 너비가 바뀌어도 간격 규칙을 그대로 유지합니다. 예전에는 이런 배치를 흉내 내려면 프레임 패딩과 요소 사이 간격을 따로 계산해 수동으로 맞춰야 했는데, 이제는 옵션 하나만 고르면 됩니다.
왜 상세페이지 제작에 특히 유용한가요?
상세페이지의 특징 아이콘 열, 후기 카드, 배너 안 로고 나열처럼 같은 종류의 요소를 가로로 여러 개 배치하는 구간은 화면 너비나 요소 개수가 바뀔 때마다 여백이 흐트러지기 쉬운 부분입니다. Evenly나 Around를 쓰면 요소가 늘거나 줄어도, 또 모바일·PC 화면 너비가 달라져도 가장자리 여백과 요소 사이 간격이 하나의 규칙으로 자동 유지돼 수정할 때마다 간격을 다시 잡아 줄 필요가 줄어듭니다. 게다가 옵션 이름이 CSS 속성 값과 같기 때문에, 디자이너가 정한 간격 규칙을 퍼블리셔에게 그대로 전달하기도 쉬워집니다.
지금 무엇을 확인해야 하나요?
자주 재사용하는 오토 레이아웃 컴포넌트, 특히 카드 리스트나 아이콘 그리드처럼 반복되는 구성 요소부터 속성 패널을 열어 Between·Around·Evenly 옵션이 보이는지 확인해 보는 것이 먼저입니다. 옵션이 보이지 않는다면 데스크톱 앱이 최신 버전인지 확인하고 업데이트하면 됩니다. 그다음에는 상세페이지처럼 가장자리 여백이 결과물의 완성도를 좌우하는 레이아웃에 하나씩 적용해 보면서, 팀 내부에서 어떤 상황에 어떤 옵션을 기본으로 쓸지 규칙을 정해 두는 것이 좋습니다.
체크리스트
- 속성 패널 확인 — 자주 쓰는 오토 레이아웃 컴포넌트를 열어 간격 정렬 옵션이 Between·Around·Evenly 세 가지로 보이는지 확인합니다.
- 앱 버전 점검 — 옵션이 보이지 않으면 피그마 데스크톱 앱을 최신 버전으로 업데이트합니다.
- 반복 구성 요소부터 적용 — 카드 리스트, 아이콘 그리드처럼 여러 곳에서 재사용하는 컴포넌트에 먼저 옵션을 정리합니다.
- 상세페이지 레이아웃 재점검 — 특징 아이콘 열, 후기 카드처럼 가장자리 여백이 중요한 구간에 Evenly·Around를 적용해 봅니다.
- 팀 규칙 정리 — 어떤 레이아웃에 어떤 옵션을 기본으로 쓸지 팀 내부 기준을 정해 디자인 시스템에 반영합니다.
자주 묻는 질문
피그마 오토 레이아웃 간격 정렬 옵션이 뭔가요?
자동 간격을 적용한 오토 레이아웃 안에서 요소들을 어떻게 벌려 배치할지 고르는 옵션입니다. 기존에는 요소 사이 간격만 균등하게 벌리는 방식(Between) 하나뿐이었는데, 가장자리에도 절반 간격을 주는 Around와 가장자리까지 모두 동일한 간격으로 맞추는 Evenly 두 가지가 새로 추가됐습니다.
이 옵션들은 CSS와 어떤 관계가 있나요?
Between·Around·Evenly는 각각 CSS의 justify-content 값인 space-between·space-around·space-evenly와 같은 방식으로 동작합니다. 디자이너가 피그마에서 고른 옵션 이름을 그대로 개발자에게 전달하면 되어 디자인과 퍼블리싱 사이의 소통 오차가 줄어듭니다.
상세페이지 제작에는 구체적으로 어떻게 도움이 되나요?
특징 아이콘이나 후기 카드처럼 가로로 나열되는 요소를 반응형으로 늘렸다 줄였다 할 때, 예전에는 좌우 여백을 프레임 패딩으로 직접 맞춰야 했습니다. Evenly나 Around를 쓰면 요소 개수나 프레임 너비가 달라져도 가장자리 여백과 요소 사이 간격이 같은 규칙으로 자동 유지됩니다.
지금 당장 확인해야 할 것은 무엇인가요?
반복적으로 쓰는 오토 레이아웃 컴포넌트를 열어 속성 패널에 Between·Around·Evenly 옵션이 보이는지 확인하고, 상세페이지처럼 가장자리 여백이 중요한 레이아웃부터 적용해 보는 것이 좋습니다. 옵션이 보이지 않으면 데스크톱 앱을 최신 버전으로 업데이트하면 됩니다.