Bulb, 디자인 시스템 Solar

Bulb는 여러 제품의 디자인·코드베이스·패턴이 서로 달랐던 문제를 해결하기 위해 Figma로 디자인 시스템 ‘Solar’를 구축했다. Figma의 브라우저 기반 협업과 팀 라이브러리를 활용해 디자이너뿐 아니라 개발자, 연구자, 콘텐츠 작성자, 이해관계자까지 디자인 과정에 참여하도록 만들었다. 핵심 전략은 제품 전반을 조사한 뒤 디자인 원칙을 세우고, 작고 단순한 컴포넌트와 패턴부터 점진적으로 표준화하는 것이었다.

Bulb의 성장과 디자인 조직의 과제

• 영국의 친환경 에너지 기업 Bulb는 18개월 동안 2,000% 성장했다.
• 디자인팀은 13명 규모로, 여러 제품 그룹에서 엔지니어·PM·리서처·콘텐츠 작성자와 협업했다.
• 기존 5~6개 제품은 서로 다른 에이전시가 제작해 다음 문제가 있었다.
  • 제품마다 다른 코드베이스 사용
  • 버튼, 체크박스, 드롭다운 등 디자인 패턴의 불일치
  • 시각적 브랜드는 통일되어도 실제 사용 경험은 일관되지 않음
• 새롭게 구성된 디자인팀은 디자인 시스템과 이를 지원할 도구를 처음부터 설계할 수 있었다.

Figma를 통한 개방적인 협업

• Bulb의 조직 문화는 사업 부문 간 협업과 투명성을 중시했으며, 디자인 도구도 이러한 문화를 지원해야 했다.
• 프로젝트별 ‘팟(pod)’에 디자이너, 리서처, 콘텐츠 작성자, 개발자가 함께 참여했다.
• Figma에서는 디자이너의 별도 허가 없이도 다른 직군이 파일을 열어 다음 작업을 수행할 수 있었다.
  • 디자인에 의견과 제안 남기기
  • 최신 작업 내용 확인
  • 아이디어 스케치와 브레인스토밍
  • 프로토타입 제작 및 검토
• 개발자와 디자이너가 설계 과정 전반에서 함께 논의하며 가이드라인과 품질 기준을 확인할 수 있었다.
• 비디자이너에게도 복잡하거나 위협적인 도구가 아니어서 사용자 리서처가 디자이너와 직접 아이디어를 발전시키기 쉬웠다.

Solar 디자인 시스템의 구축 과정

• 목표는 여러 제품에서 일관된 디자인을 보장하는 ‘단일 진실 공급원(single source of truth)’을 만드는 것이었다.
• Figma 팀 라이브러리를 활용하면 마스터 컴포넌트를 수정했을 때 이를 사용하는 여러 디자인에 변경 사항이 동기화됐다.
• 모든 파일을 브라우저에서 접근할 수 있어 빠르게 움직이는 팀에 적합했다.
• 구축 초기에는 Bulb의 각 제품 페이지를 스크린샷으로 수집해 Figma에 시각적 사이트맵을 만들었다.
• 이 사이트맵을 통해 제품별 차이와 불일치를 한눈에 파악했다.
• 여러 직군이 참여해 디자인 원칙을 정의하고, 이를 기준으로 컴포넌트와 디자인 패턴을 정리했다.
• 버튼·체크박스·드롭다운처럼 여러 버전이 존재하던 요소를 검토해 더 단순하고 견고한 패턴을 선택했다.
• 정리한 패턴은 8개 제품에 단계적으로 적용됐다.

작고 단순하게 유지하는 원칙

• 디자인 시스템은 처음부터 모든 상황을 포괄하려 하기보다 작은 범위에서 시작해야 한다.
• Solar는 다음과 같이 복잡도를 의도적으로 낮췄다.
  • 제한된 색상 팔레트
  • 적은 수의 디자인 패턴
  • 관리하기 쉬운 단순한 구조
• 시스템이 복잡해질수록 유지보수와 운영이 어려워지므로, 필요한 요소만 포함하고 지속적으로 단순화하는 것이 중요하다.
• 디자인 시스템을 여러 직군이 함께 만들면 실제 구현과 사용 맥락을 반영한 표준을 정립할 수 있다.

Bulb의 사례는 디자인 시스템을 단순한 UI 컴포넌트 모음이 아니라, 디자인·개발·리서치·콘텐츠가 함께 일하는 협업 기반으로 구축해야 한다는 점을 보여준다. 먼저 제품 간 불일치를 시각화하고, 명확한 원칙을 정한 뒤, 작은 패턴부터 라이브러리화해 점진적으로 확장하는 접근이 실용적이다.