— Design Systems with Figma: Seoul, 듀오톤 <One for Everything> 세션 리뷰
“AI는 이제 실험을 넘어, 본격적인 활용의 시대로 들어왔습니다. 그만큼 제품을 만드는 속도는 더 빨라졌고, 경쟁은 더 치열해졌죠.”
이러한 변화 속에서 제품의 퀄리티와 속도를 동시에 잡기 위한 고민이 깊어지는 시점, 마침 ‘Design Systems with Figma: Seoul’ 행사가 열렸습니다. 수많은 디자이너와 개발자들이 어떻게 하면 협업의 효율을 높이고 파편화를 막을 수 있을지 답을 찾기 위해 모인 자리였는데요.
뜨거운 열기로 가득했던 이 행사에서, 듀오톤은 <One for Everything> 세션을 통해 LINE, 현대자동차, 삼성전자 등 대규모 기업의 시스템을 구축하며 얻은 ‘규모가 커져도 무너지지 않는 디자인 시스템 운영법’을 아낌없이 공유했습니다.
핵심은 단순하면서도 정확했습니다. 디자인 시스템을 단순한 “컴포넌트 모음”이 아니라, 조직 전체가 함께 움직이게 만드는 ‘거대한 운영 체계(OS)’로 다시 정의해야 한다는 것입니다 .
1. 완벽한 가이드가 있어도 시스템이 흔들리는 이유
"프라이머리 CTA(콜투액션) 버튼은 중요한 곳에만 사용해 주세요."
문장 자체는 명확해 보이지만, 작업자가 10명에서 100명, 1,000명으로 늘어날수록 ‘중요한 곳’에 대한 해석은 기하급수적으로 갈라집니다. 어떤 팀은 결제 버튼에만 쓰고, 어떤 팀은 상세 페이지 주요 액션 전반에 쓰는 식이죠.
각 팀은 규정을 어기려는 것이 아닙니다. 각자의 비즈니스 맥락에서 최선의 UX를 고민한 결과를 내놓은 것이죠. 하지만 시스템이 이 다양한 요구를 제때 수용하지 못하면, 실무자들은 빠른 업무 처리를 위해 컴포넌트의 연결을 끊고(Detach) 자신만의 로컬 변형을 만들기 시작합니다.
결국 업데이트 체인에서 이탈하여 ‘파편화의 늪’에 빠지게 되는 것이죠
2. 효율을 위해 만든 시스템이 도리어 '장벽'이 되다
듀오톤은 특히 '신규 디자인 작업' 시 시스템 이탈률이 80%에 달한다는 흥미로운 패턴을 발견했습니다. 기존 페이지는 참고할 레퍼런스가 많지만, 새로운 요구사항이 쏟아지는 신규 사업에서는 기존 시스템이 정의하지 못한 수많은 판단을 실무자가 직접 내려야 했기 때문입니다.
"당장 시안을 뽑아야 하는데 업데이트를 기다릴 여유가 없어요."
"신규 사업에서는 새로운 걸 원하시는데, 지금 컴포넌트들은 너무 빡빡하게 묶여 있어요."
결국 효율을 위해 공들여 만든 견고한 시스템이, 아이러니하게도 현장의 유연하고 빠른 대응을 가로막는 가장 큰 '장벽(시스템의 경직성 + 시간적 비효율)'이 되어버린 것입니다 . 그렇다고 발생 가능한 모든 엣지 케이스를 가이드에 담는 것은 불가능에 가깝고, 시스템을 너무 무겁게 만들 뿐입니다.
3. 규제 산업에서 찾은 해답: 적절한 통제와 자유
이 모순을 해결하기 위해 듀오톤은 디자인 필드 밖, 규제 산업(금융, 의료 등)으로 시선을 돌렸습니다. 이들은 치명적인 위반을 막으면서도 산업의 혁신을 도모하기 위해 두 가지 가이드를 병행하고 있었습니다.
Negative Guide (네거티브 방식): 제한할 것만 명시하고 나머지는 모두 허용 ➔ 최대한의 자율과 혁신 추구
Positive Guide (포지티브 방식): 허용할 것만 명시하고 나머지는 모두 금지 ➔ 엄격한 기준과 일관성 추구
듀오톤은 이 개념을 디자인 시스템 라이브러리에 그대로 이식했습니다. 타협할 수 없는 절대적인 기준은 강력하게 통제하고, 유연한 확장이 필요한 영역은 현장의 자유에 맡기기로 한 것이죠.
4. 듀오톤의 5단계 토큰 설계 구조
위의 철학을 바탕으로, 듀오톤은 라이브러리를 Core Library(반드시 준수)와 UI Library(유연하게 적용) 두 축으로 나누고, 총 5단계의 정밀한 토큰 및 컴포넌트 체계를 설계했습니다 .
[ 1. Core Library: 절대 흔들리지 않는 룰 ]
타협할 수 없는 절대적인 기준을 담는 곳입니다. 원시 값인 Primitive 토큰에 의미를 부여해 Semantic 토큰을 만드는데, 듀오톤의 시스템은 여기서 결정적인 차이를 보입니다.
단순히 고정된 값 하나를 제시하는 것이 아니라, '사용할 수 있는 범주(옵션)'를 함께 선언합니다. 예를 들어 Radius(모서리 둥글기)나 Gap(간격)을 지정할 때, 작업자가 임의의 숫자(ex. 21px)를 넣는 대신 시스템이 마련한 스케일 안에서 선택하게 하는 식입니다. 이를 통해 일관성을 지키면서도 현장의 유연성을 보장하죠.
하지만 프로젝트가 커지면 예외가 늘어나 의미(Semantic) 레이어가 지나치게 비대해지는 문제가 생깁니다. 듀오톤은 이를 해결하기 위해 Semantic을 두 단계로 나누어 관리했습니다.
Simplify (기본 레이어): 공통 규칙을 빠르게 적용해 전반적인 일관성을 안정적으로 유지합니다.
Granular (확장 레이어): 복잡한 인터랙션이나 특정 예외 상황(예: 모달 배경색, 포커스 테두리 등)을 정밀하게 제어합니다.
[ 2. UI Library: 유연하게 가져다 쓰는 도구 ]
코어 규칙을 바탕으로, 실무자가 매번 가이드를 해석할 필요 없이 화면 제작에 바로 쓸 수 있도록 조립해 둔 '재사용 자산'입니다. 단일 컴포넌트부터 패턴 단위까지 포함해서 작업자 분들이 매번 가이드를 해석하지 않아도 바로 사용할 수 있는 상태로 제공하는거죠.
듀오톤은 컴포넌트 까지만 다루는 일반적인 파운데이션에서 한 단계 더 나아가 상위 레벨의 '디자인 패턴'을 함께 제공하는 방식을 택했습니다.
UI Component: Button, Text Field 등 화면을 구성하는 단일 요소입니다.
UI Pattern: 듀오톤은 단일 컴포넌트를 넘어 Popup, Bottom Sheet 등 상위 레벨의 '조합 패턴'까지 제공합니다. 컴포넌트를 어떻게 배치할지 고민할 필요 없이 완성된 패턴을 가져다 쓰면 되므로 해석 비용이 크게 줄어듭니다.
5. 실무자를 위한 강력한 Figma 꿀팁 두 가지
듀오톤은 단순히 구조를 나누는 데 그치지 않고, Figma의 기능을 적극 활용해 실무자들의 '피로도'를 낮추는 환경을 구축했습니다.
Tip 1. 디태치(Detach)를 막는 Slot & Grid 컴포넌트
기존에는 컴포넌트 내부 콘텐츠를 조금만 수정하려 해도 연결을 끊어야(Detach) 하는 경우가 많아 일관성이 쉽게 무너졌습니다. 이를 해결하기 위해 듀오톤은 Slot과 Grid 기능을 활용한 확장 방식을 도입했습니다. 공통 가이드 형태는 단단하게 유지하되, 내부 콘텐츠는 목적에 맞게 쉽게 교체할 수 있도록 만들어, 컴포넌트를 깨지 않고도 자유로운 수정과 응용이 가능해졌습니다.
Tip 2. '판단 에너지'를 아껴주는 반응형 뷰포트 자동화 (Variables)
작업자가 화면을 그릴 때마다 모바일, 태블릿, 데스크탑 등 해상도별로 폰트 크기나 마진 값을 일일이 고민해야 한다면 어떨까요?
듀오톤은 타이포그래피나 간격 토큰이 Viewport A, B, C 환경에 따라 최적화된 값으로 자동 변환되도록 설계했습니다 . 작업자는 단순 변환 작업 대신, 더 나은 사용자 경험을 고민하는 등 '중요한 의사결정'에 에너지를 집중할 수 있게 된 것입니다.
마무리 : 중요한 것은 통제가 아니라 기준을 만드는 것.
"이 시스템이 정말 우리 팀의 속도를 높여주고 있는가,
아니면 의도치 않은 장벽이 되고 있지는 않은가?"
듀오톤이 <One for Everything> 세션에서 강조한 것은 "더 많은 규칙을 만들자"가 아니었습니다. 디자인 시스템은 컴포넌트의 단순 모음이 아니라, 팀이 같은 기준으로 판단하고 실행하게 돕는 툴이어야 합니다 . 규칙의 경계를 명확히 세우고, 작업자가 쉽게 지키고 응용할 수 있는 환경을 만들어줄 때 시스템은 비로소 진짜 생명력을 얻게 됩니다.
여러분 팀의 시스템도 지금 "규칙이 부족해서"가 아니라, 예외를 수용하는 구조적 유연성이 부족해서 무거워지고 있지는 않은지 한 번 점검해 보는 것은 어떨까요?
오늘 소개된 듀오톤의 실무 인사이트가 여러분의 디자인 시스템을 더 가볍고 오래 숨 쉬게 만드는 데 도움이 되기를 바랍니다.
[함께 보면 좋은 글]
