AI를 사용하여 디자인 시스템을 확장한 Decagon

고객 서비스는 AI가 변화시킬 차세대 산업이며, Decagon은 이를 위한 플랫폼을 구축하고 있습니다. 3년 만에 Decagon의 AI 에이전트는 음성, 채팅, 이메일을 아우르며 수십 년간 고객 서비스로 대표되던 티켓 대기열과 대기 시간을 대체했습니다. Decagon이 CNBC Disruptor 50에 선정된 비결은 단순히 제품 개발뿐만 아니라 구축 방식 덕분이기도 합니다.

대규모 확장을 위한 고품질 디자인 시스템 구축

Decagon과 같은 AI 기반 기업에서는 디자인에서 코딩으로 이어지는 과정이 매우 빠르지만, 그만큼 문제가 발생하기 쉽습니다. 신뢰할 수 있는 출력을 생성하기 위해 코딩 에이전트는 정확한 입력값을 필요로 합니다. 하지만 디자인 시스템이 없다면 모든 컴포넌트가 주관적인 판단에 맡겨지게 되고, 이는 확장성에 한계를 초래합니다. Jennifer Xu가 Decagon에 합류했을 당시, 디자인 시스템은 전무했습니다. 단지 빠르게 성장하는 제품과 그 속도에 맞춰 움직이는 팀만 있었을 뿐이었습니다. 플랫폼 전반의 일관성이 부족하여 기업 고객에게 제공해야 할 완성도가 떨어졌고, 디자인과 개발 팀 간의 잦은 의견 교환으로 인해 시간과 노력을 낭비해야 했습니다. Decagon에서 Deco라는 디자인 시스템을 구축하기 위해 디자이너와 엔지니어들은 처음부터 긴밀하게 협력했습니다. Jennifer는 이렇게 말합니다 "처음부터 다양한 예외 상황과 기존 코드에 존재하는 요소들을 고려할 수 있었습니다." 이는 나중에 미루면 비용이 많이 들고, 나중에 다시 검토하기는 더 어려운 질문들을 처음부터 차근차근 해결해 나가는 것을 의미했습니다. 예를 들어, 포커스 모드에서는 어떤 동작이 나타나는가? 각 컴포넌트는 비활성화, 읽기 전용, 오류, 경고등 어떤 상태여야 하는가? 입력 예시를 사용할 것인가 말 것인가? 등의 질문이 가능했습니다.

그 결과, Decagon 조직 전체에서 사용할 수 있는 Figma 기반의 라이브러리가 탄생했습니다. 이 라이브러리에는 수백 개의 컴포넌트, 스타일, 변수가 포함되어 있으며, 여러 팀의 플랫폼 전반에 걸쳐 대부분의 사용 사례를 포괄합니다. Figma의 라이브러리 분석에 따르면 30일 동안 수만 건의 삽입이 기록되었는데, 이는 많은 사람들이 Figma를 사용하고 있다는 증거입니다. Jennifer는 이렇게 말합니다. "적절히 구축된 라이브러리 덕분에 스타일이나 구현 방식에 대해 논쟁할 필요가 없어졌습니다. 엔지니어는 어떤 버튼이나 테이블을 사용해야 하는지 명확하게 알 수 있습니다. 또한 공통된 용어를 사용할 수 있다는 장점도 있습니다. 디자이너인 저는 엔지니어와 매우 유사한 기본 요소에 기반하여 작업할 수 있기 때문에 제품을 개발하거나 흐름을 구상할 때 소통이 훨씬 수월해집니다."

Deco는 조직 전체에 공개되어 디자이너가 처음부터 컴포넌트를 구축하는 대신 기존 컴포넌트를 활용하여 새로운 화면을 만들 수 있도록 지원합니다. Jennifer는 또한 이렇게 말을 이어갑니다. "개발자가 전반적인 디자인 목표에 맞춰 작업하는 것도 훨씬 쉬워졌습니다. 빠른 출시를 목표로 하는 만큼 모든 것이 일관성 있게 유지되도록 하는 것이 중요하며, 디자인 시스템은 단일 정보 소스를 제공하는 훌륭한 방법입니다."

디자인과 코드 간의 완전한 연결

코딩 에이전트는 개발자처럼 사양을 해석하지 않습니다. 주어진 정보만을 가지고 작업합니다. 제공된 정보가 일관성이 없다면, 결과물에도 그대로 반영됩니다. Decagon에서는 이전에는 디자이너가 사양을 내보내고, 개발자가 이를 해석하고, 검토 중에 불일치가 발견되고, 이 과정이 반복되는 익숙한 과정이었습니다. 하지만 Figma MCP 서버로 이러한 상황이 바뀌었습니다.

Decagon 엔지니어링 팀은 디자인 시스템의 컴포넌트를 Storybook으로 옮긴 후, 코딩 에이전트가 디자인을 구현할 때 정확한 컴포넌트를 사용할 수 있도록 스킬을 개발했습니다. 또 다른 스킬을 통해 디자이너는 새로운 컴포넌트를 추가하여 Figma와 코드의 일관성을 지속적으로 유지할 수 있습니다. "저희 에이전트는 Figma MCP를 활성화했기 때문에 사양, 코드, 캔버스가 서로 주고받는 과정 없이 하나의 루프 안에서 관리됩니다"라고 Jennifer는 말합니다.

