안녕하세요, 플랫폼 디자이너 타일러입니다.

과거 One Product System으로 발표된 클래스101의 디자인 시스템이 구독 서비스의 런칭에 맞춰 Vibrant Design System(이하 Vibrant)로 개편되었습니다. 🥳

앞으로 이 지면을 통해서 그 치열한 개편의 과정에서 얻게 된 여러 인사이트들과, 저희가 겪었던 문제와 그 해결에 관하여 시리즈 연재로 공유하고자 해요.

그 시작을 여는 첫 아티클에서 저는 팀이 어떠한 관점을 바탕으로, 그리고 왜 Vibrant라는 새로운 이름으로 개편하였는지에 대해서 먼저 이야기해 보고자 합니다.

그런데…Design System이란?

저희가 과거 아티클을 통해서 OPS를 소개해 드린 이후로 많은 분들의 관심과 사랑을 받았는데요. 보내주신 성원이 아깝지 않도록 내부 구성원들 사이에서도 디자인 시스템에 대한 고민은 발표 이후로도 치열하게 이어져 왔습니다.

더 좋은 성능과 사용 편의성 중 어떤 부분에 중점을 두어야 할지, 어떻게 디자인해야 사용하는 입장에서 더 파악하기 쉬울지, 또 어떻게 디자인 시스템을 통해서 다른 구성원들과 잘 협업할 수 있을지 등 정말 많은 이야기를 나누면서 막연히 잘 알고 있다고 생각했던 디자인 시스템에 대한 생각을 한 번 더 돌아볼 수 있게 만든 계기가 되었어요. 결국 디자인 시스템은 저희가 생각하는 것 이상으로 다양한 모습을 담고 있을 수 있다는 데 생각이 모아졌습니다.

또 다양한 포지션의 구성원들이 사용하고 있기에 서로 본인의 시야에서 중요하다고 생각되는 부분을 강조하기도 쉬워 보다 넓은 관점에서 바라봐야 한다는 점에도 생각이 일치하였어요. 가령, 저와 같은 플랫폼 디자이너의 입장에서는 프로덕트의 공통 컴포넌트의 디자인과 그 변화형, 그리고 구체적인 스펙을 규정하는 업무가 상대적으로 많았기 때문에 디자인 시스템은 결국 컴포넌트들을 만들고 잘 관리하는 것이지 않을까라고 처음에는 했었는데요.

하지만 조금만 다시 생각해 보니 그렇게 단순하게 정의하긴 어렵다는 생각이 들었어요. 당장 제 업무만 하더라도 컴포넌트의 사용 방법을 적는 문서 작성 업무도 있고, 요청 및 개선사항을 적절하게 계획하고 실행하기도 하는 등 피그마를 만지는 시간보다는 미팅하는 시간이 더 많은 것 같았거든요. 이런 관점에 의하면 저는 디자인 시스템 업무만 하는 게 아니었던 건가요? 아니면 이 모든 업무가 디자인 시스템의 업무라고 보아도 되는 걸까요? 플랫폼 디자이너의 관점에서도 이렇게 다양하게 해석할 수 있는 여지가 나오는데 개발자의 입장에서는 또 어떨까요?

따라서 디자인 시스템이 명확한 정체성을 바탕으로 올바른 목표와 함께 발전해나가려면 이러한 물음들에 답을 해야만 했습니다. 다만 사내에서 처음으로 디자인 시스템에 대해 정의를 시도하는 것인 만큼 저희가 가지고 있는 시야뿐 아니라 저희보다 더 이르게 디자인 시스템이라는 개념을 정립해 나가고 발전시켜나간 국내외 디자이너들의 시각을 참고하기 위해 리서치를 먼저 진행하기로 결정하였고, 그 과정에서 정말 다양한 비즈니스 영역에 걸친 많은 분들이 남겨주신 관점을 참고할 수 있었습니다.(저희에게 도움을 준 관점들에 관해서는 추후 아티클을 통해 공유드릴 예정입니다).

