design-system-analytics

2 개의 포스트

figma3분 읽기큐레이션 요약

디자인 시스템의 가치 측정하기

디자인 시스템은 반복 자산을 재사용하게 해 디자이너가 제작·검색·세부 의사결정에 쓰는 시간을 줄여준다. Figma의 실험에서는 관련성이 높고 최신 상태인 디자인 시스템을 사용할 때 디자이너의 작업 완료 시간이 그렇지 않을 때보다 **34% 빨랐다**. 다만 이는 과제에 직접 적용 가능한 디자인 시스템을 사용한 조건의 결과이므로, 실제 조직에서 얻을 수 있는 최대 시간 절감에 가까운 수치로 해석해야 한다. ## 디자인 시스템의 가치와 정량화 필요성 - 디자인 시스템은 제품 전반에서 반복적으로 사용하는 자산을 위한 **단일 기준점(single source of truth)** 역할을 한다. - Figma 엔터프라이즈 고객의 약 **75%**가 조직 전체에서 디자인 시스템을 활용하고 있다. - 디자인 시스템은 구축보다도 지속적인 유지·관리와 실제 사용 현황 파악이 어렵다. - 사용 데이터를 분석하면 디자인 시스템 팀이 어떤 라이브러리와 컴포넌트를 개선하거나 폐기할지 더 정확히 판단할 수 있다. - Figma는 이러한 분석을 지원하기 위해 라이브러리 사용 추이와 컴포넌트별 사용 현황을 제공하는 Design System Analytics를 공개했다. ## 잘 유지된 디자인 시스템이 시간을 줄이는 이유 디자이너가 디자인 시스템의 자산을 사용하면 다음 작업을 피할 수 있다. - 컴포넌트나 화면 요소를 처음부터 다시 제작하는 작업 - 기존 디자인 파일을 뒤져 이미 존재하는 자산을 찾는 작업 - 글꼴, 배치, 색상 등 세부적인 시각적 결정을 매번 새로 내리는 작업 - 색상 선택이나 스타일 조정 같은 반복적인 미세 의사결정 이렇게 절약된 시간이 누적되면 디자이너는 전략적이고 창의적인 업무에 더 집중할 수 있다. ## 실험 설계: 디자인 시스템 사용 여부 비교 Figma 데이터 과학팀은 동일한 디자이너가 디자인 시스템이 있을 때와 없을 때 어떻게 달라지는지 비교했다. - 금융 계정 통합 앱을 배경으로 두 가지 과제를 설계했다. - 특정 계정의 거래 내역과 추세를 보여주는 화면 제작 - 사용자 프로필에 새 금융 계정을 연결하는 흐름 설계 - 모든 참가자는 두 과제를 모두 수행했지만, 한 과제에서만 최신 디자인 시스템을 사용할 수 있었다. - 다른 과제에서는 디자인 시스템 대신 참고용 과거 디자인 파일이 제공됐다. - 두 과제의 난이도와 완료 시간이 개인별로 비슷하도록 구성해, 각 디자이너가 자신의 통제군 역할을 하게 했다. - 과제 순서에 따른 편향을 줄이기 위해 참가자마다 수행 순서를 번갈아 배정했다. - 참가자에게 자산을 미리 익힐 시간을 충분히 제공했다. - 프롬프트는 사용자가 수행해야 할 목표만 설명하고, 디자이너가 어떤 화면을 만들어야 하는지는 지정하지 않았다. - 품질 기준을 인위적으로 통일하지 않기 위해 참가자가 스스로 적절한 완료 시점을 판단하도록 했으며, 과제별 완료 시간을 측정했다. ## 실험 결과: 작업 시간 34% 단축 - 디자인 시스템에 접근할 수 있었던 참가자는 그렇지 않은 경우보다 목표를 **34% 더 빠르게 완료**했다. - 이 결과는 디자인 시스템의 자산이 과제에 직접 적용 가능하고, 최신 상태이며, 실제 작업과 관련성이 높을 때 얻어진 효과다. - 따라서 현실의 모든 작업에서 항상 34%가 절약된다는 뜻이라기보다, 디자인 시스템이 가장 효과적으로 작동하는 조건에서의 상한선에 가깝다. - Figma는 이 비율을 실제 디자인팀의 인력과 일정에 적용해 시간과 비용 절감 규모로 환산하려 했지만, 제공된 글은 해당 계산 과정 중간에서 끝난다. ## 실용적인 적용 방향 디자인 시스템의 투자 효과를 확인하려면 단순히 라이브러리를 만들어 두는 것보다 최신성·관련성·사용률을 지속적으로 관리해야 한다. 라이브러리 분석을 통해 자주 사용되는 컴포넌트와 거의 쓰이지 않는 자산을 구분하고, 실제 작업에 맞지 않는 요소를 개선하는 것이 시간 절감 효과를 높이는 방법이다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

디자인 시스템을 뒷받침

