[A1] Do more, with less. - 디자인 시스템, 그다음은?

프론트엔드 개발의 소중한 경험을 공유합니다! 
프론트엔드 개발자에 의한! 프론트엔드 개발자를 위한!

프론트엔드를 개발하며 마주했던
치열한 고민과 깊은 인사이트를 공유하며
여러분과 함께 성장하고 싶습니다!


FEConf Korea

디자인 시스템을 도입하면 UI 파편화를 방지하고 개발자 간 코드 재사용성을 높여 생산성과 제품의 미니멈 퀄리티를 동시에 향상시킬 수 있습니다.

디자인 툴의 정적인 한계와 동적인 구현의 차이로 발생하는 코드와 디자인 간의 괴리는 개발 라이브러리와 직접 연결된 '코드 기반 디자인 툴'을 활용하여 해결할 수 있습니다.

Framer와 같은 툴을 사용해 리액트 컴포넌트를 디자인 툴 내부로 가져오면, 별도의 명세 작업 없이도 개발 환경과 동일한 비주얼 언어를 사용하여 디자인과 코드의 Single Source of Truth를 구축할 수 있습니다.

규모가 커진 서비스에서 발생하는 UI 파편화는 디자인과 개발의 중복 구현을 초래하며, 이는 결과적으로 **제품의 유지보수 비용 증가와 팀 생산성 저하**로 이어집니다.

작은 팀에서는 구성원 간의 긴밀한 소통으로 일관성을 유지할 수 있지만, 팀 규모가 커지면 같은 의도임에도 불구하고 서로 다른 코드를 작성하게 되어 **소스 오브 트루스(Single Source of Truth)가 붕괴**되는 현상이 나타납니다.

디자인 시스템은 컬러 토큰, 타이포그래피, 간격 등 **비주얼 언어를 표준화하고 컴포넌트와 패턴을 규격화**하여 UI 일관성을 확보하는 핵심적인 방법론입니다.

디자인 시스템을 통해 디자이너와 개발자가 동일한 컴포넌트 라이브러리를 공유하게 되면, 상세한 스펙 논의 대신 **컴포넌트의 타입과 옵션 단위의 커뮤니케이션**이 가능해져 협업 효율이 극대화됩니다.

디자인 시스템 도입 후 직면한 새로운 문제들

디자인 시스템 정착 후에도 코드를 디자인에 일치시키기 어려운 문제, 디자이너와 개발자 간 언어적 차이로 인한 소통 비용, 그리고 **엄격한 제약과 유연한 표현 사이의 밸런스 유지**라는 새로운 도전 과제가 발생했습니다.

기존 디자인 툴인 스케치나 피그마는 동적인 인터랙션 구현이 어렵고 리액트 코드와 완전히 동기화되지 않아 **구현 측면에서 또 다른 사본(Source of Truth)**을 양산하는 한계가 있었습니다.

Framer를 통한 코드와 디자인의 진정한 동기화

발표자는 코드 기반 디자인 툴인 'Framer'를 도입하여 **리액트 컴포넌트를 디자인 툴에서 직접 사용**함으로써, 디자인 결과물이 곧 개발 결과물이 되는 진정한 Single Source of Truth를 구축했습니다.

디자이너가 Framer에서 컴포넌트 속성을 조정하면 CSS와 자바스크립트가 즉시 반영되어 반응형 디자인을 실시간으로 확인하고 **완성된 리액트 앱 환경에서 프로토타이핑**을 할 수 있게 되었습니다.

핸드오프 고도화와 DST(Design Syntax Tree)의 도입

기존의 핸드오프 도구는 디자인 시스템 컴포넌트의 계층이나 구조를 파악하기 어려웠기에, 개발자가 **데이터 속성(data attribute)을 통해 직접 컴포넌트 정보를 추출**하는 방식의 새로운 핸드오프 도구를 제작했습니다.

나아가 화면을 기계가 파싱 가능한 구조로 변환하는 **디자인 신텍스 트리(DST)**를 설계하여, 디자인 시안으로부터 리액트 코드와 컴포넌트 정보를 자동 제너레이팅하는 환경을 구현했습니다.

디자인 린팅을 통한 시스템의 유지 및 효율화

시스템의 유연함이 오용되어 파편화로 회귀하는 것을 방지하기 위해, 디자인 시안이 시스템 패턴을 준수하는지 실시간으로 계산하는 **'디자인 린터' 확장 프로그램**을 개발하여 적용률을 극대화했습니다.

