[Day 12] 반복 작업을 줄여주는 피그마 핵심 기능, Auto Layout

안녕하세요 여러분, 송2입니다.

 

얼마 전 책장을 정리하면서 오래된 책이나 더 이상 읽지 않는 책들ㅇ르 알라딘에 판매하고, 새 책 몇권을 구매했습니다

 

새 책은 사는 것만으로도 괜히 기분이 몽글몽글해지는 것 같은데, 저만 그런가요?

 

새로 산 책을 책장에 꽂으려고 보니 기존에 있던 책들을 하나씩 옆으로 밀어 자리를 만들어야 했습니다. 책이 몇 권 안 될 때는 힘들지 않앗는데, 책이 많아질수록 생각보다 번거로운 작업이었습니다. 

ai로 만든 가상의 이미지 입니다

이런 상상을 했습니다. "만약 새책을 꽃기만 해도 다른 책들이 알아서 정리 되면 얼마나 편할까?

 

피그마의 오토레이아웃을 배우면서 제가 상상으로만 했던 기능을 비슷한 역할을 하는것 같다고 느꼈습니다. 새로운 요소를 추가하거나 크기를 변경하면 다른 요소들이 규칙에 맞게 자동으로 정렬되는 모습이, 마치 제가 상상했던 '자동으로 정리되는 책장'과 비슷하게 느껴졌습니다. 

 

처음에는 기존에 사용하던 디자인 툴에는 없는기능이라 조금 많이 어지러웠습니다. 하지만 오토레이아웃이 제일 쉽다는걸 한참은 지나서야 알게되었답니다. 

 

오늘은 피그마의 핵심 기능인 오토 레이아웃에 대해 포스팅해보겠습니다. 

---

■ 1. Auto Layout이란?

1.1 오토 레이아웃 들어가기 전 알아야하는 개념!

부모와 자식의 가족 관계

피그마를 하다 보면 부모와 자식이라는 말을 정말 많이 듣게 될 것입니다. 오토 레이아웃의 모든 움직임은 이 두 개념을 이해해야합니다.

• 부모(Parent) : 바깥에서 감싸고 있는 '큰 상자' (프레임)
• 자식(Child) : 그 상자 안에 쏙 들어가 있는 '내용물' (글자, 아이콘, 이미지 등)

 

예사 : 스마트폰의 검색창

• 테두리가 있는 검색창 틀 = 부모(상자)
• 그 안에 들어가 있는 돋보기 아이콘과 '검색어를 입력하세요'라는 글자 = 자식(물건)

 

1.2 오토 레이아웃의 개념

• 요소를 하나씩 직접 배치하는 것이 아니라, 정해진 규칙에 따라 자동으로 정렬하고 관리하는 기능
• 텍스트가 길어지거나 새로운 요소가 추가되어도 다른 요소들이 자동으로 위치를 조정하기 때문에 레이아웃이 쉽게 무너지지 않음

 

1.3 왜 사용할까? : 반복되는 작업을 더 효율적으로

오토 레이아웃 이전의 방식

에서는 요소를 하나 추가하거나 크기를 변경할 때마다 주변 요소들의 위치를 직접 수정해야 했음

 

오토레이아웃 사용 이후의 방식

오토 레이아웃을  사용하면 콘텐츠가 변경되어도 레이아웃이 자동으로 유지→작업 속도와 유지보수 효육이 크게 향상

 

장점

• 반복 작업 감소
• 요소 자동 정렬
• 반응형 UI 제작
• 유지보수 편의성

---

■ 2. 오토 레이아웃의 핵심 기능

2.1 한 번에 적용하는 단축키 : 빠른 작업의 첫걸음

오토 레이아웃 생성 

• 단축키 : Shift + A ( Mac, Windows 동일)

오토 레이아웃 해제

• Mac : Option + Shift + A, Windows : Alt + Shift + A

여백(Padding) 설정

• Mac : Command + Option + 화살표, Windows : Ctrl + Alt + 화살표

간격(Gap) 조절

• Mac :  Option + 화살표, Windows : Alt + 화살표

 

2.2 정렬 방향(Flow) : 가로와 세로의 흐름 정하기

• Flow는 요소를 가로 또는 세로 방향으로 배치하는 기능
• 버튼을 나란히 배치할지, 카드처럼 아래로 쌓을지를 결정하는 역할

2.3 리사이징(Fixed · Hug · Fill) : 콘텐츠 크기에 맞게 유연하게

오토 레이아웃을 마스터 하기 위해 가장 주용한 개념입니다! 처음에 오토레이아웃 개념을 설명하기 전 부모와 자식관계를 설명했는데 리사이징은 부모와 자식간의 3가지 규칙이라고 생각하시면 됩니다.

 

쉽게 설명하면 "상자가 내용물에 맞춰질 것인가? 내용물이 상자에 맞춰질 것인가?의 차이입니다. 가로와 세로를 각각 다르게 지정할 수 있습니다.

 

Fixed (고정 크기) : 나는 절대 안 움직여

