피그마, Virants 그리고 개발

피그마에서 Variants라는 기능이 업데이트 되었다.

피그마에서 Variants라는 기능이 업데이트 되었다.

필자는 이 업데이트가 무척 반갑다.

과거 디자인관련 업무를 진행하며 겪은 한 부분의 문제를 피그마팀이 해결해 준 느낌을 받았다.

필자가 예전 참여한 프로젝트에서 디자인 부분을 담당 했었다.

클라이언트의 구두 설명만 으로 디자인을 진행했었다.

그중 한 부분에 대해 이야기를 해보겠다.

위 이미지처럼 구두로 설명들은 부분을 실제 디자인에 적용하니 3가지의 이미지가 필요했다.

간단히 설명하면 사용자 롤이 두가지로 나누어 지는 형태였다.

첫 단계는 관리자 역할의 사용자가 코멘트 영역을 표시하는( on,off ) 설정이다.

두번째 단계는 이것을 public인지 private인지에 대한 설정이다.

또한 이를 통해 비공개 설정이면 메세지를 보내거나 이메일을 보내는등, 설정에 따라 그 뒤에 추가되는 기능들이 붙는 형태이다.

이런 기능이 지금 설명한 부분 뿐만 아니라 꽤 여러 군데에서 발생했다.

실제 디자인을 완성하고 보니 설정 마다 기능들이 추가되고 그에 따른 디자인 화면들도 늘어났다.

디자인이 완성된 시점에서는 너무 많은 화면이 존재해 개발팀과 커뮤니케이션 하면서 의견을 나누는 것 보다 화면을 찾는 과정들이 더 많았던 것 같다.

피그마의 Variants 기능은 앞서 이야기한 어려움들을 많이 해결해줄 수 있을 거다.

각 심볼들이 개발의 상태 관리처럼 설정에 따라 화면이 바뀌니 상태에 따른 별도의 페이지들을 만들지 않아도 된다.

필자는 이것을 '디자인 상태관리'라고 말하고자 한다.

이유는 개발할때의 상태관리와 동일하게 느껴지기 때문이다.

필자가 개발을 할때 상태 관리를 좋아하는 한가지 이유는 상태에 따라 각각 다른 컴포넌트를 불러올수 있어서다.

상태에 따라 각 컴포넌트를 따로 불러오다보니 문제가 생기면 해당 컴포넌트만 수정하면 되기 때문이다.

피그마에서도 마찬가지인거 같다.

Variants의 각 설정값들을 바꾸면서 잘못된 부분이 나타나면 그부분만 수정하면 되기 때문이다.

한화면에서 설정값을 변경하기 때문에 각각의 설정에 따라 디자인을 변경하거나 수정할 사항을 파악하는것도 훨씬 쉬워질거다.

필자가 Variants 기능이 업데이트 되고 이를 머터리얼 디자인 시스템에 적용해 보았다.

개발과 디자인 사이의 간격이 얼마나 줄어들 수 있을지 궁금했기 때문이다.

머터리얼 checkbox의 api에서 disabled, color, checked등의 설정값에 해당하는 부분을 피그마로 동일하게 만들어 보았다.

이를 통해 개발의 설정값과 피그마의 설정값을 동일한 상태로 만드는게 가능한것을 알게 되었다.

이번 Variants 기능은 디자이너보다는 오히려 개발자들이 더 반길수 있는 업데이트인것 같다.