듀오톤이 Figma로 모든 워크플로우를 통합해 프로젝트당 80시간 이상을 절감한 방법

소요 시간: 6분

2018년 서울에서 설립된 듀오톤은 UX/UI 디자인과 디자인 시스템을 전문으로 하는 60인 규모의 디지털 디자인 에이전시입니다. 금융, 커머스, 모빌리티, 콘텐츠 등 다양한 산업의 기업들과 파트너십을 맺고 디지털 프로덕트를 만들어 왔습니다.

5년 전 전사적으로 Figma를 도입한 이후, Figma는 듀오톤이 일하는 방식 그 자체가 되었습니다. 기획과 문서 작업부터 디자인 시스템 설계, 비주얼 프로덕션까지 — 팀의 모든 워크플로우는 Figma 생태계 안에서 이루어집니다. 그 결과:

• 프로젝트 핸드오프 단계의 스펙 문서 작성 시간 90% 절감, 프로젝트당 80시간 이상 확보
• 비주얼 작업 소요 시간 20% 단축
• 수 시간 걸리던 보고서 검수 시간을 5~10분으로 단축

흩어진 문서에서 하나의 캔버스로

과거 듀오톤은 여러 이해관계자가 여러 문서를 오가며 작업하는 방식이었습니다. 이로 인해 버전 충돌이나 핸드오프 누락 같은 비효율이 끊이지 않았습니다. Figma로 모든 작업을 일원화한 이후, 클라이언트와의 소통 방식은 완전히 달라졌습니다. 모든 의사결정과 논의가 캔버스 위에서 바로 이루어지면서 커뮤니케이션과 핸드오프가 한층 효율적으로 변했습니다.

개발팀과의 핸드오프 역시 한층 효율적으로 바뀌었습니다. 예전에는 디자인을 마무리한 후 별도의 스펙 가이드 문서를 만들어 엔지니어에게 전달해야 했습니다. Dev Mode가 도입되면서 이 과정 자체가 사라졌습니다. 엔지니어는 디자인 파일 안에서 어떤 요소든 클릭만으로 컴포넌트 구조, 토큰 값, 폰트 스펙, 그리고 Web, iOS, Android용 코드 스니펫까지 바로 확인할 수 있게 되었습니다.

그 결과, 핸드오프 단계에서 스펙 문서를 별도로 작성하는 데 들어가던 시간은 90% 줄었고, 프로젝트당 80시간 이상을 절약하고 있습니다. UI에 보이는 모습과 실제 구현 사이에 간극이 있을 때는 디자이너가 해당 화면 옆에 직접 어노테이션을 달아 의도를 설명하거나 엣지 케이스를 표시합니다. Jira, Linear, Storybook 같은 도구와 연동되면서 디자인 단계의 변경 사항이 그대로 개발팀의 작업으로 흐르게 되었습니다.

제품의 일관성을 지키며 함께 진화하는 디자인 시스템

클라이언트들이 듀오톤에 가장 많이 요청하는 과제 중 하나는 자사 제품 관리를 위한 디자인 시스템 구축입니다. 디자인 시스템은 제품이 여러 팀과 플랫폼, 그리고 시간을 거쳐 확장되더라도 흔들림 없이 지탱해 주어야 하기에 기대치가 높은 작업입니다. 듀오톤은 그동안 모빌리티, 금융, 커머스, 콘텐츠 등 다양한 산업에 걸쳐 디자인 시스템을 구축하고 유지해 왔으며, 그 중심에는 언제나 Variables(변수)와 컴포넌트 아키텍처가 있었습니다.

이러한 접근 방식이 진가를 발휘한 사례 중 하나가 한 자동차 인포테인먼트 프로젝트입니다. 차량 모델마다 디스플레이 해상도가 달랐고, 라이트 모드와 다크 모드는 주행 환경 — 주간/야간, 또는 터널 진입 같은 상황 — 에 따라 자연스럽게 전환되어야 했습니다. 요구사항이 매우 복잡한 프로젝트였습니다.

듀오톤은 차량 해상도(가로/세로)와 버튼 높이, 모서리 곡률까지 모든 요소를 Variables로 정의하고, 컴포넌트는 사이즈별(Small, Medium, Large)로 분리해두었습니다. 덕분에 마스터 라이브러리의 토큰 값 몇 개만 조정하면 모든 화면이 즉시 업데이트되었습니다. 과거 같았으면 모든 화면을 처음부터 다시 그리는 데 수 주가 걸렸을 작업입니다.

UI를 넘어, 비주얼 프로덕션까지 Figma의 영역을 확장하다