이러한 개선 과정을 통해 디자이너와 개발자의 경계를 허물고, 제품 개발 시 **상상력을 발휘하는 일 외의 반복적인 병목을 제거**함으로써 생산성을 혁신적으로 높였습니다.

발표 소개: 토스 디자인 시스템 운영 경험 및 프론트엔드 시스템 엔지니어링

UI 개발 문제 패턴 시스템화 및 효율적인 프론트엔드 시스템 엔지니어링 소개.

발표는 UI 개발 문제점, 디자인 시스템 소개, 고도화 경험, 그리고 다음 단계의 디자인 시스템에 대한 고민 순서로 진행됩니다.

이 발표는 디자인 시스템 도입 효과, 관리의 어려움, 디자인-개발 워크플로우 개선에 관심 있는 분들에게 유용할 것입니다.

UI 개발에서 흔히 마주하는 문제점: UI 파편화와 생산성 저하

제품 규모가 커지고 화면 수가 늘어나면서 UI 반복 부분이 증가하며, 토스의 과거 화면에서도 '시작하기', '의견 남기기' 버튼 등이 통일되지 않은 사례가 있었습니다.

앱 전체에서 버튼이나 색상 등 유사한 요소들이 반복되지만, 실제로는 보더 라운딩, 텍스트 크기, 패딩 등이 화면마다 다르게 구현되어 UI 파편화가 발생했습니다.

이러한 중복 개발은 UI의 파편화와 유지보수 어려움, 버그 발생의 원인이 되며 팀 생산성 저하로 이어집니다.

소규모 팀에서는 디자이너 간 동기화가 용이하나, 팀 규모가 커지면 디자이너와 개발자 모두 각자 UI를 만들게 되어 중복 및 비일관적인 컴포넌트가 양산됩니다.

개발자들은 디자인 시안 확인 후 기존 코드 재활용 여부를 탐색하지만, 미세한 차이로 인해 결국 새로 개발하는 경우가 많습니다.

이러한 현상이 반복되면 개인별 컴포넌트 생성이 늘어나고, 팀 규모가 커질수록 디자인 일관성 저하, 중복 코드 증가, 유지보수 어려움으로 생산성이 하락합니다.

결국 디자인 부채와 개발 부채가 쌓여 생산성이 지속적으로 하락, 제품 개발 속도가 느려지게 됩니다.

UI 개발 문제의 해결책: 디자인 시스템

UI 개발 문제의 해결책으로 디자인 시스템이 널리 알려져 있습니다.

'Single Source of Truth' 개념을 UI 개발 문제에 적용하면, 각기 다른 버튼 디자인은 여러 Source of Truth를 가지는 문제임을 알 수 있습니다.

디자인 시스템은 비주얼 언어를 통해 UI를 표현하며, 컬러 토큰, 타이포그래피, 사이즈 등을 토큰화합니다.

토큰을 기반으로 컴포넌트를 정의하며, 토스 디자인 시스템의 버튼은 4가지 색상, fill/weak 타입, 다양한 상태(보통, 눌림, 비활성, 로딩) 등을 포함합니다.

컴포넌트는 제한된 옵션으로 디자인을 제약하여 재사용성을 높입니다.

디자인 시스템 패턴은 컴포넌트의 사용처를 제약하여, 특정 버튼의 의미와 사용 맥락을 정의합니다.

디자인 시스템은 비주얼 언어, 컴포넌트, 패턴의 모음으로, UI 디자인을 위한 언어와 문법을 제공합니다.

디자인 시스템이 도입되면 하나의 버튼 컴포넌트가 Source of Truth가 되어 모든 디자이너가 이를 활용하고, 개발에서도 동일한 컴포넌트가 라이브러리화됩니다.

디자인 시스템 버튼 스펙은 개발 라이브러리의 prop(타입, 사이즈, 스타일 등)으로 반영되며, 디자이너와 개발자는 동일한 컴포넌트를 사용하여 소통 비용을 줄입니다.

디자인 시스템 활용으로 UI 파편화 감소, 제품의 최소 품질 향상, 효율성, 일관성, 퀄리티가 동시에 증가합니다.

디자인 시스템 도입 후, 개발자는 디자인 시스템 컴포넌트 여부만 판단하여 코드 재활용 여부를 쉽게 결정할 수 있게 됩니다.

