정렬 오류, 누구나 겪지만 제대로 해결하는 사람은 드물다는 사실, 알고 계셨나요?
안녕하세요! 저는 요즘 웹/앱 UI 프로젝트를 병행하면서 피그마 Auto Layout 정렬 오류와 하루에도 몇 번씩 싸우고 있는 디자이너입니다. 프로젝트 마감일이 다가오는데 버튼 하나가 삐뚤게 나와서 스트레스 받으셨던 경험, 다들 한 번쯤 있으시죠? 저도 처음에는 "왜 안 맞지?" 하며 눈대중으로 맞췄다가 전체 레이아웃이 박살나는 걸 수없이 겪었습니다. 그래서 오늘은 제가 실무에서 진짜로 효과 본 정렬 문제 해결법 6가지를 정리해드릴게요. 한 번 정리해두면 두고두고 쓰이는 꿀팁이니 꼭 끝까지 읽어보세요!
피그마(Figma)에서 폰트 추가하는 방법 완벽 정리 (2025년 최신판)
브랜드 디자인 작업 중, 내가 좋아하는 폰트를 피그마에서 못 써본 적 있으신가요? 그 당황스러움, 이제 끝낼 때입니다.안녕하세요, 디자이너 분들! 얼마 전 고객 프로젝트에서 로고와 맞춘 전용
yeeesir.com
목차
1. 피그마 정렬 오류, 왜 생기는 걸까?
피그마에서 정렬이 꼬이는 이유는 아주 단순한 것에서부터 복잡한 구조적 충돌까지 다양합니다. 특히 Auto Layout 기능을 쓰면서도 Absolute Positioning을 함께 쓰거나, 요소 간 속성이 제각각이면 예상치 못한 방식으로 정렬이 흐트러지죠. 실무에서는 소수점 좌표 문제, 부모-자식 간 속성 불일치, Frame과 Group 혼용 등의 상황이 자주 발생합니다. 그리고 이게 진짜 문제인 게, 화면상에서는 얼핏 맞아 보여도 실제로는 0.5px씩 어긋나거나, 리사이징 시 전체가 무너지는 참사가 일어날 수 있다는 겁니다. 이 문제는 단순한 ‘시각적’ 문제가 아니라, 구조의 ‘논리적 충돌’로 이해해야 해결할 수 있어요.
2. 정렬 문제 해결을 위한 실전 우선순위 6가지
| 해결 단계 | 설명 |
|---|---|
| 1단계 | X/Y/W/H 좌표의 소수점 제거 (예: 123.5 → 123) |
| 2단계 | Group → Frame으로 전환하여 기준 명확화 |
| 3단계 | Auto Layout 속성 초기화 후 재설정 |
| 4단계 | Fill / Hug / Fixed 속성 통일 |
| 5단계 | Absolute Position 체크 해제 |
| 6단계 | 소단위 Frame으로 Wrap 처리 |
3. 자주 틀어지는 정렬 유형 리스트
다음은 제가 실무에서 자주 접한 정렬 오류 유형들입니다. 이 리스트만 기억해도 문제 해결 속도가 확 올라갑니다.
- Auto Layout인데 내부 요소가 Absolute로 지정됨
- 프레임 간 Packed vs Space-between 속성 충돌
- Group 상태에서 정렬 버튼 사용 후 삐뚤어짐 발생
- Margin, Gap 값이 꼬여서 의도치 않은 간격 발생
- 텍스트 Hug Height가 줄바꿈으로 늘어남
4. 정렬 문제에서 꼭 피해야 할 실수
정렬 문제를 해결하기보다 악화시키는 실수들이 있어요. 저도 예전에 “이 정도면 맞겠지?” 하고 눈으로 정렬을 맞췄다가 리사이징 순간 완전 망한 적이 많거든요. 아래 실수들은 특히 주의하세요.
- 요소 하나만 따로 이동해서 전체 레이아웃 무너짐
- 텍스트 영역이 자동 줄바꿈되면서 Hug 설정 무력화
- 프레임 사이즈를 수동으로 조절해 Auto Layout 무시
- Component를 Detach해서 정렬 구조 망가짐
5. 핵심 요약: 정렬 오류 해결 체크리스트
| 체크 항목 | 점검 내용 |
|---|---|
| 소수점 제거 | 모든 X/Y/W/H 값을 정수로 통일 |
| Group 변환 | Group → Frame으로 전환 |
| Auto Layout 초기화 | 의심되면 ⌘⌥0으로 해제 후 재적용 |
| 속성 통일 | Hug, Fill, Fixed 중 하나로 통일 |
| Absolute OFF | 포지션 속성 체크 해제 |
| Frame 재구성 | 관련 요소들을 소단위로 Wrap 처리 |
6. 실무 디자이너 FAQ – 정렬 문제 편
정렬 오류에 대해 실무에서 자주 듣는 질문들을 모아봤어요.
- 눈으로 봤을 땐 맞는데 왜 깨져요?
- Auto Layout 안에서 Move Tool 쓰면 안 되나요?
- Group은 정말로 쓰면 안 되나요?
- Hug 설정인데도 왜 늘어나죠?
- 컴포넌트 안에서 Absolute 써도 되나요?
마우스로 드래그하거나 정렬 기준이 어긋나면 자동으로 0.5px 단위로 어긋나는 경우가 많습니다. 특히 컴포넌트 안 요소들을 수동으로 옮길 때 자주 발생하죠.
X, Y, W, H 값을 클릭해서 0.5나 99.3처럼 소수점이 들어간 값은 100이나 123처럼 정수로 맞춰주세요. 마우스 드래그보다 키보드 입력이 정확합니다.
Group은 Frame에 비해 정렬 기준이 불안정하고, Auto Layout 기능이 제대로 작동하지 않아요. 특히 정렬이나 spacing 기준이 바뀔 때 문제가 됩니다.
단축키
⌘+
⌥+
G를 눌러 Frame으로 전환하면 정렬 기준이 명확해집니다.
Auto Layout 안에서 Move Tool(화살표 키나 마우스 드래그)로 요소를 움직이면 좌표가 어긋나고 전체 정렬 흐름이 깨지기 쉽습니다.
순서를 바꾸고 싶다면 계층 패널에서 순서를 바꾸거나, Auto Layout 속성(Gap, Alignment)을 조정하는 방식으로 해결해야 합니다.
Absolute는 Auto Layout 흐름을 무시하고 개별적으로 위치를 설정하게 해 줍니다. 컴포넌트 내부에서 예외적으로 쓰이는 경우가 있긴 합니다.
정말 필요한 경우가 아니라면 Absolute는 피하고, Layout 기준 속성으로 정렬하는 습관을 들이세요.
내부 요소 중 하나라도 Absolute 속성이 적용돼 있거나, 마진 값이 꼬여 있으면 정렬 버튼을 눌러도 적용이 되지 않아요.
단축키
⌘⌥0으로 Auto Layout을 해제한 후, 정렬 기준을 새로 설정하는 게 깔끔한 방법입니다.
피그마에서 정렬 오류가 생기면 괜히 당황해서 화면을 확대하거나 눈대중으로 맞추려는 경우가 많죠. 하지만 이제는 다르게 접근해 보세요. 정렬 문제는 시각적인 감각보다 논리적인 레이아웃 구조를 이해하는 것이 훨씬 중요하답니다. 제가 오늘 공유한 6가지 해결법을 프로젝트마다 한 번씩 점검하는 습관을 들이면, 정렬 오류로 스트레스 받을 일이 정말 줄어들 거예요. 혹시 이 글이 도움이 되셨다면, 주변 디자이너 분들께도 꼭 공유해 주세요. 댓글로 여러분만의 정렬 꿀팁도 나눠주시면 정말 감사하겠습니다 😊
카카오톡 예약전송 방법: 중요한 메시지, 원하는 시간에 자동으로 보내는 법
꼭 전하고 싶은 말이 있었는데 타이밍을 놓쳐버렸던 적, 다들 한 번쯤 있으시죠?안녕하세요! 저는 요즘 카카오톡 예약 메시지 기능을 정말 잘 활용하고 있어요. 예전에는 누군가의 생일 메시지
yeeesir.com