오토 레이아웃(ver.116)
신입에게 가르쳐주는 피그마
2023년 6월 22일 오토 레이아웃에서 드디어 줄바꿈이 됩니다.
2022년 5월 11일 오토 레이아웃의 상당 부분이 업데이트 되었습니다.
오토 레이아웃은
왜 쓰나요?
2023년 피그마의 기능이 많이 업데이트 되면서, 세밀하게 계획하여 디자인 과정이 강화되었습니다. 오토 레이아웃은 정교한 UI 디자인을 할 때 사용됩니다.
1. 텍스트와 아이콘이 포함된 버튼을 쉽게 만들 수 있습니다.
2. 목록이나 표를 쉽게 배치하고, 정렬할 수 있습니다.
3. 컴포넌트를 배치하고 제거하는 과정이 편리하고, 전체 디자인을 만들 때, 폭과 넓이를 관리하기 좋습니다.
오토 레이아웃에 Wrap는 줄바꿈의 의미로 많은 아이템을 좀 더 개발 형식에 맞게 배치하고, 복잡한 디자인에서 좀더 편리하게 오브젝트와 콘텐츠를 배치할 수 있습니다.
전체 페이지 혹은 화면을 만드는 UI 디자인의 과정에서 레이아웃을 구성하고 조정하는 일에 많은 시간을 소모합니다. 오토 레이아웃을 사용하면 이 과정을 효율적으로 줄일 수 있습니다.
오랫동안 사용된 포토샵은 디자인의 구성요소를 계속 분해해서 수치를 입력하여 디자인할 수 있는 패널을 많이 만들었습니다. 하지만 디자이너의 생산성에 대해서는 관심을 기울이지 않았습니다. UX 시대가 오면서 디자이너의 편의성과 생산성을 개선한 스케치와 피그마가 급성장한 것은 어떻게 보면 당연한 일입니다.
피그마의 오토 레이아웃은 레이어 순서가 캔버스의 콘텐츠 배치와 연관됩니다. 그래서 보기 좋게 레이어를 관리하는 것 이상의 의미를 가집니다.
오토 레이아웃은 제품의 기능에 따라 영역을 구분하고, 반복되는 출력 영역과 메뉴 영역을 설계할 수 있습니다. 그래서 피그마를 기획자가 디자이너가 함께 사용하거나, UI와 UX를 좀 더 긴밀하게 구현할 수 있는 툴이 됩니다. 컴포넌트의 베리언트(variant), 앞으로 나올 인터렉티브 컴포넌트(interactive component)와 함께 활용하면, 구조적이면서 동적인 디자인이 가능할 것으로 보입니다.
오토 레이아웃
오토 레이아웃 기능의 결과를 먼저 알아봅시다. 피그마 글은 프레임, 프레임 안의 콘텐츠 배치, 오토 레이아웃 순서로 작성되었습니다. 그럼 오토 레이아웃을 사용한 결과부터 보겠습니다.
전체 프레임에도 오토 레이아웃이 적용되어 있습니다.예제의 이미지는 샘플 앱으로 앱의 콘텐츠 순서와 레이어 순서가 서로 연관되어 있습니다. 레이어 패널에서 맨 아래 있는 레이어가 프레임의 맨 위에 배치됩니다. 프레임이 상당히 많기 때문에 쉽게 관리하기 위해서 Header, Body, Footer로 구분하였습니다. Footer가 레이어 패널의 맨 위에 있지만, 캔버스에 있는 프레임의 맨 아래에 표시됩니다.
Body에 있는 프레임 중에서 옵션과 색상 선택 프레임을 제거해 보겠습니다. 오토 레이아웃이 적용되어 있어서, 없어진 프레임의 높이만큼 전체 프레임의 높이가 조정됩니다. 프레임과 프레임 사이의 간격도 미리 정해 놓은 수치만큼 조정됩니다.
오토 레이아웃에서는 프레임을 삭제하기만 하면 되지만, 옛날 방식으로 하면, 차례대로 레이어의 높이값과 위치를 수정해야 합니다.
아직 컴포넌트를 사용하진 않았지만, 프레임을 다시 추가하고 순서를 바꾸는 경우에도 오토 레이아웃이 적용되어 있다면, 레이어 패널에서 순서에 맞게 추가만 해주면 됩니다.
사진 크기를 크게 하고, 동그라미 크게 했습니다.단순히 레이어의 순서만 바꾸는 것이 콘텐츠의 크기 변경에 따라 높이도 자동으로 조정됩니다.
컨테이너와
콘텐츠
프레임이나 그룹에 오토 레이아웃을 적용하면, 오토 레이아웃이 적용된 프레임으로 변경됩니다.(그룹은 프레임으로 변경됩니다.) 오토 레이아웃이 설정되면, Auto layout과 Resizing을 할 수 있는 수치가 추가로 표시됩니다.
컨테이너와 콘텐츠란 단어를 많이 사용할 겁니다. 컨테이너는 콘텐츠를 담는 그릇입니다. 콘텐츠는 도형, 글자, 이미지 등입니다. 컨테이너 안에는 다른 컨테이너도 넣을 수 있습니다. 아이템, 오브젝트, 콘텐츠가 컨테이너 안에 들어갑니다. 아이템은 오토 레이아웃에 포함되는 하위 항목으로 사용됩니다. 보통 다각형, 벡터 드로잉, 그룹을 오브젝트라고 하고, 콘텐츠는 이미지와 텍스트일 때, 사용됩니다.
(엄밀하게 구분할 필요는 없지만, 피그마 웹사이트에서도 기능에 따라 다르게 표현되니 참고하시면 좋겠습니다.)
Config 2022 이후, Clip content의 여부가 큰 영향을 끼칩니다. 2023년에 줄바꿈이 추가되면서 Clip을 하는 경우와 안되는 경우를 조금 더 신경써야 합니다.
2번에서 3번째 아이콘을 선택하면 줄 바꿈이 됩니다.2번 항목에서 새로 생긴 줄바꿈을 사용하려면 1번에서 높이와 폭, 둘 중 하나는 FIX로 고정시켜야 합니다. 그렇게 하면, 고정된 값을 넘어서는 콘텐츠는 줄바꿈이 되어 아래로 밀려납니다.
HTML의 Flex와 비슷한 규칙으로 줄바꿈이 이루어집니다.
줄바꿈이 생기면서 드디어 1차원 배치를 넘어서 2차원 배치를 할 수 있게 되었습니다. 1년 좀 넘게 걸렸네요.
수직과 수평에서 아이템을 배치하는 것과 줄바꿈이 되는 것은 미리보기 아이콘도 다르고, 조정해야 하는 수치도 많아집니다.
2023년의 변화는 줄바꿈과 함께 '배리어블' 기능도 같이 생기면서 Gap에도 Spacing이 적용되게 되었습니다. 배리어블은 다른 글에서 다루기로 하고 일단, 줄바꿈(Wrap)를 사용하려면, 최대값과 최소값 혹은 정해진 크기 안에서 아이템이 배치되는 것을 보실 수 있습니다.
오른쪽에서는 주황색으로 표시된 부분의 수치를 같이 조정하시면 됩니다.
오토 레이아웃의 Auto layout 패널에서 설정할 수 있는 것은 아이템이 정렬되는 방향, 여백(Padding), 아이템 간의 간격이 됩니다. 아이템은 레이어 패널의 방향에 따라 순서가 결정됩니다. 가로의 경우는 왼쪽에서 오른쪽으로, 세로의 경우는 위에서 아래로 됩니다.
2022년 5월 11일, Config 2022와 함께 오토 레이아웃의 기능이 디테일하게 업그레이드 되었습니다. 프레임의 콘테이너 역할이 크게 확장되었습니다. 오토 레이아웃이 적용된 프레임의 Padding을 설정할 수 있습니다.
오토 레이아웃에 Advanced layout을 설정할 수 있는데, 설정을 하면, 바로 프리뷰에서 적용 상태를 확인해 볼 수 있습니다. 2023년 6월 업데이트에서 Spacing Mode는 사라졌습니다. 그래서 3개의 옵션만 선택할 수 있습니다.
이전에는 Spacing Mode에서 Between을 선택할 수 있었는데, 오토 레이아웃이 업데이트 되면서, Gap 입력 창에 숫자 말고, Auto를 쓰시면, Between을 효과를 보실 수 있습니다.
이 글을 쓸 때는 Auto를 타이핑해야 했지만, 이게 불편했는지, Auto를 선택할 수 있게 업데이트 되었네요.
Spacing Mode는 사라져서 3개만 남았습니다.Align은 전체 여백이 아닌 상하좌우의 여백을 따로 적용할 수 있습니다. 오토 레이아웃을 적용할 때는 폭이나 높이가 비슷한 콘텐츠를 만드는 것이 좋습니다. 각 아이템마다 개별 여백이 적용되지 않습니다. 컨테이너 안의 아이템에는 같은 여백이 적용 됩니다.
여백을 수치로 조정할 수 있기 때문에, 가급적 의미 있는 여백 혹은 그리드를 사용하는 것이 좋습니다.
피그마는 프레임 안에 프레임을 거의 무한정 넣을 수 있기 때문에, 위와 같은 상황이 생깁니다. 오토 레이아웃을 오토 레이아웃에 넣거나, 프레임, 그룹을 넣을 수 있습니다. 맨 오른쪽의 경우는 프레임 안에 오토 레이아웃을 넣는 경우인데, 프레임의 선택지 오토 레이아웃 선택지가 추가됩니다.
하지만 프레임 안에 오토 레이아웃을 넣는 경우는 Left and right와 Scale을 사용할 수 없습니다.
(상황에 따라 메뉴가 변하는 것이 좀 어려운 부분입니다.)
그림은 복잡하지만, 간단합니다.
Hug는 콘텐츠에 맞춰서 컨테이너 크기가 변경됩니다.
Fill은 컨테이너에 맞춰서 콘텐츠 크기가 변경됩니다.
Fill과 Hug
피그마를 계속 사용하다가 보면, 프레임의 설정과 오토 레이아웃의 크기 조정이 약간 다릅니다.
예시 이미지에서 보는 것처럼, 프레임의 설정은 콘텐츠의 간격과 크기를 변하게 합니다.
Fixed width를 사용한 3번째 예제에서 흰 여백을 채우려면, Fill width를 사용하면 됩니다.
컨테이너의 크기를 고정하고, 콘텐츠의 변화를 보면 의도에 맞게 레이아웃을 적용하기 위해서는 컨테이너 안에 컨테이너를 넣어야 합니다.
복제의 경우는 '커맨드+D'를 누르세요.Fixed와 Hug에 따라 컨테이너와 콘텐츠를 크기 변경을 확인하실 수 있습니다.
오토 레이아웃은 HTML의 Flex Box와 비슷한 방식으로 적용됩니다.
그래서 잘 활용하면, 대시보드나 열이나 행 단위의 테이블을 만들 수도 있습니다.
이와 유사한 방식으로 예제를 진행하시려면, Clip Content 체크를 확인하셔야 합니다.
동적인 스크린을
디자인 하기
디자인에서 중요한 것 중 하나가 결과물에 가까운 결과물입니다. 제품의 시안이나 비주얼 디자인 과정은 프로젝트에 참여한 팀원들에게 방향성과 목표를 줍니다. 또 사용자들이 제품을 접했을 때, 반응을 미리 경험하고 보완할 수 있습니다.
예전엔 디자인이 가질 수 있는 다양한 가능성을 위해서 여러 가지 파일을 만들어야 했지만, 스케치나 피그마에서는 스크린을 빠르게 수정하고 고칠 수 있습니다.
하지만 한계도 있습니다.
2021년 6월 29일을 기준으로 아직 오토 레이아웃은 완전히 자동화되지 않았고, HTML처럼 겹치거나, 뎁스를 가질 수 없습니다. 한 번에 하나만 추가됩니다.
컴포넌트로 만들 경우, 인스턴스에서 수정할 수 있는 범위도 한정되어 있습니다.
피그마의 플렉스 박스에 대해서는 아래의 미디엄 아티클을 보시면 좋습니다.
HTML의 CSS3에 대해서는 다음 글을 참조해보시면 좋습니다.
