버즈빌의 디자인 시스템

스타트업과 디자인 시스템. 직접 만들어보며 배운 것들.

우리는 디자인 시스템을 만들었습니다. 디자인 팀의 거의 모든 구성원이 참여했고, 시간과 자원, 많은 에너지를 들였습니다. 하지만 긴 이야기의 시작일 뿐입니다. 스타트업에서 일하며 디자인 시스템 구축을 고민하고 있다면, 우리의 경험에서 실마리를 찾을 수 있을 것입니다.

우선 시스템을 만드는 데 얼마나 많은 시간이 드는지 외면할 수 없습니다.

당연히 우리도 디자인 시스템이 정말 그만한 가치가 있는지, 스타트업도 이점을 얻을 수 있는지 고민했습니다.

짧게 답하면, 그렇습니다.

배경부터 조금 설명하겠습니다

시스템을 만들기로 했을 때 우리는 설립 5~6년 차, 50명이 조금 넘는 스타트업이었습니다. 프로덕트 디자이너 세 명과 비주얼 디자이너 두 명이 있었습니다. 사업은 빠르게 확장 중이었고, 사업개발 팀이 큰 파트너 몇 곳을 확보하며 회사는 새로운 단계에 들어섰습니다. 제품 팀도 빠르게 대응해야 했고, 늘어나는 요구에 맞춰 엔지니어를 대거 채용하며 규모를 키웠습니다. 디자인에서는 두 가지 선택지가 있었습니다. 연동이 늘어날 때마다 디자이너를 비례해 채용하거나, 소수의 효율적인 핵심 팀을 유지하면서 모든 요구를 중앙에서 지원할 시스템을 만드는 것이었습니다. 우리는 두 번째를 선택했습니다.

무엇이 걸려 있는지 이해하려면, 해결하려는 문제를 좀 더 자세히 봐야 합니다.

버즈빌은 한국, 일본, 미국의 여러 파트너를 위한 확장 가능한 플랫폼을 만듭니다. 젊은 회사지만 지속적으로 유지보수하고 개발해야 하는 복잡한 제품도 만듭니다. 그런 점에서 스타트업이라고 해도 필요한 일을 해낼 수 있도록 돕는 디자인 시스템을 만드는 것을 두려워할 필요는 없습니다.

이 글은 제작 방법보다 사고 과정에 집중해 폭넓게 적용될 수 있기를 바라므로, 제품의 구체적인 설명은 의도적으로 생략하겠습니다.

첫 번째이자 가장 중요한 문제는 비즈니스의 요구에 대응하는 것입니다.

작은 팀으로 다양하고 늘어나는 요구를 감당하려면 디자인을 어떻게 조직해야 할까요?

자체 앱 두 개, 화이트 라벨 앱 15개 이상, 여러 SDK와 API를 관리해야 합니다. 여기에 필요한 마케팅 작업이나 이 모든 것을 관리·운영하는 대시보드는 아직 포함하지도 않았습니다.

이미 상당한 제품군입니다. 디자이너가 몇 명뿐인 스타트업이라면 더욱 그렇습니다.

시스템은 결국 여러 것을 연결하고, 그것들을 다른 곳에서도 재사용할 수 있게 하는 것입니다. 그래서 우리는 디자인 자산을 재사용 가능한 컴포넌트로 정리하고 다시 구성해 왔습니다. 참 쉽죠. 적어도 이론상으로는요.

기술 부채는 디자인에도 적용됩니다. 같은 일을 두 번 하는 데 시간을 쓰지 않으면, 생각할 시간이 더 생깁니다.

이것이 출발점이었습니다. 시스템을 구축하며 해결하려던 가장 큰 문제였습니다. 약 1년 전 이 작업을 시작했고, 그 과정에서 다른 문제들도 해결됐습니다.

우리는 큰 꿈을 꾸는 작은 회사입니다. 전 세계에 고객을 둘 만큼 큰 꿈이죠. 글로벌 기업인 것은 멋지지만, 문화적 배경이 다르고 기술과 미학을 이해하고 받아들이는 정도도 다른 사람과 시장에 디자인이 맞아야 한다는 사실을 깨닫게 됩니다.

두 번째 문제는 누구나 이해할 수 있게 만드는 것입니다.

폭넓은 사람들에게 맞는, 확장 가능한 글로벌 제품을 어떻게 디자인할까요?

다행히 이런 상황에 놓인 것은 우리뿐이 아닙니다. 같은 문제에 먼저 도전한 디자이너들은 표준과 스타일 가이드를 만들었습니다. 최근에는 디자인 시스템이라는 개념이 널리 퍼지며 많은 사람이 생각을 글로 남기거나 자신의 디자인 시스템을 온라인에 공유했습니다.

복잡한 문제에는 대개 단순한 해결책이 필요합니다.

하지만 제품을 디자인해봤다면, 단순하게 만드는 일이 꽤 복잡하다는 데 동의할 겁니다. 🔁

