디자인 시스템은 약속입니다

1. 같은 파란색을 세 가지 이름으로 부를 때

프로젝트 회의에서 이런 장면을 자주 봅니다. 디자이너는 메인 블루라고 부르고, 개발자는 #2563EB라는 코드로 기억하고, 기획자는 지난번 그 파란색이라고 말합니다. 셋 다 같은 색인데 이름은 제각각이죠. 버튼 모서리도 어떤 화면에선 8px, 어떤 화면에선 10px이 되고, 회색은 페이지마다 미묘하게 달라집니다. 화면이 몇 개 없을 땐 티가 안 나다가, 50개쯤 넘어가면 사이트 전체가 어딘가 어긋나 보이기 시작합니다. 디자인 시스템은 이 어긋남을 막기 위한 약속입니다. 색과 글꼴, 간격, 버튼 같은 부품을 미리 정해 두고 모두가 같은 이름으로 부르기로 합의하는 일입니다.

2. 값에 이름을 붙이는 일, 디자인 토큰

그 약속을 담는 단위가 디자인 토큰입니다. #2563EB 대신 color-primary, 16px 대신 space-4처럼 값에 의미 있는 이름을 붙이는 거죠. 이름이 값을 대신하면 다크 모드를 만들 때도 화면을 하나하나 고칠 필요 없이 토큰의 값만 바꾸면 됩니다. 2023년 6월 피그마가 Config 행사에서 변수(Variables)를 내놓으면서 이 방식이 디자인 파일 안으로 들어왔고, 라이트와 다크 같은 모드도 오갈 수 있게 됐습니다. 작년 10월에는 W3C의 디자인 토큰 커뮤니티 그룹이 토큰을 주고받는 공용 형식의 첫 안정 버전을 냈습니다. 공식 웹 표준은 아니지만, 도구가 달라도 같은 형식으로 토큰을 주고받을 길이 생겼습니다.

3. 공개된 디자인 시스템에서 배우는 것

남이 만든 디자인 시스템을 들여다보는 건 꽤 좋은 공부입니다. 2014년 구글 I/O에서 처음 소개된 머티리얼 디자인은 구글 제품 전체를 하나의 언어로 묶으면서 그 가이드를 누구나 볼 수 있게 공개했습니다. 국내에서는 토스가 앱인토스 개발자 문서에 자사 디자인 시스템 TDS에서 가장 자주 쓰는 컴포넌트 11개를 공개해, 파트너가 만든 미니앱도 토스와 같은 화면 문법을 쓸 수 있게 했습니다. 정부도 2024년 4월 범정부 디자인 시스템 KRDS를 공개하면서 디자인 요소를 토큰으로 정리했고요. 이런 문서를 읽어 보면 컴포넌트 모양보다 언제 쓰고 언제 쓰지 말아야 하는지에 대한 설명이 훨씬 깁니다.

4. 세컨드펭귄의 시선: 작은 팀일수록 약속이 필요합니다

디자인 시스템이라고 하면 큰 회사의 일처럼 들리지만, 우리는 작은 프로젝트일수록 더 필요하다고 생각합니다. 그래서 화면을 그리기 전에 색, 글꼴 굵기, 간격, 모서리부터 토큰으로 정하고 피그마 변수와 CSS 변수에 같은 이름을 씁니다. 버튼 같은 부품은 TypeScript로 만든 React 컴포넌트로 묶어서, 정해진 종류 밖의 값은 아예 넣을 수 없게 해 두고요. 애니메이션 길이도 토큰으로 관리하면 움직임 줄이기를 켠 사용자에게 한 번에 꺼 줄 수 있습니다. 이렇게 정한 규칙은 사이트를 넘길 때 클라이언트에게도 함께 드립니다.