마이크로소프트의 UX 디자이너 Jackie Chui는 디자인 과정에서 반복되는 번거로운 작업을 해결하기 위해 직접 Figma 플러그인을 개발하기 시작했으며, 특히 'Table Creator'를 통해 복잡한 테이블 제작 과정을 자동화했습니다. 그는 디자이너가 직접 도구를 만드는 것이 워크플로우 효율성을 높일 뿐만 아니라, 개발적 사고를 통해 디자인의 기술적 구현 가능성을 깊이 이해하는 데 큰 도움이 된다고 강조합니다.

테이블 제작의 고충과 자동화의 필요성

피그마에서 테이블을 제작할 때 셀 하나하나의 크기를 조정하고 수동으로 요소를 배치하는 반복 작업이 디자인 생산성을 저해하는 주요 요인임을 인지했습니다.
단순히 정적인 표를 그리는 것이 아니라, 오토 레이아웃(Auto Layout)이 적용되어 유연하게 반응하고 수정이 용이한 테이블을 즉각적으로 생성하는 것을 목표로 삼았습니다.

기술적 도전과 스택 활용

전문 개발자가 아닌 디자이너로서 React와 TypeScript, 그리고 Figma API를 익히며 플러그인 개발에 도전했습니다.
처음부터 완벽한 코드를 짜기보다는 Figma에서 제공하는 기본 플러그인 템플릿과 API 문서를 적극적으로 활용하여 핵심 기능 구현에 집중했습니다.
TypeScript를 도입하여 코드의 안정성을 확보하고, 복잡한 테이블의 행과 열 구조를 명확한 타입으로 정의함으로써 관리 효율을 높였습니다.

MVP 중심의 점진적 개발 방식

가장 먼저 해결해야 할 핵심 기능인 '기본 테이블 생성'에 집중한 최소 기능 제품(MVP)을 먼저 배포한 후, 실제 사용자들의 피드백을 바탕으로 기능을 확장했습니다.
사용자가 셀의 스타일을 직접 정의하고 저장하여 재사용할 수 있는 기능을 추가해, 개별 프로젝트의 디자인 시스템에 최적화된 테이블을 만들 수 있도록 고도화했습니다.
플러그인 커뮤니티의 반응을 실시간으로 살피며 성능을 최적화하고 UI를 개선하는 반복적인 이터레이션 과정을 거쳤습니다.

디자이너를 위한 개발 권장

자신에게 필요한 도구를 직접 만드는 과정은 단순한 업무 자동화를 넘어, 디자인 시스템의 논리적 구조와 데이터 흐름을 이해하는 데 큰 기여를 합니다.
거창한 프로젝트보다는 현재 업무에서 겪고 있는 사소한 불편함을 해결하는 작은 스크립트부터 시작해볼 것을 권장하며, 커뮤니티의 오픈 소스 코드를 참고하는 것이 가장 빠른 학습 방법임을 강조합니다.