디자인 시스템은 예쁜 가이드 문서가 아니라, 두 번째 페이지부터 값이 싸지는 구조입니다.

디자인 시스템은 색, 글자 크기, 여백, 버튼처럼 반복해서 쓰는 요소에 이름을 붙여 정리해 둔 규칙 모음입니다. 화면을 그릴 때마다 매번 정하지 않고, 이미 정해둔 것을 가져다 쓰게 만드는 장치입니다.

페이지가 한 장이면 필요 없습니다. 문제는 페이지가 늘어날 때, 그리고 만드는 사람이 바뀔 때 생깁니다.

디자인 시스템이 실제로 아끼는 것

페이지를 추가하는 시간

제목, 본문, 버튼, 카드가 이미 정의되어 있으면 새 페이지는 그리는 일이 아니라 조립에 가까워집니다. 매번 새로 그리는 사이트는 페이지가 늘어나도 한 장당 시간이 그대로지만, 시스템이 있는 사이트는 뒤로 갈수록 빨라집니다.

수정하는 시간

브랜드 색을 바꾸는 일이 스무 곳을 찾아다니는 작업이 될지, 한 곳을 고치는 작업이 될지는 시스템이 있느냐로 갈립니다. 웹플로우에서는 변수와 클래스가 그 한 곳에 해당합니다.

사람이 바뀌어도 흐트러지지 않는 것

담당자가 바뀌거나 외부에 수정을 맡길 때, 규칙이 없는 사이트는 조금씩 어긋납니다. 버튼 높이가 다르고 여백이 미묘하게 다른 페이지가 쌓이면 사이트 전체가 낡아 보입니다. 규칙이 있으면 새로 온 사람도 같은 화면을 만들 수 있습니다.

만들 필요가 없는 경우도 있습니다

페이지가 다섯 장 이하이고 앞으로도 늘릴 계획이 없다면 시스템 구축은 과한 투자입니다. 그 경우에는 색과 글자 크기만 정해두는 정도로 충분합니다.

기준은 단순합니다. 이 사이트를 앞으로 계속 고치고 늘릴 것인지, 한 번 만들고 그대로 둘 것인지. 계속 고칠 사이트라면 시스템은 비용이 아니라 선불입니다.