1. 개요
Design System웹이나 각종 서비스 UI 디자인에서 재사용 가능한 컴포넌트와 패턴을 정의하여, 전체 디자인에 일관성 있게 적용할 수 있도록 만든 가이드라인이나 규칙을 말한다.
2. 구성
디자인 시스템은 여러 조직마다 다양한 형식으로 존재하지만, 이 항목에서 서술하는 디자인 시스템의 구성은 닐슨 노먼 그룹에서 설명한 내용에 따른다.디자인 시스템을 만들고 유지하려면, 디자인 시스템 리포지토리(design system repository)와 이를 관리할 인원이 필요하다. 디자인 시스템 리포지토리는 크게 스타일 가이드(style guide), 컴포넌트 라이브러리(component library), 패턴 라이브러리(pattern library)로 이루어져 있다.
- 스타일 가이드는 대부분 색상, 타이포그래피, 상표, 로고와 같은 포괄적인 브랜딩에 관해서만 초점을 맞추는 경우가 많다. 하지만 브랜드에서 제공하는 각종 컨텐츠에서의 말투, 어조 등 컨텐츠에 관한 지침이나, 상호작용·시각적 디자인 기준[1] 또한 포함한다.
- 컴포넌트 라이브러리는 흔히 디자인 시스템 하면 떠올리는 그것으로, 재사용 가능한 컴포넌트들을 모아 설명해 놓은 것이다. 디자인 라이브러리라고도 한다. 컴포넌트 라이브러리는 아래의 내용을 포함한다.
- 컴포넌트 이름: 디자이너와 개발자간 의사소통에 문제가 없도록 구체적이고 명확한 컴포넌트 이름이 필요하다.
- 설명: 이 요소가 무엇이고, 일반적으로 어떻게 사용이 되는지에 관한 분명한 설명이 필요하다. "do"와 "don't"를 포함하여 명확하게 하지말아야 할 것을 서술하기도 한다.
- 속성: 색상, 크기, 모양 등 특정 상황에 적용할 수 있게 사용되는 변수를 말한다.
- 상태: 권장하는 기본값부터 달라질 수 있는 외관을 표현해놓은 것을 말한다.
- 코드 스니펫: 컴포넌트를 실제로 적용할 수 있는 코드 조각을 말한다. 아예 샌드박스 환경을 만들어 해당 컴포넌트를 어디까지 커스텀할 수 있는 지 실시간으로 테스트해 볼 수 있도록 만들기도 한다.
- 프론트엔드 & 백엔드 프레임워크: 차후 복잡한 디버깅을 피하기 위해 사용한다.
- 패턴 라이브러리는 앞서 서술한 컴포넌트 라이브러리와 종종 혼용되기도 하지만, 두 라이브러리는 구분된다. 컴포넌트 라이브러리는 각각의 UI 컴포넌트를 구체적으로 명시한 것이지만, 패턴 라이브러리는 UI 컴포넌트들의 그룹이나 레이아웃에 관한 내용을 포함한다. 예를 들어, 결제 버튼은 컴포넌트이고, 결제 버튼과 상품 수 입력 폼을 포함하는 상품 결제 상자는 패턴이라고 볼 수 있다. 컴포넌트와 같이, 패턴 또한 재사용하고 적용할 수 있다.
3. 특징
3.1. 장점
미리 만들어 놓은 컴포넌트를 재사용함으로써, 좀 더 효율적으로 디자인할 수 있다. 같은 요소를 다시 만드는 수고를 덜어주기 때문에, 의도하지 않은 비일관성을 줄일 수 있다.예를 들어 어떤 어플리케이션 UI를 만들 때, 확인 버튼 디자인을 미리 컴포넌트로 만들어 놓으면, 다른 페이지에서 확인 버튼을 또 넣고자 할 때, 다시 확인 버튼을 만들 필요가 없다.
그리고 컴포넌트를 사용하지 않고 확인 버튼을 다시 만든다면, 의도치 않게 몇 픽셀 정도라도 달라질 수 있기 때문에, 컴포넌트로 한 번 만들어 놓고 여러 번 재사용하는 것이 일관성면에서도 좋다.
이렇게 작은 디자인 요소나 룰들을 미리 만들어 둠으로써, 정보의 중요도에 따른 우선순위 결정이나 워크플로우 최적화와 같은 좀 더 복잡한 문제 집중할 수 있게 된다. 특히나 큰 조직에서 수천 개의 페이지를 만든다고 하면 더더욱 이 중요성은 커질 것이다.
물리적으로 떨어진 여러 다른 직종의 팀들 간에 소통할 수 있는 언어 역할을 하기도 한다. 예를 들어 단순히 드롭다운 메뉴라고 하면 각 팀들마다 생각하는 모양이나 기능이 다를 수 있다. 이럴 때 디자인 시스템으로 미리 해당 용어에 대한 컴포넌트를 정의해 놓는다면 팀들 간의 소통을 좀 더 원활하게 할 수 있다.
3.2. 단점
디자인 시스템을 유지보수하는 것도 꽤나 큰 비용이 든다. 디자인 시스템은 한 번에 만들고 끝나는 게 아니고, 사용자의 피드백에 따라 계속 업데이트 되어야 하기 때문에, 이에 따른 비용도 충분히 고려해야 한다.다른 사람들에게 디자인 시스템을 사용하는 방법을 가르치는 데 시간이 걸린다. 모든 디자인 시스템은, 설령 기존 디자인 시스템에서 파생된 것이라 하더라도, 사용 지침이 필요하다. 만약 그러지 않으면 팀 간에 일관되지 않거나 잘못 적용될 위험이 있다.
4. 목록
4.1. 기업
- Atlassian - 아틀라시안 디자인 시스템
- IBM - 카본 디자인 시스템
- Microsoft Windows - 플루언트 디자인 시스템
- 구글 - 머티리얼 디자인
- 라인 - 라인 디자인 시스템
- 메일침프 - 메일침프 패턴 라이브러리
- 삼성 - 삼성 디자인 시스템
- 세일즈포스 - 라이트닝 디자인 시스템
- 쇼피파이 - 폴라리스
- 쏘카 - 쏘카 프레임
- 애플 - 휴먼 인터페이스 가이드라인
- 토스 - TDS(토스 디자인 시스템)
4.2. 국가 기관
- 대한민국 정부 - 디지털 정부서비스 UI/UX 가이드라인(KRDS)
- 미국 정부 - US Web Design System(USWDS)
- 브라질 정부 - Padrão Digital de Governo
- 싱가포르 정부 - Singapore Government Design System(SGDS)
4.3. 목록 사이트
- Design Systems: 피그마에서 운영하는 디자인 시스템 모음 사이트. 피그마로 만들어진 디자인 시스템 파일 자체를 바로 볼 수 있다.
- Design System Repo: 디자인 시스템 사이트들을 모아 놓은 곳.