techlist.io
KREN
figma

핀터레스트 디자인 (새 탭에서 열림)

figmadesign-systemsrest-apidata-analyticsdashboardcomponent-adoption

Pinterest의 Gestalt 디자인 시스템은 코드 사용량만으로는 전체 채택 현황을 파악하기 어렵다고 보고, Figma 안에서 디자이너들이 컴포넌트를 얼마나 사용하는지 측정하는 ‘디자인 채택률’을 도입했다. 코드 지표는 웹 플랫폼에 한정되고 실제 디자인 단계보다 늦게 나타나는 반면, Figma 지표는 웹·iOS·Android를 아우르며 초기 사용 신호를 제공한다. 이를 위해 Figma REST API 기반의 대시보드 FigStats를 만들어 컴포넌트 사용량을 전체 디자인 요소 대비 상대적으로 분석했다.

코드 채택률만으로는 부족한 이유

  • Gestalt은 웹뿐 아니라 iOS와 Android용 디자인 컴포넌트도 제공하지만, 기존 코드 채택률은 웹 컴포넌트만 측정했다.
  • 새 컴포넌트가 실제 제품 코드에 도입되기까지 시간이 걸리므로, 코드 지표에는 채택 지연이 발생한다.
  • 디자이너가 컴포넌트를 사용하지 않으면 개발자도 해당 컴포넌트의 존재나 필요성을 알기 어렵다.
  • 따라서 디자인 시스템 채택은 제품 코드 단계가 아니라 디자인 단계부터 시작된다는 관점이 필요하다.

Figma에서 디자인 채택을 측정하는 이유

  • Pinterest 디자이너들의 작업은 Figma에서 이루어지므로, 디자인 시스템 사용 현황을 가장 이른 단계에서 확인할 수 있다.
  • Figma에서 Gestalt 컴포넌트가 사용되면 웹·iOS·Android 전반에서 향후 코드 컴포넌트를 구축할 근거로 활용할 수 있다.
  • 디자이너가 실제로 컴포넌트를 사용하는지 확인하면 디자인 시스템 투자 효과와 플랫폼별 개발 우선순위를 설명하기 쉬워진다.

단순한 인스턴스·삽입 횟수의 한계

  • Figma 기본 라이브러리 분석은 팀별 컴포넌트 인스턴스 수와 삽입 횟수를 제공한다.
  • 예를 들어 버튼이 수십만 번 사용됐다는 사실은 알 수 있지만, 그 수치가 건강한 채택 수준인지는 판단하기 어렵다.
  • 대형 파일에 노드가 1,000개 있고 Gestalt 컴포넌트가 10개뿐이라면, 사용량은 존재하지만 전체 디자인의 1%에 불과하다.
  • 따라서 절대적인 사용 횟수보다 전체 디자인 요소 중 디자인 시스템 컴포넌트가 차지하는 비율이 더 유용한 지표가 된다.

FigStats와 상대적 채택률

  • Gestalt 팀은 Figma REST API를 사용해 FigStats라는 내부 대시보드를 구축했다.
  • 대시보드는 Figma 파일을 분석해 어떤 Gestalt 컴포넌트가 어느 팀과 파일에서 사용되는지 시각화한다.
  • 핵심은 컴포넌트 인스턴스 수 자체가 아니라, 전체 노드 또는 디자인 요소 중 Gestalt 컴포넌트가 차지하는 비중을 계산하는 것이다.
  • 이를 통해 파일 규모가 서로 달라도 디자인 시스템이 실제 작업에 얼마나 깊이 적용됐는지 비교할 수 있다.
  • 컴포넌트별 사용 현황을 보면 널리 사용되는 컴포넌트와 거의 사용되지 않는 컴포넌트를 구분할 수 있으며, 개선이나 교육이 필요한 영역도 찾을 수 있다.

채택 데이터의 활용

  • 채택률은 디자인 시스템 팀이 제공하는 가치와 투자 대비 효과를 리더십에 설명하는 공통 언어가 된다.
  • 사용률이 낮은 컴포넌트는 문서화 부족, 발견성 문제, API나 시각적 설계의 불편함 때문일 수 있다.
  • 디자인 단계에서 사용이 확인된 컴포넌트는 향후 코드 컴포넌트로 구현할 때 우선순위를 정하는 근거가 된다.
  • 코드 채택률과 디자인 채택률을 함께 보면 디자인에서 제품 출시까지의 채택 흐름과 지연 구간을 파악할 수 있다.

Figma 분석 기능의 확장

  • 글 작성 당시 Figma 기본 분석은 주로 컴포넌트 인스턴스와 삽입 데이터를 제공했다.
  • 이후 Figma Library Analytics는 스타일과 변수 데이터까지 포함하도록 확장되었고, Enterprise 고객은 Library Analytics API를 활용할 수 있게 됐다.
  • 따라서 현재는 컴포넌트뿐 아니라 스타일·변수까지 포함해 조직 전체의 디자인 시스템 채택을 분석할 수 있다.

디자인 시스템의 성공을 평가할 때 단순한 사용 횟수만 보지 말고, 전체 디자인 대비 사용 비율과 플랫폼별 채택 흐름을 함께 측정하는 것이 좋다. 특히 Figma의 디자인 채택률과 코드 채택률을 연결하면 어떤 컴포넌트가 실제 제품으로 이어지는지 더 정확하게 판단할 수 있다.