앱을 디자인할 때 우리는 시각적인 의미 체계를 만듭니다. 서비스를 쓰는 사람들이 이해할 수 있어야 하는 일종의 언어입니다.

그 언어의 복잡성을 낮추면 더 많은 사람이 이해할 수 있으리라 기대합니다. 디자인의 미니멀리즘은 이런 생각에서 나옵니다. 단순함이 핵심입니다. 단순하게 유지하면 표현하려는 것을 더 많은 사람이 이해합니다.

그런데 단순함과 체계적인 접근은 무슨 관계일까요?

원칙입니다. 체계적으로 일한다는 것은 공통의 기반과 가치를 중심으로 업무 흐름을 조직하기 위해 원칙과 절차를 정한다는 뜻입니다.

우리의 경우 다양한 시장에 맞추고 작은 디자인 팀이 관리할 수 있게 하려면, 비즈니스 요구에 답하는 핵심 원칙 중 하나가 미니멀리즘이어야 했습니다.

그래서 Google의 Material Design에서 출발해 자체 컴포넌트와 원칙을 만들었습니다. 처음부터 모든 것을 만들 필요는 없었습니다.

이렇게 시작한 데에는 몇 가지 분명한 이유가 있습니다.

첫째, Material은 끊임없이 진화하는 훌륭한 디자인 언어입니다. 둘째, 이미 널리 퍼지고 재사용되며, Android OS와 Material Design 가이드를 따르는 주요 앱을 통해 수백만 명이 접하고 있습니다.

버즈빌은 Slidejoy(미국·글로벌)와 허니스크린(한국·일본·대만)이라는 자체 B2C 서비스를 운영합니다. 동시에 SDK를 통해 파트너의 모바일 앱도 개발하고 지원하며 관리합니다. 각각 브랜드 정체성을 표현하는 데 매우 구체적인 요구가 있습니다. 이런 생태계를 수용할 만큼 유연한 시스템은 어떻게 만들 수 있을까요?

여기서 세 번째 문제, 다양한 브랜드 요구에 대응하기로 이어집니다.

여러 서비스에 걸친 다양한 브랜드를 어떻게 관리할까요?

각 파트너의 요구에 맞추려면 외부 브랜드의 통합을 지원하는 해답이 필요했습니다.

IT 기업들에 시스템이 확산되며 많은 이론과 실무 사례가 나왔지만, 우리에게는 Daniel Eden의 접근이 가장 적합했습니다.

Eden은 디자인 시스템을 흥미롭게 조직하고 구조화합니다. 디자인 자산을 **패턴(pattern)**과 **표현(expression)**이라는 두 층으로 나누는 것에서 시작합니다.

패턴 레이어

패턴은 레이아웃을 이루는 블록입니다. 컴포넌트를 어떻게 구현해야 하는지 정확한 명세를 제공합니다. 패턴에는 컴포넌트가 있고, 그 안에는 하위 컴포넌트가 있는 식입니다. 패턴 자체에는 표현이 없으며 어떤 메시지도 담지 않습니다. 컴포넌트는 한 서비스 안에서도, 우리가 다루는 전체 범위에서도 재사용할 수 있습니다.

좋은 시스템은 컴포넌트를 적절한 수준으로 공통화해 디자인 전체에서 중복을 없앱니다. 목적은 우리의 일을 단순하게 만드는 것입니다.

표현 레이어

표현 레이어는 메시지를 담으며 컴포넌트의 가장 기초적인 수준에 있습니다. 다른 하위 컴포넌트로 구성되지 않는다는 뜻입니다.

보통 원자(Atoms)라고 부릅니다. 자세한 내용은 Brad Frost의 아토믹 디자인을 참고하세요.

브랜딩과 목소리의 톤이 담기는 곳입니다. 색상, 문구, 아이콘과 일러스트레이션, 사진과 영상 등이 표현 레이어에 속합니다. 이들은 메시지를 표현하며, UI 구조와 독립적인 브랜드 가이드를 따릅니다.

이 접근이 얼마나 확장 가능한지 이제 감이 올 것입니다. 모든 요소를 식별해두면 Figma나 Sketch 같은 훌륭한 도구로 패턴과 표현 레이어를 쉽게 연결할 수 있습니다.

시스템의 약점은 유연성에 있습니다. 너무 딱딱하지도, 너무 느슨하지도 않게 균형을 잡는 것은 어렵습니다. 두 부분으로 나누니 우리에게는 훨씬 쉬워졌습니다. 블록과 표현이 늘 디자이너만의 책임인 것도 아닙니다. 블록은 주로 개발자가 구현하고, 표현은 마케터가 브랜드의 목소리를 정하며 다룰 가능성이 큽니다. 개발자와 마케터에게 같은 메시지를 같은 방식으로 전달할 수는 없으므로 두 부분에는 서로 다른 소통이 필요합니다.