그렇다면 디자인 시스템에 관하여 이렇게 다양한 의견들이 나오고 또 어느 정도 공존할 수 있는 이유는 무엇일까요? 어쩌면 디자인 시스템의 개념이 아직도 업계에 정립되고 있는 과정이기 때문이라고 할 수도 있겠지만, 저는 디자인 시스템이란 본질적으로 제공하는 서비스, 유저, 비즈니스 분야 등 서로 다른 맥락이 얽혀 있는 상황 속을 고려하면서 높은 효율로 프로덕트 제작을 할 수 있는 솔루션을 제공하는 것이 가장 큰 목적이기 때문이라고 생각합니다. 다시 말하자면 각 디자인 시스템은 독립적으로 존재할 수 없고 프로덕트를 더 효율적으로 개발하기 위해서 존재하는 스스로의 근본적인 특징으로 인한 것이라고 보는 것이죠.

클래스101의 디자인 시스템도 이러한 인사이트를 토대로 어떠한 내외부의 변화(사업 방향성의 전환, 프로덕트의 발전, 툴의 업데이트 등)에도 견고하고 안정적으로 클래스101의 프로덕트를 개발할 수 있어야 한다는 가장 큰 목표를 설정할 수 있도록 해주었고, 이러한 의지를 담아 저희의 디자인 시스템인 OPS를 Vibrant라는 새 이름과 함께 리뉴얼하게 되었습니다. 이어서는 리뉴얼한 Vibrant의 개념적인 구조와 업무 범위에 관하여 간략하게 소개를 드려볼게요.

Vibrant Design System

클래스101에서는 다음과 같이 디자인 시스템을 정의하였습니다.

디자인 시스템은 프로덕트를 제작하는 구성원들이 사용하는 인터널 툴이자 방법론으로써 어떻게 디지털 인터페이스를 디자인하고 제작할지에 관련된 공식적인 정의들의 모음을 말합니다.

조직의 브랜드와 제품 경험 사이에 위치한 단일한 진실의 원천으로서, 디자인부터 개발까지의 프로덕트 제작 단계에서 유저에게 브랜드 가치를 보다 일관적이고 효율적으로 제공할 수 있도록 기능하는 것이 주 목적입니다.

또 Cross Platform, Productive, Consistent를 핵심 가치로 하여 클래스101의 유저들이 일관적인 서비스를 경험할 수 있도록 클래스101의 빌더들이 보다 적은 노력으로도 효율적이고 우수한 프로덕트를 제작할 수 있도록 고안된 시스템이라고 볼 수 있습니다.

Vibrant는 크게 3가지의 파트로 나누어지며, 각 파트는 총 4가지의 동일한 층이 마치 양파처럼 가장 안에서부터 바깥으로 뻗어나가는 구조입니다. 여기서 파트는 Vibrant의 담당 분야, 층은 각 분야의 하부 구조를 의미합니다. 세 파트가 공통으로 가지고 있는 4가지 레이어는 순서대로 Foundation, Tokens, Core Systems, Components라고 부르고 있습니다.

가장 중앙에 위치한 Foundation 층은 디자인과 개발 과정에서 사용하는 조직의 브랜드 집합들의 모음을 의미합니다. 모든 레이어 중 가장 핵심적인 부분을 담당하고 있으며 Foundation 레이어에서 이루어진 정의들과 가치, 관점들을 바탕으로 코드화된 것이 Tokens 레이어로 확장됩니다. 그리고 이 두 레이어를 바탕으로 일종의 “블록 쌓는 규칙”들의 모음인 Core Systems가 만들어지는데, 쉽게 이야기하면 Foundation과 Tokens를 어떻게 써야 하는지, 배치와 활용은 어떻게 하는지 등등 인터페이스를 이루기 위하여 정의한 규칙과 패턴 등의 모음이라고 할 수 있습니다. 그리고 최종적으로 세 레이어가 모여서 실제 사용할 수 있는 디지털 인터페이스의 부분들을 의미하는 Components 레이어까지 확장됩니다. 앞서 말씀드린 디자인 시스템에 관한 관점을 구체적으로 명세한 네 가지 레이어들은 다시 각각 세 가지 파트로 이루어지게 됩니다.

