새로운 시대를 위한 웹 (새 탭에서 열림)

Figma는 2024년 브랜드 리프레시를 계기로 figma.com의 웹 디자인 시스템을 전면 점검했다. 기존 시스템은 유사한 컴포넌트가 지나치게 많고, 색상과 타이포그래피가 확장된 브랜드와 다양한 콘텐츠를 충분히 지원하지 못했다. 사용 현황을 데이터로 분석해 컴포넌트를 단순화하고, 일관된 디자인 원칙과 재사용 가능한 템플릿을 마련함으로써 더 유연하고 미래 지향적인 웹 시스템을 구축했다.

브랜드와 웹 시스템을 함께 재정비한 배경

• 2020년의 figma.com은 새로운 디자인 도구를 소개하는 데 초점이 맞춰져 있었다.
• 2024년의 Figma는 여러 제품 팀을 위한 플랫폼으로 확장되었고, 웹사이트 역시 제품 생태계와 다양한 사용자 요구를 보여줘야 했다.
• 기존 시스템에는 다음과 같은 문제가 있었다.
  • 서로 조금씩만 다른 컴포넌트가 많아 적절한 컴포넌트를 선택하기 어려움
  • 변화하는 브랜드 색상 팔레트를 수용할 만큼 색상 체계가 유연하지 않음
  • 다양한 콘텐츠 유형을 지원하기에 타이포그래피 체계가 충분히 최적화되지 않음
• Figma Sans와 새로운 색상·일러스트레이션 스타일을 도입한 브랜드 리프레시는 웹 디자인 시스템을 재설계하는 계기가 되었다.

컴포넌트 사용 현황을 데이터로 감사

• Web Experience 팀은 스크립트를 작성해 컴포넌트가 다음과 같이 어떻게 사용되는지 분석했다.
  • 어떤 컴포넌트가 사용되는가
  • 각 컴포넌트가 얼마나 자주 사용되는가
  • 어떤 페이지에서 사용되는가
• 이 분석을 통해 실제 사용량과 필요성을 기준으로 컴포넌트 구조를 단순화할 수 있었다.
• 디자인 시스템을 직관이나 선호만으로 관리하지 않고, 실제 페이지와 팀의 사용 패턴을 근거로 개선한 점이 핵심이다.

Flex 컴포넌트의 48개 변형을 24개로 축소

• 가장 널리 사용되던 기본 구성 요소인 ‘Flex’ 컴포넌트는 옵션이 추가되면서 48개 변형까지 늘어나 있었다.
• 사용 사례를 조사한 결과, 기능을 유지하면서도 변형 수를 24개로 줄일 수 있었다.
• 중복되거나 활용도가 낮은 선택지를 제거해 속성 패널을 더 집중된 형태로 만들었다.
• 예를 들어 가운데 정렬 텍스트 옵션을 없애고, 웹 시스템 전체에서 왼쪽 정렬을 기본값으로 정했다.
• 그 결과:
  • 디자이너와 콘텐츠 제작자가 선택해야 할 옵션이 줄어듦
  • 컴포넌트 사용법이 쉬워짐
  • 웹페이지 전반의 시각적 일관성이 높아짐
  • 새로운 브랜드 언어와도 더 잘 맞게 됨

템플릿과 조합 가능한 빌딩 블록

• 단순히 기존 컴포넌트를 줄이는 데 그치지 않고, 자주 쓰는 페이지 레이아웃을 템플릿으로 만들었다.
• 여러 방식으로 조합할 수 있는 “building block” 컴포넌트 세트도 구축했다.
• 이를 통해 팀은:
  • 일반적인 페이지 구조를 더 빠르게 만들고
  • 필요한 구성 요소를 조합해 다양한 페이지를 제작하며
  • 별도의 커스텀 작업 없이도 Figma 브랜드에 맞는 결과물을 만들 수 있게 되었다.
• 컴포넌트 선택지를 무작정 늘리는 대신, 검증된 핵심 요소와 조합 방식을 제공하는 접근이다.

실용적인 시사점

• 디자인 시스템을 정기적으로 감사하고 실제 사용 데이터를 확인해야 한다.
• 유사한 변형이 계속 늘어난다면 기능을 유지하면서 옵션을 통합할 수 있는지 검토할 필요가 있다.
• 명확한 기본값과 일관된 원칙을 정하면 사용자의 선택 부담을 줄일 수 있다.
• 공통 레이아웃 템플릿과 조합형 컴포넌트를 함께 제공하면 확장성과 제작 속도를 모두 높일 수 있다.