피그마 플러그인으로 아이콘 업데이트 자동화하기

안녕하세요 👋, 채널톡 웹팀의 에드입니다. 채널톡엔 베지어(Bezier)라는 디자인 시스템이 있습니다. 저희 웹팀에서는 이 디자인 시스템의 React 구현체인 bezier-react 라는 오픈소스 라이브러리를 관리하고 있습니다. 그리고 더 나아가 어떻게 엔지니어와 디자이너가 더 편하고 효율적으로 협업할 수 있을지도 고민하고 있습니다.

이번 포스트에선 그 일환으로 직접 피그마 플러그인을 구현한 이야기를 공유해보려고 합니다. 디자인 시스템에 새로운 아이콘을 추가했을 때, 라이브러리 리포지토리에 이를 업데이트하는 과정을 자동화한 이야기입니다.

기존 문제

피그마 플러그인이 도입되기 이전, 디자인 시스템의 아이콘을 업데이트하는 과정은 아래와 같은 방식으로 이루어졌습니다.

1. 디자이너가 피그마에서 업데이트한 아이콘을 내려받은 후, 이를 압축합니다.

2. 사내 메신저에 업로드하고, 엔지니어에게 공유합니다.

3. 엔지니어는 이를 내려받아 압축을 풀고, 소스 코드에 적절히 추가합니다.

4. PR을 올려 코드 리뷰 후 머지합니다.

이 과정은 간단해 보이지만 생각보다 불편한 점들이 많았습니다. 디자이너가 직접 아이콘을 내려받아 압축하는 것부터 엔지니어가 압축을 풀어 업데이트하는 것까지 번거로운 과정을 거쳐야 했습니다. 또한 어떤 엔지니어가 아이콘을 업데이트해야 하는지 책임소재도 불명확했습니다. 특정 엔지니어를 지목해 업데이트를 요청하는 방식이 아니었기 때문입니다. 따라서 아이콘이 업데이트되는 이유(예: 새로운 기능 업데이트)와 관련된 엔지니어가 '알아서 잘' 업데이트하는 방식으로 작업이 이루어졌습니다.

채널톡 팀 메신저

를 사용해 이런 방식으로 공유했었습니다. 이젠 옛날 이야기가 되었네요. 😄

문제 해결하기

아이콘의 소스 코드를 업데이트하는 사람은 엔지니어이지만, 아이콘을 업데이트를 트리거하는 주체는 디자이너입니다. 어떠한 방식으로든 디자이너가 직접 소스 코드를 업데이트할 수 있다면, 디자이너와 엔지니어 간 커뮤니케이션 비용을 줄일 수 있습니다. 또한 업데이트 프로세스를 코드 리뷰 과정에 포함한다면 책임소재에 대한 문제도 자연스럽게 해결할 수 있겠다고 생각했습니다.

피그마 플러그인, GitHub REST API

📣 이번 포스트에선 피그마 플러그인의 동작 방식 및 자세한 구현에 관한 이야기는 하지 않습니다.

• 피그마 플러그인의 동작 방식에 관한 설명은 피그마 공식 문서나 블로그 포스트 등을,

• 아이콘 플러그인의 자세한 구현과 실행 모습이 궁금하시다면, 아이콘 플러그인 구현 PR을 참고해주세요!

저희 팀에선 피그마를 디자인 툴로 사용하고 있습니다. 피그마에서는 플러그인이라는 서드파티 애플리케이션을 사용할 수 있습니다. 다른 사람들이 제작한 멋진 플러그인을 사용할 수도 있고, 피그마에서 제공하는 플러그인 API를 사용하여 직접 만들 수도 있습니다. 플러그인 API를 사용하면 피그마 문서 내부의 노드를 컨트롤하거나, 네트워크 통신을 하는 등 다양한 동작을 실행할 수 있습니다. 게다가 플러그인은 웹 기술(HTML, JavaScript)을 기반으로 구현되어 있기에 웹 프론트엔드 엔지니어가 사용하기에도 쉽습니다.

