#5 피그마의 스마트한 기능
피그마 설명서 5부, 새로운 기능 Auto Layout과 Varients
피그마의 이번 겨울 업데이트는 가장 크게 두 가지의 큰 변화가 있었습니다. 하나는 'Variants'라는 옵션과 기존에 있었던 Auto-Layout 기능의 업그레이드 이두가지가 가장 큰 변화였습니다. 저는 이번 업데이트를 통해 피그마가 스케치를 매우 빠르게 추격하고 있구나라는 생각을 하였습니다.
Variants는 컴포넌트를 더욱 간편하게 활용할 수 있는 새로운 형식의 옵션이고 Auto Layout은 버튼 및 카드 형식의 콘텐츠를 더욱 간편하게 디자인할 수 있게 해주는 옵션입니다. 오늘은 이 두 가지의 업데이트들에 대해서 자세히 이야기해보려 합니다.
Auto-Layout
일단 기존에도 존재하였으나 뭔가 2%로 부족하였던 Auto-Layout이 업데이트되었는데 기존의 방식과 바뀐 점을 말하는 것보다는 어떤 기능이고 어떻게 활용하는지를 설명해드리도록 하겠습니다. 이 기능은 주로 버튼이나 카드 형식의 콘텐츠에 활용하면 매우 편리합니다.
자유롭게 크기 및 안의 콘텐츠에 맞게 여백을 조절할 수 있는 이유는 '패딩의 공백 제어', '자동 크기 조절', '프레임 내 개체 정렬' 이 세 가지의 큰 특징이 있기 때문입니다. 이 세 가지의 특징들로 어떻게 제어가 되는지 설명드리겠습니다.
- 패딩의 공백 제어
아래의 이미지와 같이 오토 레이아웃으로 감싼 프레임에 콘텐츠를 추가하면 자동으로 크기가 조절되고 그것을 지우거나 숨겨도 알아서 지정된 패딩 값에 따라서 자동으로 변경되어서 공통된 여백 값으로 일일이 콘텐츠들을 수정하지 않아도 되는 기능입니다.
위의 예시처럼 좌우 사이즈는 고정이 되었고 안에 콘텐츠들이 추가되면서 높이를 수정하고 싶다면 큰 틀은 'Hug contents'로 지정하고 Text-box의 높이는 안에 콘텐츠에 따라 변경되야하므로 'Hug contents'로 지정하고 좌우 크기는 고정이므로 'Fixed width'로 지정하고 이미지는 모두 'Fixed width&hight'로 설정하면 추가되는 텍스트의 길이나 추가되는 콘텐츠에 따라 높이값을 자동적으로 리사이징 할 수 있습니다.
- 자동 크기 조절
자동으로 크기를 조절하는데 중요한 포인트는 'Fill container'와 Hug content' 속성을 이해하는 것입니다. 'Fill container'는 감싸고 있는 컨테이너의 속성에 따라서 크기를 자동 조절하는 것이고 'Hug content'는 안에 있는 콘텐츠에 따라서 자동으로 크기가 조절되는 것입니다.
콘텐츠를 변경하고 싶을 때는 내가 변경하고자 하는 방향에 따라 옵션을 다르게 설정해줘야 합니다. 리사이징이 고도화된 만큼 안에 어떻게 변형할 건지에 따라서 옵션 값을 잘 지정해야 합니다.
위의 예시처럼 콘텐츠들에 따라 변경되는 것이 아닌 사이즈에 따라서 크기가 자동으로 조절되게 조절하고 싶다면 큰 틀은 Fixed로 지정합니다. 카드 안의 Text-box의 높이는 고정으로 한다면 'Fixed height'로 지정하고 좌우 크기는 카드의 크기에 따라서 늘어나야 하므로 'Fill container'로 지정합니다. 이미지는 모두 'Fill container'로 지정하게 되면 내가 지정한 비율로 원하는 크기에 맞춰 리사이징 할 수 있습니다.
- 프레임 내 개체 정렬
기존에는 각 개체들을 정렬하려면 프레임으로 감싸야했지만 이제는 바로 개체들을 정렬할 수 있는 옵션이 생겼습니다. 개체들마다 정렬해야 하는 곳을 다르게 지정하면서 오토 레이아웃을 지정할 수 있는 게 업데이트된 것입니다.
위의 예시처럼 뱃지들이 좌측 정렬로 하기 위해선 뱃지들을 감싸는 프레임을 만든 후 프레임을 좌우는 'Fill container' 상하는 'Hug contents'로 지정하고 그 프레임에 Alignment and padding 옵션을 왼쪽으로 지정합니다. 이와 같이 구성하는 이유는 뱃지들을 오른쪽으로 정렬하고 싶을 때 유용하기 때문입니다.
그 예로 뱃지가 아닌 하단에 오른쪽 정렬된 버튼을 만들려 하면 위와 같은 방법으로 만들고 Alignment and padding 옵션만 오른쪽으로 지정하면 오른쪽에 구성된 카드형 식이 나오게 됩니다.
- 공통된 UI를 간편하게 디자인
위의 예시들을 모두 적용한 피그마에서 배포한 예제입니다. 마찬가지로 하나의 컴포넌트로 텍스트나 이미지만 변형한 구성입니다. 크기를 자유롭게 조절해도 같은 비율로 늘어나고 줄어들게 됩니다. 고정 영역과 가변 영역을 정하는 iOS의 구성 방식과 비슷하기도 합니다.
이와 같이 여러 개의 Auto-Layout으로 구성할 때는 무엇을 고정할 것인지 크기가 감싸고 있는 컨테이너에 따라 변할 건지 가지고 있는 텍스트나 이미지들에 의해서 크기가 변할 건지에 따라 옵션을 지정하는 것이 매우 중요합니다. 그리고 Constrains를 어디에 지정할지를 명확하게 구성하여서 만들면 매우 간편하고 수정이 빠른 작업을 하실 수 있습니다.
스케치에서는 심볼로 구성되었을 때만 Smart-Layout이라는 옵션이 생겨서 크기를 자동적으로 지정할 수 있는 옵션이 있는 반면 피그마는 컴포넌트로 굳이 지정하지 않아도 그룹으로만 만들면 Auto-Layout을 지정해서 편리하게 디자인을 구성할 수 있습니다. Auto-Layout을 활용해서 콘텐츠를 만들어보는 것을 추천드립니다.
Variants
Variants 기능은 기존에 스케치와 XD랑 비슷하지만 다른 컴포넌트의 설계 시스템 개념입니다. 설계 시스템을 훨씬 더 유연하고 빠르게 구성하고 구성 요소 탐색이 훨씬 더 편안하고 구성 요소 집합의 복잡성을 줄이는 장점이 있습니다. 좋은 기능인지 아직은 잘 모르겠지만 기존과 다른 흥미로운 기능이라는 점은 확실한 것 같습니다.
위의 예제를 보면 버튼을 제작할 때 기본 버튼, 호버 버튼, 포커스 버튼, 비활성화 버튼처럼 여러 종류의 특성을 가진 버튼을 만들게 되는데 보통 네이밍으로 구분을 하여서 컴포넌트들을 교체하였는데 이것을 하나로 합치고 여러 특성에 따라서 관리하는 것이 바로 Variants 기능입니다.
사진출처 - Figma.com버튼은 컬러에 따라 또는 박스가 아닌 텍스트 버튼으로도 지정될 수 있으며 아이콘이 들어간 버튼 또한 사이즈에 따른 버튼 등 다양한 버튼이 존재하게 되는 경우가 나오는데 이것을 네이밍을 명확하게 지정하여 만들고 난 후 Combine 하게 되면 위의 이미지와 같이 Variants 옵션 창에서 속성에 따라 분류가 되게 됩니다.
Combine 한 상태에서도 컴포넌트를 복사해 다른 옵션을 만들 수 있으며 옵션이나 속성을 추가할 수 있기때문에 꼭 버튼을 만들고 나서 합쳐야되는건 아닙니다.
사진출처 - Figma.com버튼을 모두 만들고 나서 인스턴트 컴포넌트를 만들어보면 기존의 컴포넌트 창과 다른 구성이 되어있습니다. 기존에는 단순히 드롭박스로 변경하였고 상위 옵션을 변경하기 위해서는 뒤로 가기 버튼으로 이동하여서 변경해야 되는 번거로움이 있었습니다.
하지만 Combine으로 합치고 나면 /로 공통으로 지정한 속성에 따라서 옵션 변경이 가능합니다. 또한 on/off, Ture/false 또는 Yes/No로 네이밍을 지정하게 되면 스위치 버튼으로 구성하게 할 수 있습니다. 옵션이 항상 존재하지 않는 구성이면 스위치 버튼으로 구성하는 게 좀 더 현명한 방법인 거 같습니다.
디자이너를 위한 툴
스케치 툴도 이번 겨울 인터페이스 변화와 별도의 심벌 콘텐츠 창 등 다양한 업데이트가 있었지만 저는 두 UI툴을 사용하면서 점점 피그마를 더 선호하게 되었습니다. 그 이유가 무엇일까를 생각해보면 저는 디자이너들에게 필요한 기능들이 무엇인지를 피그마가 조금 더 잘 파악하고 해결하고 있지 않나?라는 생각을 하였습니다. (인터페이스 디자인은 스케치를 조금 더 선호합니다... 피그마도 다크 모드를....!)
사실 고객사가 원하는 툴에 맞춰서 디자인하기 때문에 툴이 크게 중요하지는 않지만 저는 XD나 스케치를 사용하다 보면 아 여기서는 이게 안되는구나 라는 경험을 하게 된 적이 많았던 것 같습니다. 피그마의 새로운 기능들을 경험해보면 정말 편리하다고 느끼실 텐데 한번 새로 업데이트된 Variants와 Auto-Layout을 활용해보는 것을 추천드립니다.
열심히 GIF 이미지 만들었는데 GIF가 브런치에서 적용이 안되네요... 새로운 기능들이라 다양한 활용법이 있을것이라 생각하는데 혹시 더 좋은 방법이 있다면 댓글로 남겨주시면 감사하겠습니다.
