안녕하세요 👋, 채널톡 웹팀의 에드입니다. 채널톡엔 베지어(Bezier)라는 디자인 시스템이 있습니다. 저희 웹팀에서는 이 디자인 시스템의 React 구현체인 bezier-react 라는 오픈소스 라이브러리를 관리하고 있습니다. 그리고 더 나아가 어떻게 엔지니어와 디자이너가 더 편하고 효율적으로 협업할 수 있을지도 고민하고 있습니다.
이번 포스트에선 그 일환으로 직접 피그마 플러그인을 구현한 이야기를 공유해보려고 합니다. 디자인 시스템에 새로운 아이콘을 추가했을 때, 라이브러리 리포지토리에 이를 업데이트하는 과정을 자동화한 이야기입니다.
기존 문제
피그마 플러그인이 도입되기 이전, 디자인 시스템의 아이콘을 업데이트하는 과정은 아래와 같은 방식으로 이루어졌습니다.
디자이너가 피그마에서 업데이트한 아이콘을 내려받은 후, 이를 압축합니다.
사내 메신저에 업로드하고, 엔지니어에게 공유합니다.
엔지니어는 이를 내려받아 압축을 풀고, 소스 코드에 적절히 추가합니다.
PR을 올려 코드 리뷰 후 머지합니다.
이 과정은 간단해 보이지만 생각보다 불편한 점들이 많았습니다. 디자이너가 직접 아이콘을 내려받아 압축하는 것부터 엔지니어가 압축을 풀어 업데이트하는 것까지 번거로운 과정을 거쳐야 했습니다. 또한 어떤 엔지니어가 아이콘을 업데이트해야 하는지 책임소재도 불명확했습니다. 특정 엔지니어를 지목해 업데이트를 요청하는 방식이 아니었기 때문입니다. 따라서 아이콘이 업데이트되는 이유(예: 새로운 기능 업데이트)와 관련된 엔지니어가 '알아서 잘' 업데이트하는 방식으로 작업이 이루어졌습니다.
채널톡 팀 메신저를 사용해 이런 방식으로 공유했었습니다. 이젠 옛날 이야기가 되었네요...
.jpg)
