dashboard-design

How Datadog uses Datadog to gain visibility into the Datadog user experience (새 탭에서 열림)

Datadog은 정성적인 사용자 인터뷰를 보완하기 위해 자사의 모니터링 도구인 RUM(Real User Monitoring)과 로그를 직접 활용하여 디자인 의사결정에 필요한 정량적 데이터를 확보합니다. 이른바 '개밥 먹기(Dogfooding)' 전략을 통해 디자이너들은 실제 사용자의 행동 패턴을 정밀하게 분석하고, 이를 바탕으로 UI/UX의 복잡성을 줄이거나 기능을 고도화합니다. 결과적으로 자사 제품을 디자인 도구로 활용함으로써 데이터에 기반한 효율적인 개선과 팀 간의 원활한 협업을 이끌어내고 있습니다. ## 고정폭 글꼴(Monospace Font) 최적화 로그, 소스 코드 등 구조화된 데이터를 표시할 때 글자 폭이 일정한 고정폭 글꼴은 가독성과 레이아웃 예측 가능성 측면에서 매우 중요합니다. * 기존에는 사용자의 시스템 폰트에 의존했으나, 복잡한 테이블 구조에서 레이아웃 깨짐을 방지하기 위해 표준 폰트 도입이 필요했습니다. * Web API의 `Document.font` 인터페이스와 CSS Font Loading API를 활용하여 사용자의 브라우저에 실제로 로드된 폰트 데이터를 RUM으로 수집했습니다. * 수집된 데이터를 분석하여 가장 많은 사용자가 보고 있는 폰트와 유사한 시각적 크기를 가진 'Roboto Mono'를 최종 선정했습니다. * 배포 후에도 RUM 대시보드를 통해 모든 사용자에게 의도한 폰트가 정상적으로 적용되는지 검증했습니다. ## 사용자 상호작용 데이터를 통한 DraggablePane 단순화 패널 크기를 조절하는 DraggablePane 컴포넌트의 핸들은 크기가 작음에도 불구하고 너무 많은 제어 기능이 포함되어 사용자에게 혼란을 줄 우려가 있었습니다. * 어떤 기능이 실제로 유용한지 판단하기 위해 컴포넌트 내부에 커스텀 로거를 설치하여 개별 클릭 이벤트를 추적했습니다. * 데이터 분석 결과, 핸들에 위치한 최소화 및 최대화 버튼의 사용률이 극히 저조하다는 사실을 발견했습니다. * 시각적 노이즈를 줄이기 위해 해당 버튼들을 제거하는 대신, 핸들을 더블 클릭하면 동일한 기능이 수행되도록 상호작용 방식을 개선했습니다. ## 입력 오류 분석을 통한 시간 범위 구문 확장 사용자가 직접 텍스트를 입력해 시간 범위를 설정하는 기능에서, 시스템이 해석하지 못하는 구문을 파악하여 사용자 편의성을 높이고자 했습니다. * Datadog Logs를 사용하여 사용자가 입력한 구문 중 시스템이 해석에 실패한 '유효하지 않은 입력' 데이터를 전수 조사했습니다. * 데이터 분석을 통해 많은 사용자가 당시 지원되지 않던 "weeks" 키워드(예: last 1 week)를 빈번하게 입력하고 있음을 식별했습니다. * 분석된 패턴을 바탕으로 구문 해석 로직을 업데이트한 결과, 기능 출시 초기 약 10%에 달했던 입력 오류율을 5~6% 수준으로 즉시 낮추는 성과를 거두었습니다. 실제 사용자 데이터를 기반으로 한 디자인은 추측이 아닌 확신을 제공합니다. 디자이너가 직접 모니터링 도구를 활용해 사용자 피드백의 빈틈을 정량적으로 메우고, 이를 대시보드로 공유하여 엔지니어와 소통하는 프로세스는 제품의 완성도를 높이는 가장 강력한 방법 중 하나입니다.

Datadog이 Dat (새 탭에서 열림)

