brunch

You can make anything
by writing

C.S.Lewis

by eddward park Nov 10. 2020

피그마 플러그인 개발 이야기 #시작전에

필자가 최근 개발한 플러그인 관련하여 이야기를 써 보고자 한다.

피그마로 직접 그린 이미지


필자가 최근 개발한 플러그인 관련하여 이야기를 써 보고자 한다.


피그마 플러그인 개발 전 다른 플러그인들은 어떤 기능과 사용자 경험을 주는지 수십개의 플러그인을 사용해 봤다.


기능적인 면이야 이글을 읽는 분들이 더 많이 사용해 봤으리라 생각하기에 이 부분은 건너뛰고 사용자 경험에 대해 이야기를 풀어 보겠다.


피그마로 직접 그린 이미지


위 스크린샷에서 보듯이 플러그인을 실행하면 화면의 한 부분을 차지하는 해당 플러그인창이 뜬다.


필자가 디자인을 하면서 사용을 해보니 작업화면에 있어도 불편하고 양쪽 정보창위에 있어도 불편하더라.


좌측에 있으면 현재 작업하는 프레임이나, 엘리먼트 이름, 구조 및 관계가 안보이게 되고 우측에 두면 엘리먼트의 속성들이 안보여 플러그인 위치를 옮긴다음 해당 작업을 하게 된다.


가운데 작업영역에 두면 실제 작업할 화면 일부가 안보여 또다시 플러그인 위치를 옮기게 만든다.


과장해서 이야기 하면 실제 작업보다 플러그인을 옮기는 작업을 더 많이 하게 된다.


결론은 거의 모든 플러그인들이 사용자의 경험을 일정부분 훼손하고 있는것이다.


피그마로 직접 그린 이미지


위 이미지는 유틸플러스 초기버전 디자인이다.


필자 또한 다른 유틸처럼 세로화면 형태로 개발했다.


개발 진행은 90%정도 이루어진 상태였다.


그런데, 직접 만든 플러그인임에도 위에 언급한대로 화면을 일정부분 차지하는게 불편했다.


이때 고민을 많이 했다. 


유틸 플러스는 올인원 유틸 묶음을 목표로 하고 있지 않은가?


유틸이 추가되면 추가될수록 고치는건 어려워질것이다.


그래서, 과감하게 처음부터 다시 사용자 경험에 대한 고민 후 디자인 변경과 개발을 진행했다.


이 결심을 했을 때 그동안 만든 개발 결과물이 너무나 아까웠다.


내 손으로 키워낸 자식을 세상에 내 보이지도 못하고 사라지게 했으니 말이다.


피그마로 직접 그린 이미지


새로운 유틸 플러스는 가로모드도 사용하도록 디자인되었다.


플러그인 사용시 화면 가리는것을 최소화한 것이다.


아마도 이런 사용자 경험을 제공한 플러그인은 최초이지 않을까?


작은 플러그인도 이렇듯, 디자이너들이 만든 결과물도 UX에 대한 고민부터 시작되어야 한다는 생각이다.


필자처럼 개발까지 완료하고 나서 다시 원점으로 돌아갈수 있으니 말이다.




오늘의 글쓰기 끄읕~ ( 이미지는 그간 작업한 디자인을 활용하니 글작성 시간이 엄청 단축되었다 ㅎㅎ )

https://www.figma.com/community/plugin/885142896349849231/util%2B


매거진의 이전글 피그마, 디자인 그리고 8px
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari