피그마 오토레이아웃, 어려운 줄 알았는데 알고 보니 꿀기능이었던 이유
피피그마 오토레이아웃, 처음 봤을 때 저는 그냥 넘어갔어요. 버튼 하나 만드는데 뭔 설정이 이렇게 많아 보이나 싶어서요. 실무 마감 앞두고 시간 없는데 새 기능까지 배울 여유가 어디 있겠어요. 근데 나중에 알고 보니,
이거 안 쓰면 저만 손해였더라고요 ㅠㅠ
오늘은 저처럼 오토레이아웃 앞에서 멈칫했던 분들 위해, 개념부터 실전 활용, 제가 걸렸던 실수까지 겪은 순서 그대로 정리해볼게요. 브랜딩만 하다가 UIUX 겸하게 되면서 진짜 매일 쓰는 기능이라, 최대한 실무 감으로 풀어드릴게요!
Table of Contents
피그마 오토레이아웃이 대체 뭐길래
말이 나온 김에 쉽게 설명하면, 오토레이아웃은 요소들 사이 간격이랑 크기를 피그마가 알아서 정리해주는 기능이에요. 웹 개발 쪽 용어로 치면 플렉스박스(flexbox)랑 비슷한 개념인데, 코드 몰라도 됩니다. 그냥 “이 방향으로, 이만큼 간격 두고 자동 정렬해줘”라고 피그마한테 부탁하는 거예요.
버튼 안에 텍스트를 넣었는데 텍스트 길이가 바뀔 때마다 버튼 크기를 손으로 늘렸다 줄였다 하신 적 있으실 거예요. 오토레이아웃 켜두면 이걸 피그마가 알아서 해줍니다. 저는 이거 하나 때문에 작업 시간이 꽤 줄었어요 ⭐
참고로 이 기능, 유료 플랜 전용 아니고 피그마 전체 플랜에서 다 쓸 수 있는 기능이에요. 무료로 쓰시는 분들도 부담 없이 익혀두셔도 됩니다.
피그마 오토레이아웃 이렇게 시작합니다
저만 그런가 싶었는데, 막상 써보면 순서는 진짜 단순해요.
- 오토레이아웃 적용할 프레임이나 요소를 선택합니다
- 단축키 Shift + A 를 누르거나, 오른쪽 패널에서 ‘+’ 버튼을 눌러 오토레이아웃을 추가합니다
- 방향(가로 / 세로 / 그리드)을 정합니다 — 요즘은 그리드 방식도 추가돼서 표 형태 레이아웃도 자동 정렬이 가능해요
- 요소 사이 간격(Gap)과 여백(Padding) 값을 입력합니다
- 정렬(Alignment) 방식을 정합니다
- 리사이징 옵션(Hug contents / Fill container / Fixed)을 상황에 맞게 설정합니다
여기서 팁 하나. 프레임 하나에만 오토레이아웃 거는 게 아니라, 그 안에 또 다른 오토레이아웃 프레임을 중첩해서 넣을 수도 있어요. 예를 들어 카드 컴포넌트라면, 카드 전체는 세로 오토레이아웃으로, 그 안에 있는 아이콘+텍스트 묶음은 가로 오토레이아웃으로 따로 걸어주는 식이에요. 처음엔 복잡해 보이는데, 이렇게 중첩해두면 나중에 반응형 대응할 때 훨씬 편해집니다.
리사이징 옵션, 헷갈리는 3가지 정리
결론부터 말하면, 저는 처음에 이 세 개 이름부터 헷갈렸어요. 최대한 쉽게 풀어드릴게요.
- Hug contents (허그 콘텐츠): 안에 든 내용물 크기에 딱 맞게 줄어들고 늘어남. 옷이 몸에 맞춰지듯이 프레임이 내용물을 “허그”한다고 생각하시면 편해요.
- Fill container (필 컨테이너): 부모 프레임 크기에 꽉 채워서 늘어남. 부모가 넓어지면 같이 넓어져요.
- Fixed (고정): 내용이 뭐가 되든 크기 고정. 안에 텍스트가 길어져도 프레임 크기는 그대로예요.
버튼 만들 때를 예로 들면, 버튼 너비는 보통 Hug contents로 두고 텍스트 길이에 따라 자연스럽게 늘어나게 하고, 버튼이 들어가는 카드 전체는 Fill container로 화면 너비에 맞게 늘어나도록 설정하는 식으로 조합해서 씁니다.
실전 예시로 감 잡기 (버튼 · 카드 · 리스트)
버튼 만들기. 텍스트 레이어 하나 만들고 Shift+A로 오토레이아웃 감싸주세요. 좌우 패딩 16px, 상하 패딩 8px 정도 주고, 리사이징은 Hug contents로 두면 텍스트가 “확인” 이든 “장바구니에 담기” 든 버튼이 알아서 늘어나요. 예전엔 텍스트 바뀔 때마다 버튼 프레임을 손으로 다시 그렸었는데, 지금 생각하면 왜 그렇게 했나 싶어요.
카드 컴포넌트 만들기. 이미지 + 제목 + 설명 텍스트를 세로 오토레이아웃으로 묶고, 간격은 8~12px 정도로 통일해주세요. 이렇게 만들어두면 설명 텍스트가 한 줄이든 세 줄이든 카드 높이가 알아서 조절됩니다. 목록형 콘텐츠 다룰 일 많은 블로그나 상세페이지 작업하실 때 특히 유용해요.
리스트 만들기. 메뉴 리스트나 할 일 목록처럼 같은 형태가 반복되는 요소는 세로 오토레이아웃 안에 각 아이템을 넣어주시면, 아이템이 추가되거나 삭제될 때마다 전체 간격이 자동으로 재정렬돼요. 손으로 하나씩 밀어줄 필요가 없어집니다.
피그마 오토레이아웃, 저도 처음엔 이런 실수했어요
저만 그런가 싶었는데, 주변 디자이너분들 얘기 들어봐도 비슷한 지점에서 다들 한 번씩 걸리시더라고요.
방향 설정 안 하고 마구 쌓기. 가로/세로 방향을 안 정하고 요소를 막 넣다 보니 레이아웃이 순식간에 무너진 적이 많았어요. 방향부터 먼저 정하고 요소를 넣는 게 훨씬 편합니다.
padding 값 대충 넣기. 8px, 16px처럼 배수로 맞추지 않고 감으로 12px, 17px 이렇게 넣다가 나중에 디자인 시스템 정리할 때 다 갈아엎었어요. 처음부터 8의 배수로 습관 들이시길 추천드려요.
Fill container 잘못 써서 요소가 화면 밖으로 튀어나감. 부모 프레임 크기를 안 정해둔 상태에서 Fill container를 쓰면 요소가 예상 못 한 방향으로 커집니다. 이것 때문에 시안 하나를 통째로 다시 만든 적도 있어요 ㅠㅠ 지금 생각하면 웃프네요.
중첩 구조를 너무 깊게 만들기. 오토레이아웃 안에 오토레이아웃을 계속 넣다 보면 나중에 어디를 수정해야 할지 못 찾는 경우가 생겨요. 레이어 이름을 명확하게 정리해두시는 걸 강력 추천드려요.
오토레이아웃 vs 수동 배치, 비교해보면
그래도 오토레이아웃이 무조건 정답은 아니에요. 간단한 정적 화면이나 딱 한 번 쓰고 말 목업이면 수동 배치가 오히려 빠를 때도 있습니다. 상황에 맞게 골라 쓰시는 걸 추천드려요.
| 구분 | 오토레이아웃 | 수동 배치 |
|---|---|---|
| 수정 속도 | 텍스트/콘텐츠 바뀌어도 자동 대응 | 매번 손으로 재배치 필요 |
| 반응형 대응 | 좋음 (Fill/Hug 옵션 활용) | 별도 작업 필요 |
| 학습 곡선 | 처음엔 살짝 있음 | 거의 없음 |
| 이런 작업에 추천 | 버튼, 카드, 리스트, 반복 컴포넌트 | 일회성 목업, 단순 정적 화면 |
말이 나온 김에 하나 더 팁을 드리면, 디자인 시스템 만드실 계획이 있다면 오토레이아웃은 선택이 아니라 필수예요. 컴포넌트가 늘어날수록 체감이 확실히 다릅니다.
피그마 오토레이아웃과 같이 쓰면 편한 플러그인 하나
오토레이아웃에 어느 정도 익숙해지셨다면, 커뮤니티 플러그인도 하나 살펴보시길 추천드려요. 특히 여러 요소를 한 번에 오토레이아웃 그리드로 정리해주는 플러그인들이 있는데, 반복되는 카드형 레이아웃 작업할 때 시간을 꽤 아껴줍니다. 피그마 플러그인 페이지에서 “auto layout” 검색해보시면 관련 플러그인 여러 개 나오니, 본인 작업 스타일에 맞는 걸로 하나 설치해두시는 걸 추천드려요.
자주 묻는 질문 (FAQ)
Q. 피그마 오토레이아웃은 유료 플랜에서만 쓸 수 있나요? 아니에요, 피그마 오토레이아웃은 무료 플랜을 포함한 전체 플랜에서 다 사용할 수 있는 기능이에요.
Q. 피그마 오토레이아웃 단축키가 뭔가요? 요소를 선택한 상태에서 Shift + A를 누르면 바로 피그마 오토레이아웃이 적용돼요.
Q. 피그마 오토레이아웃, 나중에 해제할 수도 있나요? 네, 오토레이아웃이 걸린 프레임을 선택하고 오른쪽 패널에서 해제하면 다시 일반 프레임으로 돌아갑니다. 언제든 되돌릴 수 있으니 부담 없이 연습해보셔도 돼요.
오늘은 피그마 오토레이아웃 기초부터 실무 실수 사례, 실전 예시까지 정리해봤어요. 처음엔 저도 낯설었는데, 한번 손에 익으면 진짜 안 쓰던 시절로 못 돌아갑니다.
혹시 피그마 말고 다른 디자인 툴 요금제 고민 중이시라면, 이전에 정리해둔 어도비 요금제 추천, 잘못 고르면 매달 돈 새는 이유 글도 같이 참고해보세요. 툴 하나 잘못 고르면 매달 나가는 돈이 꽤 차이 나거든요.
그리고 오토레이아웃 포함해서 피그마 유료 기능까지 궁금하시다면 피그마 공식 요금제 페이지에서 플랜별 차이도 한번 확인해보시는 거 추천드려요!
