BT가 통신 산업을 계속 (새 탭에서 열림)

Zoom은 제품 개발 과정의 일관성과 효율성을 높이기 위해 Figma를 도입하여 디자인 워크플로우를 전면 개편했습니다. 파편화된 도구들을 Figma라는 단일 플랫폼으로 통합함으로써, 디자이너와 엔지니어 간의 실시간 협업 체계를 구축하고 디자인 시스템의 관리 효율을 극대화했습니다. 이를 통해 Zoom은 글로벌 성장에 발맞추어 디자인 품질을 유지하면서도 배포 속도를 획기적으로 높일 수 있었습니다.

파편화된 도구 체계에서 단일 플랫폼으로의 전환

  • 기존에는 기획, 디자인, 프로토타이핑, 개발 전달(Handoff) 단계에서 각기 다른 도구를 사용하여 정보의 파편화가 발생했습니다.
  • Figma를 도입함으로써 모든 디자인 자산을 하나의 공간에서 관리하게 되었으며, 팀원들이 최신 버전의 디자인을 즉각적으로 확인할 수 있게 되었습니다.
  • 클라우드 기반의 실시간 협업 기능을 통해 피드백 루프를 단축하고, 물리적 위치에 상관없이 동시 작업이 가능한 환경을 조성했습니다.

디자인 시스템을 통한 시각적 일관성 확보

  • 'Zoom Design System'을 Figma 라이브러리로 구축하여 모든 제품군에서 일관된 UI/UX를 제공합니다.
  • 컴포넌트(Components)와 변체(Variants) 기능을 적극 활용해 버튼, 아이콘, 입력창 등 공통 요소를 규격화하고 재사용성을 높였습니다.
  • 오토 레이아웃(Auto Layout) 기능을 통해 다양한 화면 크기와 언어 설정에 유연하게 대응하는 반응형 디자인을 효율적으로 제작합니다.

개발자와의 협업 효율 및 핸드오프 개선

  • 디자인에서 개발로 넘어가는 과정에서의 모호함을 줄이기 위해 개발자 모드(Dev Mode)를 활용하여 정확한 수치와 코드를 전달합니다.
  • 디자이너가 컴포넌트를 업데이트하면 해당 컴포넌트를 사용하는 모든 파일에 즉시 반영되므로, 개발자가 최신 사양을 확인하기 위해 소통하는 시간을 낭비하지 않게 되었습니다.
  • Figma 내에 기획서와 기술 문서를 함께 배치하여, 엔지니어가 디자인의 의도와 비즈니스 로직을 한눈에 파악할 수 있도록 구성했습니다.

워크플로우 최적화와 자동화 플러그인 활용

  • 반복적인 작업을 줄이기 위해 다양한 Figma 플러그인을 도입하고, 자체적인 워크플로우에 최적화된 도구들을 사용합니다.
  • 브랜칭(Branching) 기능을 통해 메인 디자인 시스템을 해치지 않으면서 새로운 아이디어를 실험하고 검토한 뒤 병합하는 체계적인 프로세스를 운영합니다.
  • 디자인 자산의 버전 관리가 용이해짐에 따라 과거 의사결정 과정을 추적하거나 필요 시 이전 상태로 복구하는 작업이 간소화되었습니다.

성공적인 디자인 워크플로우 구축을 위해서는 단순히 좋은 도구를 사용하는 것을 넘어, '단일 진실 공급원(Single Source of Truth)'으로서의 디자인 시스템을 정립하는 것이 중요합니다. Figma의 컴포넌트 라이브러리와 협업 기능을 적극 활용하여 디자인과 코드 사이의 간극을 줄이고, 팀 전체가 동일한 디자인 언어를 공유하는 환경을 구축할 것을 추천합니다.