피그마 자동 레이아웃이란? - 써보니 진짜 편하더라고요;)
피그마 자동 레이아웃이란?
안녕하세요, 디자인 노트입니다!
오늘은 피그마를 배우면서 처음 접한 자동 레이아웃(Auto Layout) 기능을 소개해드릴게요.
솔직히 처음엔 이게 뭔가 싶었는데, 써보고 나서 "왜 이걸 이제 알았지?" 싶었어요 ㅎㅎ!
✅ 자동 레이아웃이란?
자동 레이아웃은 요소들의 크기와 간격을 자동으로 맞춰주는 기능이에요.
기존 디자인을 할 때, 텍스트가 길어지면 텍스트 박스를 직접 늘리거나 크기를 맞춰줬었어요.
하지만 피그마 자동 레이아웃은 그걸 자동으로 해줘서 진짜 편해요! 은근 부가적인 작업 시간을 단축시켜 준답니다;)
버튼, 카드, 목록 같은 UI 요소 만들 때 특히 유용하고, 반응형 디자인 작업할 때도 엄청 도움이 돼요.
✅ 자동 레이아웃 적용하는 법
방법은 엄청 간단해요!
- 사각형 하나 그리기 (R키)
- 텍스트 넣기 (T키)
- 둘 다 선택 (Shift 클릭)
- Shift + A 누르기
설명해 드린 4번까지 진행하면 오른쪽 패널에 "오토레이아웃" 섹션이 생겨요.
단축키 없이 적용하는 방법도 있어요. 요소 선택 후 오른쪽 패널에서 "오토레이아웃 추가" 버튼을 클릭해도 똑같이 적용돼요!
오토레이아웃의 크기 부분을 누르게 되면
이렇게 뜨게 되는데, 보이시는 두 번째 '내용에 맞게 조절'을 눌러보세요!
텍스트 부분을 눌러서 글자를 더 써주면..! 이렇게 뒷부분 사각형이 자동으로 글자에 맞춰 늘어나게 됩니다!
✅ 직접 해봤어요!
저도 이번에 처음 써봤는데요, 사각형에 텍스트를 넣고 Shift+A를 눌렀더니 바로 오토레이아웃이 적용됐어요.
그다음에 텍스트를 "안녕하세요"에서 "안녕하세요, 디자인 노트입니다."로 길게 바꿨더니 박스 크기가 자동으로 늘어나더라고요!
수동으로 작업하던 모양 맞추기는 이제 끝..!! 피그마는 그냥 알아서 해줘서 진짜 신기하고 편했어요 😄
특히 버튼 텍스트가 바뀔 때 박스를 일일이 수정 안 해도 된다는 게 너무 좋더라고요.
실무에서 클라이언트 요청으로 텍스트가 자주 바뀌는 경우에 엄청 유용할 것 같아요!
✅ 오토레이아웃 패널 살펴보기
오토레이아웃이 적용되면 오른쪽에 이런 옵션들이 생겨요:
흐름 방향
- 가로 방향: 요소들이 옆으로 나열돼요
- 세로 방향: 요소들이 아래로 나열돼요
- 둘 다 가능한 방향도 있어요
크기 조정
- 허그(Hug): 내용에 맞게 자동으로 크기가 조절돼요. 텍스트가 길어지면 박스도 같이 커져요!
- 고정(Fixed): 크기를 고정해놓고 싶을 때 써요
- 채우기(Fill): 부모 요소에 맞게 꽉 채워줘요
패딩 텍스트와 박스 사이의 여백이에요. 상하좌우 각각 설정할 수 있어요.
간격 요소들 사이의 간격이에요. 숫자 하나만 바꾸면 모든 간격이 일정하게 맞춰져요!
✅ 자동 레이아웃이 특히 유용한 상황
- 버튼 만들 때: 텍스트 길이에 따라 버튼 크기가 자동으로 맞춰져요
- 카드 목록 만들 때: 카드 추가하면 자동으로 간격 맞춰줘요
- 내비게이션 바 만들 때: 메뉴 항목 추가/삭제해도 자동 정렬돼요
- 반응형 디자인 작업할 때: 화면 크기 바뀌어도 레이아웃이 자동으로 맞춰져요
처음엔 낯설었는데 한 번 써보고 나서 정말 편해서 반했다는 점..! 앞으로 피그마로 작업할 때 자동 레이아웃은 정말 자주 쓸 것 같아요.
아직 배울 게 많지만, 이런 기능들 하나씩 익혀가는 게 재밌더라고요 😄 앞으로도 유용한 기능 발견하면 계속 기록해 볼게요 💪
오늘도 글 읽어주셔서 감사합니다!