첫 번째로 소개할 부분은 Assets 파트입니다. 여기서 의미하는 Assets이란 Logo, Icon, Color token, Figma component 등과 같은 시스템을 이루고 있는 유형의 것들을 모두 뜻합니다. 각 파트는 공통적인 4층의 레이어로 이루어져 있기에 Asset 파트 역시 각 레이어로 분리해볼 수 있는데요. 이때 Assets의 Foundation 레벨에는 Logo와 Icon 등이, Assets의 Tokens 레벨에는 Color Token, Spacing token 등이, Assets의 Core Systems은 Layout system의 규칙들(ex. 각 뷰포트에서 기본적으로 가지는 좌우 패딩의 수치, Breakpoint의 종류와 그 수치, 컬러 토큰을 적용하는 방식 등), 끝으로 Assets의 Components 레벨은 저희가 가장 익숙하고 많은 시간을 투자하며 가장 구체적인 컴포넌트들 — Figma component, React Component 등을 의미합니다.

다음은 Documentation 부분입니다. Documentation이란 언제 어떤 방식으로 사용해야 되는지 그리고 왜 그러한 결정이 이루어졌는지 등등의 명세들이 전부 모여 있는 문서라고 정의하고 있습니다. 마찬가지로 4개의 레이어로 분리할 수 있는데요. Documentation의 Foundation 레이어는 컬러를 보는 관점이나 맥락(가령, 왜 우리는 하필 오렌지 색상을 프라이머리로 지정했고, 왜 그 HEX 값이어야 하는지) 등이 적힐 수 있을 것입니다. Tokens 레이어에서는 토큰의 이름을 정의한 이유나 토큰이 붙여지는 맥락 등이, Core Systems 레이어에서는 테마 시스템을 어떻게 사용하고 활용해야 하는지에 대한 방법 등이, 그리고 Components 레이어에서는 버튼의 구체적인 스펙과 사용 가이드 등이 작성될 수 있습니다. Asset 파트를 잘 제작하고 관리하는 것만큼 혹은 이상으로 Vibrant는 문서화 역시 많은 무게를 많이 두고 있고 조만간 위와 같은 내용들이 정리된 문서가 공개되어 활용될 수 있도록 노력 중입니다.

마지막으로 프로세스적인 측면을 소개해 드리겠습니다. Vibrant가 말하는 프로세스란 디자인 시스템을 통해서 혹은 디자인 시스템을 활용하여 일하는 모든 방식을 지칭합니다. 가령, 디자인 시스템의 온보딩, 거버넌스, 데프리케이션, 버저닝과 릴리즈 등이 포함되죠. 프로세스의 파운데이션 레이어는 플랫폼팀과 브랜드팀의 협업 및 커뮤니케이션 등이 있을 수 있습니다. Tokens 레이어에서는 각 토큰의 값이 정의되고 조정되는 과정, 그리고 폐기하는 과정들이 포함될 수 있어요. Core Systems 레이어에서는 더 이상 알맞지 않은 레이아웃 규칙들을 폐기하는 등의 행동이 포함될 수 있을 것이고, Component 레이어에서는 에셋들의 사용자 의견을 반영하여 적용하는 것과 같은 일들을 포함합니다.

위의 내용과 같이 클래스101이 디자인 시스템을 바라보고 해석하는 관점은 현재 작동하고 있는 시스템이 어떠한 부분이 균형이 맞지 않는지 확인할 수 있고 이를 보완할 수 있는 가능성을 만들어주었습니다. 이를 활용하여 Vibrant의 3가지 부분들을 각 레이어를 통틀어 균형 있게 발전시켜 디자인 시스템이 가지는 가치를 더욱 크게 하고 보다 안정적인 시스템을 구축할 수 있을 것이라 기대하고 있어요.

또 Vibrant는 멀지 않은 시점에 오픈 소스로 공개될 예정에 있어요. 공개를 통해서 저희의 시스템이 클루들을 넘어 보다 많은 분들의 프로젝트의 일부가 되고, 여러분들의 피드백과 기여들과 함께 발전해나갈 미래를 생각하니 벌써부터 설레는데요. 그때까지 보다 완성도 있는 시스템을 선보이기 위해 지금도 클루들이 많은 고민을 하고 있습니다. 그 고민의 흔적 중 일부를 보여드리는 이어지는 아티클도 많은 관심 부탁드릴게요!

글쓴이: 안지형(Tyler)

CLASS101과 함께 더 좋은 서비스를 만들기 위해 고민하며 성장하고 싶다면 아래 링크를 통해 지원서를 보내주세요.  채용 문의(recruit@101.inc)도 언제든 환영입니다😉

👉채용 중인 포지션 확인 하러가기