소통, 통일성, 속도를 위한
디자인 시스템 DLS
디자인 시스템 설계부터 적용까지
하나의 제품의 기초가 되는 디자인 시스템을 잘 만드는 것은 정말로 어려운 일이다. 디자인 시스템은 브랜드를 유지하는 바이블과 같아서 정리되지 않은 상태에서 가이드를 만드는 것도, 가이드 없이 제품을 만드는 것도 어렵기 때문이다. 그럼에도 많은 기업들이 디자인 시스템을 만들기 위해 노력하는 이유는 그만큼 디자인 시스템이 작업의 효율을 올려주며, 다양한 이해관계자가 하나의 제품을 동일하게 만들기 위한 토대로 작용하기 필요하기 때문일 것이다. 북커버리 팀은 함께하는 디자이너가 고작 두 명이지만, 제품을 만들며 지속적으로 디자인 시스템을 구축하기 위해 노력했고, 고군분투 아둥바둥의 경험과 과정이 (이미 체계가 잡힌 기업들이 제작한 시스템보다) 신생 스타트업, 작은 조직, 아직 정돈되지 않은 많은 팀들에 도움이 될 것 같아 그 경험을 기록하고 공유하려고 한다.
디자인 시스템의 목적
에어비앤비에서 말하길, 디자인 시스템이 필요한 이유는 다양한 플랫폼으로 제공하거나 많은 사람들이 함께 만들어도 여전히 하나의 제품처럼 느껴지고, 동일한 경험을 제공하기 위해서라고 한다. 디자인 시스템의 필요성과 목적에 대해 저마다 다르게 표현하겠지만, 결국 디자인 시스템을 만드는 궁극적인 목적은 유저에게 항상 동일한 경험을 전달하기 위함일 것이다.
아래 링크는 에어비앤비 팀이 소개한 디자인 시스템 제작기의 본문이다. 디자인 시스템의 필요성과 제작 시 경험을 자세히 풀어 설명했으니 디자인 시스템을 공부하기 위해서 한번 읽어보는 것을 추천한다.
북커버리 팀이 새로운 브랜드와 제품을 만들어가는 초기 단계에서 디자인 시스템 제작에 초점을 맞춘 목적은 아래 세 가지이다.
1. 문서 하나로 팀 전체가 소통할 수 있는 통일된 언어 제작
2. 하나의 제품을 유지하면서 자유로운 변형이 가능한 기준 마련
3. 지속적이고 빠른 실험을 위한 제작 속도와 효율 증진
작은 팀일수록 시간의 제약이 크며 더 빠른 속도를 내기 위해 디자인 시스템을 생략하고 바로 제품을 만드는 경우가 더 많을 것이다. 분명 디자인 시스템은 유저와 직접 마주하는 제품이 아니기 때문에 우선순위에서 밀려나고, 시간이 한참 지난 뒤 팀의 일원들이 혼란을 겪을 때쯤 다시 고민의 선상에 올라온다. 북커버리 팀이 디자인 시스템을 빠르게 제작하기로 한 이유는 당장에 시간이 조금 더 들더라도, 더 빠르게 디자인을 변경하면서도 브랜드를 유지할 수 있도록 하기 위함이었다.
제품 개발의 초기에 디자인 시스템을 만드는 만큼, 꼭 고정되어야 하는 부분을 유지하되 변동이 가능한 자율성을 가질 수 있는 부분을 규칙으로 만들어 최대한 적은 제한으로 브랜드를 유지하도록 했다. 또한 디자인 시스템을 제작할 때는 이 디자인 시스템은 디자이너뿐만 아니라 개발자도 함께 이해하고 작업의 기준으로 사용해야 하기 때문에 어떤 부분을 고정하고 어떤 부분을 변동 가능한 Parameter로 할 것인지 등 팀내 개발자와의 논의하며 컴포넌트를 제작했다.
Foundation
디자인 시스템에 기본이 되는 요소로 컬러, 텍스트 스타일, 아이콘 스타일을 지정할 수 있다. 쓰임에 대해 명시하거나 용도에 대한 규칙을 추가할 수 있겠으나, 변경될 수 있다는 여지를 두어서 용도는 생략하고 서비스에서 꼭 사용되는 요소들만을 나열하여 최소한으로 정리했다.
Components
컬러, 텍스트, 아이콘 규칙을 사용해 제작한 컴포넌트는 text field, Select Controls, Button, Thumbnail, Tooltip, Toast message, Modal 등 기본적으로 사용되는 컴포넌트들과 서비스에서만 사용되는 Post card, Book contents 등으로 정리되었다. 기본적으로 유지되어야 하는 규칙들은 상세히 명세하고, 변동될 여지가 있거나 규칙으로 사용하기 어려운 부분은 변동될 수 있도록 하여 자율성을 가질 수 있도록 했다.
Skeleton
마지막으로 모든 컴포넌트들을 활용하여 제작되는 전체 페이지 또한 규칙을 유지하기 위해 사용될 수 있는 모든 페이지의 골격을 시스템으로 정리하여 기본적인 규칙에 벗어나지 않도록 아래의 규칙을 따랐다.
북커버리 디자인 시스템은 제작 속도와 변경 용의성을 중요시 여겼기 때문에 소통의 어려움을 없애기 위해 최대한 모든 포지션의 사람들이 이해하기 쉽도록 자세히 작성되었으며, 다양한 경우의 쓰임과 설계시 필요한 정보에 대해 자세히 설명했다. 부족함이 많고 추가되어야 할 부분이 많지만 더 많은 사람들에게 조금이나마 도움이 될 수 있기를 바라며, 서비스가 성장하며 복잡도가 올라간 후에 더 완성도 있고 구조적인 컴포넌트를 제작할 수 있기를 기대한다.
