피그마 자동 레이아웃이란? - 써보니 진짜 편하더라고요;)

 

피그마 자동 레이아웃이란?

 

안녕하세요, 디자인 노트입니다!

오늘은 피그마를 배우면서 처음 접한 자동 레이아웃(Auto Layout) 기능을 소개해드릴게요.

솔직히 처음엔 이게 뭔가 싶었는데, 써보고 나서 "왜 이걸 이제 알았지?" 싶었어요 ㅎㅎ!

 

 

 

✅ 자동 레이아웃이란?

자동 레이아웃은 요소들의 크기와 간격을 자동으로 맞춰주는 기능이에요.

기존 디자인을 할 때, 텍스트가 길어지면 텍스트 박스를 직접 늘리거나 크기를 맞춰줬었어요.

하지만 피그마 자동 레이아웃은 그걸 자동으로 해줘서 진짜 편해요! 은근 부가적인 작업 시간을 단축시켜 준답니다;)

버튼, 카드, 목록 같은 UI 요소 만들 때 특히 유용하고, 반응형 디자인 작업할 때도 엄청 도움이 돼요.

 

 

 

✅ 자동 레이아웃 적용하는 법

방법은 엄청 간단해요!

1. 사각형 하나 그리기 (R키)
2. 텍스트 넣기 (T키)
3. 둘 다 선택 (Shift 클릭)
4. Shift + A 누르기

 

설명해 드린 4번까지 진행하면 오른쪽 패널에 "오토레이아웃" 섹션이 생겨요.

단축키 없이 적용하는 방법도 있어요. 요소 선택 후 오른쪽 패널에서 "오토레이아웃 추가" 버튼을 클릭해도 똑같이 적용돼요!

 

 

 

 

오토레이아웃의 크기 부분을 누르게 되면

 

 

 

이렇게 뜨게 되는데, 보이시는 두 번째 '내용에 맞게 조절'을 눌러보세요!

 

 

텍스트 부분을 눌러서 글자를 더 써주면..! 이렇게 뒷부분 사각형이 자동으로 글자에 맞춰 늘어나게 됩니다!

 

 

✅ 직접 해봤어요!

저도 이번에 처음 써봤는데요, 사각형에 텍스트를 넣고 Shift+A를 눌렀더니 바로 오토레이아웃이 적용됐어요.

그다음에 텍스트를 "안녕하세요"에서 "안녕하세요, 디자인 노트입니다."로 길게 바꿨더니 박스 크기가 자동으로 늘어나더라고요!

수동으로 작업하던 모양 맞추기는 이제 끝..!! 피그마는 그냥 알아서 해줘서 진짜 신기하고 편했어요 😄

특히 버튼 텍스트가 바뀔 때 박스를 일일이 수정 안 해도 된다는 게 너무 좋더라고요.

실무에서 클라이언트 요청으로 텍스트가 자주 바뀌는 경우에 엄청 유용할 것 같아요!

 

 

✅ 오토레이아웃 패널 살펴보기

오토레이아웃이 적용되면 오른쪽에 이런 옵션들이 생겨요:

흐름 방향

• 가로 방향: 요소들이 옆으로 나열돼요
• 세로 방향: 요소들이 아래로 나열돼요
• 둘 다 가능한 방향도 있어요

크기 조정

• 허그(Hug): 내용에 맞게 자동으로 크기가 조절돼요. 텍스트가 길어지면 박스도 같이 커져요!
• 고정(Fixed): 크기를 고정해놓고 싶을 때 써요
• 채우기(Fill): 부모 요소에 맞게 꽉 채워줘요

패딩 텍스트와 박스 사이의 여백이에요. 상하좌우 각각 설정할 수 있어요.

간격 요소들 사이의 간격이에요. 숫자 하나만 바꾸면 모든 간격이 일정하게 맞춰져요!

 

 

✅ 자동 레이아웃이 특히 유용한 상황

• 버튼 만들 때: 텍스트 길이에 따라 버튼 크기가 자동으로 맞춰져요
• 카드 목록 만들 때: 카드 추가하면 자동으로 간격 맞춰줘요
• 내비게이션 바 만들 때: 메뉴 항목 추가/삭제해도 자동 정렬돼요
• 반응형 디자인 작업할 때: 화면 크기 바뀌어도 레이아웃이 자동으로 맞춰져요

 

처음엔 낯설었는데 한 번 써보고 나서 정말 편해서 반했다는 점..! 앞으로 피그마로 작업할 때 자동 레이아웃은 정말 자주 쓸 것 같아요.

아직 배울 게 많지만, 이런 기능들 하나씩 익혀가는 게 재밌더라고요 😄 앞으로도 유용한 기능 발견하면 계속 기록해 볼게요 💪

 

오늘도 글 읽어주셔서 감사합니다!