디자이너가 커서로
팀의 장애물을 없애는 법
새로운 직장에서 한 달을 보내면서, 짧은 시간이지만 팀에 실질적인 도움을 줄 수 있었던 경험과 그 과정을 공유하고자 합니다.
돌이켜보면 주로 에이전시와 스타트업에서만 일해왔기에, 긴박한 업무 진행으로 ‘팀’을 위한 제품을 만드는 일은 어느 정도 시간이 흐른 뒤, 업무에 완전히 적응한 후에야 시도할 수 있었습니다.
하지만 이번 직장에서는 프로젝트에 몰입할 수 있는 환경이 마련되어 있었고, 마침 팀도 정비를 위한 시간을 갖고 있었습니다. 덕분에, 팀에 필요한 부분을 스스로 찾아 먼저 실행에 옮길 수 있었습니다.
팀이 겪고있는 가장 어려운 문제는?
업력이 오래된 회사이거나 많은 디자이너가 거쳐 간 조직일수록, 라이브러리의 파편화는 피할 수 없는 문제입니다. 새로운 디자인시스템을 구축하려 해도, 이미 누적된 수많은 레거시를 일일이 찾아서 새로운 기준으로 바꾸기는 매우 번거로운 과정이고 모든 조직이 겪는 고충일 것이라 생각듭니다.
실제로 첫 프로젝트에서도 8종의 많은 라이브러리를 마주했었습니다. 매번 컴포넌트 및 인스턴스를 하나하나 점검하고, 교체하는 번거로움과 피드백을 반영하는 과정에서 누락이 생길 수 있는 여지를 발견했고, 현재 팀의 새로운 디자인시스템 적용 과정에서는 큰 방해물임을 확신하고 문제를 파고들기 시작했습니다.
주체적으로 팀의 방해물을 없애는 방법 (w.Cursor)
가장 먼저는 팀이 정말 활용할 수 있는 실효성 있는 제품을 고민했고, 디자이너에게 가장 가까운 수단인 ‘피그마 플러그인’을 떠올렸습니다. 사실 1년 전만 해도 얕은 코딩 지식으로는 직접 만드는 것은 생각하지 못했지만, 스터디 모임에서 화두되고 있던 커서를 활용해본다면 주체적으로 제품을 만들 수 있지 않을까 생각들었습니다.
그렇게 1주만에 배포한 것이 ‘디자인시스템 진단기 v1.0’입니다. 원하는 프레임을 선택한 후 진단 버튼을 누르면, 최신 디자인시스템이 적용되지 않은 레거시 라이브러리나 로컬 파일로 구성된 요소들을 자동으로 검출해 목록으로 보여줍니다. 결과 카드 클릭 시 해당 컴포넌트 위치로 바로 이동할 수 있습니다. (뒷면에서는 14종의 라이브러리를 토대로 파일을 검출하고 있습니다.)또한, 제품의 실효성을 높히기 위해 새로운 디자인시스템 규칙 추가가 필요한 경우 ‘제보하기’ 버튼을 통해 요청 테이블로 연결할 수 있도록 구성 했습니다.
사실 과정에서는 API 관련 어려움으로 입사동기 중 개발자분들의 여럿 도움을 구하기도 했지만, 기술적 제약을 벗어나 생산성을 목표로 하는 제품을 아이데이션 하고 실제로 배포할 수 있었던 값진 경험이었습니다. 덕분에 사내 스터디도 구성할 수 있었고, 이후 추가 플러그인 배포(UX Writing 봇, 가이드문서 변환)까지도 어렵지 않게 이어나갈 수 있는 추진력을 갖추게 되었습니다.
여전히 어설픈 제품이 아님을 증명해야하는 숙제
아직 부족한 점이 많지만, 플러그인을 사용해본 팀원의 피드백 덕분에 기능을 개선할 방향도 얻고 있습니다. 앞으로는 레이어의 계층까지 시각화하고, 거시적으론 컴포넌트 자동 교체까지 지원하는 방향을 고민하고 있습니다. 이제는 팀장님의 도움으로 유료 버전의 커서를 통해 더 빠른 시간 내 개선도 가능할 것이라 생각듭니다.
이번 경험을 통해 반복되는 문제를 직접 해결하고, 주체적으로 팀에 기여할 수 있다는 흥미를 얻었습니다. 저처럼 여러 기술적 제약의 새로운 도전을 미루두었던 디자이너 분들도, 한 번쯤 풍부해진 AI와 관련된 아티클 등을 통해 직접 문제를 정의하고 해결하는 과정을 시도해 보셨으면 합니다.
