디자인 패턴, 컴포넌트는 어떻게 제작하는 건가?
디자인 시스템에 관하여 2
https://brunch.co.kr/@migyeongux/50
지난번 글에서 디자인 시스템의 확장성, 효율성을 위한 협업 방법과 함께 디자인 시스템 패턴 개발과정에 대해 소개하였다. 디자인 시스템 팀이 아닌 프러덕트 팀에서 일한다면, 디자인 패턴을 디자인하여 디자인 시스템에 기여하는 역할을 많이 할 것이다.
이번 글에서는 디자인 패턴 제작을 하기 위해서는 어떠한 요소를 고려해야 하는지 알아보겠다.
디자인 패턴 제작은 크게 3가지 단계로 나누어진다.
1. 발견, Discovery 단계
2. 디자인 패턴 콘셉트 제작, Create 단계
3. 디자인 패턴 개발 단계
1. 발견, Discovery 단계
첫 번째 단계는 "발견"이다. 디자인 패턴을 디자인하고 개발하는 과정에서 어떤 UI 엘리먼트가 디자인 패턴으로 적합한지 테스트하고 발견하는 과정이다. 일반적으로 해당 디자인 컴포넌트가 필요한 프러덕트 팀과 디자인시스템 팀, 그리고 개발자들이 모여 해당 패턴이 정말로 필요한지, 패턴의 목적과 정체성, 혹시 디자인 시스템 안에서 대체가능한 패턴은 없는지, 어떻게 사용해야 하는지 등을 의논한다. 이 단계에서는 디자인 패턴을 제작할 것인지 아닌지를 정하는 데에 목적이 있다.
첫 번째 단게인 "발견" 단계를 성공적으로 마쳤다면 그다음 단계는 디자인 패턴 콘셉트 제작, Create 단계로 넘어가자.
2. 디자인 패턴 콘셉트 제작, Create 단계
발견 단계에서 얻은 인사이트를 기반으로 디자인 패턴을 제작하는 단계이다. 이 단계에서는 디자인 패턴 디자인은 해당 패턴의 콘셉트와 UX와 스펙(Spec)을 만들어야 한다.
콘셉트를 디자인할 때에는 디자인 시스템팀과 패턴을 사용하는 프러덕트 팀 그리고 개발자가 모여 구체적인 옵션, 바리에이션(variation), 인터렉션등을 의논하며 이 의논사항을 바탕으로 해당 패턴에 오너십(ownership)을 가진 팀이 최종 UX와 스펙을 만든다.
스펙을 만들 때에는 체인지 로그 (Change Log), 패턴 목적 (Pattern Purpose), 아나토미 (Anatomy), 타입 (Variations), 디자인 토큰, 상태 (Status), 패턴 행동 (Behaviours), 접근성 (Accessibility), SEO, 가이드라인 (Do, Dont)을 기술해야 한다. 이 외에도 다른 요소들이 포함되기도 한다. 패턴 스펙 탬플랫 예시
패턴 스펙 탬플랫 예시3. 디자인 패턴 개발 단계
디자인 패턴의 콘셉트와 스펙이 완료되면, 파일을 개발자에게 전달하고 개발과정에서 디자인이 정확하게 구현되었는지 확인하고 검토하는 단계를 거쳐야 한다. 디자인 패턴 개발이 끝나면 보통 콘텐츠 매니지먼트 시스템에 구현하여 에디터나 다른 디자이너들이 해당 패턴을 사용할 수 있게끔 한다.