• 내용물이 길어지든 말든, 상자의 크기를 내가 지정한 수치로 묶어두는 것
• 인스타그램의 프로필 카드나, 항상 똑같은 크기여야하는 정사각형 아이콘 버튼을 만들 때 사용

 

Hug Contents (꽉 안아주기) : 엄마, 저 키컸어요!

• 자식(내용물)의 크기에 맞춰서 부모(상자)가 자동으로 늘어났다 줄어들었다 하는 것
• '확인' 버튼을 만들었는데 글자를 '지금 바로 결제하고 50% 할인받기'로 길게 바꾸면, 글자(자식)가 길어짐에 따라 버튼 상자(부모)가 양옆으로 알아서 늘어남

 

Fill Cntaine (컨테이너 채우기) : 우와, 새집 엄청 넓다!

• 부모(상자)의 크기가 변하면, 자식(내용물)이 그 크기에 맞춰 가득 늘어남
• 스마트폰 화면(부모) 너비가 가로로 넓어지면, 그 안에 들어있는 배너나 검색창(자식)이 화면 양끝까지 쫙 늘어나며 꽉 채우는 반응형 디자인의 핵심

 

2.4 Min / Max 설정 : 크기의 한계 정하기

Min/Max가 필요한 이유는 Fill Container는 반응형 디자인을 할 때 아주 편리한 기능이지만 화면이 스마트폰→태블릿→PC모니터 처럼 계속해서 넓어지면 상자나 글자도 끝도 없이 늘어나고, 반대로 화면이 너무 작아지면 글자가 찌그러져서 아예 안보이게 됩니다. 

 

바로 이때 "화면이 커지거나 작아지는 건 좋은데, 딱 "여기까지만" 움직여!"라고 하는게 바로 Min(최소값)과 Max(최대값).

 

Min Width / Height(최소 너비 / 최소 높이)

• 설정한 크기 밑으로는 절대 줄어들지 않게하는 기준
• 모바일 기기 대응 버튼 : 스마트폰 화면이 급격히 작아져도 터치 영역을 보장하기 위한 최소 버튼 너비 유지(Min W : 80px)
• 리스트 형태의 카드 뉴스의 썸네일 : 텍스트 양이 극단적으로 줄어들어도 이미지가 형태를 유지하도록 설정하는 최소 이미지 높이 유지(Min H : 120px)

Max Width / Height(최대 너비 / 최대 높이)

• 설정한 크기 위로는 절대 늘어나지 않게하는 기준
• 반응형 웹사이트의 본문 콘텐츠 영역 : 32인치 이상 대화면 모니터에서 글줄이 지나치게 길어져 가독성이 떨어지는 것을 막기 위한 최대 본문 너비 제한(Max W : 1200px)
• 모바일 앱 내 배너 이미지 : 태블릿이나 폴더블폰처럼 가로 픽셀이 무한정 늘어날 때 이미지 깨짐을 방지하는 최대 배너 너비 제한(Mzx W : 720px)

 

2.5 Gap과 Auto Gap : 요소 사이 간격 관리하기

오토 레이아웃에서 자식들(내부 요소들)끼리의 여백을 설정하는 것에는 갭(Gap)과 오토 갭(Auto Gap)이 있습니다. 쉽게 생각하면 고정된 자석과 움직이는 자석입니다. 

 

갭(Gap) : 요소 사이의 거리를 숫자로 딱 박아두는 고정 자석

• 자식과 자식 사이의 간격(Spacing)을 간격 입력창에 숫자로 직접 입력하는 방식
• 부모 상자의 크기가 늘어나거나 줄어들어도, 자식들 사이의 간격은 절대로 변하지 않고 유지
• 아이콘+텍스트 버튼 : 아이콘과 글자 사이의 간격 고정
• 블로그 포스트 리스트 : 제목, 본문, 날짜 텍스트 사이의 세로 간격 고정

 

오토 갭(Auto Gap) : 부모 상자 크기에 맞춰 양 끝으로 벌어지는 움직이는 자석

• 간격 입력창에 숫자가 아닌 Auto로 설정하는 방식
• 자식들이 부모 상자의 왼쪽 끝과 오른쪽 끝으로 강제로 밀어내고, 남는 가운데 공간을 알아서 여백으로 채움
• 웹사이트 상단 내비게이션 바(GNB) : 외쪽 긑의 '로고'와 오른쪼 끝의 '로그인 버튼'을 양옆으로 멀리 찢어놓을 때 사용
• 스마트폰 상단 상태바 : 왼쪽 끝의 '현재 시간'과 오른쪽 끝의 '배터리/와이파이 아이콘/배치

 

2.6 Alignment : 원하는 위치로 정확하게 정렬

부모안에 자식요소를 원하는 위치로 손쉽게 정렬하는 기능

예시

① 정중앙 정렬

• 텍스트형 버튼 : 글자가 버튼 상자의 가로/세로 정가운데에 위치해야 하는 정사이즈 버튼 디자인
• 원형 아이콘 버튼 : 원형 배경 상자 한가운데에 화살표나 돋보기 아이콘을 배치하는 내비게이션 버튼

② 좌측 중앙 정렬