Figma는 디자인 시스템의 사용 데이터를 분석하면 팀이 실제로 어떤 라이브러리와 컴포넌트를 사용하는지 파악하고, 이를 바탕으로 시스템을 지속적으로 개선할 수 있다고 주장합니다. Design System Analytics는 라이브러리 사용 추이, 라이브러리 간 채택률, 개별 컴포넌트의 삽입·분리 현황을 제공해 디자인 시스템 운영을 정성적 피드백에서 정량적 개선으로 확장합니다. 다만 목적은 디자이너를 감시하는 것이 아니라 사용 패턴을 이해하고 더 나은 컴포넌트와 라이브러리를 만드는 데 있습니다. ## 디자인 시스템 사용 데이터를 분석하는 이유 - Figma는 클라우드 기반 브라우저 도구이므로 디자이너들이 디자인 시스템을 어떻게 사용하는지 데이터를 통해 파악할 수 있습니다. - Design System Analytics를 사용하면 다음 정보를 확인할 수 있습니다. - 라이브러리 사용량의 시간별 추이 - 여러 라이브러리 간 사용량 비교 - 개별 컴포넌트의 사용, 삽입, 분리 현황 - 분석 결과는 조직 내 누구나 확인할 수 있어 디자이너와 관리자가 필요한 리포트를 직접 살펴볼 수 있습니다. - Figma는 분석 기능을 설계할 때 디자이너의 모든 행동을 통제하거나 감시하지 않는 방향을 강조했습니다. ## 사용되지 않거나 개선이 필요한 컴포넌트 찾기 - 라이브러리와 컴포넌트별 사용량을 보면 어떤 요소가 실제 업무에 기여하는지 파악할 수 있습니다. - Microsoft의 Fluent 디자인 시스템은 다음과 같은 질문에 데이터를 활용합니다. - 거의 사용되지 않는 컴포넌트는 무엇인가? - 자주 분리(detach)되는 컴포넌트는 무엇인가? - 유지보수가 불필요하거나 개선이 필요한 컴포넌트는 무엇인가? - Google Material Design 팀은 버튼 컴포넌트가 가장 많이 사용되는 동시에 가장 많이 분리되는 현상을 발견했습니다. - 이를 통해 기존 버튼 컴포넌트가 지나치게 복잡하다는 점을 파악하고, 더 단순한 대체 컴포넌트를 추가하는 개선으로 이어졌습니다. - 즉, 높은 사용량만 보는 것이 아니라 높은 분리율도 컴포넌트 설계가 실제 요구와 맞지 않는다는 신호로 활용할 수 있습니다. ## 라이브러리 채택과 마이그레이션 추적 - 두 라이브러리의 사용량을 시간에 따라 비교해 새 라이브러리로의 전환이 제대로 진행되는지 확인할 수 있습니다. - Squarespace는 기존 공유 라이브러리를 Auto Layout 기반의 새 라이브러리로 교체하는 과정에서 이 기능을 활용하려 했습니다. - 분석 화면에서는 다음과 같은 정보를 확인할 수 있습니다. - 기간별 컴포넌트 삽입 수 - 구버전과 신버전 라이브러리의 사용량 비교 - 새 라이브러리를 적극적으로 사용하는 상위 팀 - 컴포넌트별 전체 인스턴스 수, 최근 삽입 수, 분리 수 - 이를 통해 새 라이브러리의 채택률을 측정하고, 구버전 라이브러리의 폐기(deprecation)를 관리할 수 있습니다. - 예시 화면에는 최근 60일간의 삽입 추이와 팀별 사용 비중, 개별 버튼 컴포넌트의 인스턴스·삽입·분리 통계가 표시됩니다. ## 개별 컴포넌트 사용 방식 파악 - 단순히 라이브러리 전체의 사용량만 보는 것을 넘어 개별 컴포넌트가 실제로 어떻게 활용되는지 조사할 수 있습니다. - Pluralsight는 공유 컴포넌트가 팀원들의 작업에서 어떻게 사용되는지 파악하는 데 Analytics를 활용하려 했습니다. - 조직 내 모든 디자이너와 관리자가 분석 결과와 사용 사례를 확인할 수 있으므로: - 특정 컴포넌트의 실제 활용 사례를 빠르게 찾을 수 있습니다. - 다른 팀의 사용 방식을 참고할 수 있습니다. - 디자인 시스템 팀이 개선 우선순위를 정하기 쉬워집니다. ## 디자인 초기 단계에서 영향 측정 - 기존에는 디자인 시스템 도입 효과를 개발 단계에서 측정하는 경우가 많았습니다. - Design System Analytics를 이용하면 제품 개발이 개발 단계에 도달하기 전, 디자인 과정에서 시스템이 얼마나 채택되고 있는지도 확인할 수 있습니다. - 따라서 디자인 시스템 팀은 다음을 더 일찍 파악할 수 있습니다. - 제품팀이 공통 컴포넌트를 실제로 사용하고 있는지 - 새 라이브러리가 설계 작업에 자연스럽게 도입되고 있는지 - 특정 팀이나 프로젝트가 시스템에서 이탈하고 있는지 - 이는 개발 단계의 준수 여부를 사후 점검하는 방식에서, 디자인 단계부터 채택을 높이는 방식으로 관점을 바꿉니다. ## 기능의 변화 - 원문은 2019년 발표 내용을 다루지만, 안내문에 따르면 2025년 2월 기준 Figma Library Analytics는 컴포넌트뿐 아니라 스타일과 변수 데이터도 지원합니다. - Organization 및 Enterprise 고객에게 관련 데이터가 제공되며, Enterprise 고객은 Library Analytics API를 통해 확장된 기능을 사용할 수 있습니다. - 따라서 현재 기능은 원문에 설명된 초기 버전보다 범위가 넓어졌을 수 있습니다. 실무적으로는 사용량이 낮은 컴포넌트를 무조건 제거하기보다, 삽입 수와 분리율을 함께 분석하는 것이 좋습니다. 또한 라이브러리 마이그레이션 시 팀별 채택률과 구버전 사용량을 지속적으로 추적하면 디자인 시스템 개선과 폐기 계획을 데이터에 근거해 운영할 수 있습니다.

원문 읽기(새 탭에서 열림)