Background

입사 당시, 당근 마켓은 빠른 속도로 성장을 이루고 있었고, 버티컬 서비스로의 확장도 함께 고려하고 있었습니다. 이러한 서비스 성장 방향을 따라, 안정적인 서비스 확장을 지원하고 각 버티컬 서비스마다 일관된 경험을 제공할 수 있는 디자인 시스템이 필요했습니다.

---

안정적인 기반 다지기를 위한 확장성

서비스의 성장과 함께 팀의 규모가 커지기 시작하면서, UI 디자인의 파편화가 발생하기 시작했습니다. UI 디자인의 파편화는 사용자 경험을 저하시키는 문제일 뿐만 아니라, 디자이너와 개발자의 프로세스에도 피로도를 가중시키고 작업 속도를 저하시키고 있었습니다.

문제현상1. 같은 기능과 목적의 UI 스타일 파편화

도메인과 기능별로 구분된 조직 내에서 같은 기능과 목적을 가진 UI가 조금씩 다른 형태로 제작되고 있었습니다. 이러한 파편화는 당근마켓 사용자가 서비스 내에서 동일한 UI의 다양한 표현을 보며 기능을 오인지 하거나, 재학습하는 등의 불편을 겪을 수 있습니다.

같은 기능과 목적의 UI 스타일 파편화가 발생한 단편적인 사례

문제현상2. 일관성을 맞추기 위한 소통 비용 증가

일관성을 유지하기 위해 디자이너 개발자는 소통과 작업 과정에 더 많은 시간을 할애하게 됩니다.

프로덕트 디자이너들은 주 1회 진행되는 디자인 싱크 미팅에서 시안을 공유하며 UI의 일관성을 점검하고 있었고, 기존 시안을 바탕으로 개발을 진행하던 개발자들은 디자인 결정이 완료된 후 스타일을 다시 수정해야 했습니다. 문제 현상 1은 일관성 문제뿐만 아니라 팀 구성원의 전반적인 업무 프로세스의 비효율로 이어지는 문제였습니다.

또한 성장하는 서비스는 끊임없는 개선과 변화를 겪으며, 이러한 변화를 예측하기는 어렵습니다. 따라서 확장을 고려하지 않고 오직 일관성 유지에만 중점을 둔 설계를 하는 경우, UI 파편화는 불가피하게 다시 발생할 수 있습니다.

디자인의 일관성을 유지하면서도 빠르게 성장하고 있는 당근마켓의 서비스를 지원하기 위해서는, 일관성과 확장성이라는 두 가지 목표를 모두 만족시킬 수 있는 기반의 필요성을 인지하게 되었습니다.

---

확장 가능하고 일관성 있는 스타일 기반

위에서 언급한 기반을 다지기 위해 디자인 토큰을 우선 설계하기로 결정했습니다. 디자인 토큰은 컴포넌트의 디자인 결정을 담당하는 독립적인 역할을 수행함으로써, 향후 제공될 컴포넌트에 일관성과 유연성을 부여할 수 있습니다. 이 결정은 다음과 같은 여러 고려 사항을 충족시켰기에 자신 있게 선택할 수 있었습니다.

1. 변화에 유연한 대응: 디자인 토큰은 다양한 디자인 요소를 추상화하여 정의함으로써, 서비스가 성장하고 변화함에 따라 쉽게 관리할 수 있게 해서 디자인 시스템을 더 유연하고 확장 가능하게 만들어 줍니다.
2. 효율적인 관리 및 재사용성: 디자인 토큰은 디자인 속성을 각 플랫폼(iOS, Android, Web)에 맞는 코드로 변환하기에 용이하여 각각의 환경에 최적화된 디자인을 적용할 수 있습니다.
3. 체계적인 소통: 디자인 결정을 구체적인 언어로 정의함으로 디자인과 개발 간의 소통을 간소화합니다.
4. 검증된 접근 방식: 어도비 스펙트럼과 마테리얼 디자인2같은 선도적인 곳에서 이미 사용되고 있는 개념이며, 참고할 수 있는 충분한 정보를 이미 제공중입니다.

---

Scale Token

Raw Value 와 Scale Token

Scale Token은 당근마켓의 UI에서 사용되고 있는 모든 원시 값(Raw Values)을 체계적으로 정리한 것으로, '크기(scale)', '색상(color)', '간격(space)' 등의 기본적인 디자인 속성을 기술적인 용어로 정의합니다. Scale Token은 당근마켓의 사용 패턴과 접근성 기준을 반영하여 디자인 결정을 유한한 갯수로 체계적으로 관리할 수 있습니다.

필요시 Scale Token은 추가되거나 값의 규칙이 변경될 수 있기때문에 디자인의 유연성과 확장성을 함께 보장할 수 있습니다.

Semantic Token

Scale Token 과 Semantic Token

Scale Token을 한 단계 더 발전시켜, 디자인의 의도나 맥락을 명확하게 표현하는 데 사용할 수 있게 합니다. 이 계층에서는 보다 구체적이고 의미 있는 이름을 사용하여 디자인 요소를 정의합니다. Semantic Token을 통해 디자이너와 개발자는 디자인 시스템 내에서의 요소들이 어떤 용도로 사용되어야 하는지에 대한 명확한 이해를 공유할 수 있습니다.

