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

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

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

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

저번글에서 디자인 시스템에 대한 디자이너와 개발자 각자의 Agenda와 디자인 시스템 구축을 위한 팀의 목표와 목적에 대하여 알아보았습니다.

이번글에서는 디자인 시스템 정의 및 개발에 대하여 이야기해보겠습니다.

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

디자인 시스템 정의

Design Principle & Pattern

똑똑한 개발자 디자인 시스템 원칙

Design Principle 

디자이너 개발자간 효율적인 커뮤니케이션을 위해 일관성, 효율성, 확장성을 고려하여 시스템을 구축하여야 합니다.

일관성 : 제품 전반에서 컴포넌트가 통일성 있게 조합되며, 제품에서 느껴지는 일관성을 유지해야 합니다.

확장성 : 다양한 조합과 반응형 환경에 대응 가능한 확장성을 가지고 있어야 합니다.

효율성 : 디자이너와 개발자가 효율적으로 소통하며 컴포넌트를 관리 및 수정할 수 있어야 합니다.

Design Pattern

라이브러리 형태로 공유가능한 오픈소스 시스템 구축을 위해 재사용성, 운용성을 고려하여 구축하여야 합니다.

재사용성 : 제품의 특성에 맞게 대응해 시스템 가이드를 제공하며, 다양하게 적용해 활용할 수 있어야 합니다.

운용성 : 디자인 및 코드 상에서, 간단한 조작 및 변경으로 컴포넌트 조합과 시스템 가이드 재적용이 가능하게 구성해야 합니다.

Atomic Design

다음으로 아토믹 디자인 방법론을 이용하여 '시스템 단위'를 구축합니다. 크게 2개에서 3개의 범위로 시스템 단위를 나누어 구성합니다.가장 작은 요소인 원자단위에서 시작해 템플릿과 페이지로까지 컴포넌트가 확장됩니다.

시스템 구축과정

디자인 프로세스

디자이너가 디자인 시스템을 구축할 때에는 이미 완성되어있는 서비스에서 시스템 구축을 진행하는 것이 대부분 이며 신규서비스를 구축해나아갈때도 전체 큰 디자인을 진행하면서 컴포넌트를 만들어가기 때문에 가장 큰 단위인 Template(Page)에서 시작하여 원자로 줄어드는 프로세스가 좀 더 효율적일 것 입니다.페이지 단위에서 컴포넌트의 상호 레이아웃과 Spacing을 고려해 에셋을 구성하고, 이후 유기체와 분자, 원자의 작은 단위로 컴포넌트를 쪼개 분류 배치하며 Assets Library를 구성하는 방법이 좋습니다.

Component 분류

제가 직접 프로세스를 시도해본 결과, 1차적으로 기존에 적용되었던 디자인 및 레이아웃에서 자주 활용되었던 에셋 위주로 컴포넌트를 분류하고 취합하는 것이 가장 좋았습니다. 처음부터 모든 컴포넌트를 생각하고 들어가면 좋겠지만 직접 시스템들 만들어나아가면서 구성하는 것이 좋습니다.

이 과정에서 중복되거나 반복되는 요소를 선택적으로 채택하고 수정합니다. 이후 '아토믹 방법론'을 기반으로 플랫폼에 최적화 된 UI 구성으로 Page 단위부터 순차적으로 쪼개며 분자와 원자를 구성합니다.

Assets Rabeling

'효율성', '확장성'을 고려하며 각 컴포넌트의 레이블링 과정을 거칩니다.

디자이너와 개발자가 모두 알아보기 쉬운 형태로 구성하며, Device / Type / State 등에 따라 순차적으로 이름을 조합합니다.

Assets Rabeling 예시 - Color System

너무 많은 컬러 단계가 시스템에 적용되면 재사용성 / 운용성 면에서 어려울 수 있기 때문에, 사용하는 디자이너 혹은 개발자의 초기 셋팅 및 조작 과정을 최소화 하는것도 좋습니다.

결론

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