피그마에서 버튼을 만들 때마다 글자 길이에 맞춰 사각형 크기를 다시 조절하고 계신가요?
‘로그인’을 ‘지금 바로 로그인하기’로 바꿨을 뿐인데 버튼이 너무 작아지거나, 글자가 밖으로 삐져나오는 경험이 있다면 이번 글이 도움이 될 거예요.
오늘의 피그마 초간단에서는 오토 레이아웃(Auto Layout)을 활용해 글자가 길어지면 버튼도 자동으로 늘어나는 디자인을 만들어 보겠습니다. 처음 접하는 분도 10~15분이면 실습할 수 있도록 꼭 필요한 설정만 다룹니다.
1. 피그마 오토 레이아웃이란?
오토 레이아웃은 프레임 안의 요소를 일정한 규칙에 따라 배치하고, 내용이 달라지면 크기나 간격도 함께 조정해 주는 기능입니다. 쉽게 말하면 “내용이 변해도 디자인이 무너지지 않도록 정리하는 기능”이라고 생각하면 됩니다.
예를 들어 일반 사각형 위에 글자를 올려 버튼을 만들면, 문구가 길어졌을 때 사각형의 너비를 직접 늘려야 하는 경우가 많습니다. 반면 오토 레이아웃을 적용한 버튼은 설정에 따라 글자의 길이에 맞춰 너비를 자동으로 바꿀 수 있습니다.
1.1. 일반 버튼과 오토 레이아웃 버튼의 차이
텍스트가 길어지면 배경 너비를 수동으로 다시 조정
▲ 글자가 배경 밖으로 나올 수 있어요.
내용에 맞춰 버튼이 자동으로 늘어남
▲ 좌우 여백이 유지돼요.
버튼뿐 아니라 메뉴, 태그, 카드, 리스트처럼 콘텐츠 길이나 개수가 자주 달라지는 UI에도 오토 레이아웃을 활용할 수 있습니다.
2. 실습 전에 완성 디자인 확인하기
이번 실습에서는 파란색 버튼 하나를 만들어 보겠습니다. 핵심은 버튼 자체를 예쁘게 꾸미는 것이 아니라 텍스트를 수정했을 때 배경도 함께 늘어나도록 설정하는 것입니다.
변경 전
텍스트만 수정한 후
텍스트가 길어져도 좌우 24px, 상하 12px의 여백을 유지하는 것이 목표입니다.
2.1. 오늘 사용할 디자인 설정값
| 항목 | 설정값 |
|---|---|
| 버튼 문구 | 시작하기 |
| 글자 | 16px / SemiBold / 흰색 #FFFFFF |
| 배경색 | #2563EB |
| 안쪽 여백(Padding) | 좌우 24px / 상하 12px |
| 모서리 둥글기 | 8px |
| 프레임 너비·높이 | Hug contents |
3. 피그마 오토 레이아웃으로 버튼 만들기
이제 Figma 디자인 파일을 열어 직접 따라 해 보세요. 운영체제가 달라도 실습의 기본 단축키는 같습니다.
3.1. 텍스트 먼저 입력하기
- Figma에서 새 디자인 파일을 엽니다.
- 키보드에서 T를 눌러 텍스트 도구를 선택합니다.
- 캔버스를 한 번 클릭하고 시작하기라고 입력합니다.
- 오른쪽 속성 패널에서 글자 크기를 16px, 굵기를 SemiBold로 변경합니다.
- 텍스트 색상은 #FFFFFF로 설정합니다. 흰 배경에서는 잠시 글자가 보이지 않을 수 있으니 레이어 선택 상태로 작업해도 괜찮습니다.
여기서 중요한 점은 처음부터 사각형을 만들지 않는 것입니다. 텍스트를 먼저 만들고, 오토 레이아웃으로 생긴 프레임에 배경색을 적용할 예정입니다.
3.2. Shift + A로 오토 레이아웃 적용하기
- 방금 만든 시작하기 텍스트 레이어를 선택합니다.
- 키보드에서 Shift + A를 누릅니다.
- 텍스트를 둘러싸는 새 프레임이 만들어졌는지 확인합니다.
- 왼쪽 Layers 패널에서 새 프레임의 이름을 Button으로 바꿉니다.
왜 Shift + A를 누를까요? 선택한 레이어를 Auto Layout 프레임으로 감싸면, 그 프레임에 여백·정렬·크기 규칙을 적용할 수 있기 때문입니다. 단축키가 기억나지 않는다면 레이어를 마우스 오른쪽 버튼으로 클릭해 Add auto layout을 선택해도 됩니다.
3.3. 버튼 배경색과 모서리 설정하기
- 텍스트가 아닌 바깥쪽 Button 프레임을 선택합니다.
- 오른쪽 패널의 Fill에서 배경색을 #2563EB로 설정합니다.
- Corner radius를 8로 입력합니다.
- 텍스트가 흰색으로 표시되는지 확인합니다.
이제 텍스트 주위에 파란색 배경이 생겼다면 정상입니다. 버튼을 만들기 위해 사각형 레이어를 별도로 추가할 필요는 없습니다.
3.4. Padding으로 안쪽 여백 만들기
버튼이 너무 좁거나 글자가 테두리에 붙어 보인다면 Padding을 조절하면 됩니다. Padding은 프레임의 바깥 테두리와 내부 콘텐츠 사이의 거리입니다.
- Button 프레임을 선택한 상태에서 오른쪽의 Auto layout 설정을 찾습니다.
- Horizontal padding(좌우 여백)을 24px로 지정합니다.
- Vertical padding(상하 여백)을 12px로 지정합니다.
- 버튼 안쪽의 글자가 가운데에 배치되도록 정렬을 확인합니다.
여기서 좌우 24px은 양쪽을 합쳐 24px이 아니라, 왼쪽 24px과 오른쪽 24px을 각각 적용한다는 뜻입니다. 상하 역시 각각 12px씩 여백이 생깁니다.
3.5. Hug contents로 자동 크기 조절하기
이번 실습에서 가장 중요한 설정입니다. Hug contents는 자식 콘텐츠의 크기에 맞춰 부모 프레임이 필요한 만큼 커지거나 작아지도록 하는 옵션입니다.
- Button 프레임을 선택합니다.
- 오른쪽 패널의 크기 조절 설정에서 너비(Width)를 Hug contents로 변경합니다.
- 높이(Height)도 Hug contents로 설정합니다.
- 내부 텍스트가 고정 너비로 묶여 있다면 글자 길이에 자연스럽게 맞도록 텍스트 크기 조절 방식도 확인합니다.
쉽게 기억하려면 Hug contents = 안에 든 내용물을 꼭 맞게 감싸기라고 이해해 보세요. 버튼 프레임의 가로 길이를 숫자로 고정해 두는 Fixed width와는 다릅니다.
3.6. 글자를 바꿔 자동으로 늘어나는지 확인하기
- Button 프레임 안의 텍스트 레이어를 더블 클릭합니다.
- 시작하기를 지금 바로 무료로 시작하기로 바꿉니다.
- 텍스트가 길어진 만큼 파란색 프레임도 자동으로 넓어지는지 살펴봅니다.
- 다시 확인처럼 짧은 글자로 바꿔 버튼이 작아지는지도 확인합니다.
버튼의 가로 길이가 자연스럽게 달라지고 좌우 여백이 일정하게 유지된다면 성공입니다! 처음에는 평범한 버튼처럼 보여도, 문구가 수시로 바뀌는 실제 디자인 작업에서 차이가 크게 느껴집니다.
4. Hug contents, Fixed, Fill container 차이 이해하기
오토 레이아웃을 사용하다 보면 크기 옵션이 비슷해 보여 헷갈릴 수 있습니다. 입문 단계에서는 아래 세 가지만 구분하면 됩니다.
| 옵션 | 의미 | 주로 쓰는 경우 |
|---|---|---|
| Hug contents | 콘텐츠 크기에 맞춤 | 글자 길이에 따라 달라지는 버튼·태그 |
| Fixed | 지정한 크기로 고정 | 크기를 일정하게 유지하는 요소 |
| Fill container | 부모 컨테이너의 사용 가능한 공간을 채움 | 부모 너비에 맞춰 늘어나는 입력창·버튼 |
이번 목표는 글자 길이에 따라 버튼 자체가 커지게 하는 것이므로 Hug contents를 선택했습니다. 실제 웹이나 앱에서는 화면 너비에 맞춘 버튼이 필요할 수도 있는데, 그럴 때는 부모 프레임 구성과 함께 Fill container를 검토하면 됩니다.
5. 잘 안 될 때 확인할 사항
5.1. 글자가 길어져도 버튼 크기가 그대로예요
Button 프레임의 가로 크기가 Fixed로 설정되어 있지 않은지 확인해 보세요. Hug contents로 바꾸고 다시 텍스트를 수정해 보세요.
5.2. 글자가 버튼 안에서 두 줄로 바뀌어요
텍스트 레이어 자체의 너비가 고정되어 있으면 줄바꿈이 발생할 수 있습니다. 텍스트 레이어의 크기 조절 옵션을 확인하고, 한 줄 버튼이 목적이라면 내용에 맞는 너비를 사용해 보세요.
5.3. 배경색이 원하는 곳에 적용되지 않아요
왼쪽 레이어 패널에서 Button 프레임과 내부 텍스트를 구분해 선택했는지 확인하세요. 파란색 Fill은 프레임에, 흰색 글자색은 텍스트에 각각 지정해야 합니다.
5.4. Padding 숫자를 바꿔도 여백이 이상해요
부모 프레임에 여백을 설정했는지 확인하세요. 버튼 프레임의 정렬, 텍스트 자체의 크기와 줄 높이에 따라서도 시각적인 여백이 달라 보일 수 있습니다. 먼저 좌우 24px, 상하 12px으로 맞춘 뒤 조금씩 조정하면 이해하기 쉽습니다.
6. 응용 실습: 버튼 세 가지 만들어 보기
같은 방법을 이용하면 로그인 화면, 쇼핑몰, 랜딩 페이지 등에 자주 등장하는 버튼을 만들 수 있습니다. 아래 문구와 스타일을 참고해 각 버튼을 직접 제작해 보세요.
위 이미지는 HTML로 구현한 디자인 참고 예시입니다. 실습 시 Figma에서 직접 만들어 보세요.
추가 도전: 버튼 하나를 복제해 문구만 바꾸고, 두 버튼의 좌우 Padding이 정말 같은지 비교해 보세요. 이렇게 작은 차이를 경험해 보면 오토 레이아웃을 사용하는 이유가 더 명확해집니다.
7. 오늘 배운 내용 복습하기
이번 글에서 꼭 기억해야 할 내용은 단 세 가지입니다. Shift + A는 오토 레이아웃을 추가하는 단축키, Padding은 안쪽 여백, Hug contents는 내용에 맞춰 프레임 크기를 조절하는 옵션입니다.
- □ 텍스트를 선택하고
Shift + A를 눌렀나요? - □ 버튼 프레임에 배경색과 모서리 둥글기를 적용했나요?
- □ 좌우 24px, 상하 12px의 Padding을 지정했나요?
- □ 프레임 너비·높이를 Hug contents로 설정했나요?
- □ 글자를 길게 바꿔도 버튼이 자동으로 늘어나는지 확인했나요?
다섯 항목을 모두 확인했다면 오토 레이아웃의 가장 기본적인 사용법을 익힌 것입니다. 다음에는 버튼 안에 아이콘을 함께 넣거나, 여러 개의 버튼을 일정한 간격으로 정렬하는 방식으로 확장해 보세요.
8. 마무리: 피그마 초보자라면 버튼부터 시작해 보세요
오토 레이아웃은 처음부터 모든 옵션을 외우려 하면 복잡하게 느껴질 수 있습니다. 하지만 오늘처럼 작은 버튼 하나에 적용해 보면 원리가 쉽게 이해됩니다. 단순히 사각형과 텍스트를 겹쳐 놓는 방식에서 벗어나, 내용이 바뀌어도 자연스럽게 반응하는 디자인을 만들어 보는 것이 핵심입니다.
피그마를 처음 시작했다면 이번 예제를 직접 따라 한 다음, 평소 자주 사용하는 앱의 버튼을 하나 골라 똑같이 만들어 보세요. 반복하다 보면 오토 레이아웃이 왜 실무에서 자주 사용되는지 체감할 수 있을 거예요.
