UXUI 디자인 시스템이란?

디자인 시스템이란

 

디자인 시스템(Design System)이란 프로덕트를 만들 때 서비스를 어떻게 구현할 것인가에 대한 디자인 레시피북과 같다. 어떤 재료를 사용해야 하는지, 어떤 도구를 사용해야 하는지 등 기획자, 디자이너, 개발자 등 이 프로덕트에 참여하는 모든 관계자들이 일관된 결과물을 제작하도록 도와주는 것이다. 

 

디자인 시스템이 중요한 이유는 동일한 재료를 가지고 약속된 레시피대로 제품을 만드는 것이기 때문이다. 덕분에 서비스의 일관성을 유지하는데 힘이 덜 들고, 효율적으로 작업할 수 있다.

 

디자인 시스템에 들어가는 항목

 

1. 스타일 가이드

• 브랜드 또는 제품에서 사용하는 시각적 요소들의 규칙과 예시를 정리한 문서.
  예: 로고, 컬러 팔레트, 타이포그래피, 아이콘 스타일, 레이아웃 등 모든 페이지가 일관된 스타일로 보이게 됨
• 컬러 팔레트
  -Primary Color(주색): 브랜드/제품을 가장 잘 대표하는 색
  -Secondary Color(보조색): 주색을 보완하거나 다양한 변주를 줄 때 사용하는 색
  -Neutral Color(중립색): 흰색, 검정, 회색 등의 배경/텍스트 색
• 타이포그래피
  -기본 텍스트 스타일: Heading(제목) - Subheading(부제목), Body(본문), Caption(설명) 등
  -실무 활용 시 오픈 폰트인지 반드시 확인. 라이선스 문제 주의!
• 아이콘
  -선 두께, 모서리 처리(Rounded vs Sharp), 색상 규칙 등 아이콘 스타일 정의. 일관된 사이즈로 설정
• 레이아웃
  -그리드 시스템: 12열 그리드와 같은 표준 그리드 정의
  -공간 규칙: 마진(Margin), 패딩(Padding), 간격(Spacing&Gutter) 등 요소 간의 공간 관계 설정
• Tone of Voice
  -친근함, 전문성, 유머 감각 등 브랜드의 말투와 태도 정의 --- 사용자 대상에 맞는 어휘 선택
  -UI텍스트, 알림 메시지, 마케팅 콘텐츠 등 모든 접점에서 일관되게 사용

2. 패턴 라이브러리

• 예: 자주 쓰는 디자인 방식이나 상호작용 패턴. 예) 검색바에서 자주 쓰는 패턴을 일관되게 적용

3. 컴포넌트 라이브러리

• 버튼, 입력창 등을 재사용 할 수 있도록 제작된 것. 매번 다시 만들 필요 없이, 불러와서 사용할 수 있어 효율적

4. 토큰 시스템

• 컬러, 사이즈 등을 변수로 만들어 관리. 한번 수정시 모든 화면에 바로 반영해 개발과도 연관될 수 있음

5. 디자인 원칙

• 제품 제작 시 지켜야할 기본적인 규칙. 예) '~하세요' 체를 사용하는 UX라이팅 원칙