메인 콘텐츠로 건너뛰기

Datadog가 Figma로 디자인 시스템을 확장하여 엔터프라이즈 플랫폼을 구축한 방법

리소스 카탈로그리소스 카탈로그

Datadog는 완벽한 통합 제품 플랫폼을 구축한 몇 안 되는 기업용 SaaS 회사로 지난 몇 년 동안 기하급수적으로 성장했습니다. 이러한 성공의 핵심 요소는 바로 제품 부서입니다. 디자인 부문 부사장 Stephen Boak, 스태프 제품 디자이너 Derek Howles, 제품 및 엔지니어링 팀원들은 확장 가능하고 모든 제품에서 통합된 경험을 구현하며, PDE(제품 디자인 엔지니어링)팀 간의 초기 협업을 촉진하는 제품 개발 프로세스를 구축하는 데 집중해 왔습니다. Figma와 FigJam은 Datadog 내부 디자인 시스템인 DRUIDS와 더불어 이 전략을 실행하는 데 급속도로 핵심적인 역할을 하게 되었습니다.

간략한 개요

  • 산업: 소프트웨어
  • 부문: 기업
  • 요금제: 엔터프라이즈
  • 시간 절약: 주당 100시간
  • 제품: Figma, FigJam
  • 통합: GitHub

Datadog는 클라우드 애플리케이션용 필수 모니터링 및 보안 플랫폼으로, 기업이 시스템을 보호하고 가동 중지를 방지하며 고객에게 최상의 사용자 경험을 제공할 수 있도록 지원합니다. 엔지니어는 매우 기술적인 문제를 해결하기 위해 Datadog 솔루션을 사용합니다. 따라서 이 플랫폼은 사용자가 아주 밀도 높은 데이터를 합리적인 방식으로 시각화하고 이해할 수 있도록 지원해야 합니다. 그리고 이 점이 바로 디자인 부문 부사장 Stephen Boak과 그의 팀에게 흥미로우면서 또한 도전적인 과제로 여겨집니다.

Datadog는 확실하게 통합 제품 SaaS 플랫폼을 구축했다고 주장할 수 있는 몇 안 되는 회사 중 하나이기도 합니다. 2019년 Datadog는 연간 반복 수익(ARR) 3억 3000만 달러로 상장했으며 당시에는 제품이 단 몇 개에 불과했습니다. 현재는 제품이 15개 이상의 늘어났고 연간 반복 수익도 15억 달러를 돌파했습니다. 이는 매년 최대 70%의 지속적인 성장과 130%의 순 반복 수익(NRR)을 의미하며, 몇몇 테크 기업만이 달성한 성과입니다. Datadog의 성공 비결 중 하나는 기하급수적인 성장을 지속하기 위해 완벽한 통합 제품 엔터프라이즈 플랫폼을 구축한 것입니다. 실제로 고객의 80%가 현재 Datadog 제품을 두 가지 이상 사용하고 있습니다.

Datadog는 몇 가지 핵심 원칙을 바탕으로 이 사업을 실현했습니다.

  • 효율성과 확장을 고려한 제품 개발 프로세스
  • 통합 플랫폼을 구성하는 모든 솔루션과 연결된 사용자 경험
  • 제품관리팀과 엔지니어링팀 간의 강력한 초기 단계 협업
  • 지속적으로 최소기능제품(MVP)을 개발하고 초기 수정 주기를 유지하여 고객의 빠른 피드백을 기반으로 제품을 신속하게 개선

하지만 하룻밤 사이에 이 원칙이 자리 잡은 것은 아닙니다. Datadog 제품팀은 확장 가능한 디자인 및 제품 개발 프로세스를 구축하여 이 접근 방식의 잠재력을 최대한 실현해야 했습니다.

성장통과 제품 개발 프로세스 확장이 필요하다는 깨달음

2016년 Datadog는 통합 제품 기업으로 전환하기 시작했습니다. 제품군을 지속적으로 확장하겠다는 큰 계획을 가지고 있었지만 몇 년이 지나지 않아 디자인팀과 엔지니어링팀은 확장에 따른 문제를 발견하기 시작했습니다. 제품 디자이너인 Derek Howles는 “초고속으로 성장하는 다른 많은 회사들과 마찬가지로 우리도 디자인 과정에서 똑같은 어려움을 직면했습니다. 다양한 UI 컴포넌트와 변형을 모두 기억할 수 없는 지경에 이르렀고, 합당한 이유 없이 이 요소들이 다르게 표현되고 있었어요.”라고 설명했습니다.

Datadog의 엔지니어들은 표 형식 데이터 표시, 검색 및 필터링, 시간 범위 선택, 드롭다운 메뉴에서 옵션 선택과 같은 핵심 패턴 코드를 반복해서 복제해야 했습니다. 재사용 가능한 컴포넌트가 없었고 이러한 요소를 맥락과 동작에서 차이가 있는 여러 제품에서 확장하려고 시도하면서 제품 개발이 특히 어려워졌습니다.