전체적인 디자인 토큰의 참조 구조(Structure)

디자인 토큰 설계를 통해 Raw Value ← Scale ← Semantic 의 참조 구조로 모든 디자인 요소를 중앙 집중화하여 관리함으로써, 디자인 변경 사항을 쉽게 반영할 수 있게 되었습니다. 이런 구조를 통해 디자인의 일관성, 확장성, 그리고 유지보수성 문제를 해결하는 기반이 마련되었습니다.

하지만, 디자인 토큰을 처음 접하는 디자이너들에게는 높은 러닝커브가 요구되며, 디자인 토큰의 수정, 추가, 삭제 과정을 수작업으로 관리하면서 발생하는 소통 비용과 휴먼 에러로 인한 피로도가 증가하는 문제가 있었습니다.

디자인 시스템의 성공은 단순히 만드는 것에서 그치지 않고, 사용됨으로써 그 가치를 발휘하므로, 디자이너들이 이를 잘 활용할 수 있도록 지원하는 것이 중요합니다. 이를 위해 디자인 토큰을 사용하기 쉬운 환경을 조성하고, 수동으로 많은 디자인 결정 값을 관리하는 대신, 더 효율적인 관리 방식을 모색하는 것이 필요했습니다.

---

사용처를 위한 도구 KDT

KDT Figma Plugin

Karrot Design Token(KDT)은 디자인 토큰의 도입으로 발생한 러닝 커브와 토큰 관리 프로세스의 어려움을 해결하기 위해 개발된 Figma 플러그인입니다. 이 플러그인은 프로덕트 디자이너들이 작업 환경에서 자연스럽게 사용할 수 있도록 설계되었으며, 컨텍스트 스위칭 없이 통합적으로 디자인 작업을 할 수 있게 합니다.

알맞는 토큰 추천

KDT는 디자인 일관성을 유지하는 것을 우선시하여, 디자이너가 디자인 토큰에 대한 깊은 이해 없이도 효과적으로 사용할 수 있도록 합니다. 플러그인은 시안에서 디자인 토큰이 적용되지 않은 요소를 자동으로 감지하고, 적절한 디자인 토큰을 추천함으로써 디자인 커버리지를 실시간으로 향상시키고 일관성을 지킬 수 있도록 지원합니다. 이러한 접근 방식으로 디자인 토큰의 학습 곡선을 효과적으로 없앨 수 있었습니다.

스타일 관리 비용 감소

Figma 내에서 디자인 스킴을 직관적으로 관리할 수 있게 함으로써, 단일 시안으로 다크 모드 및 다양한 플랫폼(Android, iOS) 대응이 가능해졌습니다. 또한 Figma에서의 디자인 QA를 지원하고, 각 플랫폼 별 개발자와의 명확한 소통을 가능하게 되었습니다.

디자인 토큰 반영 프로세스와 핸드오프 최적화

전통적인 문서 기반의 디자인 토큰 관리 방식은 변경 사항의 추적이 어렵고, 플랫폼 간의 일관성 유지에 실패하는 경우가 많았습니다. KDT는 디자인 토큰의 재정의 및 플랫폼별 번역 과정을 단순화하고, 직접적으로 GitHub 리포지토리와 통합하여 이러한 문제를 해결합니다.

결과적으로, 모든 팀이 동일한 시점에 일관된 디자인 언어를 사용할 수 있게 되었고, 휴먼 에러로 인한 오류를 크게 줄일 수 있었습니다.

---

개선된 문제들

개선된 프로세스

디자인 토큰 도입을 통한 Karrot Design Token (KDT)의 구현은 프로덕트 디자이너들이 동일한 디자인 언어를 사용하여 일관된 스타일의 UI를 구성할 수 있게 만들었습니다. 이는 설계된 파운데이션 시스템과 프로세스의 도입으로, 디자이너 간, 그리고 디자이너와 개발자 사이의 커뮤니케이션 비용을 효과적으로 줄이는 결과를 가져왔습니다. 또한, Scale과 Semantic의 두 계층으로 나누어진 토큰 구조는 플랫폼의 확장성을 보장하며, 다크 테마 기능 지원을 포함하여 사용자들의 요구를 성공적으로 충족시킬 수 있었습니다.

높은 디자인 토큰 커버리지는 조직 내 여러 제품과 서비스에서 일관된 디자인을 유지할 수 있음을 의미하며 나아가 UI 스타일의 파편화와 소통 비용 문제를 해결했음을 나타냅니다.

KDT의 배포 후 9개월 동안 디자인 토큰 커버리지는 68% 증가하여, 화면 1개 기준 평균 80%까지 상승하였습니다. 이는 디자인 토큰이 화면 구성에 폭넓게 적용되었고 있음을 나타냅니다.

위 내용은 제가 당근마켓에 재직했던 2021년부터 2023년 초까지의 경험을 바탕으로 합니다. 1년이라는 시간이 지난 지금, 현재의 SEED Design System과 차이가 있을 수 있습니다.

---

(부끄럽지만)해당 내용은 동영상에서도 확인하실 수 있습니다. 🙈