반응형
피그마 Auto Layout의 개념부터 패딩, 간격, 정렬, 활용 방법
피그마 Auto Layout의 개념부터 실무에서 바로 활용 가능한 설정 방법까지 단계별로 정리합니다.
정렬, 간격, 반응형 구성의 핵심을 정확하게 이해할 수 있습니다.
UI 디자인에서 가장 많은 시간이 소모되는 작업 중 하나는 정렬과 간격 조정입니다.
버튼 하나를 수정했을 뿐인데 주변 요소가 흐트러지거나, 텍스트 길이가 바뀌면서 전체 레이아웃을 다시 손봐야 하는 상황은 매우 빈번하게 발생합니다.
이러한 반복 작업은 작업 속도를 느리게 만들고, 실수 가능성도 높입니다. 이 문제를 해결하기 위해 등장한 기능이 바로 Auto Layout입니다.
Auto Layout은 요소의 크기와 위치를 자동으로 관리해 주는 구조입니다.
단순히 정렬을 돕는 기능이 아니라, 콘텐츠 변화에 따라 레이아웃이 스스로 반응하도록 만드는 핵심 도구라고 볼 수 있습니다.
버튼 안의 글자가 늘어나면 버튼 크기가 함께 커지고, 카드 안의 요소가 추가되면 전체 카드 높이가 자연스럽게 확장됩니다.
이러한 동작은 모두 Auto Layout의 규칙에 의해 자동으로 처리됩니다. Figma에서 Auto Layout이 중요한 이유는 명확합니다.
협업 환경에서 디자인 수정이 잦을수록, 사람이 직접 정렬을 관리하는 방식은 한계가 있기 때문입니다.
Auto Layout을 이해하고 제대로 설정하면 디자인 수정 속도는 눈에 띄게 빨라지고, 결과물의 일관성도 안정적으로 유지됩니다.
이 글에서는 Auto Layout을 처음 접하는 단계에서 반드시 이해해야 할 개념부터, 실제 작업에서 바로 활용 가능한 설정 방법까지 체계적으로 정리합니다.
기능을 나열하는 방식이 아니라, 왜 이런 설정이 필요한지, 어떤 상황에서 사용해야 하는지를 중심으로 설명합니다.
Auto Layout의 개념과 구조
- Auto Layout은 프레임 안에 들어 있는 요소들의 배치 규칙을 정의하는 시스템입니다.
- 가장 핵심이 되는 개념은 세 가지입니다.
- 첫째, 방향(Direction)
- 둘째, 간격(Spacing & Padding)
- 셋째, 크기 조절 방식(Resizing)
방향(Direction)
- Auto Layout은 요소를 가로(Horizontal) 또는 세로(Vertical) 방향으로 자동 배치합니다.
- 가로 방향은 버튼이 나란히 배치되는 메뉴, 탭 UI에 적합합니다.세로 방향은 카드 리스트, 텍스트 목록 구조에 적합합니다.
- 이 방향 설정은 단순한 정렬이 아니라, 요소가 추가되거나 삭제될 때 어디로 확장될지를 결정합니다.
간격(Spacing & Padding)
- Spacing between items: 내부 요소들 사이의 간격을 일정하게 유지합니다.
- Padding: 프레임의 안쪽 여백을 설정합니다.
- 이 두 값이 명확히 설정되면, 내부 요소 크기가 바뀌어도 전체 구조는 흔들리지 않습니다.
- 수동으로 여백을 맞추는 방식과 달리, 한 번의 설정으로 모든 요소에 동일한 규칙을 적용할 수 있습니다.
크기 조절 방식(Resizing)
- Auto Layout이 진짜 힘을 발휘하는 부분입니다.
- Hug contents: 내부 콘텐츠 크기에 맞춰 프레임이 자동 조절됩니다.
- Fill container: 부모 프레임의 크기를 채우도록 확장됩니다.
- Fixed: 고정 크기를 유지합니다.
- 이 세 가지 조합을 이해하면, 버튼·카드·리스트·헤더 등 대부분의 UI 구조를 안정적으로 설계할 수 있습니다.
위치 잡기
Auto Layout을 적용하기 전에, 화면에서 대략적인 위치를 먼저 잡는 게 빠릅니다.
- Frame(화면) 만들기
- 오른쪽 패널에서 Frame 선택 → 원하는 디바이스 프리셋(또는 커스텀) 선택
- UI 요소를 화면 위에 대충 배치
- 버튼, 텍스트, 아이콘 등을 드래그해서 “있어야 할 자리”에 놓습니다.
- 여기서 정렬은 “완벽하게” 맞출 필요가 없습니다.
- Auto Layout이 들어가면 위치가 재정렬되기 때문입니다.
이 단계는 “설계 전 초안 배치”라고 생각하면 됩니다.
Auto Layout 적용: “누구를 묶을지”가 제일 중요합니다
Auto Layout은 묶는 단위(컨테이너)가 80%를 결정합니다.
(A) 버튼 만들기 예시(가장 기본)
- 텍스트 레이어 1개와 다른 도형을 선택
- Auto Layout 적용
- 메뉴 또는 단축키(보통 Shift + A)
- 바로 프레임이 생기면서 Auto Layout 패널이 뜹니다.
- 이제 이 프레임이 “버튼 컨테이너”가 됩니다.
방향 조정
가로(Horizontal)로 두는 대표 상황
- 버튼 안의 아이콘 + 텍스트
- 탭 메뉴(탭들이 옆으로 나열)
- 헤더(로고/메뉴/프로필)
조정 포인트
- 아이템이 추가되면 **오른쪽(또는 설정된 방향)**으로 늘어납니다.
- 줄바꿈이 필요한 구조면(예: 태그가 여러 줄로 넘어가는 경우) Wrap 옵션을 고려합니다(가능한 경우).
세로(Vertical)로 두는 대표 상황
- 카드 내부 요소(제목/설명/버튼)
- 리스트/목록
- 섹션 단위 레이아웃
조정 포인트
- 아이템이 추가되면 아래로 늘어납니다.
- 텍스트가 길어져도 아래로 자연스럽게 확장시키기 좋습니다.
간격(Spacing)과 여백(Padding) 조정
- Auto Layout 패널에서 Spacing between items(여기서는 Gap) 값을 설정
- 카드라면 보통: 제목-설명 간격
- 설명-버튼 간격 같은 “리듬”이 생기도록 통일합니다.
- 실무 팁
- 간격이 제각각이면 수정할 때 계속 흔들립니다.
- 한 컨테이너 안에서는 대표 간격 1~2개만 쓰는 게 유지보수에 좋습니다.
- Padding (컨테이너 안쪽 여백)
- Auto Layout 패널에서 Padding(상/하/좌/우)을 설정
- 버튼이라면: 좌우 padding이 상하보다 큰 경우가 많습니다.
- 카드라면: 안쪽 여백이 카드 “품질”을 좌우합니다.
- 실무 팁
- Padding은 “컨테이너의 안전지대”입니다.
- 텍스트 길이가 변해도 테두리에 붙지 않게 보호합니다.
정렬 조정
Auto Layout 컨테이너 안에서 정렬은 두 층이 있습니다.
- 컨테이너 안에서 아이템 정렬
- 가로 방향 컨테이너면: 위/가운데/아래 정렬
- 세로 방향 컨테이너면: 좌/가운데/우 정렬
- “Space between”을 쓰는 대표 상황
- 헤더처럼 좌측/우측을 벌려야 할 때
- 로고는 왼쪽, 프로필은 오른쪽으로 자동 분리
이걸 쓰면 화면 폭이 바뀌어도 자동으로 양쪽에 붙습니다.
크기 조절
여기가 Auto Layout의 핵심입니다. 원칙은 간단합니다.
- 내용이 바뀌면 커져야 하는 것 → Hug
- 부모 폭/높이를 따라가야 하는 것 → Fill
- 절대 크기가 변하면 안 되는 것 → Fixed
Hug contents (내용에 맞춤)
버튼 텍스트, 배지, 짧은 라벨에 거의 필수입니다.
- 버튼 컨테이너 선택
- Width/Height가 Hug로 되어 있는지 확인
- 텍스트를 바꿔보며 버튼이 자연스럽게 커지는지 확인
- Auto Layout은 언제 적용하는 것이 가장 적절한가요?
- Auto Layout은 콘텐츠 길이나 개수가 변할 가능성이 있는 UI에 적용하는 것이 가장 효과적입니다.
- 버튼 문구가 바뀌거나 리스트 항목이 늘어나는 구조라면 필수에 가깝습니다.
- 반대로 완전히 고정된 배경 이미지 영역에는 필요하지 않을 수 있습니다.
- 판단 기준은 “이 UI가 나중에 바뀔 수 있는가”입니다. 바뀔 수 있다면 Auto Layout을 고려합니다.
- 처음부터 완벽하게 설계하지 않아도 됩니다. 기본 구조만 Auto Layout으로 잡아도 수정 비용이 크게 줄어듭니다.
- 특히 협업 환경에서는 Auto Layout 유무가 결과 품질에 직접적인 영향을 줍니다. 수정 요청이 잦은 UI일수록 가치가 큽니다. 반복 사용되는 컴포넌트라면 우선 적용 대상입니다.
- Auto Layout을 적용했는데 UI가 갑자기 틀어지는 이유는 무엇인가요?
- 대부분 기존에 수동으로 맞춰둔 간격과 Auto Layout 규칙이 충돌하기 때문입니다.
- Auto Layout은 “현재 위치”가 아니라 “규칙”을 기준으로 재정렬합니다. 그래서 기존 여백이 무시되고 새 기준이 적용됩니다. 이 현상은 오류가 아니라 정상 동작입니다.
- 해결 방법은 Padding과 Gap을 다시 정의하는 것입니다. 수동 이동은 최대한 제거하는 것이 좋습니다.
- 규칙 기반 구조로 바뀌는 과정이라고 이해하면 됩니다. 처음 한 번만 재정리하면 이후에는 훨씬 안정적입니다.
- 이 단계를 넘기면 수정이 쉬워집니다. 정렬이 무너졌다고 느낄수록 규칙 설정이 필요합니다.
- 가로 Auto Layout과 세로 Auto Layout은 어떻게 구분해서 써야 하나요?
- 기준은 “요소가 추가될 때 어디로 늘어나야 하는가”입니다.
- 오른쪽으로 늘어나야 하면 가로, 아래로 늘어나야 하면 세로입니다. 버튼 안의 아이콘과 텍스트는 가로가 적합합니다.
- 카드 안의 제목, 설명, 버튼은 세로가 자연스럽습니다. 시각적 정렬보다 확장 방향을 먼저 생각합니다.
- 방향을 잘못 잡으면 수정할 때 구조가 꼬입니다. 처음 설계 단계에서 방향을 정하면 이후 고민이 줄어듭니다.
- 중간에 바꿀 수는 있지만 비용이 큽니다. UI의 “흐름”을 상상해보면 판단이 쉬워집니다. 나열 구조인지, 쌓는 구조인지가 핵심입니다.
- Gap과 Padding의 차이를 헷갈리지 않는 방법이 있을까요?
- Gap은 요소와 요소 사이의 거리입니다. Padding은 컨테이너와 요소 사이의 거리입니다.
- 즉, Gap은 내부 관계, Padding은 외곽 여백입니다. 카드 안에서 제목과 설명 사이 간격은 Gap입니다.
- 카드 테두리와 제목 사이 여백은 Padding입니다. 둘을 동시에 조정하면 혼란이 생길 수 있습니다.
- 먼저 Gap으로 내부 리듬을 맞춥니다. 그 다음 Padding으로 전체 여백을 조정합니다.
- 이 순서를 지키면 레이아웃이 덜 흔들립니다. 역할을 나눠 생각하면 헷갈리지 않습니다. 하나는 “사이”, 하나는 “안쪽”입니다.
- Hug, Fill, Fixed는 어떤 기준으로 선택해야 하나요?
- Hug는 콘텐츠 기준입니다. 내용이 바뀌면 크기도 같이 바뀌어야 할 때 사용합니다. Fill은 부모 기준입니다.
- 부모 크기에 맞춰 늘어나야 할 때 선택합니다. Fixed는 절대 크기를 유지해야 할 때 사용합니다.
- 버튼 텍스트는 Hug가 적합합니다. 카드 폭은 Fill이나 Fixed가 많습니다. 아이콘은 대부분 Fixed가 안전합니다.
- 이 세 가지는 섞어서 사용합니다. 하나의 UI 안에서도 역할별로 다릅니다. 기준은 “무엇을 따라가야 하는가”입니다.
- Auto Layout을 중첩해서 쓰는 이유는 무엇인가요?
- 복잡한 UI는 한 방향만으로 표현하기 어렵기 때문입니다.
- 카드 전체는 세로 구조지만, 카드 안 버튼은 가로 구조일 수 있습니다. 이때 각각 Auto Layout을 적용해 중첩합니다.
- 이렇게 하면 각 영역이 자신의 규칙을 가집니다. 수정 시 영향을 받는 범위가 줄어듭니다.
- 한 번에 모든 것을 제어하려 하면 구조가 무너집니다. 역할 단위로 나누는 것이 핵심입니다.
- 중첩은 복잡함이 아니라 정리입니다. 오히려 구조를 단순하게 만듭니다. 규모가 커질수록 중첩의 가치가 커집니다.
- Auto Layout에서 드래그로 위치 조정이 어려운 이유는 무엇인가요?
- Auto Layout은 위치를 “수치”가 아니라 “규칙”으로 관리합니다. 그래서 드래그 이동이 제한됩니다.
- 대신 Padding과 Gap을 통해 위치를 조정합니다. 이는 의도된 설계입니다.
- 수동 이동을 허용하면 규칙이 깨지기 때문입니다. 처음에는 불편하지만 익숙해지면 더 빠릅니다.
- 위치 조정 = 여백 조정이라고 생각하면 됩니다. 특정 요소만 자유롭게 두고 싶을 때는 Absolute position을 사용합니다. 다만 최소한으로 사용해야 합니다. 규칙을 지키는 것이 장기적으로 유리합니다.
- Absolute position은 언제 사용하는 것이 적절한가요?
- Auto Layout 흐름에서 벗어나야 할 요소에만 사용합니다. 예를 들어 카드 위에 겹쳐진 배지나 아이콘입니다.
- 이 요소는 레이아웃 흐름에 영향을 주면 안 됩니다.
- Absolute position을 사용하면 다른 요소의 간격 계산에서 제외됩니다.하지만 남용하면 구조가 복잡해집니다.
- 기본 레이아웃에는 사용하지 않습니다. “겹침”이나 “장식” 요소에 한정합니다.
- 사용 후에도 부모 Auto Layout 규칙은 유지됩니다. 예외 처리용 도구라고 생각하면 됩니다. 기본은 규칙, 예외만 Absolute입니다.
- Wrap 옵션은 언제 켜야 하나요?
- 요소가 한 줄을 넘어갈 가능성이 있을 때 사용합니다. 태그 목록, 카드 그리드, 버튼 모음 등이 대표적입니다.
- Wrap을 켜면 요소가 자동으로 줄바꿈됩니다. 이때 Gap이 가로/세로 두 값으로 나뉩니다.
- 줄바꿈이 필요 없는 구조라면 끄는 것이 단순합니다. Wrap은 반응형 구성에서 효과적입니다.
- 화면 폭에 따라 줄 수가 바뀝니다. 다만 예측이 어려워질 수 있습니다. 반드시 테스트하면서 사용합니다.
- 구조가 명확할 때만 적용하는 것이 좋습니다.
- Auto Layout을 적용했는데 성능이나 작업 속도에 영향이 있나요?
- 일반적인 디자인 작업에서는 체감할 성능 저하는 거의 없습니다. 오히려 수정 속도는 크게 향상됩니다.
- 수동 정렬 시간이 줄어들기 때문입니다. 구조가 명확해져 판단도 빨라집니다.
- 초기 설정에 약간의 시간이 들 수 있습니다. 하지만 이후 수정 비용을 생각하면 이득입니다.
- 반복 작업이 많은 프로젝트일수록 차이가 큽니다. 협업 시 커뮤니케이션 비용도 줄어듭니다. 전체 작업 흐름이 안정됩니다. 장기 프로젝트에 특히 유리합니다.
- Auto Layout을 나중에 적용해도 괜찮을까요?
- 가능은 하지만 비용이 더 듭니다. 이미 수동 정렬이 많을수록 재정리가 필요합니다.
- 초반에 기본 구조만이라도 적용하는 것이 좋습니다. 완벽하지 않아도 괜찮습니다.
- 방향과 기본 Padding만 있어도 충분합니다. 나중에 세부 조정은 가능합니다.
- 처음부터 모든 걸 설계하려다 시작을 못 하는 경우가 더 문제입니다. 점진적으로 적용하는 방식이 현실적입니다.
- 중요한 컴포넌트부터 시작합니다. 사용 빈도가 기준이 됩니다.
- Auto Layout이 적용된 Frame인지 빠르게 구분하는 방법은 무엇인가요?
- Design 패널의 Layout 섹션을 보면 알 수 있습니다. Auto Layout이 있으면 Direction, Gap, Padding이 보입니다.
- 일반 Frame이면 Flow와 Dimensions만 보입니다. 또 하나의 방법은 레이어 아이콘입니다.
- Auto Layout Frame은 아이콘 모양이 다릅니다.
- 요소를 드래그했을 때 움직임이 제한되면 Auto Layout일 가능성이 큽니다. Gap 조절이 가능한지도 확인합니다.
- 이 세 가지만 봐도 바로 구분됩니다. 익숙해지면 한눈에 알 수 있습니다. 확인 습관을 들이면 실수가 줄어듭니다.
- 버튼 높이를 일정하게 유지하려면 어떻게 해야 하나요?
- 버튼 컨테이너의 Height를 Fixed로 설정합니다. 그리고 내부 Padding을 표준화합니다.
- 텍스트는 Hug로 두는 것이 일반적입니다. 이렇게 하면 문구가 바뀌어도 높이는 유지됩니다.
- 가로 폭만 변하게 할 수 있습니다. 여러 버튼을 나란히 배치할 때 특히 중요합니다.
- 높이가 제각각이면 시각적으로 불안정합니다. 컴포넌트 기준 값을 정해두면 좋습니다. 수정 시 기준을 지키기 쉬워집니다. 일관성이 생깁니다.
- 카드 UI에서 가장 흔한 Auto Layout 실수는 무엇인가요?
- 모든 요소를 하나의 Auto Layout으로 처리하려는 것입니다. 그러면 수정 시 영향 범위가 커집니다.
- 카드 전체, 카드 내부 그룹, 버튼 그룹을 나눠야 합니다. 또 하나는 텍스트를 Fixed로 두는 실수입니다.
- 내용이 늘면 잘립니다. 대부분 Hug 또는 Fill이 적절합니다. Padding을 너무 작게 두는 것도 흔합니다.
- 여백이 부족하면 가독성이 떨어집니다. 처음부터 구조를 나누는 습관이 중요합니다. 작은 설계 차이가 큰 차이를 만듭니다.
- Auto Layout과 정렬(Align) 기능은 어떻게 다른가요?
- 정렬은 “지금 이 순간”의 위치를 맞춥니다. Auto Layout은 “앞으로의 변화”를 관리합니다.
- 정렬은 일회성입니다. Auto Layout은 지속적입니다. 정렬로 맞춘 UI는 내용이 바뀌면 다시 깨집니다.
- Auto Layout은 규칙이 유지됩니다. 둘은 경쟁 관계가 아닙니다.
- 정렬 후 Auto Layout을 적용할 수 있습니다. 하지만 최종 관리는 Auto Layout이 담당합니다. 장기적으로는 Auto Layout이 핵심입니다.
- Auto Layout을 쓰면 반응형 디자인이 자동으로 되나요?
- 자동은 아닙니다. 하지만 기반을 만들어줍니다. Fill과 Hug 설정이 올바르면 반응형 대응이 쉬워집니다.
- 화면 크기에 따라 늘어나거나 줄어드는 구조를 만들 수 있습니다. Wrap과 Space between도 도움이 됩니다.
- 다만 모든 상황을 커버하지는 않습니다. 테스트와 조정이 필요합니다. Auto Layout은 도구이지 완성품은 아닙니다.
- 구조 설계가 중요합니다. 잘 설계된 Auto Layout은 반응형의 절반입니다.
- 텍스트가 길어질 때 레이아웃이 깨지지 않게 하려면 어떻게 해야 하나요?
- 텍스트 레이어의 Width 설정을 확인합니다. 대부분 Hug 또는 Fill이 적합합니다. Fixed는 피하는 것이 좋습니다.
- 부모 컨테이너의 Padding도 충분히 확보합니다. 줄바꿈 허용 여부도 확인합니다.
- 한 줄 고정이면 Overflow를 고려합니다. 실제 긴 문구로 테스트해봅니다. 예외 상황을 미리 확인하는 것이 중요합니다.
- Auto Layout은 테스트할수록 완성도가 올라갑니다. 가정만으로는 부족합니다.
- Auto Layout이 적용된 컴포넌트를 복제해도 문제가 없나요?
- 문제 없습니다. 오히려 권장됩니다. 규칙이 그대로 복제됩니다. 그래서 일관성이 유지됩니다.
- 수정이 필요하면 원본 컴포넌트를 수정합니다. 복제본도 함께 업데이트됩니다.
- Auto Layout의 장점이 극대화되는 지점입니다. 단, 로컬 수정은 신중해야 합니다.
- 규칙을 깨는 수정은 예외로 둡니다. 기본은 공통 규칙입니다. 관리가 쉬워집니다.
- Auto Layout을 쓰면 디자인 자유도가 떨어지지 않나요?
- 초기에는 그렇게 느껴질 수 있습니다. 하지만 실제로는 반대입니다. 기본 구조가 안정되면 실험이 쉬워집니다.
- 수정이 두렵지 않기 때문입니다. 자유도는 “수정 가능성”에서 나옵니다. Auto Layout은 이 부분을 강화합니다.
- 단, 규칙을 이해하지 못하면 답답할 수 있습니다. 이해도가 자유도를 결정합니다.
- 익숙해질수록 더 많은 선택지가 생깁니다. 제한이 아니라 기준입니다.
- Auto Layout을 잘 쓰고 있다는 신호는 무엇인가요?
- 문구를 바꿔도 레이아웃이 깨지지 않습니다. 요소를 추가해도 간격이 유지됩니다.
- 화면 크기를 바꿔도 구조가 유지됩니다. 수정할 때 어디를 만져야 할지 바로 보입니다. Padding과 Gap 값이 명확합니다.
- Hug, Fill, Fixed의 역할이 분명합니다. 수동 이동이 거의 없습니다. 예외 처리가 최소화되어 있습니다.
- 수정 요청에 빠르게 대응할 수 있습니다. 이 상태라면 Auto Layout을 제대로 쓰고 있는 것입니다.
Auto Layout은 단순한 편의 기능이 아니라 디자인 구조를 설계하는 방식 자체를 바꾸는 도구입니다.
한 번 익혀두면 수정 속도, 결과물 안정성, 협업 효율이 모두 개선됩니다. 핵심은 기능을 많이 아는 것이 아니라, 왜 이 설정이 필요한지 이해하는 것입니다. 방향, 간격, 크기 규칙 이 세 가지만 정확히 익히면 대부분의 UI 문제를 구조적으로 해결할 수 있습니다.
읽어주셔서 감사합니다. 추가로 궁금하신 사항이 있으시면 하단의 링크를 참고해 주세요
[Figma] 피그마 자동 저장 오류 대처법과 복구 체크리스트
피그마 자동 저장에 대해 알아보겠습니다. 피그마 자동 저장 오류가 날 대 당황할 수 있습니다. 하지만 원...
blog.naver.com
[Figma] 피그마 초보자가 꼭 알아야 할 기본 단축키
ochosblogg.blogspot.com
[Figma] 피그마 그룹(Group)과 해제(UnGroup) 기능
여러 오브젝트를 묶는 그룹 기능 디자인 작업을 하다 보면 여러 개의 오브젝트가 뒤섞여서 관리하기 힘든 경우가 발생합니다.피그마는 이런 문제를 해결하기 위해 그룹 기능을 제공합니다.그룹
raphaelspace7.com
반응형
'Figma' 카테고리의 다른 글
| [Figma] 피그마 그룹(Group)과 해제(UnGroup) 기능 (0) | 2025.09.18 |
|---|---|
| [Figma] 피그마 간격 맞추기 & 정렬 단축키 총정리 (0) | 2025.08.27 |
| [Figma] 피그마 텍스트 도구 사용법 완벽 가이드 (0) | 2025.07.22 |
| [Figma] 피그마에서 새 디자인 파일 만드는 법 (0) | 2025.07.16 |