디자인팀과 엔지니어링팀 간의 관계와 협업 프로세스는 바람직하지 않았습니다. 두 그룹 모두 프로젝트 인계 과정에서 작업이 중복되었으며 서로를 이해하려고 노력하는 데 너무 많은 시간을 쓰고 있었습니다. 어떤 상황에서는 디자인에 엔지니어링이 조기에 포함되지 않아 제품 출시가 크게 지연되기도 했습니다.

이로 인해 Datadog가 더 중요한 제품 문제를 해결하고 고객 피드백을 처리하는 데 사용할 수 있는 시간도 줄어들었습니다.

뛰어난 통합 제품 플랫폼을 구축하는 데 필요한 “연결성”

무엇보다도 가장 중요한 것은 Datadog가 전체 제품군에서 친숙하고 신뢰할 수 있는 환경을 구축하고자 한 것이었습니다. 어떤 제품을 사용하든 고객은 Datadog는 플랫폼 전반에서 동일하게 뛰어난 경험을 누릴 수 있어야 했습니다.

Stephen은 이를 “일관성보다는 연결성”이라고 부르는데, 사업 규모가 커지면 이를 잘 수행하기가 매우 어렵습니다. 표 데이터로의 이동, 시간별 로그 검토와 같은 표준 사용자 인터랙션은 모든 상황에서 조금씩 다르게 작동할지라도 전체 플랫폼에서 재사용할 수 있고 친숙해야 합니다. Stephen은 “플랫폼 UX에서 고객이 제품에서 사용하는 동작을 학습하게 됩니다. 학습이 끝나면 동작을 재현할 수 있고, 해당 UX를 여러 제품에서 재현할 수 있습니다.”라고 설명합니다.

이 새로운 원칙은 매우 가치 있는 것이지만 동시에 더 빠르게 작업하고 수정하면서 새로운 기능을 출시하기 어렵게 만들었습니다.

DRUIDS—대규모로 운영되는 제품 개발 프로세스 구축

Derek과 몇몇 엔지니어링 팀원들은 이러한 연결성을 확장하고 구축하는 데 도움이 되는 디자인 시스템의 토대를 마련하기 시작했습니다. 그러나 엔지니어링팀이 얼마나 빨리 제품을 시장에 출시하고 프로토타입및 최소한의 기능을 갖춘 제품에 대한 고객 피드백을 수집할 수 있는지 파악하고 나서야 진정한 깨달음의 순간이 찾아 왔습니다.

Stephen은 “Datadog 제품 전반에서 공통의 사용자 경험을 위한 컴포넌트, 디자인 시스템, 보일러플레이트 코드를 사용하면 최소기능제품(MVP)을 아주 빠르게 출시하여 소중한 고객 피드백을 받을 수 있습니다.”라고 설명합니다.

Datadog는 Figma와 자체 디자인 시스템을 사용하여 프로토타입당 10시간 그리고 주당 약 100시간을 절약했습니다. 전략의 효과가 확실하게 드러났습니다.

Datadog는 디자인 시스템을 구축하는 데 주력했고, 그 결과 DRUIDS가 탄생했습니다. DRUIDS는 Figma를 디자인 플랫폼으로 사용하고, 관련 코드를 GitHub에 통합했습니다. 디자인 시스템은 최대한 엔지니어링 친화적으로 구축되었으며, 여러 상태와 변형이 상응하는 문서와 함께 상세히 설명되었습니다. 그러자 아주 멋지게 완성되었습니다.

Datadog의 디자인 시스템Datadog의 디자인 시스템
Datadog의 디자인 시스템

Figma와 FigJam을 통한 제품팀의 결속

Datadog의 전체 제품팀(제품 관리자, 디자이너, 엔지니어)은 제품 개발 프로세스 전반에서 Figma와 FigJam을 사용하여 협업합니다. 제품 관리자와 디자이너가 FigJam에서 아이디어 구상, 사용자 피드백 수집, 브레인스토밍을 시작합니다. 디자인이 더욱 가시화되고 구체화되면 Figma로 이동합니다. 이곳에서 엔지니어와 디자이너가 협업하여 집중적으로 수정 작업이 이뤄집니다.

FigJam에서 Datadog의 제품팀이 OKR(목표 및 핵심 결과 지표)을 브레인스토밍하는 모습FigJam에서 Datadog의 제품팀이 OKR(목표 및 핵심 결과 지표)을 브레인스토밍하는 모습
Datadog의 제품팀의 OKR(목표 및 핵심 결과 지표) 브레인스토밍

그런 다음 디자인을 DRUIDS 디자인 시스템에 연결하고 관련 코드와 일치시킨 후 출시합니다. 이 과정의 마지막 단계에서는 검토, 제품 비평, 모형 협업이 모두 FigJam에서 이루어집니다. Steve는 “FigJam은 디자인의 시작과 끝을 모두 아우르며 책임자가 간단한 솔루션으로 가시성을 확보하여 피드백을 제공할 수 있게 해줍니다.”라고 설명합니다.