Figma MCP를 통해 Deco에 연결하면서 반복 작업 속도가 빨라졌습니다. 이제 코딩 에이전트는 Figma에서 직접 읽어와 고품질의 초기 디자인 요소를 생성할 수 있습니다. Jennifer는 다시 이렇게 말합니다. "MCP 덕분에 Figma 링크를 코딩 에이전트에 복사해서 붙여넣기만 하면 디자인 컨텍스트를 가져오는 기능뿐만 아니라 디자인 시스템 컴포넌트에 매핑하는 기능까지 활용할 수 있습니다. 따라서 세부적인 반복 작업을 많이 하지 않고도 디자인에 매우 가까운 고품질의 디자인 요소를 생성할 수 있습니다."

고객 중심주의 구체화

Decagon의 제품 로드맵 중 약 70%는 고객 의견에서 직접 도출됩니다. 이는 단순히 Decagon의 철학일 뿐만 아니라, 팀의 제품 개발 방식의 핵심이기도 합니다. Decagon의 제품 책임자인 Bihan Jiang은 이렇게 말합니다. "고객 팀과 직접 로드맵을 논의하는 세션을 진행하여 출시 예정인 기능이 고객의 요구를 충족하는지 확인합니다. Figma를 활용한 모형과 프로토타입 제작은 이러한 과정에서 매우 중요한 역할을 합니다. Bihan은 다음과 같이 덧붙입니다. “Figma Make 같은 도구 및 저희가 사용하는 모든 시스템과의 연결 기능을 통해 개발 중인 제품의 가능성을 한층 높일 수 있습니다."

요구 사항을 수집하고 최종 제품을 제시하는 대신, 이제 팀은 10개의 서로 다른 프로토타입을 제작하여 10명의 고객에게 보여줄 수 있습니다. Bihan은 이렇게 말합니다. "그 결과 훨씬 더 나은 제품을 훨씬 더 빠르게 개발할 수 있습니다."

Decagon은 고객에게 정량적 데이터와 정성적 데이터(예: 고객 만족도 점수, 다양한 채널에서의 대화 속 감정 분석)를 모두 이해할 수 있도록 인터랙티브 대시보드, 지표, AI 기반 인사이트를 제공합니다. Decagon의 한 PM은 Make를 사용하여 고객의 요구 사항을 기반으로 다양한 데이터 세트를 표시하도록 새로운 그래프를 프로토타입으로 제작하고 페이지를 새로 디자인합니다. Jennifer 이렇게 설명합니다. "PM이 '이 페이지 스타일로 만들어 주세요'라고 요청하고 Figma 스크린샷을 첨부하면, 전체 플랫폼 맥락에서 도구와 그래프를 고려할 수 있습니다. 그런 다음 엔지니어링 팀 그리고 고객 담당 팀과 논의하여 많은 엔지니어링 및 디자인 리소스를 투자하기 전에 변경 사항이 실제로 유용한지 확인할 수 있습니다."

팀이 인터랙티브 차트를 더 깔끔하고 사용자 친화적으로 개선하고자 할 때도 동일한 원칙이 적용되었습니다. PM은 기존 차트를 Make에 입력하고 원하는 변경 사항을 설명한 다음 개발자에게 전달했습니다. "디자이너에게 아이디어를 전달하고, 디자이너가 모형을 만들고, 엔지니어가 이를 기반으로 개발하는 기존 방식보다 훨씬 간단했어요. 개발 시간을 단축시켜줬죠"라고 Jennifer는 말합니다.

고품질 프로토타입 덕분에 팀은 처음부터 시각적인 매체를 활용하여 작업할 수 있었고, 문서에서 와이어프레임으로 아이디어를 옮기는 과정을 거칠 필요가 없었습니다. Jennifer는 이렇게 말합니다. "디자이너인 저는 시각적으로 생각하고, 분석 작업을 할 때도 시각적인 문제가 중요해요. 문서가 아니라 그림으로 보는 거죠. 처음부터 최종 제품의 형태로 생각하는 것이 유용해요." 구체적인 결과물을 만들어 고객에게 조기에 선보이려는 이러한 본능은 Decagon의 핵심 가치로 자리 잡았습니다. "브레인스토밍 과정에서 Figma를 활용하는 것이 우리 문화의 중요한 부분이에요. 덕분에 이전보다 더 빠르고 높은 품질의 결과물을 내놓기 위해 협업할 수 있게 되었죠."

Decagon은 단순히 플랫폼 자체만이 아니라 구축 방식에도 AI를 중심에 둡니다. 디자인 시스템을 통해 팀 규모가 커지더라도 일관된 디자인 품질을 유지할 수 있습니다. MCP는 디자인과 코드를 일관되게 유지하여 변환 과정에서 발생하는 오류를 방지합니다. 또한 Figma Make는 누구나 아이디어를 테스트해 볼 수 있도록 시각적 사고를 지원합니다. "이 새로운 디자인 환경은 정말 흥미로우며, 우리가 새로운 환경의 최전선에 있다고 생각합니다. 덕분에 고품질 제품을 매우 빠르게 출시할 수 있습니다"라고 Jennifer는 말합니다. Decagon에게는, 장인정신을 희생하지 않고 속도를 높이는 것이 진정한 경쟁력입니다.