매년 Figma에서 개최하는 Config에서 올해(2024)의 Config 영상 중 하나가 좋았어서(해당 영상) 이를 글로 정리하고자 해요.
해당 영상에 대한 설명은 다음과 같아요.
디자인 시스템이 약속한 대로 잘 이루어지고 있을까요? 실제로 우리의 작업이 이전보다 더 높은 품질을 가지며, 더 빠르고, 더 일관성 있게 이루어지고 있나요? 아니면 낮은 품질의 제한적인 디자인 프로세스로 빠져들어 창의성을 제한하고 있는 걸까요?
이를 공유한 분은 Wise에서 디자인 시스템을 만든 분으로, 실제로 Wise 디자인 시스템을 봤을때 잘 만들었다고 생각했었는데(Wise 디자인시스템 사이트), 더욱 귀를 기울이며 들었던 것 같아요.
아래는 해당 세션 내용을 번역한 글입니다.
현재 저는 Cash App에서 OS 디자인을 이끌고 있으며, 우리가 돈과 맺는 관계를 새롭게 상상하며, 디자인의 기이하고 독특한 면을 받아들이고 있습니다. 이제 막 시작 단계에 불과한 상태죠. 최근에는 전혀 새로운 디자인 시스템인 ‘Arcade’의 첫 번째 단계를 출시했습니다. 새로운 글꼴 스타일, 일러스트, 간격 전략 등으로 정말 멋진 시스템입니다.
오늘의 주제는 우리가 앞서 이야기한 것처럼, 성공을 축하하는 것뿐만 아니라 어떻게 더 나아질 수 있을까를 고민하는 것입니다. 디자인 시스템 분야에서 우리가 어떻게 개선할 수 있을지 묻는 것이 중요하다고 생각합니다.
약 6개월 전, 저는 만나는 모든 디자이너에게 간단한 질문을 던졌습니다.
“디자인 시스템이 당신의 작업을 더 나아지게 하고 있나요? 작업 속도는 더 빨라지고, 일관성이 높아졌으며, 품질이 향상되었나요?”
이 질문에 대해 약 300명의 답변을 받았고, 그 중에는 작은 스타트업부터 대형 테크 기업까지 다양한 반응이 있었습니다. 그리고 이 질문은 꽤 많은 사람들의 공감을 불러일으켰습니다.
여기서 몇가지 답변들을 보자면,
물론 나쁜 리뷰만 있진 않았고, 디자인 시스템의 영향력을 인정하는 많은 사람들이 있었고 개선할 기회에 대한 통찰력도 얻었습니다.
저는 디자인 시스템의 세 가지 핵심 약속, 즉 ‘속도’, ‘일관성’, 그리고 ‘품질’에 대해 이야기하려고 합니다. 연구에서 얻은 결과를 공유하고, 우리가 잘하고 있는 부분과 앞으로 나아갈 방향에 대해 논의할 것입니다.
첫 번째 약속 — Speed (속도)
첫번째 약속인 ‘속도’입니다. 속도는 사실 어떻게 보면 디자인시스템이 최고로 잘 수행할 수 있는 쉬운 영역이라 생각해요.
컴포넌트, 토큰, 가이드라인 등이 모두 우리를 더 빠르게 만들어주고 있습니다. 이는 디자인과 엔지니어링 간의 간극을 줄이고, 반복 작업에서 벗어나게 해주기 때문입니다.
제가 팀의 한 디자이너에게 Cash에서 화면을 재구성해보라고 요청했는데, 그 디자이너는 디자인 시스템을 사용할 수 없었습니다. 저는 디자인 시스템을 사용할 수 있었죠.
왼쪽은 제가 디자인 시스템을 사용한 결과물이고, 오른쪽은 시스템 없이 작업한 결과물입니다. 두 사람의 작업 시간을 측정했는데, 결과는 놀라웠습니다.
저는 처음부터 끝까지 12분이 걸렸지만, 브라이언은 2시간과 수많은 버전을 거쳤습니다.
이 실험에서 저에게 눈에 띈 것은 제가 만든 화면이 잘못된 것은 아니었지만, 브라이언의 화면은 새로운 디자인 방식과 흥미로운 아이디어들을 포함하고 있었다는 점입니다.
비록 2시간이 더 걸렸지만, 새로운 프로필 전환, 자주 사용되는 액션의 개선된 아이디어, 네트워크에 대한 강조, 그리고 하단 목록의 간소화된 구조 등이 있었습니다.
이 경험은 저에게 큰 깨달음을 주었습니다.
‘과연 속도 빠른 것이 항상 좋은 것일까?’
고객 경험을 개선하는 것이 더 중요하다면, 속도를 위해 그 기회를 포기해야 할까요?
설문조사 답변 중 하나인,
“그들은 디자인 접근 방식을 ‘최선의 해결책은 무엇인가?’에서 ‘우리가 가진 것으로 무엇을 만들 수 있는가?’로 바꿨습니다.” 가 생각났습니다.
그가 맞습니다. 이 답변은 저에게 간단한 깨달음을 줬어요. 바로,
Great ideas never start with the system.
좋은 아이디어는 절대 시스템에서부터 시작하지 않는다.
그래서 디자인 시스템이 진정으로 좋은 디자인을 위한 도구가 되려면, 디자이너들이 창의적인 탐구를 충분히 할 수 있도록 더 많은 자유를 제공해야 한다고 생각합니다.
좋은 디자인엔 많은 시간이 걸리기 마련입니다.
Wise의 타이포그래피 리브랜딩할 때도 대략 700시간이 걸렸어요. 계속해서 상상하고, 재조합하며 만들어 나갔습니다.
컬러 또한 동일했습니다. 표면적으로는 단순할 수 있지만 그 이면에는 깊은 탐구를 하며 수 백가지 버전을 만들며 테스트해나갔습니다.
제가 여기서 말하고자 하는건, 좋은 작업이란 잠깐의 천재성으로 만들어진 것이 아닌, 그저 많은 노력과 땀이라는 것입니다.
디자인 시스템은 이러한 문화를 절대 멈추게 하거나, 덜 하게 하는 장치로 되어서는 안됩니다. 그대신 디자이너에게 이상적인 경험을 디자인할 수 있도록 권한을 부여하고, 이를 시스템의 룰로 변환할 수 있도록 도와줘야 합니다.
제가 좋아하는 작업 중 하나를 공유하고자 해요. 이 작업은 디자이너가 시스템의 룰을 어떻게 적용할지에 대한 고민 없이 이상적인 솔루션을 먼저 진행하고,이후 linter를 켜서 시스템의 룰을 적용할 수 있도록 도와주는 작업이에요.
이는 작업자에게 어떤 부분이 달랐는지를 이해시켜주고, linter의 버튼을 탭함으로써 정의된 시스템 룰로 변환시켜줍니다. 이 방식은 훨씬 자연스러운 워크플로우로, 아이디에이션에 있어서 방해되지 않는 워크 플로우입니다.
이 컨셉을 Wise의 리브랜딩에도 적용하고자 했습니다. 예전의 화면을 새로운 화면으로 UX는 그대로 지켜주면서 리브랜딩으로 인한 스타일을 변환시켜 줄 수 있는 플러그인을 만들었습니다.
저는 이러한 작업이 디자인 시스템이 크리에티브에 있어서 제한을 두는 것이 아니라는 것을 보여줬다고 생각합니다.
속도를 희생하면서 훌륭한 아이디어를 얻어서는 안됩니다. 우리는 디자이너에게 이상적인 경험을 디자인할 수 있도록 권한을 부여하고, 이를 시스템의 룰로 변환할 수 있도록 도와줘야 합니다.
두 번째 약속 — Cohesion (일관성)
디자인 시스템의 두 번째 약속으로는 바로 일관성입니다. 당연하게도, 강력한 디자인 시스템이 없다면 시간이 지남에 따라 디자인이 점점 분리되고 일관성이 없어지는 것은 자연스러운 현상입니다.
예를 들어, 우리가 Wise의 타이포그래피 스택을 감사하기 시작했을 때, 한 화면에서 17개의 서로 다른 폰트를 발견했습니다. 일부는 거의 동일했지만 서로 미세하게 다른 점이 있었죠.
Cash에서도 마찬가지였습니다. 우리는 6가지의 서로 다른 목록 스타일을 사용하고 있었고, 관리하기 힘든 아이콘들이 넘쳐났죠.
제가 여기서 지적하고 싶은 것은 디자이너들을 비난하는 것이 아닙니다. 이런 일은 자연스럽게 발생할 수 있습니다. 그러나 이렇게 작은 차이들이 축적되면, 우리 규모에서는 매우 큰 차이를 만들게 됩니다. 왜냐하면 일관성 부족은 제품의 신뢰를 떨어뜨리기 때문입니다.
여러분도 가운데 있는 디자인을 보면 신뢰가 가지 않을 겁니다. 그렇다면 디지털 제품도 마찬가지여야 하지 않을까요?
디자인 시스템은 이러한 문제를 해결하는 데 있어 엄청난 역할을 하고 있습니다.
이렇게 제각기 다른 요소들이 쓰여진 화면을,
디자인 시스템을 통해 이렇게 변경할 수 있었습니다. 여기서 UX의 근본적인 변화는 없었고, 단순히 팀을 새로운 시스템에 맞게 정렬한 것에 불과합니다.
시각적으로 약했던 화면을 간단하고 매력적인 경험으로 바꿀 수도 있습니다.
이와 같이 새로운 시스템을 변경하는 것 만으로도 단순하고 즐거운 경험을 줄 수 있고, 앱이 더 응집력있고, 사용하기 쉬우며 신뢰를 줄 수 있게 됩니다.
하지만 일관성을 추구하는 것이 항상 좋은 것일까요? 이것이 전체적인 모든 것을 대변하지 않는다는 사실을 잊지 말아야 합니다.
인기 있는 앱들을 살펴보면, 핀테크, 음식, 여행, 쇼핑, 피트니스, 커뮤니케이션, 암호화폐 등 다양한 산업 분야에서 앱들이 거의 비슷해 보인다는 점을 알 수 있습니다.
디자인 시스템도 매우 유사하게 발전하고 있습니다. 우리는 이제 거의 똑같은 디자인의 바다에 빠져 있다고 해도 과언이 아닙니다. 일관성을 추구하다가 결국 모든 것이 획일화되는 상황에 직면한 것이죠.
Consistenct is coming at the cost of commoditization.
일관성은 상품화(획일화)의 대가를 치르게 된다.
이러한 현상은 저를 두렵게 만듭니다. 왜냐하면 제품 디자인에서 중요한 것은 그 제품이 어떻게 느껴지느냐, 그리고 그것이 사용자에게 어떤 의미를 주느냐이기 때문입니다.
우리가 매일 사용하는 앱들은 거의 비슷한 서비스를 제공하지만, 각 브랜드를 봤을 때 여러분이 느끼는 감정은 아마도 전혀 다를 겁니다.
그렇다면 왜 이 앱들의 디자인이 똑같아야 할까요? 그렇지 않다는 것이 제 생각입니다.
우리는 일관성을 추구하되, 표현의 부재와 일률적인 디자인을 방지해야 합니다. 그렇지 않으면 비인간적이고 기계적인 세계로 점점 더 빠져들 위험이 있습니다.
일관성과 표현은 동시에 이루어질 수 있습니다. 우리는 새로운 아이디어를 디자인 시스템 안에서 어떻게 표현할 수 있을지 고민해야 합니다.
디자인 시스템이 단지 기능만을 제공하는 것이 아니라, 감정과 아이덴티티를 전달할 수 있어야 합니다. 우리는 단지 차별화를 위해 다른 것이 아니라, 각 회사가 고유의 철학과 방식이 있음을 반영해야 합니다.
그렇다면 우리는 어떻게 이 변화를 이룰 수 있을까요? 몇 가지 예를 보여드리겠습니다. 이 예는 Wise의 새로운 헤드라인 폰트 작업 초기입니다.
우리는 전 세계 수백만 명의 고객에게 서비스를 제공하고 있으며, 이 국제적인 에너지를 글꼴에 반영하고자 했습니다. 이를 위해 우리는 다양한 간판, 이미지, 글꼴을 연구하며 글꼴에 글로벌한 감성을 어떻게 불어넣을 수 있을지 탐구했습니다.
수많은 실험과 테스트, 아이디어를 통해 기능과 감정이 적절히 균형 잡힌 폰트를 만들었고, 그 결과물은 단순한 제품 화면에 생동감과 독창성을 불어넣게 되었습니다.
이와 마찬가지로, 우리는 전 세계 고객들의 움직임을 분석해 고객들이 경험하는 각 지역의 이미지, 색상, 질감, 패턴, 지폐 등을 끌어와 새로운 디자인 자산을 만들어냈습니다.
이 자산은 우리의 시스템 곳곳에 생명력을 불어넣고 있으며, 일러스트에서부터 앱 내 모션과 상호작용 패턴에 이르기까지 다양한 요소에 고유한 정체성을 부여합니다.
Cash에서도 고객의 카드를 경험에 직접 반영하는 흥미로운 방식을 찾았습니다.
이제는 라이트 모드나 다크 모드만 있는 것이 아니라, 고객이 핫 핑크 카드를 구매하면 앱 테마도 핫 핑크 모드로 전환할 수 있습니다.
이처럼 우리는 고객과의 감정적 연결을 만들고 있습니다. 다름이 기억에 남고, 기억에 남는 것이 성공을 불러오기 때문이죠. (what’s different get’s remembered, and what’s remembered win.)
디자인 시스템은 일관성을 추구해야 하지만, 결코 개성 상실의 대가로 일관성을 추구해서는 안 됩니다. 우리는 새로운 아이디어를 표현할 수 있는 방식을 찾아야 하며, 기능과 감정, 두 가지 모두를 담을 수 있어야 합니다.
왜냐하면 요즘의 디자인 시스템은 너무나 기능적(Functional)하기 때문입니다.
Strive for consistency without commodification.
상품화하지 않되 일관성을 위해 노력하라.
세 번째 약속 — Quality (품질)
마지막 약속은 ‘품질’입니다. 디자인 시스템의 약속 중에서 품질은 정의하기 가장 어렵지만, 아마도 가장 많이 사용되는 단어일 겁니다. “더 나은 품질을 만들어줘”라는 피드백, 다들 들어보셨을 겁니다.
하지만 품질은 매우 모호한 개념입니다. 때로는 Dider Rams의 10가지 디자인 원칙처럼 ‘명확하고 가치 있고 의도적’이라는 정의를 따르기도 하고, Maslow의 욕구 단계 이론처럼 ‘안정성, 성능, 정밀성’ 같은 기준으로 평가되기도 합니다. 혹은 제가 좋아하는 또 다른 정의는, 이전 상사였던 Josh가 말한 것처럼, ‘기대치를 초과하는 경험’, 즉 고객이 생각하지 못했던 수준으로 놀라운 경험을 제공하는 것입니다.
이렇게 각자 품질에 대한 정의가 조금씩 다를 수 있지만, 중요한 질문은 이것입니다.
‘what role do Design system play in making higher quality experiences?’
‘디자인 시스템이 더 높은 품질의 경험을 만드는 데 어떤 역할을 하는가?’
공통된 기초 위에서 확장 가능한 컴포넌트 라이브러리를 만들 수 있다는 점은 부정할 수 없는 가치입니다.
그러나 이게 높은 품질의 디자인을 보장하는가? 결코 아닙니다.
예를 들어보죠. 프로필 화면에서 디자인 시스템을 이용해서 가장 별로인 프로필 화면을 만들어보는 실험을 했습니다.
작은 링크들, 전혀 쓸모없는 드롭다운, 그리고 이름을 바꾸는 오픈된 입력 필드가 보이시죠? 물론 이건 어리석은 실험이지만 제가 하고 싶은 말은 바로,
낮은 품질의 제품은 종종 나쁜 시스템 때문이 아니라 나쁜 결정의 결과입니다. 왜냐하면, 건축 블록만으로는 충분하지 않기 때문입니다. 컴포넌트만으로는 충분하지 않죠.
진정한 품질의 도전 과제는 디자이너가 더 나은 결정을 내릴 수 있도록 돕는 것입니다.
저는 요리, 특히 레시피 북에서 이 문제를 해결할 수 있는 영감을 찾았습니다.
레시피는 종종 다소 도달하기 어려운 최종 상태를 설정한 다음, 명확한 지침과 필요한 재료를 제공하면서도 약간의 창의적 여유를 줍니다. 레시피 북이 성공적인 이유는 품질은 곧 ‘올바른 과정을 실행한 결과’이기 때문입니다. 그들은 재료만으로 훌륭한 요리를 만들 수 없다는 것을 인식합니다.
Quality is an outcome of doing the right things.
품질은 올바른 과정을 실행한 결과이다.
따라서 우리가 원하는 결과가 높은 품질의 제품이라면, 오늘날 디자인 시스템에서 무엇이 부족할까요?
우리는 아직 Cash에서 이 문제를 해결하는 초기 단계에 있지만, 퍼즐의 작은 부분들이 품질에 가장 큰 영향을 준다는 확신이 점점 커지고 있습니다.
예측 가능하고 식별 가능한 규칙들은 제품의 기본 요소, 확장 가능하고 재사용 가능한 실행 및 관리 구조로 구성됩니다. 이 모든 것이 결합되어 우리만의 ‘운영 체제(OS)’라고 부릅니다.
오늘날 대부분의 디자인 시스템이 단순히 부풀려진 컴포넌트 라이브러리에 불과한 것과는 다른 개념이죠.
하나의 예시를 볼게요. 이 화면은 리브랜딩하기 전의 Cash의 Money 탭입니다. 디자인이 나빠보이진 않지만 점점 한계가 보이기 시작했어요. 비트코인 팀, 주식 팀과 같이 같은 기능 팀들은 자신들의 인터페이스를 발전시키고 싶어 했지만, 기존 구조로는 그들의 요구를 수용할 수 없었습니다.
일반적으로 이 프로젝트를 수직적인 방식으로, 즉 각 팀이 개별적으로 발전시키는 형태로 진행할 수도 있었지만, 그렇게 하면 결국 혼란스러운 결과가 나올 가능성이 큽니다.
대신에, 팀은 확장 가능한 OS 개념을 도입해 디자인 의도를 명확한 패턴과 논리적인 페이지 구성 원리로 체계화하기 시작했습니다.
중요한 것은, 왜 이렇게 구성했는지에 대한 이유도 명확하게 제시했다는 점입니다.
이 방식은 팀들이 잘 정의된 범위 내에서 이해하고 기여할 수 있도록 도와주며, 이러한 의도는 재사용 가능한 제품 기본 요소로 확장됩니다. 우리는 이러한 요소들을 ‘애플릿(Applets)’이라고 부르며, 애플릿은 Cash 내부에서 작은 앱처럼 작동합니다.
각 애플릿은 서로 다른 고객의 요구를 충족시키기 위해 경험의 다양한 부분에 연동되고, 다양한 상태를 가지게 됩니다. 이를 통해 팀들은 원하는 유연성과 주도권을 갖되, 전체적으로 일관된 방식에서 작업할 수 있습니다.
그 후 우리는 시스템을 이해하고 따라갈 수 있도록 명확한 관리 체계를 마련했습니다.
그 결과, 팀들이 고품질의 경험을 만들기 위해 필요한 모든 것을 제공하는 통합적이고 확장 가능한 시스템으로 제공되고 있습니다. 아직까지도 완벽한 해답을 찾고 있는 중이지만, 고품질의 제품은 명확한 비전, 좋은 재료, 그리고 훌륭한 의사결정의 결합에서 탄생한다고 믿습니다.
이 모든 요소들이 합쳐져 빠르고 일관된 고품질의 제품을 만들어냅니다. 속도가 뛰어난 아이디어를 희생하지 않으며, 일관성이 단순화되지 않고, 팀들이 단순한 재료만이 아니라 훌륭한 결과를 만들어낼 수 있는 ‘레시피’를 제공받게 됩니다.
들어주셔서 감사합니다. 그리고 오늘 이 자리에 기여해주신 모든 훌륭한 분들께 감사드립니다.
