텍스트와 상자의 수동 정렬은 그만: Auto Layout(오토 레이아웃)의 원리와 기초 활용

[메인 키워드]: 피그마 오토 레이아웃 [보조 키워드]: Auto Layout 사용법, 피그마 간격 자동 정렬, 반응형 버튼 만들기, 피그마 프레임 레이아웃, UI 패딩 설정 [검색 의도]: 디자인 작업 시 텍스트 길이나 요소 변경에 따라 상자 크기와 간격을 마우스로 일일이 수정하는 번거로움을 해결하고, 자동 반응형 구조인 오토 레이아웃의 원리와 설정법을 익히는 목적

피그마를 다루면서 가장 감탄하게 되는 순간을 꼽으라면 단연 'Auto Layout(오토 레이아웃)' 기능을 처음 제대로 활용할 때일 것이다.

이전까지는 버튼 하나를 만들더라도 사각형을 그리고, 그 위에 텍스트를 얹은 뒤, 마우스로 요리조리 움직여 정중앙에 맞추는 수작업을 거쳐야 했다. 문제는 텍스트 내용이 '확인'에서 '상세 내용 확인하기'로 길어지면 뒤에 깔린 사각형 크기를 다시 키우고 위치를 정렬하는 번거로운 일들이 끝없이 반복된다는 점이다.

오토 레이아웃은 바로 이런 소모적인 수작업을 완전히 없애주는 피그마의 핵심 정체성이다. 요소의 내용물이 바뀌면 상자의 크기와 주변 간격이 알아서 늘어나고 줄어드는 '스마트한 자동 정렬 틀'을 만드는 원리를 알아보자.

[소제목] 1. 오토 레이아웃의 기본 개념: 상자가 글자를 감싸다

오토 레이아웃을 이해하는 가장 쉬운 비유는 '슬라이드 형태의 포장 상자'다.

기존의 방식이 '고정된 크기의 네모 상자 위에 글씨를 올려놓는 것'이었다면, 오토 레이아웃은 '글자 주변에 일정한 스펀지(여백)를 대고 상자로 감싸는 것'이다. 글자가 길어지면 스펀지가 밀려나면서 상자 전체가 자연스럽게 늘어나게 된다.

오토 레이아웃을 적용하는 방법은 매우 간단하다.

1. 정렬하고 싶은 요소들(예: 텍스트 하나, 혹은 텍스트와 아이콘)을 마우스로 함께 선택한다.

2. 단축키 Shift + A를 누른다.

3. 선택된 요소들이 즉시 오토 레이아웃이 적용된 고유한 프레임(Frame)으로 전환된다.

우측 패널에 Auto Layout 항목이 활성화되면서, 이제 이 프레임은 내부에 들어있는 요소들의 크기와 위치를 자동으로 제어하는 스마트한 영역이 된다.

[소제목] 2. 오토 레이아웃 우측 패널의 3가지 핵심 설정값

Shift + A를 눌러 오토 레이아웃을 만들었다면, 우측 패널에서 세 가지 핵심 수치를 조절하여 원하는 형태를 완성해야 한다.

• 방향 설정 (Direction): 요소들을 가로로 나란히 배치할지(→), 세로로 쌓을지(↓) 결정한다. 버튼 안의 [아이콘 + 글자] 조합은 가로 방향, 카드 형태의 [이미지 + 제목 + 본문] 조합은 세로 방향을 선택하면 된다.

• 요소 간 간격 (Gap between items): 프레임 안에 들어있는 요소와 요소 사이의 거리를 지정한다. 2편에서 배운 8pt 그리드 시스템에 맞춰 8px, 16px 등으로 수치를 입력하면 일일이 눈대중으로 맞추지 않아도 정교한 간격이 유지된다.

• 안쪽 여백 (Padding): 프레임 테두리와 내부 콘텐츠 사이의 상하좌우 여백을 설정한다. 가로 여백(Padding horizontal)과 세로 여백(Padding vertical)을 각각 지정할 수 있다.

예를 들어 텍스트를 하나 쓰고 Shift + A를 누른 뒤, 가로 패딩 24px, 세로 패딩 12px을 주고 배경색을 칠하면 글자 길이에 따라 수평으로 유연하게 늘어나는 '완벽한 반응형 버튼'이 단 5초 만에 완성된다.

[소제목] 3. 실무에서 오토 레이아웃이 강력한 이유: 중첩(Nesting)구조

오토 레이아웃의 진짜 무서움은 오토 레이아웃 프레임 안에 또 다른 오토 레이아웃 프레임을 집어넣는 '중첩 구조'를 만들 때 나타난다.

실무에서 자주 쓰이는 '스마트폰 설정 메뉴 목록'을 만든다고 가정해 보자.

1. [아이콘]과 [메뉴 이름 텍스트]를 선택하고 Shift + A를 눌러 가로 형태의 오토 레이아웃(행)을 만든다.

2. 만든 행들을 여러 개 복사한 뒤, 전체를 다 같이 선택하고 다시 Shift + A를 눌러 세로 형태의 오토 레이아웃(목록)으로 묶는다.

이렇게 중첩 구조를 완성해 두면, 중간에 새로운 메뉴 항목을 끼워 넣거나 순서를 위아래로 바꿀 때 주변의 다른 항목들이 알아서 비켜서며 밀려나거나 당겨진다. 레이아웃이 깨질 걱정 없이 콘텐츠를 수정할 수 있어 실제 웹/앱 화면을 디자인할 때 작업 시간을 절반 이상 단축시켜 준다.

[핵심 요약]

• 오토 레이아웃(Shift + A)은 텍스트나 콘텐츠의 크기 변화에 따라 프레임과 여백이 자동으로 조절되는 스마트한 정렬 기능이다.

• Direction(방향), Gap(요소 간 간격), Padding(안쪽 여백) 3가지 설정값을 조절하여 반응형 버튼이나 카드를 손쉽게 제작한다.

• 오토 레이아웃 프레임을 중첩(Nesting)하여 관리하면, 요소의 추가·삭제·순서 변경 시에도 레이아웃이 깨지지 않는 유연한 디자인 구조를 구축할 수 있다.

[다음 편 예고] 다음 편에서는 반복되는 버튼이나 카드 UI를 부품처럼 만들어 일괄 수정하고 관리하는 'Component(컴포넌트)'와 'Variant' 설정법을 다룹니다.