figma2023년 2월 2일

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

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의 디자인 채택률과 코드 채택률을 연결하면 어떤 컴포넌트가 실제 제품으로 이어지는지 더 정확하게 판단할 수 있다.

dashboardfigmadesign-systemsrest-api+2

datadog2016년 10월 27일

동료 응원하기: Dat (새 탭에서 열림)

데이터독(Datadog)의 엔지니어들은 6일 동안 약 850km를 달리는 초장거리 레이스에 출전한 동료를 응원하기 위해 실시간 레이스 모니터링 대시보드를 구축했습니다. 이 프로젝트는 웹 스크래핑 기술과 데이터독의 지표 수집 기능을 결합하여 외부 데이터를 대시보드에 시각화하는 과정을 보여줍니다. 이를 통해 기술적인 도구가 단순한 시스템 관제를 넘어 커뮤니티의 결속과 응원을 위한 도구로 어떻게 활용될 수 있는지 증명했습니다. ### 데이터 추출 및 파싱 대시보드 구축의 첫 단계는 대회 공식 웹사이트에서 선수의 실시간 데이터를 가져오는 것이었습니다. - 파이썬(Python)의 인기 라이브러리인 **Requests**를 사용하여 웹페이지의 HTML 코드를 수집하는 간단한 크롤러를 구현했습니다. - 수집된 HTML 데이터는 **BeautifulSoup** 라이브러리를 통해 파싱되어 현재 순위, 총 주행 거리 등 필요한 수치 데이터로 변환되었습니다. - 대회 사이트가 일반 텍스트 형태의 HTML로 데이터를 제공했기에 복잡한 API 없이도 손쉽게 데이터를 확보할 수 있었습니다. ### StatsD를 활용한 지표 전송 확보된 데이터는 데이터독 에이전트와 StatsD를 통해 실시간 지표(Metrics)로 변환되었습니다. - **dog.gauge** 메서드를 사용하여 세 가지 핵심 지표를 생성했습니다: 주행 거리(`runner.distance`), 현재 순위(`runner.ranking`), 경과 시간(`runner.elapsed_time`). - 각 지표에는 `name` 태그를 부여하여 여러 러너의 데이터를 구분하고 개별적으로 필터링할 수 있도록 설계했습니다. - 파이썬 스크립트를 통해 주기적으로 데이터를 갱신함으로써 실시간에 가까운 데이터 흐름을 유지했습니다. ### 대시보드 구성 및 시각화 수집된 지표들은 뉴욕과 파리 사무실에서 누구나 볼 수 있는 인터랙티브 대시보드로 구성되었습니다. - 단순히 숫자만 나열하는 것이 아니라 실시간 비디오 스트리밍과 재미를 위한 GIF 이미지를 포함하여 시각적 즐거움을 더했습니다. - 거리 차이(Lead)와 남은 시간 등 레이스 상황을 한눈에 파악할 수 있는 유의미한 지표들을 배치했습니다. - 이를 통해 전 세계 사무실의 동료들이 원격으로 레이스 상황을 공유하며 선수를 응원할 수 있는 환경을 조성했습니다. 만약 특정 이벤트나 실시간 경주 데이터를 모니터링하고 싶다면, 이 사례와 같이 파이썬의 웹 스크래핑 라이브러리와 데이터독의 Gauge 지표 기능을 결합해 보시기 바랍니다. 데이터가 HTML 형태로 존재하기만 한다면, 어떤 외부 활동이라도 전문적인 인프라 모니터링 도구를 통해 실시간 대시보드로 구현할 수 있습니다.

dashboarddatadogpythonmetrics+3