좋은 디자인의 어려움은 명확하게 정의된 하나의 디자인 콘셉트로 여러 이해관계자를 연결하는 데 있습니다.

패턴은 개발 가이드를 따라야 하고, 표현은 브랜드가 선명하게 드러나거나 콘텐츠가 올바르게 표시될 만큼 유연해야 합니다. 그 사이에서 우리의 역할은 각 요소를 연결해 최종 결과를 사람들이 인지적으로 쉽게 받아들일 수 있도록 하는 것입니다.

앞서 소개한 Daniel Eden의 글에는 콘셉트라는 레이어도 등장합니다. 이해관계자에게 내용을 전달하고 디자인을 평가하는 곳입니다.

네 번째이자 마지막 문제는 디자인 자체의 요구입니다.

디자인 콘셉트를 어떻게 전달하고 평가할까요?

콘셉트는 이야기를 들려줍니다. 가능한 모든 수단으로 추상적인 아이디어를 전달하는 것이 콘셉트입니다. 여기서 디자이너가 차이를 만들어야 합니다. 우리가 시스템을 만든 이유도 여기에 있습니다. 자원을 아껴, 아이디어를 콘셉트로 시각화하고 구체화하는 데 필요한 시간을 확보하기 위해서입니다.

Eden의 말을 바꿔 표현하면,

표현 레이어가 알파벳이고 패턴 레이어가 단어와 문장이라면, 콘셉트 레이어는 우리의 이야기입니다.

알파벳과 사전을 만드는 일은 가장 중요한 작업, 곧 사람들에게 전할 이야기를 만드는 기반입니다.

기반의 품질은 메시지의 명확성에 영향을 주고, 이야기의 품질은 제품 경험 전체에 영향을 줍니다.

그렇다면 디자인이 좋은지 어떻게 알 수 있을까요?

콘셉트는 이론적·실무적 조사에 기반한 가정으로 이뤄집니다. 공감을 미리 확실하게 통제하기는 어렵기에, 직접 시험하는 것은 디자인이 목적에 맞는지 판단하는 좋은 방법입니다. 그리고 객관적인 판단에는 지표가 중요합니다.

우리 시스템에서는 각 콘셉트에 지표를 연결해, 테스트 후 가정이 맞았는지 확인합니다. 시스템 전체가 그렇듯 지표도 고정불변은 아닙니다. 유연하게 다루며 첫 테스트 후 언제든 조정할 수 있습니다. 몇 차례 반복한 뒤에도 기대한 결과가 나오지 않으면 콘셉트가 적절하지 않아 수정해야 한다는 뜻입니다. 핵심 컴포넌트 자체는 꽤 견고해 나쁜 결과의 주원인은 아닐 것이라고 가정하지만, 그것들을 조합한 방식은 원인일 수 있습니다.

달리 말하면, 단어의 철자는 모두 맞지만 문장 구조가 잘못된 것입니다. 문법에 맞게 단어의 위치를 바꿔야 합니다. 그래도 통하지 않으면 메시지가 사람들의 기대에 답하지 못하는 것이므로 콘셉트 전체를 다시 생각해야 할 수 있습니다.

생각을 정리하며

디자인 시스템은 디자인을 전달하는 좋은 방법입니다. 그렇다고 주변의 모두가 디자이너처럼 생각하고 일하리라 기대할 수는 없습니다. 대신 시스템을 설명하고 누구나 자원에 접근하게 해, 미리 만든 블록으로 대략적인 콘셉트를 구성하도록 도울 수 있습니다. 지난 6개월간 사내 디자인 수업으로 작동 방식을 알리고 모든 자산을 모두에게 공개하며 그렇게 해왔습니다. 최근에는 PM과 마케터가 만든 목업과 아이디어가 등장해, 그동안의 노력이 큰 보람으로 돌아왔습니다.

좋은 아이디어는 누구에게서든 나옵니다. 디자이너에게는 아이디어를 쉽게 표현할 도구가 있지만 동료들에게는 없을 수 있습니다.

자산을 공유하는 것은 동료뿐 아니라 누구든 아이디어를 전달하도록 돕는 방법입니다.

초기 콘셉트와 원칙, 디자인 문화를 공유하면 모두가 우리의 과정을 이해하고, 아이디어를 나누는 일이 결코 쓸모없지 않다는 것을 알게 됩니다. 하나의 콘셉트가 다른 사람에게는 다르게 와닿아 새로운 방향을 열 수도 있으니까요.

다른 많은 팀처럼 우리도 조금 정리를 마친 뒤 디자인 시스템을 모두에게 공개할 예정입니다 :). 끝까지 읽어주셔서 감사합니다. 더 일반적인 이야기가 되도록 실제 제품과 컴포넌트 설명은 뺐지만, 궁금한 점에는 기쁘게 답하겠습니다!

---

대표 일러스트레이션: Jetty Cho.