Figma의 AI 이미지 편집 도구가 진화하면서, 듀오톤은 일러스트레이션과 프로모션 그래픽 같은 비주얼 작업의 상당 부분도 Figma 안으로 옮겨 왔습니다.

비트맵 이미지를 자동으로 벡터로 변환하는 Vectorize, 피사체를 배경에서 분리하는 Remove Background 같은 기능 덕분에, 예전에 별도의 전문 도구를 오가며 처리해야 했던 작업들이 사라졌습니다. 노출, 색온도, 그림자, 전체적인 분위기 같은 에셋의 마무리 톤앤매너 작업까지 캠페인의 나머지 작업이 진행되는 같은 Figma 파일 안에서 조정할 수 있게 되었습니다.

그 결과, 캠페인 비주얼 한 편을 컨셉 단계부터 최종 결과물까지 하나의 캔버스 위에서 완성할 수 있게 되었고, 파일을 내보내고 도구를 전환하는 데 들어가던 시간은 20% 이상 줄었습니다.

비주얼과 UI 작업이 같은 캔버스 위에서 이루어지면서 협업 속도 자체가 빨라졌습니다. 모든 디자이너가 하나의 단일 진실 공급원(Single Source of Truth)을 기반으로 작업하고, 실시간으로 피드백을 주고받으며, 여러 시안을 나란히 놓고 비교 검토할 수 있게 되었습니다. 클라이언트 리뷰 역시 마찬가지입니다. 작업 중인 상태 그대로를 공유하고, 즉각적인 피드백을 받아 그 자리에서 수정한 뒤 다시 보여주는 사이클이 가능해졌습니다.

커스텀 플러그인으로 스튜디오 전체의 생산성을 확장하다

듀오톤은 에셋 검색부터 디자인 시스템 유지보수까지, 다양한 플러그인을 활용해 Figma 안에서 할 수 있는 일의 범위를 꾸준히 넓혀 왔습니다. 커뮤니티에 공개된 플러그인이 팀의 필요에 딱 맞지 않을 때는 Figma의 Plugin API를 활용해 필요한 것을 직접 만듭니다. 한 명의 디자이너가 만든 일회성 솔루션이, 스튜디오 전체의 생산성을 끌어올리는 공용 자산으로 확장되는 것이 듀오톤의 방식입니다.

최근 사례 중 하나는 클라이언트 산출물 검수를 위한 AI 기반 맞춤법 검사 플러그인입니다. 한 건의 보고서는 수십 장의 슬라이드로 구성되고, 프로젝트가 진행되는 동안 텍스트가 계속 바뀌기 때문에, 예전에는 여러 명의 디자이너가 동시에 검수에 매달려야 했습니다. 지금은 플러그인이 캔버스 위 모든 텍스트 레이어를 한 번에 스캔해 수정 사항을 제안해주기 때문에, 손이 많이 가던 수동 검수가 클릭 한 번으로 끝납니다.

그 결과, 보고서 한 건당 QA에 들어가던 시간이 평균 3시간에서 5분으로 줄었고, 납품 직전에 발견되어 급하게 수정해야 하는 사항도 눈에 띄게 줄어들었습니다.

팀의 누구든 반복적이고 번거로운 작업에 부딪히면 직접 플러그인을 만들어 해결하도록 장려하는 문화가 자리 잡았습니다. 실제로 팀원들은 짧으면 며칠 만에 결과물을 만들어냅니다. 최근에는 한 주니어 디자이너가 업데이트 로그를 자동으로 정리해주는 플러그인을 만들었습니다. 손으로 복사·붙여넣기를 반복하며 들어가던 시간과, 그 과정에서 발생하던 작은 실수들이 함께 사라졌습니다.

그 결과, 스튜디오 안에는 맞춤법 검사기, 자동 페이지 넘버링, 그래프 생성기, 업데이트 로그 컴파일러 등 디자이너들이 직접 만들고, 유지하고, 확장해 나가는 커스텀 플러그인 라이브러리가 점점 풍성해지고 있습니다. Figma 위에서 무언가를 직접 만들어 나가는 이 문화는 스튜디오가 일하는 방식 자체를 다시 빚어 놓았습니다. 듀오톤에게 Figma는 더 이상 디자인이 이루어지는 도구가 아닙니다. 듀오톤이 일하는 방식을 확장해주는 플랫폼입니다.

Figma MCP, AI에게 디자인 시스템 컨텍스트를 전달해 유지보수를 간소화하다

디자인 시스템은 처음 만드는 일보다 유지하는 일에 더 많은 노력이 필요합니다. 라이브러리가 진화할수록 토큰을 정리하고, 네이밍 컨벤션을 맞추고, 파일 간 일관성을 확인하는 운영 부담도 함께 커집니다.