Datadog의 프로덕트 디자이너들은 사용자 경험을 개선하기 위해 인터뷰와 같은 정성적 조사뿐만 아니라, 자사 도구를 직접 활용하는 '도그푸딩(Dogfooding)'을 통해 정량적 데이터를 수집합니다. RUM(Real User Monitoring)과 로그 분석을 통해 실제 사용자의 행동 패턴을 파악함으로써, 디자인 가설을 검증하고 데이터에 기반한 의사결정을 내리고 있습니다. 이러한 접근 방식은 사용자 입장에서 제품을 이해하고 협업 효율을 높이는 데 큰 기여를 합니다. ## 데이터 기반의 고정폭 글꼴(Monospace Font) 선정 * 로그, 스택 트레이스, 소스 코드 등 정보 밀도가 높은 데이터를 일관되게 보여주기 위해 특정 고정폭 글꼴을 도입할 필요성이 제기되었습니다. * 기존에는 시스템 폰트에 의존했기 때문에, 새로운 폰트 도입 시 발생할 수 있는 레이아웃의 시각적 변화를 최소화하고자 사용자들이 현재 가장 많이 보고 있는 폰트가 무엇인지 파악해야 했습니다. * CSS Font Loading API와 Datadog RUM을 결합하여 사용자의 브라우저에 실제 로드된 폰트 정보를 수집하고 대시보드화했습니다. * 분석 결과 'Roboto Mono'를 최종 후보로 선정하여 앱 전체에 적용했으며, 배포 후에도 RUM을 통해 의도한 대로 폰트가 출력되는지 성공적으로 검증했습니다. ## 사용자 인터랙션 분석을 통한 컴포넌트 간소화 * 패널 크기를 조절하는 'DraggablePane' 컴포넌트의 핸들이 너무 좁아 다양한 기능을 담기에 UI가 복잡해지는 문제가 있었습니다. * 어떤 기능이 실제로 사용되는지 확인하기 위해 커스텀 로거를 심어 각 버튼(최소화, 최대화 등)의 클릭 빈도를 추적했습니다. * 로그 분석 결과 최소화 및 최대화 버튼의 사용량이 거의 없다는 사실을 발견하고, 해당 버튼들을 제거하는 대신 핸들 더블 클릭 이벤트로 기능을 대체하여 UI를 간소화했습니다. ## 입력 오류 데이터 분석을 통한 구문 지원 확장 * 사용자가 자유롭게 시간 범위를 텍스트로 입력할 수 있는 'DateRangePicker'를 개발했으나, 초기에는 지원하는 구문이 한정적이어서 사용자 의도를 정확히 파악하지 못하는 경우가 많았습니다. * 시스템이 해석하지 못한 '잘못된 입력(invalid input)' 데이터와 해당 입력이 발생한 페이지, 국가 등의 정보를 로그로 수집하여 패턴을 분석했습니다. * 분석 결과 다수의 사용자가 'weeks'라는 키워드를 포함한 구문(예: last 1 week)을 입력하고 있음을 확인했습니다. * 해당 키워드를 지원하도록 구문 분석 로직을 업데이트한 결과, 입력 에러율이 기존 10%에서 5~6%로 즉각 감소하는 성과를 거두었습니다. 사용자 경험(UX) 디자인 과정에서 데이터 모니터링 도구를 활용하는 것은 단순히 수치를 확인하는 것을 넘어, 디자이너가 개발자와 같은 언어로 소통하고 객관적인 근거로 제품을 개선할 수 있게 해줍니다. 특히 실시간 로그와 에러 데이터를 추적하는 환경을 구축하면 사용자 피드백을 기다리지 않고도 제품의 미비점을 선제적으로 발견하여 수정할 수 있습니다.

Cheering on coworkers: Building culture with Datadog dashboards (새 탭에서 열림)

6일 동안 850km를 달리는 동료의 도전을 응원하기 위해, 실시간 레이스 데이터를 수집하고 Datadog 대시보드로 시각화한 프로젝트 사례를 소개합니다. 파이썬을 활용한 웹 스크래핑과 Datadog의 메트릭 전송 기능을 결합하여, 멀리 떨어진 사무실에서도 실시간으로 선수의 순위와 주행 거리를 확인할 수 있는 모니터링 환경을 구축했습니다. ### 웹 스크래핑을 통한 데이터 추출 * 레이스 이벤트 웹사이트에서 일반 HTML 형태로 제공되는 주자들의 통계 데이터를 소스로 활용했습니다. * Python의 **Requests** 라이브러리를 사용하여 웹페이지의 HTML 코드를 가져오는 크롤러를 구현했습니다. * 가져온 HTML 데이터에서 실시간 순위, 총 주행 거리 등의 핵심 정보를 추출하기 위해 **BeautifulSoup** 라이브러리를 사용해 파싱 작업을 수행했습니다. ### StatsD를 활용한 메트릭 전송 * 추출한 데이터를 Datadog 에이전트와 **StatsD**를 통해 시스템으로 전송했습니다. * 선수의 주행 거리(`runner.distance`), 현재 순위(`runner.ranking`), 경과 시간(`runner.elapsed_time`)을 각각 **Gauge** 타입의 메트릭으로 정의했습니다. * 각 메트릭에 주자의 이름을 태그(`tags=["name:%s"]`)로 추가하여, 대시보드에서 특정 주자의 데이터를 쉽게 필터링하고 구분할 수 있도록 구성했습니다. ### 대시보드 시각화 및 결과 * 수집된 메트릭을 기반으로 실시간 영상 스트리밍과 재미를 위한 GIF 파일, 그리고 주요 지표들이 포함된 종합 대시보드를 제작했습니다. * 뉴욕과 파리 사무실 곳곳에 이 대시보드를 공유하여, 전 직원이 실시간으로 레이스 상황을 지켜보며 동료를 원격으로 응원할 수 있는 환경을 만들었습니다. 이 사례는 IT 인프라뿐만 아니라 외부의 실시간 데이터를 Datadog과 연결하여 조직 내 이벤트를 흥미롭게 공유하고 구성원들의 참여를 끌어낼 수 있음을 잘 보여줍니다. 데이터 수집부터 시각화까지의 과정이 비교적 간단하므로, 조직 내 다양한 온/오프라인 이벤트를 추적하는 데 응용해 볼 것을 추천합니다.