현직 디자이너가 말해주는 디자인 시스템과 디자인 토큰
디자인 과정의 효율화, 일관된 디자인 경험을 제공하고 싶다면
듀오톤 멤버들의 실무 사례로 제작된 오픈패스 VOD 클래스 [Figma Variables를 활용한 디자인 토큰] 강의 내용을 토대로 작성되었습니다.
구글, 애플, 토스, 원티드의
공통점은 무엇일까요?
(물론 여러 가지가 있겠지만) 바로 디자인 시스템 구축하고 이를 공개했다는 점입니다.
디자인 시스템, UX/UI 디자인 분야에서 활동하고 있는 디자이너라면 한 번쯤은 들어보셨을 텐데요.
디자인 시스템이 무엇이길래 공개할 때마다 화제를 모으고, 왜 기업들은 디자인 시스템을 구축하기 위해 많은 시간과 노력을 쓰는 걸까요?
디자인 시스템이란?
먼저 아래 이미지를 봐주세요.
오픈패스 - [Figma Variables를 활용한 디자인 토큰 강의] 중디자인 시스템의 개념이 없던 시기에는 동일한 서비스의 화면을 구현하더라도 크고 작은 휴먼 에러들이 발생할 수밖에 없었습니다.
일관된 가이드라인이 없다 보니 화면을 담당하는 디자이너나 개발자에 따라 색상이나 폰트, 버튼의 위치 등 미세한 부분에서 차이가 나타날 수밖에 없었던 거죠.
이런 부분들을 하나하나 논의하고 맞춰 가려다 보면 작업의 효율성도 떨어지게 됩니다. 또한, 동일한 내용의 화면을 웹, 모바일, 태플릿 등 별도로 만들어지는 과정에서 발생하는 추가적인 논의 사항들도 고려하다 보면, 많은 시간과 노력이 필요했죠.
그 때문에 어떤 환경이든, 누구와 협업하든 일관된 결과물을 도출할 수 있는 기준과 원칙이 필요했고 이를 위해 고안된 개념이 디자인 시스템입니다.
다시 말해, 디자인 시스템은 UI가 구현되는 환경, 사용성 및 작업자 간 효율성을 높여 일관된 결과물을 도출하기 위한 가이드라인이라고도 볼 수 있습니다.
디자인 시스템의 구성
회사마다 디자인 시스템을 구성하는 방법은 다르지만 일반적으로 포함되는 요소는 principles, UI Library, 그리고 guidelines입니다.
오픈패스 - [Figma Variables를 활용한 디자인 토큰 강의] 중먼저 principles은 디자인 시스템이 나아가야 할 방향성을 담습니다. 어떤 특징을 가진 디자인 시스템인지, 이 시스템을 사용하는 사람들이 지켜야 할 원칙을 말합니다.
guideline은 실제로 디자인 시스템을 사용하는 디자이너나 개발자에게 필요한 지침을 뜻합니다. 버튼 컴포넌트의 높이는 어떻게 써야 하는지, 에러 상황을 알리는 버튼의 색상은 무엇인지 등 구체적인 안내서라고 할 수 있습니다.
UI Library는 크게 components, patterns, foundation으로 세분화할 수 있습니다. 이 요소들이 디자인 시스템에서 흔히 말하는 ‘디자인 토큰 Design Token’과 가장 관련이 깊은 부분입니다.
먼저 components는 우리가 자주 사용하는 버튼이나 bottom navigation, GNB 같은 요소들을 의미합니다. Patterns은 components들이 조합되어 사용되는 규칙이고요. 마지막으로 foundation은 디자인 시스템의 기반이 되는 요소들을 의미합니다. 가령 레이아웃, 네비게이션, 색상, 타이포그래피, 사운드 등의 항목으로 구성할 수 있습니다.
오픈패스 - [Figma Variables를 활용한 디자인 토큰 강의] 중이처럼 UI Library를 구성하는 세부 요소 중 시각적 기초 요소들을 중심으로, 흔히 말하는 디자인 토큰( Design Token)을 설계할 수 있습니다. color에서 #909090과 같은 hex code나 font size와 같은 디자인 토큰은 데이터로 치환되어 활용할 수 있습니다.
디자인 토큰, 적용 화면 예시
디자인 토큰을 적용했을 때 예시를 간단히 보여드리겠습니다. 한 내비게이션 서비스 화면입니다.
오픈패스 - [Figma Variables를 활용한 디자인 토큰 강의] 중 / 강의를 위해 제작된 화면입니다.내비게이션 화면은 보통 day mode와 night mode가 있는데요. 디자인 토큰을 적용하지 않는다면 각 상황에 따라 노출되는 모든 화면을 추가로 제작해야겠죠. 디자인 토큰을 이용하면 아래처럼 손쉽게 day mode를 제작할 수 있습니다.
오픈패스 - [Figma Variables를 활용한 디자인 토큰 강의] 중 / 강의를 위해 제작된 화면입니다.디자인 요소가 체계적인 토큰 환경에 의해 제어된다면 서비스 유지보수에 필요한 시간과 비용을 아낄 수 있고, 이를 기반으로 보다 필요한 기능이나 아이템에 집중할 수 있습니다. 이런 이유로 최근 많은 기업이 토큰을 활용해 시스템을 구축하는 경향이 있는데요. 대표적으로는 머터리얼 디자인 시스템이나 어도비의 스펙트럼 사례가 있습니다.
디자인 시스템과 디자인 토큰은 복잡한 개념이라 이론적으로는 이해해도 실무에 적용하려면 많은 노력과 고민이 필요합니다. 하지만 디자인 작업의 효율을 높이기 위한 도구인 것은 분명합니다. 반복적인 작업들로 인해 업무량이 불필요하게 늘어난다던가, 서비스의 규모가 커지면서 일관된 디자인 경험을 제공하기 어렵다면 디자인 시스템을 구축해야 할 시점일 수 있습니다.
디자이너는 문제를 해결하고 더 나아지기 위해 고민하는 사람들인 만큼, 여러분이 담당한 프로젝트와 서비스를 위해 더 좋은 방법들을 찾아가는 과정에서 디자인 시스템과 토큰의 활용 여부를 판단해보시면 좋을 것 같습니다.
디자인 시스템과 디자인 토큰에 대해 더 자세히 알고 싶다면 아래 링크에서 오픈패스 클래스를 참고해보세요
가능한 이론적인 내용보다는 실무적으로 바로 이해할 수 있는 내용 중심으로 담았습니다.
디자인 시스템 구축 사례와 디자인 토큰 구조 설계법이 궁금하신 분들께 많은 도움이 되었으면 합니다.
자세히 보러 가기 > https://vo.la/qbWcX
