–
오늘 공유드리는 아티클은 Visual Design QA의 시스템화에 관한 아티클입니다.
비주얼 디자인 QA는 디자인시스템, 스타일 가이드, 컴포넌트 기반 프레임워크, Tri-Track Agile, CSS 프레임워크로 나눌 수 있는데, 이에 대한 정의를 설명해 놓았습니다. 아래 방법론들을 적극활용하면 제품을 설계하고 디자인하는데 프로세스개선과 제품을 효과적으로 확장시킬 수 있다고 이야기 하고 있습니다.

——————————————————————————-

1. 디자인 시스템
디자인 시스템은 디지털 제품의 목적에 부합하도록 일관된 방식으로 연결된 단순한 패턴과 공유 방식의 집합을 말합니다. 설계 시스템 팀 구성에는 독자식, 중앙 집중식 및 연합 (또는 분산) 모델을 구성하는 3가지 방법이 있습니다. 중앙집중화 된 모델은 설계시스템을 구축하고 유지관리하는데 전적으로 참여하는 제품팀이 설계 시스템 구성 요소를 사용하여 제품을 설계하고 구축합니다. 이에 반해 분산형 모델은 더 많은 자율성을 촉진하고 제품팀을 활용하여 설계 시스템을 유지 및 관리를 합니다.

2. 스타일 가이드
디자인 시스템은 스타일 가이드를 사용하여 제품을 제작할 때 개발을 가이드 할 수 있습니다. 팀이 특히 시간이 부족한 경우에도 스타일 가이드가 광범위 할 필요는 없습니다. 예를들어, 타이포그래피, 기준 그리드 (또는 패딩 값), 그리드 및 색상 팔레트를 포괄할 수 있습니다. 물론, 시간과 프로젝트 범위가 허용되면 훨씬 더 깊이 들어가서 UI상태 정보나 마이크로인터랙션의 가이드를 다룰 수 있습니다.

3. 컴포넌트 기반 프레임 워크
React와 Angular 같은 최신 자바 스크립트 프레임 워크는 컴포넌트 기반의 프레임워크이며, 이를 사용하여 샌드박스 환경에서 구성 요소를 설계하고 테스트 할 수 있습니다 . <*샌드박스란? 샌드박스(SandBox)는 외부로부터 받은 파일을 바로 실행하지 않고 보호된 영역에서 실행시켜 봄으로써 외부로부터 들어오는 파일과 프로그램이 내부 시스템에 악영향을 주는 것을 미연에 방지하는 기술>

4. Tri-Track Agile
Tri-Track Agile은 세 가지 작업플로우(Understanding – Discovery – Delivery)의 방식으로 팀을 구성 할 수 있습니다. 
여기서 Understanding 단계의 각 ‘파동’의 형태는 발견 및 학습 단계에서 일어나는 일을 말합니다. <*더블다이아몬드 방법론에서 애자일방식으로 조금 변형한 것을 지칭하는 것으로 판단되네요>

5. CSS 프레임워크
기본 CSS 프레임워크는 스타일을 설정하고 구성요소를 더 쉽게 만드는 과정을 도와줍니다. 개발자 및 디자이너가 컴포넌트를 만들 때 참조 할 수있는 미리 정의된 스타일세트(여백, 폰트크기, 그리드, 컬러 등)들이 포함되어 있습니다. 여기에는 필요한 모든 스타일을 작성하는 대신, 제품팀이 참조할 기본 값들을 제공합니다. 프로젝트를 진행하는 동안, CSS프레임워크를 사용하면 선택할 수 있는 값이 타이트하게 구성되어있기 때문에 UI 버그가 줄어듭니다.