듀오톤은 Figma를 AI 에이전트에게 컨텍스트를 공급하는 단일 진실 공급원으로 전환하는 방식으로 이 문제를 풀었습니다. Figma의 MCP Server와 Plugin API를 통해 Claude와 Cursor 같은 AI 에이전트가 듀오톤의 라이브러리를 디자인 시스템의 전체 컨텍스트 — 컴포넌트, 변수, 토큰, 네이밍 컨벤션 — 와 함께 읽어 들이고, 일관성이 깨진 지점을 드러내고, 토큰화해야 할 값에 표시를 달고, 팀의 컨벤션에 맞는 수정안을 제안합니다. 팀이 제안 내용을 검토하고 승인하면, 그 결과가 Figma에 Variables로 반영됩니다. 며칠씩 걸리던 반복적인 시스템 정비 작업이 짧은 시간 안에 마무리됩니다.

팀이 제안된 내용을 검토하고 승인하면, 그 결과가 Figma에 Variables로 반영됩니다. 며칠씩 걸리던 반복적인 시스템 정비 작업이 짧은 시간 안에 마무리됩니다.

듀오톤은 이 패턴을 한 걸음 더 확장하고 있습니다. 현재 시범 운영 중인 워크플로우는 Figma 파일 안의 스펙과 컴포넌트 데이터를 바탕으로 AI가 기능 요구사항 문서(FRD)를 직접 작성하는 방식입니다. 캔버스 위의 시각적 결정들이 그 자체로 구조화된 정보가 되면서, 디자인, 프로덕트, 엔지니어링 사이를 오가던 핸드오프의 마찰도 함께 줄어듭니다. 같은 컨텍스트의 흐름을 활용해, AI가 처음부터 디자인 시스템과 일관된 새로운 디자인 결과물까지 만들어낼 수 있게 된 것은 덤입니다. 그 결과, 시스템 유지보수와 문서 작업이 AI의 몫으로 옮겨 갔고, 디자이너는 디자이너만이 할 수 있는 일에 집중하게 되었습니다.

기술이 발전함에 따라, 디자인 팀의 작업 방식에서 캔버스의 역할이 점점 더 중요해지고 있습니다. 피그마(Figma)의 개방적이고 유연한 생태계는 팀이 매일 반복하는 작업 흐름(워크플로우) 속에서 빠르게 진화하는 AI 기능을 즉시 활용할 수 있도록 단단한 기반을 제공합니다.

이에 따라 반복적인 수작업은 AI가 처리하고, 디자이너는 오직 인간만이 할 수 있는 일, 즉 사용자 경험을 설계하고 그 밑바탕에 깔린 창의적인 문제를 해결하는 데 더욱 집중할 수 있게 됩니다.

OPENPATH, 듀오톤의 전문성이 커뮤니티의 플레이북이 되는 곳

듀오톤은 실제 클라이언트 프로젝트에서 다듬어 온 노하우를, 자체 교육 플랫폼인 OPENPATH를 통해 디자인 커뮤니티와 나누고 있습니다. 사내 R&D 노력에서 출발한 OPENPATH는, 수년간의 프로젝트 경험이 쌓이며 이제 누구나 활용할 수 있는 공개 리소스로 자라났습니다.

커리큘럼은 단순한 도구 사용법을 넘어섭니다. Variables 기반의 정교한 디자인 시스템 구축, 플러그인을 활용한 프로세스 효율화, 그리고 AI 에이전트를 디자인 워크플로우와 연결하는 방법까지 — 실제 클라이언트 작업에서 검증된 방법론들을 다룹니다. OPENPATH가 디자이너에게 전해주는 것은 단순한 디자인 스킬이 아니라, 에이전시가 실제 결과물을 납품해야 할 때 어떻게 일하는지에 대한 답입니다. 주니어 디자이너는 입사 첫날부터 기여할 수 있는 단단한 기본기를 얻고 초기 경력에서 겪기 쉬운 시행착오를 줄일 수 있습니다. 시니어 디자이너는 도구와 디자인 자체의 역할이 진화하는 방향에 맞춰 새로운 일하는 방식을 익혀 갑니다.

듀오톤이 바라보는 목표는 단순히 돋보이는 스튜디오가 되는 것에 그치지 않습니다. 디자인 산업 전체의 기준을 끌어올리는 것 — 그것이 듀오톤이 향하는 방향입니다. 앞으로도 듀오톤은 Figma의 확장되는 생태계와 나란히 걸으며, 디자이너가 AI와 함께 일하면서도 본래 해야 할 일, 더 가치 있는 일에 더 집중할 수 있는 새로운 방식을 계속 열어 나갈 것입니다.