Codex로 생산성을 10배 올리는 플러그인 만들기
배경
우리 팀은 왜 이렇게 수정이 많을까요?
반도체 검사 프로그램의 리포트와 차트를 디자인하면서 우리 팀은 심각한 비효율을 마주했습니다. 1회의 차트 디자인 수정 요청이 들어오면 평균 5건의 작업량이 발생했기 때문입니다.
이 추세가 유지된다면 기대 작업 수 대비 리소스가 3~5배까지 급증할 것으로 예상되었고, 내부에서도 "요즘 차트 작업량이 너무 많다"는 의견이 쏟아졌습니다.
결국 우리는 초기 비용이 들더라도 비효율이 누적되는 현상을 막기로 의견을 모았습니다.
문제 진단
화면 단위 수작업
문제를 파악해 보니, 수정이 발생할 때마다 화면별로 차트를 반복해서 제작하는 방식이 원인이었습니다. 변수가 너무 많아 디자인 시스템으로 정리하기 어렵다고 판단해, 그동안 화면 단위로 작업해 왔던 것입니다. 그러다보니 개발에서 수정이 발생하면, 화면 단위로 차트 디자인을 업데이트하고 있었습니다.
그래서 이를 해결하고자 피그마(Figma) 컴포넌트화를 시도했습니다.
게릴라 인터뷰를 통해 진짜 병목이 '데이터 계산 및 적용' 단계에 있다는 것을 깨달았습니다. 데이터 수만큼 수치를 입력하고 높이에 따라 데이터 값을 일일이 수동으로 계산하는 데 너무 많은 시간이 소요된 것입니다. "차트는 디자인과 데이터의 결합"인데, 데이터를 관리할 수단이 없었던 것이 문제의 핵심이었습니다.
해결책
입력부터 수정까지, '통합형 차트 빌더' 개발
이대로 문제가 계속된다면 몇백개의 차트 파일들이 관리가 안된채로 방치될 것이 분명했습니다. 또한 Figma는 애초에 데이터 & 차트 빌더 툴이 아니기 때문에 이런 차트 기능을 네이티브로 제공하지 않는 문제점이 있었습니다.
이런 한계를 극복하고, 디자인 및 데이터 입력·계산·수정을 한 번에 관리하기 위해 피그마 플러그인(MVP)을 직접 제작하기로 했습니다. 필요한 기능을 Codex와 함께 개발하며, 팀 내 디자이너를 대상으로 테스트를 반복했습니다.
❶ 데이터 입력 및 계산 자동화
데이터를 입력하면 플러그인이 차트 값을 자동 계산하고, 이를 미리보기로 즉시 반영하도록 했습니다. 번거로운 수동 계산과 레이어 입력이 줄어들면서, 데이터 반영 시간이 극적으로 단축되었고 수작업으로 인한 입력 오류도 줄일 수 있었습니다.
❷ 레이어 탐색 없는 속성 단위 편집
기존에는 10개가 넘는 복잡한 레이어를 일일이 찾아 수정해야 했지만, 이제는 레이어를 선택하지 않고도 플러그인 UI에서 직접 스타일 속성을 수정할 수 있습니다.
또한 스타일 템플릿 기능을 적용해 스타일 적용에 드는 시간도 대폭 줄였습니다.
❸ D3.js 기반으로 디자인-개발 기준 통합
기존에는 피그마와 실제 개발 환경(D3.js) 간의 구조 차이로 구현 결과가 어긋나고 문서를 재수정하는 일이 잦았습니다. 우리는 피그마 레이어 속성을 D3.js 구현 속성에 맞춰 재정의하고 서로 연결했습니다. 나아가 현재 디자인을 코드 구조로 바로 변환할 수 있는 기능(Export Code)을 추가하여 디자인-개발 간의 재수정 비용을 최소화했습니다.
성과 및 결과
리소스 감소와 압도적인 만족도
새로운 시스템의 효과를 확인하기 위해 레거시 기능 문서를 업데이트해 본 결과, 놀라운 변화가 있었습니다.
5. 마무리하며
시스템 개선은 곧 작업 과정의 재설계
끝없는 차트 수정을 해결하며 우리 팀이 얻은 가장 큰 배움은, "시스템 개선 경험은 단순한 디자인 구조 변경뿐만 아니라 작업 과정 자체의 재설계가 필요하다"는 점입니다. 단순히 컴포넌트를 잘 깎는 것을 넘어, 디자이너와 개발자가 함께 일하는 워크플로우의 근본적인 병목을 찾아 자동화한 이번 경험이 앞으로 팀의 리소스를 보호하는 강력한 무기가 되기를 기대합니다.
플러그인 제작팁이 궁금하다면?