GitHub는 디자인과 엔지니어링 사이의 장벽을 허물고 제품 개발 속도를 높이기 위해 Figma를 중심으로 한 협업 문화를 재구축했습니다. 과거의 정적인 '핸드오프(Handoff)' 방식에서 벗어나 디자이너와 개발자가 실시간으로 소통하는 '지속적 협업' 모델을 도입하여 워크플로우를 혁신했습니다. 이를 통해 디자인 시스템인 Primer의 일관성을 유지하면서도 접근성이 보장된 고품질의 사용자 경험을 신속하게 구현하고 있습니다.

디자인과 엔지니어링의 가교: Dev Mode 활용

엔지니어들이 Figma의 'Dev Mode'를 통해 디자인 의도를 코드 관점에서 즉각적으로 파악하고 필요한 자산을 직접 추출합니다.
디자인 파일 내의 픽셀 정보를 일일이 묻는 대신, 실제 구현에 필요한 CSS 속성과 디자인 토큰을 엔지니어가 직접 확인하여 소통 비용을 획기적으로 줄였습니다.
정적인 가이드 문서를 보는 것이 아니라 활성화된 캔버스 내에서 협업함으로써 설계와 구현 사이의 간극을 최소화합니다.

Primer 디자인 시스템의 체계화

GitHub의 오픈 소스 디자인 시스템인 'Primer'를 Figma와 긴밀하게 통합하여 모든 제품에 일관된 UI/UX를 적용합니다.
Figma의 변수(Variables)와 스타일 기능을 활용하여 다크 모드, 고대비 모드 등 다양한 테마를 디자인 단계에서 동적으로 테스트하고 적용할 수 있게 했습니다.
디자인 시스템의 구성 요소가 코드 구성 요소와 1:1로 매칭되도록 관리하여 시스템의 확장성과 유지보수 효율을 높였습니다.

접근성(Accessibility)을 고려한 선제적 설계

제품 개발의 마지막 단계에서 접근성을 점검하던 관행을 버리고, 디자인 초기 단계부터 접근성 전문가와 협업하는 'Shift-Left' 전략을 채택했습니다.
Figma 내에서 색상 대비, 스크린 리더 흐름 등을 미리 검증할 수 있는 플러그인과 프로세스를 도입하여 모든 사용자에게 평등한 경험을 제공합니다.
디자인 단계에서 결정된 접근성 속성이 개발 단계까지 누락 없이 전달되도록 체계화된 체크리스트를 활용합니다.

소통 중심의 '메이커' 문화 구축

디자이너와 엔지니어가 기획 초기 단계부터 같은 화면을 공유하며 기술적 제약 사항과 디자인의 가능성을 함께 탐색합니다.
서로의 전문 영역을 존중하면서도 '메이커(Maker)'로서의 공통 목표를 공유하여 불필요한 재작업(Rework)을 줄이고 제품의 완성도를 높입니다.
Figma의 코멘트 기능과 실시간 편집 기능을 활용하여 피드백 루프를 단축시키고 의사결정 속도를 가속화했습니다.

조직의 규모가 커질수록 디자인과 개발의 정렬(Alignment)은 어려워지지만, 디자인 시스템을 공통 언어로 삼고 협업 도구를 적극 활용하면 이를 극복할 수 있습니다. 단순한 도구의 도입을 넘어 디자인을 코드의 연장선으로 보는 문화적 전환이 뒷받침될 때 비로소 진정한 협업의 시너지가 발생합니다.