토스도 TDS(토스 디자인 시스템) 도입 후 UI 통일 및 코드 재사용이 가능해졌습니다.

디자인 시스템 도입 후 발생한 새로운 문제점

디자인 시스템은 기존 문제를 해결했지만, 100명이 넘는 디자이너와 개발자 규모에서 새로운 문제들을 야기했습니다.

첫째, 코드와 디자인의 불일치: 디자인 툴의 동적 구현 한계로 인해, 다이얼로그 버튼 정렬과 같은 스펙이 코드로만 구현되고 디자인 툴에서는 반영되지 않아 디자이너가 배포 후에야 차이를 인지했습니다.

둘째, 소통의 어려움: 디자인 시스템이 소통을 원활하게 했지만, 디자이너와 개발자가 선호하는 언어가 달라 소통 시 번역 과정(예: '블루' -> 'primary')이 필요했으며, 복잡한 컴포넌트일수록 어려움이 가중되었습니다.

셋째, 엄격함과 유연함 사이의 어려움: 엄격한 디자인 시스템은 효율적이지만 표현의 자유도를 떨어뜨리고, 유연함과의 균형 유지가 어려워 시스템 유지에 걸림돌이 됩니다.

이러한 문제들은 팀 규모가 커지고 디자인 시스템이 복잡해질수록 더욱 부각되었습니다.

문제 해결을 위한 다음 단계의 디자인 시스템 모색: 코드와 디자인 동기화

기존 디자인 시스템은 스펙 문서, 디자인 툴(스케치) 컴포넌트, 리액트 컴포넌트가 분리되어 있었고, 문서 기반의 수동 구현으로 인한 휴먼 에러와 디자인 툴의 동적 구현 한계로 괴리가 발생했습니다.

이는 스케치와 리액트 각각에 Source of Truth가 존재하여 진정한 Single Source of Truth를 이루지 못했으며, 디자이너와 개발자는 매번 컴포넌트 부합 여부를 확인해야 했습니다.

디자인과 코드 사이의 강한 의존 관계 구축을 위해 기존 디자인 툴(스케치)의 한계를 분석했습니다.

스케치의 심볼 기능은 스티커 개념으로, 128가지 버튼 베리에이션을 일일이 만들고 수정해야 했으며, CSS처럼 부분 스타일 적용이 불가능하고 동적인 상태 표현이 어려웠습니다.

Lottie 라이브러리와 같은 동적 요소도 디자인 툴에서는 JavaScript 실행 불가로 표현이 어려웠습니다. Figma 등 다른 툴도 상황은 비슷했습니다.

코드 기반 디자인 툴 Framer 도입 및 활용

Framer는 UI 디자인 및 프로토타이핑 툴로, 스케치/피그마와 유사한 기본 기능을 제공하지만, 모든 요소가 리액트 컴포넌트로 구성된다는 점이 큰 차이점입니다.

Framer의 코드 컴포넌트 기능은 리액트 컴포넌트를 코드로 정의하고, addPropertyControls API를 통해 디자이너용 패널을 설계할 수 있게 합니다.

간단한 버튼 컴포넌트 예시를 통해, 텍스트 prop을 추가하고 Framer 디자인 툴에서 패널을 통해 값을 입력하면, 리액트 컴포넌트에 반영되어 CSS 및 JavaScript 동작이 가능함을 시연했습니다.

기존 리액트 디자인 시스템 라이브러리를 Framer로 옮겨 컨셉을 검증했으며, Framer 내에서 디자인 시스템 컴포넌트를 드래그하여 UI를 구성하고 패널로 옵션을 조정할 수 있게 되었습니다.

Framer로 만들어진 화면은 CSS 스타일링 덕분에 반응형 디자인이 곧바로 구현되며, 여러 기기에서 UI가 깨지지 않고 표현됩니다.

디자인 결과물 자체가 리액트 앱이므로 버튼 클릭, 텍스트 입력 등 실제 앱처럼 동작합니다.

이제 개발에서 사용하는 리액트 컴포넌트를 기반으로 디자인 컴포넌트를 생성하여, 진정한 Single Source of Truth를 구축하고 코드 동기화 문제를 해결했습니다.

디자이너와 개발자의 언어 차이 해결: 맞춤형 핸드오프 도구 개발

