[UI]피그마 새 기능 Variants 사용하기
이젠 빠져나갈 수 없어!
피그마? 피그마!
스케치에서 피그마로 갈아탄(?)지 어언 반 년 가량이 지났다. 처음에 피그마로 옮기게 된 계기는 단순히
1. 프로젝트가 초반이여서 옮기기 어렵지 않았고,
2. 기획자님와 개발자님과 바로바로 협업하기 위해서
였다. 단 이 두 이유만으로 옮겨온 피그마에 이제 꽉 발목이 잡혀버렸다. 한 때 Sketch 파일은 Figma로 import되는데, Figma파일은 Sketch로 옮길 수 없어 불안감에 Sketch에서 작업하고 Figma로 옮기기도 했었다. 그러나 이제는 스케치는 거의 켜지 않는 ..(스케치 미안..) 피그마의 열렬한 팬이 되어버렸다.
Variants!
피그마는 올해 초 커다란 여러 업데이트를 예고한 바 있다. 그리고 놀랍게도(!) 정말 많은 기능과 업데이트가 빠르게 적용되었다. Auto Layout 부터 Selection Color, Hyperlink, Community 까지, 편리하고도 쓸모있는 기능들이 빠르게 도입되면서 작업 환경이 배로 좋아지고 있었다. 그리고 이번에 업데이트된 이것, Variants!
하단에 첨부해둔 Figma 링크는 Figma에서 기능 업데이트에 맞추어 제공한 Community File이다. Tutorial처럼 몇가지 예제를 설명과 함께 첨부해두어서 직접 이것 저것 눌러보며 놀 수 있다.
https://www.figma.com/community/file/903303571898472063/Figma-Variants-Playground
한번 해보기
우선 왼쪽이 원래 가지고 있던 체크박스 Components였다. 체크박스는 단순하게 2가지 상태(State)가 있다. 그리고 이것을 손쉽게 바꿀 수 있도록 (Swap Instance) 묶어두기 위해 /(slash)를 이용해 그루핑을 했다. 이제 Variant를 사용하면 /를 사용하여 그루핑을 따로 하지 않아도 자동으로 묶어준다. 기존에 /로 만들어둔 것도 손쉽게 Combine 할 수 있다. (역시 피그마..!)
피그마 우측에서 해당 상태를 확인할 수 있는데, Variant 적용 후에는 Checkbox Component 하나에 State (Property)가 2가지인 상태로 된다. 이 때 이렇게 한 Property 내에 2가지 Variant만 있을 경우, On/Off 혹은 True/False로 이름을 설정하면 피그마에서 Boolean Value로 인식하여 해당 Property는 토글 버튼으로 켜고 끌 수 있다. (개인적으로 정말 마음에 들었던 디테일!)
이쯤에서 드는 생각
엥, 찬양할 정도는 아닌데.. 큰 변화인가? 싶을 수도 있다. 하지만 Property가 많을 경우, Varient가 많고 복잡해질 경우는 이야기가 달라진다. 예를 들어 공차를 갔다고 치자. 지금까지의 컴포넌트 방식은 모든 Varient의 경우를 다 만들어 정의해두는 식이어서 분류가 애매하게 되기도 하고 이름이 엄청나게 길어졌다. 기존 대로 공차 메뉴를 나열한다면,
밀크티/얼음많이/토핑_타피오카
밀크티/얼음많이/토핑_알로에
밀크티/얼음많이/토핑_레드빈
밀크티/얼음적게/토핑_타피오카
밀크티/얼음적게/토핑_알로에
...
이 된다. 이렇게 된다면 컴포넌트를 밀크티/그린티/프룻티를 각각 나누어 묶고 그 안에서 하위 속성을 만들어 정리해야한다. 밀크티, 그린티, 프룻티를 만드는 사람이 각각 따로 있고 그들이 각자 토핑과 얼음을 관리하는 셈이다.
피그마 제공. Varient Playground 내 컨텐츠하지만 Variant를 사용하면 꽤나 상태를 정리하거나 정의하거나 찾거나 수정하기 쉬워진다. 각 Property별로 여러 상태를 정의하여 하나로 묶어두면 꽤나 순서나 하위 구조를 나누지 않고 편하게 관리할 수 있다. 한사람이 티 종류를 골라 넣고, 그다음에 토핑 골라 넣고, 얼음 넣기가 가능한 구조인 셈이다. (이게 맞지 엉엉 ㅜㅜ..)
피그마 제공. Varient Playground 내 컨텐츠피그마에서 예로 든 Switch를 보면 확 와닿을 것 같다. 각각의 Property를 교차하여 바꿀 수 있다.
Property1: iOS/ Android
Property2: Off/On
Property3: Default/Pressed/Disabled
이 모든 것은 Switches라는 컴포넌트 아래 관리할 수 있고 레고 조각 바꾸듯 손쉽게 바꿀 수 있다.
이쯤에서 다시 적용해보기
만드는 방식 자체는 기존과 크게 다르진 않다. 컴포넌트 점선 내부에 복사하여 수정하거나 새로 만들면 자동으로 하위 컴포넌트 Variant로 생성되는데, 네이밍에 대한 고민은 확 줄었다. 우측에 있는 Property와 Varient에 새로 적거나 기존 것 중에 선택하면 되기 때문. 이름에 대한 불필요한 Copy/Paste가 확 줄었다.
그리고 이것을 화면에 적용했을 때 따로 각 상태별로 화면을 만들지 않아도 되고, 설령 만들어야하더라도 아주 손쉽게 property 값을 선택하여 바꿀 수 있다. 이것을 다른 글에서 '디자인 상태 정리'라는 말로 표현하셨는데 매우 적절한 표현인 것 같다.
대신 디자이너와 개발자가 신경써야할 것은 바로 'Property'와 'Varient' 정의와 언어 통일이다. 아래는
피그마의 CEO이자 파운더 Dylan Field가 9월에 Config에서 Varients 기능을 출시하며 소개하는 글이다.
Currently, a button component like this would be represented by different components, each for a different visual style. This mismatch between design and code can result in miscommunication, ultimately slowing down the development process. To solve this problem, we’re launching Variants, a way to logically group together variations of the same component into a single, more powerful component. In addition to simplifying the asset panel, this update will allow components to map more closely to code.
조금 더 개발자와 디자이너가 통일된 언어를 사용할 수 있도록 길을 뚫어준 셈이다. 결국 목적은 컴포넌트의 관리를 논리적으로 구조적으로 개발자와 디자이너가 어느정도 통일하므로서 제품 개발 프로세스를 좀 더 개선하기 위함이다.
https://www.figma.com/blog/config-europe-2020-new-feature-announcements/
마무리!
피그마의 CEO Dylan Field (이름도 어쩜!..)는 소프트웨어 엔지니어였다. 피그마가 디자인 툴이지만 정말 개발 친화적인 이유이기도 할 것이다. 개발자 친구가 옆에서 피그마를 접하자마자 아주 능숙하게 다루면서 개발자들이 정말 좋아할 툴이라고 말했다. 웹, 앱 제품을 만드는 툴이니 만큼 점점 더 개발과 디자인의 간격을 줄이고 협업을 도와주는 툴로 거듭날 것이라 기대한다! ( 피그마 만세!)
