실무 디자인 시스템 구축 방법(3)

디자이너라면 꼭 알아야할 실무 디자인 시스템 구축

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

지금까지 디자인 시스템 구축을 위해 디자이너와 개발자의 Agenda를 확인 후 목표와 목적 원칙을 정하고 디자인 시스템의 기초를 다지는 작업을 설명하였습니다. 이번에는 이것의 가이드라인을 정립하는 단계에 대하여 알아보도록 하겠습니다.

실무에서의 디자인 시스템 구축

디자인 시스템 문서화

디자인 가이드라인과 컴포넌트

디자인 시스템에서 아토믹 방법론을 기반으로 한 컴포넌트를 구성했다면 해당 컴포넌트에 대한 가이드라인을 만들어야 합니다. 가이드라인을 만드는 이유는 조직 전체가 디자인 가이드에 대하여 공유하고 컴포넌트를 사용함에 있어 오차가 없도록 하기 위함입니다.

리디북스의 문서화된 디자인 가이드 라인

위의 사진은 리디북스의 문서화된 디자인 가이드라인 입니다. 이러한 문서화된 가이드라인을 통해 공유된 언어를 통해 팀원 각각이 같은 멘탈모델을 가지고 커뮤니케이션 할 수 있습니다. 문서화는 주로 Notion을 이용합니다.

이러한 원칙을 바탕으로 디자인 시스템을 제작할때, 컴포넌트 등 기존의 UX/UI 히스토리를 문서화하는 작업을 진행합니다. 그리고 이러한 문서화된 모든 내용은 사용자 경험을 우선으로 합니다. 서비스와 관련된 모든 사람이 해당 문서를 확인할 수 있어야 하고, 의사결정 과정에서 모두에게 공유되어야 합니다.

똑똑한 개발자 Notion 시스템 가이드 문서 일부

똑똑한 개발자 Figma Assets Library 문서 일부

효율적인 디자인 시스템은 하나의 Figma와 연결된 Notion 파일로 디자인 에셋을 적용하며, 가이드라인을 관리합니다.

이렇게 디자인 컴포넌트 시스템과 각 컴포넌트 UI에 해당하는 히스토리를 포함한 가이드라인을 통해 디자인 시스템을 구성합니다. 여기서 히스토리란, '하단 메뉴바'라는 UI 컴포넌트를 왜 사용하게 되었는지 어디서 사용되고 어디서는 사용안되는지, 어떨때 나오게 되는지 등의 정책을 의미합니다.

Storybook으로 관리

UI컴포넌트의 스타일, 명칭 및 사용 목적을 정의할 때에는 디자이너뿐만 아니라 프론트엔드 개발자와도 많은 논의를 필요로 합니다. 사용되는 코드 역시 디자인과 동일하게 구성하면 모든 환경에 일관성 있게 적용할 수 있기 때문입니다. 그래서 각 컴포넌트 Code는 Storybook으로 관리합니다.

결론

이렇게 디자인 시스템 구축을 위한 개념학습과 디자인 시스템 구축 프로세스를 알아보았습니다. 디자인 시스템과 가이드라인을 구축하고 경험해 보는 것은 디자이너에게 아주 중요한 부분입니다. 디자인을 할때 디자인 시스템과 가이드라인을 고려하면서 서비스를 확장해 나아가봅시다!