Datadog는 또한 Figma의 개방형 플랫폼을 사용하여 플러그인을 구축함으로써 효율성을 높일 수 있었습니다. 이들은 컴포넌트를 다크 모드로 즉시 전환하는 플러그인, 관련성 높은 사용자 테스트를 위해 관련 고객 데이터를 디자인 및 프로토타입에 통합하는 플러그인, 디자이너가 Datadog 플랫폼에 나타날 수 있는 900개 이상의 통합 로고 중 하나를 추가할 수 있는 플러그인을 구축했습니다.

Datadog의 맞춤형 플러그인 중 한 가지를 사용해 단 몇 번의 클릭으로 데이터를 디자인에 가져올 수 있습니다.

마지막으로 Stephen은 Figma 엔터프라이즈의 고급 관리자 기능을 사용하여 많은 시간을 절약하고 있습니다.

“관리 포털, 단일 로그인(SSO) 및 자동화된 프로비저닝, 그리고 Figma의 보안 기능 덕분에 관리가 정말 쉬워졌고, 더 전략이 필요한 프로젝트에 집중할 시간을 확보할 수 있었습니다.”

Datadog 성공의 핵심 요소 중 하나인 DRUIDS 구축

Datadog는 이제 제품을 더 빠르게 출시할 수 있습니다. 반복적이고 단순한 작업은 모두 디자인 시스템에서 처리하며, 더 복잡한 문제를 해결하는 데 더 많은 시간을 할애할 수 있게 되어 디자이너의 만족도도 높아졌습니다.

디자이너와 엔지니어는 각자 가능한 시간에 여러 제품의 모든 상태와 사용자 인터페이스를 검토하여 제품의 기술적 측면을 빠르게 파악할 수 있어 온보딩 속도를 높일 수 있습니다.“Datadog는 복잡한 플랫폼이고 이해해야 할 새로운 기술적인 개념이 많습니다. 하지만 탄탄하게 문서화되어 있기 때문에 제품 자체와 사용 사례를 실제로 이해하는 데 더 많은 시간을 할애할 수 있습니다.”

15개 이상의 제품을 보유할 만큼 성장하고 제품팀의 규모도 훨씬 더 커졌지만 Datadog의 제품 디자이너들은 초기 단계에서 디자인을 더 자주 디자인을 개선하며 중요한 동작과 관련해서 엔지니어링팀과 동일한 언어로 의견을 공유하고 있습니다. 이를 통해 더 나은 제품 개발과 팀 간의 강한 협력을 도모하고 있습니다. Derek은 팀이 크게 성장했음에도 불구하고 초기의 강력한 제품 개발 문화를 그대로 유지하고 있다는 점에서 이를 자랑스럽게 생각합니다.

하지만 가장 중요한 것은 큰 문제를 해결하는 데 더 많은 시간을 할애할 수 있게 됨으로써 Datadog의 디자이너와 엔지니어가 Datadog 플랫폼을 사용하는 비즈니스에 엄청난 영향을 미치는 기술적이고 복잡한 문제 해결에 집중할 수 있게 되었다는 점입니다.

엔터프라이즈 B2B SaaS 회사를 디자인하고 모든 제품에서 규모에 맞게 구현하는 것은 Stephen과 그의 팀에 엄청난 보람을 안겨주었습니다. “수십억 명의 사용자로 Datadog의 가치를 측정하지는 않습니다. 대신, 우리는 Datadog 제품을 사랑하고 매일 사용하며 업무에 열정을 가진 수많은 조직을 위해 복잡하고 기술적인 문제를 해결하고 있습니다.”

그리고 그 증거는 Datadog가 지금까지 다양한 제품을 통해 이룬 놀라운 성장에서 발견할 수 있습니다.

디자인 시스템 102

디자인 시스템의 기본 사항을 이해하고, 디자인 시스템이란 무엇인지, 어떻게 작동하는지, 그리고 디자인 방식을 어떻게 변화시킬 수 있는지 알아보세요.

보고서 읽기

Figma로 디자인을 효과적으로 확장하는 방법

위대한 디자인은 제품과 브랜드를 차별화할 수 있는 잠재력을 가지고 있지만, 혼자서는 위대한 디자인을 만들 수 없습니다. Figma는 빠르고 보다 포용적인 디자인 워크플로우로 제품팀을 하나로 모읍니다.

Figma가 조직의 디자인 확장에 어떻게 도움이 되는지 자세히 알아보려면 양식을 입력하세요.

Figma가 제공하는 지원은 다음과 같습니다.

  • 아이디어 구상부터 제작, 디자인 구축까지 디자인 작업의 모든 단계를 한 곳에서 해결
  • 전사적으로 공유되는 디자인 시스템으로 디자인 워크플로우 가속화
  • 접근성 높은 웹 기반의 간편한 플랫폼으로 제품팀 작업 과정에서 포용성 강화

Figma와 소통하기

“제출”을 클릭하면 서비스 이용 약관개인정보 처리방침에 동의하는 것으로 간주됩니다.