디자인 시스템이란?

by UXUI 니디자인랩

May 29. 2022

디자인 시스템이란?

레고 블럭들로 썬글라스를 만든다고 해보자. 그럼 까만색 레고 블럭들이 여러개 있어야 할 뿐만 아니라 조립 설명서가 있어야 할 것이다. 디자인 시스템은 레고 블럭들 + 조립 설명서와 같다.

디자인 시스템 = 컴포넌트 라이브러리 + 스타일 가이드

각각의 레고블럭은 버튼, 아이콘 등 디자인 요소들, 레고 조립 설명서는 스타일 가이드라고 보면 된다.

다시 요약하자면, 디자인 시스템은 아래 이미지처럼 웹/앱을 만들 때 사용되는 버튼, 아이콘 등을 한곳에 잘 정리해둔 것을 뜻한다.

� 컴포넌트 라이브러리

컴포넌트 라이브러리 웹/앱을 만들 때 사용되는 버튼, 아이콘, 폰트, 컬러 등을 컴포넌트로 만들어서 한곳에 잘 정리해둔 것을 말한다. 다시 레고에 비유하자면 컴포넌트란 마법을 걸어놓은 레고 블럭이다. 사진 속 남성이 쓰고 있는 선글라스를 만들기 위해 이 마법에 걸린 검정색 블럭 하나를 몇십개씩 복제해두었다고 치자. (틀에 찍어서 복제하든, 3D프린트로 복제하든..) 복제한 레고 블럭들로 검정색 썬글라스를 만들다가 색상이 영 마음에 안들어서 블럭들을 노란색으로 바꾸고 싶어졌다. 그럼 이 때, 아까 마법을 걸어놓은 그 첫번째 블럭에 노란색 칠을 해주면 된다. 그럼 그것의 복제본들은 다 자동으로 노란색으로 변경된다. 이렇게 여기저기에 많이사용된 똑같은 디자인 요소들을 한꺼번에 일괄적으로 변경하기 위해 컴포넌트를 사용하는 것이다.

● 컴포넌트 라이브러리에 들어가야 할 요소

- 각종 아이콘

- 각종 버튼 (일반 버튼, 체크박스, 라디오 버튼, 토글 등)

- input filed (텍스트 입력창. 검색창 포함)

- selection box (dropdown)

- 기타 (스크롤바 등)

● 주의사항

형식에 맞게 이름 정하기 : 해당 컴포넌트 레이어 이름. 컴포넌트를 다운받으면 그 이름 그대로 다운로드 되기 때문에 이름을 지을 때 어떤 형식으로 정하면 좋을지 사전에 개발팀과 협의해보는 것이 좋음. 예를 들어 버튼 이름은 앞에 BT로 시작하고 그 뒤에 상세 제목을(ok. cancel .. ) 넣기로 한다던가 등.

추가 설명 : 그 외 설명이 필요한 경우 설명란에 내용을 적어두거나 작업 화면 자체에 적어두기.

* 속성 (사이즈, 색상 등), 코드(code snippets) 정보는 피그마 properties 패널에서 확인 가능하므로 따로 적을 필요 없음.

� 스타일 가이드

말 그대로 스타일에 대한 가이드 내용.

● 스타일 가이드에 들어가야 할 요소

- 폰트 종류, 폰트 사이즈

- 사용 색상 종류

- 기타 : 버튼, 인풋 필드 등 기타 요소들에 대한 스타일 가이드. 특히 버튼과 인풋 필드는 자세히 적어둬야 함.

● 주의사항

각각의 스타일에 대한 제목 또는 설명도 같이 적어두기.

예를 들어, 아래의 이미지처럼 '첫번째줄의 버튼은 디폴트일 때의 버튼입니다. 두번째줄의 버튼은 disabled 일 때의 버튼입니다' 등 퍼블리셔가 이해하기 쉽게 옆에 제목을 달아주면 됨.

Q. 디자인 시스템은 누가 만들어야 하나? 디자이너 혼자서?

A. 팀작업을 하는 것을 추천한다. UX디자이너 1명, UI 디자이너 1명, 개발자 1명 이렇게 최소 3명이서 함께 만드는 것이 좋다. UX 디자이너는 정책관련 내용을, UI 디자이너는 시각적 작업을, 개발자는 개발 구현이 가능한지 검토 및 개발적 조언을 할 수 있다. 구글같이 큰 기업은 UX writer 도 따로 있다고 한다. 이 버튼명은 뭐라고 하면 좋을지, 모달창에 들어갈 내용을 말로 어떻게 풀어쓰면 좋을지 조언해주는 사람들이다.

Q. 프로젝트 기간 중 언제 만들면 될까? 다 만드는데 얼마나 오래 걸리는가?

A. 본격적인 UI디자인 들어가기 전에 정해지만 가장 좋겠지만 현실적으로 불가능하다. 디자인 시스템 제작을 위한 TF 팀이 따로 있는 것이 아니라면, 프로젝트 일정 상 UI작업을 하면서 이것저것 조금씩 업데이트하는 수밖에 없다. 소요되는 기간도 케바케이다. 프로젝트 총 기간 대비 00% 투자하겠다.. 등 각자의 상황에 맞게 본인 스스로 작업에 투자할 시간을 정해야 한다.

Q. 디자인 시스템이 꼭 필요할까?

A. YES. 꼭 필요함. 디자인 시스템의 완성도를 어느정도로 끌어올리느냐는 그 다음의 문제이고 우선 디자인 시스템이라는 것은 꼭 있어야 한다. 그 이유는 크게 보면 딱 하나, '시간'절약을 위해서이다.

무언가를 만든다고 할때 직원들이 쏟아붓는 시간은 곧 비용이다(인건비). 장기적으로 볼때 제작에 들어가는 시간을 줄이려면 이것은 꼭 있어야 한다. 처음 제작하는데에 오랜 시간이 걸리긴 하겠지만 회사를 1~2년만 운영할 것이 아니라면 처음에 시간이 좀 들더라도 장기적으로 봤을 때는 많은 시간을 줄여줄 수 있기 때문에 만들어 두어야 한다.