제플린과 같은 기존 핸드오프 도구는 디자인 시스템 컴포넌트 여부 및 속성 파악이 어려워, 토스에서는 레이어 이름에 이모지와 속성명(예: 'button-fill-medium-primary')을 사용하여 구분했습니다.

복잡한 컴포넌트(예: AmountTop)의 경우, 하위 요소의 속성을 확인하기 위해 개별 클릭이 필요했으며, 컴포넌트 구조 파악이 어려워 제플린의 명확한 한계를 드러냈습니다.

조직 규모가 커지고 디자인 시스템이 복잡해지면서 신규 입사자의 러닝 커브가 증가했습니다.

Framer의 핸드오프 기능도 기존 툴과 크게 다르지 않아, 이미 리액트 앱인 디자인 결과물을 다시 코드로 옮기기 위해 클릭해야 하는 비효율성이 있었습니다.

디자인 시스템 구조를 표현하기에는 기존 핸드오프 도구의 한계가 명확하여, 새로운 핸드오프 도구 개발을 결정했습니다.

Framer 컴포넌트를 활용하여 핸드오프 도구를 만들었으며, children을 연결하여 화면에 띄우고 요소 클릭 시 거리 측정 등 기본 기능을 구현했습니다.

디자인 시스템 컴포넌트를 식별하기 위해 모든 컴포넌트에 data attribute로 디자인 시스템 정보를 삽입하여, 클릭 시 해당 컴포넌트 속성을 한눈에 보여줄 수 있도록 했습니다.

레이어 이름을 통한 속성 표기 및 컴포넌트 식별의 어려움을 해소하고, 개발에 필요한 모든 정보가 핸드오프에서 즉시 확인 가능하게 되었습니다.

핸드오프에서 컴포넌트 prop 정보가 일목요연하게 표시되어 개발 효율성이 크게 향상되었습니다.

디자이너와 개발자가 서로 다른 언어를 사용하더라도(예: '레드' vs 'danger'), 핸드오프가 통역가 역할을 하여 소통 문제를 해결했습니다.

디자인 신텍스 트리(DST) 구조 도입 및 활용

디자인 신텍스 트리(DST)는 리액트 노드 형태를 모방하여 디자인 시스템으로 만든 화면을 기계 파싱 가능한 트리 구조로 표현하는 자료구조입니다.

DST는 TDS 컴포넌트와 레이아웃 요소를 표현하며, 화면을 루트 스택 아래의 컴포넌트들, 오버레이즈 그룹 등으로 구조화합니다.

각 노드는 DST 엘리먼트로 표현되며, AmountTop 컴포넌트는 텍스트와 버튼으로 구성된 엘리먼트 타입과 프로퍼티를 가집니다.

DST 엘리먼트는 컴포넌트를 표현하는 기본 요소이며, 이를 입력받아 특정 목적에 따라 렌더링하는 모듈을 DST 렌더러라고 합니다.

리액트 DST 렌더러는 디자인 패널 입력 -> DST 번역 -> 컴포넌트 타입/props 기반 실제 리액트 노드 렌더링 과정을 거칩니다.

DST 렌더러는 다양한 목적으로 구현 가능하며, props 표시 핸드오프 도구 또한 DST 렌더러의 한 종류입니다.

JSX 코드로 엘리먼트를 변환해주는 '리액트 코드 DST 렌더러'를 개발하여, 컴포넌트 클릭 시 바로 코드를 생성할 수 있게 했습니다.

DST를 통해 디자인을 구조화하고 자동화함으로써, 개발자가 디자인을 직접 해석하고 컴포넌트로 옮기는 작업을 줄이고, 핸드오프 도구에서 바로 코드를 확인할 수 있게 되었습니다.

bottomCTA 컴포넌트 선택 시 바로 코드가 제너레이팅되는 예시를 통해, 디자인 시스템 플로우가 '코드 유무 판단 및 복붙'으로 더욱 간결해졌음을 설명했습니다.

엄격함과 유연함 사이의 균형: 디자인 린터 도입

엄격한 디자인 시스템은 UI 파편화 감소, 재사용률 증가, 유지보수 용이성, 개발 생산성 향상 등의 장점이 있습니다.

하지만 엄격한 시스템은 표현력이 떨어져 새로운 UI 실험이 어렵다는 단점이 있습니다.