• 리스트형 메뉴 : 왼쪽 끝에는 글자(메뉴명)가 정렬되고, 위아래로는 정가운데에 배치되어야 하는 설정 창 목록
• 텍스트 입력창 : 사용자가 글자를 입력할 때 왼쪽 벽면에서 시작하되, 상하로는 가운데에 오게 만드는 인풋 박스

③ 정중앙 정렬

• 테이블 데이터 및 가격 표시 : 영수증이나 표디자인에서 숫자의 자릿수를 맞추기 위해 오른쪽 변면으로 밀착시크는 금액 표시창

 

오토 갭 상태일 때의 특수 정렬

• 가로배열 + Auto Gap : 좌/우 이동 불가능, 상/중/하 수직 정렬만 결정 가능
• 세로 배열 + Auto Gap : 상/하 이동은 불가능, 좌/중/우 수평 정렬만 결정 가능

 

2.7 Ignore Auto Layout : 예외적으로 자유롭게 배치하기

• 오토 레이아웃 안에서도 특저 요소만 자유롭게 배치하고 싶을 때 사용하는 기능

Absolute Position (절대 위치 지정)의 개념

• 오토 레이아웃의 자동 정렬 흐름에서 완전히 제외시키는 자유 배치 치트키
• 오토 레이아웃 부모(상자) 안에 자식(물건)을 넣으면 무조건 가로든 세로든 차례대로 줄을 서야 함. 하지만 이 기능을 켜면 줄 서기 규칙을 무시하고 내가 원하는 좌표에 유령처럼 얹어놓을 수 있음

실제 사용 예시

① 알림 배지 (Notification Badge)

쿠팡

• 쇼핑몰 장바구니 아이콘: 장바구니 아이콘 우측 상단에 겹쳐서 얹어놓는 빨간색 숫자 배지 (N, 1)

디스코드

• 프로필 사진의 온라인 상태 표시: 동그란 프로필 이미지 우측 하단에 걸쳐 있는 초록색 활성화 점

② 닫기 및 삭제 버튼 (Close Button)

 

66걸즈

• 팝업창 및 카드 뉴스의 대각선 닫기 버튼: 부모 상자의 오른쪽 맨 위 구석에 여백 규칙을 무시하고 고정시켜야 하는 X 버튼

mgbb

• 이미지 첨부 파일의 삭제 버튼: 업로드된 사각형 이미지 오른쪽 위에 반쯤 걸쳐 있는 휴지통이나 마이너스(-) 버튼

③ 배경 그래픽 및 장식 요소 (Background Decor)

다이소

• 이벤트 배너의 장식용 일러스트: 글자 레이아웃 정렬에는 아무런 영향을 주지 않으면서, 배경 구석에 은은하게 깔아두는 반짝이 아이콘이나 물방울 그래픽 디자인

 

2.8 Padding과 Gap의 차이 : 비슷하지만 다른 두 가지 여백

• 오토 레이아웃의 레이아웃을 완성하는 양대 산맥

패딩(Padding)

• 부모 상자의 테두리(경계션)와 내부 자식 요소 사이의 여백.
• 패딩을 늘리면 내부 내용물의 크기는 그대로 유지되면서, 외곽에 있는 부모 컨테이너의 전체 덩치가 커짐

갭(Gap)

• 내부 자식 요소들 사이의 여백.
• 부모 상자의 크기가 늘어나거나 줄어들어도, 자식들 사이의 간격은 절대로 변하지 않고 유지(오토갭은 다름)

오랜만에 다시 돌아왔습니다... 증말로....빨리빨리 기록을 남겨야하는데 지금 진짜 눈코뜰새가 없이 바빠요.....매일매일 수업-> 실습 -> 회의 이 생활을 반복하고 있습니다.

 

그래도 열심히 기록을 남기기위해 짬나는대로 조금씩 기록을 작성하고 있어요. 오토레이아웃파트는 한번 잘 익혀두면 정말 정말 편리하답니다!!!! 개념을 제대로 알고만있어도 어디에 어떻게 넣어야하는지 많이 만지다보면 감이옵니다. 

 

사실 이부분은 진짜 실습이 중요한 파트기때문에 다음 컨텐츠는 아마도 실습내용이지 않을까 싶습니다. 제가 지금 바쁜 이유는 어느 정도 정리되면 공유드릴게요. 아직은 시크릿....!

 

오토레이아웃은 다른 툴을 다뤄보셨던 분들은 처음보는 생소한 기능일수 있습니다. 그렇지만 익숙해지면 정말 정말 편한 기능이기 때문에 여러분께서도 피그마 너무 어렵게 느끼지 마시고 도전해보셨으면 좋겠습니다,. 

 

유튜브에 초보자를 대상으로한 무료 영상들도 정말정말 많아요. 피그마가 업데이트가 빨라서 내용이 업데이트 전 버전으로 설명하는 영상들도 많지만  뭐든 보고 익힌다면 도움이 됩니다!!! 반듯이!!!!! 

 

다같이 오늘도 고생하셨습니다~~!!!!! 다음에 만나요