디자인 시스템의 구성요소와 개발과정 2
UX 디자이너라면 반드시 알아야 할 주제
디자인 시스템의 구성요소
디자인 시스템에는 일반적으로 다음과 같은 구성 요소가 포함된다.
파운데이션(Foundation)
이는 색 팔레트, 타이포그래피, 아이콘, 스페이스 및 기타 디자인 요소를 포함한 디자인 시스템의 일반적인 시각적 언어를 포함한다.
https://atlassian.design/토큰(Token)
디자인 토큰은 디자인 결정을 명명하고 저장하는 단일 출처이다(single source of truth). 디자인 토큰은 색상, 폰트 스타일 및 크기와 같은 스타일 값을 가리킨다. 하드코딩된 값 대신 디자인 프로세스 중에서는 디자인 토큰을 사용하고 각 토큰은 사용 방법 또는 사용되는 컴포넌트에 따라 이름이 지정된다.
https://atlassian.design/패턴(Pattern) 또는 컴포넌트 (Component)
패턴은 버튼, 폼, 카드, 탭, 등과 같은 재사용 가능한 UI 구성 요소를 의미한다. 이러한 구성 요소는 미리 디자인되고 코드화되어 개발에서 일관성과 효율성을 보장한다. 디자이너와 개발자는 구성 요소를 재사용함으로써 시간과 노력을 절약하고 다른 프로덕트 간에 일관된 사용자 경험을 보장할 수 있다.
https://atlassian.design/디자인 원칙과 지침(Design principles and guidelines)
디자인 시스템에는 종종 기본 철학과 디자인 접근 방식을 정의하는 원칙과 지침(예: 사용 가이드라인)의 세트가 포함된다. 이러한 원칙은 디자이너와 개발자가 조직 또는 프로덕트의 전체 목표와 가치와 일치하는 결정을 내리는 데 도움을 준다.
콘텐츠 (Contents)
콘텐츠 지침은 브랜드나 프러덕트의 목소리와 톤, 문법과 문체를 다룬다.
https://atlassian.design/자원(Resources)
디자이너, 에디터, 개발자의 작업을 단순화하기 위한 도구, 키트, 피그마 라이브러리, 플러그인 등을 포함하는 작업 기본 소스이다. 이는 팀이나 이해관계자, 에이전시에게 필요한 정보를 제공하여. 프로덕트 개발을 보다 쉽게 하고 편리하게 한다.
https://atlassian.design/디자인 시스템은 디자인 및 개발 과정에서 효율성, 일관성 및 확장성(Scalability)을 촉진한다. 이는 팀이 효과적으로 협력하고 노력의 중복을 줄이며 다른 디지털 프로덕트에서 일관된 사용자 경험을 보장한다. 디자인 시스템을 확립하고 준수함으로써 조직은 브랜드의 일관성을 유지하고 사용자 만족도를 향상하며 디자인 및 개발 프로세스를 간소화할 수 있는 장점이 있다.
디자인 패턴 개발
UX 디자이너로서 디자인 패턴을 디자인하고 개발하는 일을 할 경우 무엇을 주의해야 하는가. 아래에는 현재 재직 중인 회사가 디자인 패턴을 어떻게 개발하고 진행하는지에 대해 보여주고 있다.
1. 발견, Discovery 단계
첫 번째 단계는 어떤 UI엘리멘트(UI Element)가 디자인 패턴이 되기에 충분한지 테스트하고 발견하는 과정이다. 그러면 발견단계를 성공적으로 이수하기 위해서는 어떤 일을 해야 할까?
기존 UI 패턴 분석: 기존 UI 패턴 분석을 함으로써 새로운 패턴이 기존 UI 패턴과 기능적으로 안 겹치는지 확인해야 한다. 그리고 기존 UI 패턴 분석함으로써 공통 UI 요소를 이해하고 이를 새 패턴에 어떻게 적용시킬지 브레인스토밍 과정을 거쳐야 한다. 공통된 스타일만 확인하는 것이 아니라 새로운 패턴의 이름과 카테고리 역시 기존 UI 패턴 분석을 통해 정해야 한다.
새로운 패턴의 사용가능성 조사: 새로운 패턴이 어떻게 여러 다른 프로덕트에 사용되는지 조사해야 한다. 디자인 패턴은 한 플로우나 프러덕트에서만 사용되는 것이 아니라 여러 프러덕트에 여러 번 사용된다. 그렇기에 재사용가능한 패턴을 디자인하기 위해서는 해당 패턴이 여러 플로우에 어떻게 사용될 것인지 조사해야 한다. 새로운 패턴이 이를 위해 다른 프로덕트 팀과의 컬라보레이션은 필수적이며, 이를 통해 새로운 패턴에 필수적으로 들어가야 할 요소를 정해야 한다.
만약 이러한 의논과정을 거치지 않는다면 새로운 패턴은 프로덕트 팀이 처한 사용자와 비즈니스 문제를 해결하지 못하기에 쓸모없어지거나 또 한 번의 패턴 업데이트 과정을 거쳐야 하는 상황이 발생한다.
확장성 및 적응성 고려: UI 요소를 응용 프로그램 또는 웹 사이트의 여러 부분에 일관되게 적용할 수 있는지 평가해야 한다.
2. 디자인 패턴 콘셉트, Create단계
발견단계에서 얻은 인사이트를 바탕으로 이제 디자인 패턴을 제작해야 한다. 디자인 패턴 제작이란 해당 패턴의 UX와 스펙, Specification을 의미한다. 디자인 패턴을 제작하기 위해서는 아래 요소들을 고려하고 포함하고 기록해서 디자인해야 한다. 아래 요소가 하나라도 빠질 경우 원활한 개발을 할 수 없다.
1. 체인지 로그 (Change Log): 릴리스 정보 또는 업데이트, 변경, 개선사항, 버그 수정 등을 기록하는 섹션이다. 올바른 버전과 변경된 요소를 간단히 책임자이름과 같이 기록해야 한다.
2. 패턴 목적
3. 아나토미 (Anatomy) : 디자인 패턴을 구성하는 요소를 의미한다.
https://spectrum.adobe.com/page/cards/#Anatomy4. 타입(Variations): 해당 패턴의 다른 타입 등을 의미한다.
5. 디자인 토큰(Token)
6. 상태(State): 해당 패턴의 각기 다른 상태를 의미한다. 예를 들면 버튼 패턴일 경우 버튼 패턴의 디폴트, 후버, 포커스 등을 가리킨다.
7. 패턴 행동 (Behaviours): 해당 패턴이 다른 그리드나 화면 사이즈에서 어떻게 변하는지, 텍스트가 길어 해당 화면에 다 들어가지 않을 경우 텍스트의 디자인은 어떻게 변하는지 등을 포함한다.
8. 접근성(Accessbility): 키보드 인터렉션, 보이스 오버등의 디지털 도구를 사용했을 경우 해당 디자인이 어떻게 반응하고 내비게이션 할 수 있을지 보여준다.
https://spectrum.adobe.com/page/cards/#Anatomy9.SEO: 웹 패턴일 경우, 서치 엔진, Search engines(Google, Bing, and Yahoo)에 최적화되었는지 확인해야 한다.
디자인 패턴을 개발자에게 핸드오버하기 전에 다른 디자이너나 개발자와 함께 리뷰하고 수정하면 완성도 높은 디자인 패턴 스펙(Specifiation )을 만들 수 있다.
3. 디자인 패턴 개발 단계
디자인 패턴의 콘셉트와 스펙이 끝났으면 이제 개발자에게 그 파일들을 전달하고 개발자와 함께 디자인이 정확하게 개발되었는지 확인하고 검열하는 과정을 거치면 된다.
Best 디자인 패턴 예시
더 깊게 디자인 패턴을 공부하고 싶다면 아래 사이트를 확인해 보고 best practice를 배워보자.
https://carbondesignsystem.com/
디자인 시스템이 왜 필요한가? 1
https://brunch.co.kr/@migyeongux/24