여기에 GitHub REST API를 함께 활용한다면 디자이너가 개발 지식이 없이도, 피그마에서 직접 소스 코드를 업데이트할 수 있겠다고 판단했습니다. 프로토타입 구현 후 실현 가능성을 확인하는 작업을 거쳐, 실제로 저희 워크플로에 적용할 수 있었습니다. 간단하게 설명하면 아래와 같습니다.

1. 피그마에서 플러그인을 실행하고, 필요한 토큰을 입력합니다.

2. 아이콘이 정리된 대지(Frame)를 클릭해 포커스를 준 채로, 피그마 플러그인을 실행하면 해당 대지 안 모든 아이콘을 다운받습니다.

3. 다운받은 아이콘 파일을 Git Blob 객체로 변환하고, 현재 디자인 시스템 리포지토리 메인 브랜치의 HEAD 커밋과 비교하여 새로운 트리를 만들고, 이것으로 새로운 커밋을 만듭니다.

4. 새로운 브랜치를 만들고, 리포지토리 메인 브랜치를 베이스로 PR을 생성합니다.

피그마 플러그인을 구현한 PR. 실행 모습은 PR에서 확인 가능합니다.

아이콘을 업데이트하는 PR이 자동으로 생성되었습니다! 👏

피그마 플러그인을 통해 디자이너가 아이콘 업데이트가 필요한 시점에 직접 소스 코드 업데이트도 함께 진행하게 되었습니다. 디자이너가 따로 압축 파일을 만들 필요도, 엔지니어가 직접 소스 코드를 업데이트할 필요도 없어졌습니다. PR이 생성되면 자동으로 Code owner에게 리뷰 요청이 가기에, 업데이트 프로세스가 자연스럽게 코드 리뷰 프로세스에 포함되면서 엔지니어 간의 책임소재도 비교적 명확해졌습니다.

도입 이후

🧑‍🎨 디자이너: 예전에는 아이콘을 수정하고, 메신저로 공유하고, 엔지니어의 작업을 기다리는 형태였다면. 지금은 수시로 수정할 수 있고, 플러그인으로 아이콘을 바로 업데이트할 수 있어서 좋아요!

피그마 플러그인 도입 이후, 아이콘 업데이트를 위해 필요했던 커뮤니케이션은 단 한 번도 없었습니다! 불편했으나, 익숙해졌기에 불편함을 잘 인지하지 못하고 있던 부분을 자동화로 잘 해결한 좋은 사례라고 생각합니다.

반면 아직 부족한 부분도 많습니다. 아이콘 다운로드 및 변환 과정이 피그마 플러그인 런타임에서 이루어지기 때문에 아이콘이 많을 경우 꽤 오랜 시간이 소요된다는 문제, svg 아이콘을 React Component로 변환하는 과정은 엔지니어가 수동으로 진행해줘야 하는 문제 등 아직 개선해야 할 포인트가 남아있습니다. 이는 계속해서 사용자(디자이너)의 피드백을 들으며 다듬고 개선해나갈 예정입니다!

마치며

지금까지 디자인 시스템을 운영하며 발생했던 커뮤니케이션 문제를 피그마 플러그인을 통해 해결한 이야기를 공유해 드렸습니다. 이 포스트가 피그마를 사용해 디자인 시스템을 만드는 다른 팀에도 도움이 되면 좋겠습니다. 이런 고민을 함께하며 재밌게 일할 동료들도 모집 중입니다. 관심이 있으시다면, 저희와 이 여정을 함께 해보시는 건 어떨까요?

[이런 글도 추천드려요]

• 프론트엔드 프로젝트 최신화 - 1편 : Yarn berry

• 프론트엔드 프로젝트 최신화 - 2편 : 모노레포

• 채널톡 프론트엔드 개발자 제프, 티거를 만나다