효율적인 디자인을 추구하지만, 제품 퀄리티 향상을 위해선 디자인 시스템을 벗어나는 실험도 필요하며, 이를 위해 시스템에 커스터마이징 가능한 여지를 남겨둡니다.

조직이 커지고 패턴 가이드 싱크가 어려워지면, 이러한 '구멍'이 오용되어 디자인 시스템을 벗어난 UI가 증가하고, 결국 UI 파편화가 심했던 이전 상태로 회귀할 위험이 있습니다.

디자인 시스템의 힘을 유지하기 위해 엄격함과 유연함 사이의 균형 맞추기가 중요하며, 이를 위해 가이드 문서 고도화, 온보딩 프로그램, 커스텀 옵션 제공 등이 필요합니다.

토스의 경우 디자인 시스템이 이미 유연함(예: 리스트 컴포넌트 2만 개 이상 조합 가능)에도 불구하고, 디자이너들이 시스템 활용법을 몰라 커스텀 UI를 만드는 경우가 많았습니다.

예시로 아코디언 UI(BoardRow 존재)나 버튼과 텍스트 조합 커스텀 UI 등이 디자인 시스템으로 충분히 표현 가능했음에도 불구하고, 디자이너들이 알지 못해 새로 디자인했습니다.

플랫폼 디자이너의 수동 검토만으로는 디자인 시스템 적용 가이드에 한계가 있었습니다.

디자인 시스템 활용 시 개발 생산성이 3~5배 증가하는 점을 강조하며, 디자이너에게 컴포넌트 사용법을 쉽게 알리는 가이드의 필요성을 제기했습니다.

개발자 IDE의 린트처럼, 디자인 툴에서도 디자인 시스템 패턴 위반 여부를 즉시 인지할 수 있는 '디자인 린터' 아이디어를 제안했습니다.

Framer 내에서 전체 디자인에 접근하여 DST 구조로 화면을 분석하고, TDS 디자인 시스템 활용 커버리지를 계산해주는 크롬 확장 프로그램을 개발했습니다.

실시간 커버리지 표시로 디자이너들의 디자인 시스템 적용률을 높이고자 하는 동기를 부여했으며, 슬랙 논의를 통해 자율적으로 개선하는 결과를 낳았습니다.

조직 규모 및 디자인 시스템 복잡도 증가에 따른 학습/전파 비용 증가 문제를 디자인 린터와 같은 시스템화를 통해 개인이 신경 쓸 일을 줄여 효율화했습니다.

디자인 시스템 문제 해결과 프론트엔드 시스템 엔지니어링

코드와 디자인의 Single Source of Truth 구축, 핸드오프 도구로 소통 원활화, 디자인 린트로 시스템 활용도 증대 등 3가지 주요 문제를 해결했습니다.

문제 해결을 넘어 코드 기반 디자인 툴을 구축한 것이 큰 변화를 가져왔습니다.

새로운 워크플로우: 디자이너가 디자인하면 DST로 파싱되어 코드로 번역되고 즉시 배포 가능하여 개발자의 추가 작업이 불필요해졌습니다.

디자인 퀄리티는 높아지고 생산성 저하 없이 DST 표현에 집중할 수 있게 되었으며, 개발자는 더 빠른 속도로 고품질 제품을 만들 수 있습니다.

디자인 사이드는 스티커 방식에서 실제 컴포넌트 디자인으로, 개발 사이드는 핸드오프를 통한 속성 확인에서 즉각적인 코드 확인으로 전환되어 워크플로우가 개선되었습니다.

이러한 개선 작업을 통해 '프론트엔드 시스템 엔지니어링'이라는 개념을 제시하며, 프론트엔드 영역에서의 시스템화의 중요성을 강조했습니다.

시스템 개발은 패턴 발견, 효율화, 중복 작업 감소, 자동화를 통해 규모와 복잡성 증가에도 퀄리티와 생산성을 유지하는 즐거움을 줍니다.

프론트엔드 시스템 엔지니어링은 아직 생소하지만, 디자인 시스템처럼 많은 조직에서 채택될 것으로 전망합니다.

프론트엔드 시스템의 고도화는 디자이너와 프론트엔드 개발자의 경계, UI 디자인 개발 방식, UI 코딩 작업 방식 등에 변화를 가져올 것입니다.

발표 제목 'Do more, with less'는 UX 엔지니어 팀의 목표이며, '메이커의 유일한 병목이 상상력이 되게 한다'는 비전을 실현하고자 합니다.