techlist.io
KREN
figma

깃허브, 협업 문화를 (새 탭에서 열림)

figmadesign-systemsprototypinggithubremote-collaborationfigma-apisvg

GitHub는 원격 협업 환경에서 디자인 시스템을 효율적으로 운영하기 위해 Figma를 도입했다. Figma와 API를 활용해 아이콘·UI 컴포넌트 제작 과정을 자동화하고, 디자이너와 개발자가 같은 파일에서 실시간으로 협업할 수 있게 했다. 그 결과 디자인 시스템은 GitHub의 일하는 방식에 핵심 요소로 자리 잡았고, 반복 작업과 협업 장벽을 줄이는 기반이 되었다.

디자인 시스템 전담 조직의 성장

  • 2015년 당시 GitHub에는 디자인 시스템을 전담하는 직원이 없었다.
  • 디자이너들이 동일한 요소를 반복해서 만들고, 문서가 부족하며, 패턴이 오래된 문제가 있었다.
  • 이를 해결하기 위해 디자인 시스템과 문서화된 워크플로를 구축하는 풀뿌리 활동을 시작했다.
  • 활동 시작 6개월 만에 전담 팀이 만들어졌으며, 이후 7명 규모로 성장했다.
  • 전체 제품 디자인 팀 25명 중 7명이 재사용 가능하고 교체 가능한 컴포넌트를 관리하게 되었다.
  • 디자인 시스템은 GitHub의 디자인·개발 프로세스를 효율적이고 반복 가능하며 확장 가능하게 만드는 핵심 기반이 되었다.

기존 디자인 워크플로의 문제점

  • 전담 팀을 구성해도 디자인 시스템을 만들고 유지하는 과정 자체가 비효율적이었다.
  • SVG 아이콘 라이브러리인 Octicons를 수정하려면 특정 소프트웨어 설치와 관련 도구에 대한 지식이 필요했다.
  • 이런 복잡한 설정은 기여자가 아이콘을 수정하거나 업데이트하는 일을 어렵고 혼란스럽게 만들었다.
  • 결과적으로 디자인 시스템에 참여하려는 사람들의 진입 장벽이 높아졌다.

Figma와 API를 통한 기여 과정 자동화

  • GitHub는 Octicons를 Figma로 이전하는 실험을 시작했다.
  • Figma는 별도의 소프트웨어를 다운로드하거나 설치하지 않아도 브라우저에서 작업할 수 있었다.
  • Figma API를 함께 사용해 아이콘 업데이트 과정을 자동화할 수 있었다.
  • 디자이너와 개발자는 운영체제나 도구에 관계없이 복잡한 설정 없이 디자인 시스템에 기여할 수 있게 되었다.
  • Octicons에서 얻은 효과를 바탕으로 UI 컴포넌트도 Figma로 이전했다.
  • 이후 GitHub의 디자인과 개발에 필요한 대부분의 요소를 Figma에서 이용할 수 있게 되었다.

원격 팀을 위한 ‘DesignHub’

  • GitHub는 원래 도구에 구애받지 않는 팀이었지만, Figma 사용은 빠르게 확산되었다.
  • 웹 기반 협업 기능 덕분에 서로 다른 장소에서 일하는 팀원들이 같은 파일에 동시에 참여할 수 있었다.
  • Figma는 물리적으로 함께 모여 화이트보드 앞에서 작업하는 경험을 대체했다.
  • 디자이너들은 실제로 한 공간에 있는 팀처럼 아이디어를 공유하고 발전시킬 수 있었다.
  • 여러 디자이너가 Figma 파일에서 즉석으로 아이디어를 결합하는 ‘디자인 잼’을 진행하며 창의적인 탐색을 활성화했다.

프로토타이핑과 스토리텔링의 통합

  • GitHub의 디자이너들은 Figma를 디자인 과정뿐 아니라 스토리텔링 전반에 활용했다.
  • 디자인은 사용자 경험의 이야기를 전달하는 과정이며, 프로토타입은 그 이야기를 실제 흐름으로 보여주는 수단으로 여겨졌다.
  • Figma에서는 다른 도구로 전환하지 않고 요소를 빠르게 배치하고 이동해 화면 흐름을 제안할 수 있었다.
  • 프로토타이핑의 진입 장벽이 낮아지면서 아이디어를 빠르게 표현하고 검증할 수 있었다.

협업 중심 문화와 도구의 결합

  • GitHub는 기능과 도구가 모두 협업을 촉진해야 한다는 문화를 갖고 있다.
  • Figma는 디자이너와 엔지니어가 함께 작업하도록 설계된 도구라는 점에서 GitHub의 문화와 잘 맞았다.
  • 디자인 시스템을 단순한 결과물이나 라이브러리가 아니라 여러 직군이 함께 개선하는 협업 공간으로 발전시켰다.
  • 웹 기반 편집, 실시간 공동 작업, API 자동화를 조합해 원격 협업의 물리적 한계를 줄였다.

GitHub 사례는 디자인 시스템의 효과를 높이려면 컴포넌트를 만드는 것뿐 아니라 누구나 쉽게 기여할 수 있는 워크플로를 함께 설계해야 한다는 점을 보여준다. 특히 웹 기반 협업 도구와 API 자동화를 결합하면 원격 팀에서도 디자인·개발 간 피드백과 반복 작업을 크게 줄일 수 있다.