디자인시스템은 디자이너, 개발자, 퍼블리셔 등 다양한 파트에 공유되는 문서이다. 그러다보니 협업의 질을 높히기 위해 필수인 내용은 아니지만 추가되면 좋은 내용들이 있었다. 그래서 그 내용에 대해 다뤄보려고 한다.
1. 구조화와 그룹화
이건 내용이라기 보단 구성적인 측면이다. 사실 디자인시스템의 구조화는 정리하기 나름이라 방법은 다양하지만 꼭 필요한 작업이다. 왜냐하면 만드는 사람만 보는것이 아니라 다양한 파트의 여러 사람들이 보는것이기 때문에 쉽게 찾을 수 있도록 해야 하기 때문이다.
나는 보통 디자인시스템 작업 시 Foundations, Styles, Components, Combination 으로 그룹을 짓는 편이다.
- Foundations에는 Overview, Layout 등이 들어가는 편인데 반응형 서비스인 경우엔 Layout에 Breakpoint 별 레이아웃의 변화와 가이드를 담는다.
- Style에는 Color, Icon, Typography, Elevation, Radious, Spacing 등 서비스 전체의 공통적이면서도 기본이되는 요소들에 대한 내용을 담는다. 이 부분은 때론 굳이 따로 구분하지 않고 Foundation 쪽에 넣기도 한다.
- Components에는 Buttons, Text fields 등 말 그대로 컴포넌트들을 정리하는데, 내 경우 Search와 Text fields는 'Input field'로 함께 묶어서 정리할 때도 있다.
- Combination에는 필터 영역이나 조회조건 영역, Grid Table과 같이 다양한 컴포넌트 요소가 일정 패턴으로 결합된 형태로 하나의 컴포넌트처럼 사용되는 경우들을 모아 정리한다. 이 부분 역시 다른 부분에 포함시킬 수도 있고, 다른 명칭으로 그룹화할수도 있다.
이 외에 추가하자면 Template(Pattern) 정도를 더해 정리할 수 있겠다.
2. 도구 별 '메인 에셋' 혹은 '메인 컴포넌트' 확인 방법
디자이너조차 디자인 툴에 대한 숙련도가 각기 다르기 마련인데 더군다나 디자이너의 툴에 대한 다른 파트의 이해도는 훨씬 낮을 확률이 높다. 조직의 숙련도에 따라 불필요 할 수 있으나, 내 경우엔 프로젝트의 규모가 크다면 디자인시스템의 Overview 영역에 메인 에셋 혹은 메인 컴포넌트를 확인할 수 있는 방법을 정리해두는 편이다.
이 부분을 정리하기 시작한 이유는 화면에 그려진 UI가 예외케이스일수도 있고, 특정 상태의 UI인 경우도 있는데 그걸 모든 화면에 공통 적용해버리는 경우가 꼭 있었기 때문이다. 이런 경우엔 수정을 요청할 때 말로만 설명하는 것 보다는 메인컴포넌트 경로로 이동하여 가이드를 한번에 확인하게 하는게 가장 효과적인데 방법을 모르면 효율이 떨어지기 마련이다. 사실 가장 좋은 방법은 개발, 퍼블리싱 전 단계에 모든 파트가 모인 자리에서 공유하며 디자인시스템이 어떤 식으로 정리되었고, 어떻게 보면 되는지 등을 교육하는 것이 좋다.
3. 컴포넌트 네이밍 규칙
디자인시스템의 작업자가 여럿이거나 다른 작업자에게로 이관하는 상황을 위해 규칙을 정하고 명시해 두면 좋다.
예를 들어, 아이콘 네이밍을 붙일 때 '컴포넌트 종류/크기/명칭' 순으로 하여 'Icon/24/Search' 로 할지, 아니면 Icon을 줄여서 ic로 명칭할지, 네이밍은 대문자로 시작할지 등을 정해두는 것이다. 특히, Figma의 경우 컴포넌트가 '/'기준으로 그룹핑 되기 때문에 대문자로 시작하는 'Icon'에서 소문자로 시작하는 'icon'으로만 바뀌어도 다른 그룹으로 묶인다. 따라서 네이밍 규칙을 정하고, 잘 공유하고, 지키는것은 생각보다 더 중요하다.
이러한 네이밍 규칙은 컴포넌트를 만들기 시작하는 디자인작업 극 초반부터 명시하고 공유해야 한다.
4. 공통간격 'Spacing'
어치피 공통인데 뭐하러 정리해 주나 싶을 수도 있다. 하지만 이렇게 정리해 두면 퍼블리싱 작업 전 다시 한번 인지시키는데 효율적이며, 추후 검수 과정에서도 다르게 적용된 화면을 빨리 걸러내 예외케이스인지 결함인지 빨리 확인할 수 있다.
여기서 말하는 공통간격에 대해 예를 들자면, 카드영역 사이 간격, 버튼과 버튼 사이 간격, Radio 버튼과 Label 사이 간격 등 정의된 간격 규칙이 변경될 확률이 0%에 가까운 간격들을 말한다.