❓ 디자인 시스템이란?
'디자인 시스템'이란, 디지털 프로덕트의 디자인 및 앱이나 웹사이트와 같은 제품의 개발을 돕기 위해 일관된 디자인 원칙과 이를 이용한 패턴, 공유 방식의 집합이다.
그래서 디자인 시스템은 다양한 페이지와 채널을 걸쳐 공통의 언어와 시각적 일관성을 만들고 반복되는 작업을 줄임으로서, 규모에 맞게 디자인을 관리할 수 있게 한다.
즉 디자인 시스템은 서비스의 목적에 맞도록 일관되게 패턴과 언어가 구성되고 사용자에게 일관된 경험을 제공할 수 있게 해주는 '디자인 설계'라고 볼 수 있다.
또한 디자인 시스템은 사용자 뿐만 아니라 제품을 만드는 디자이너와 개발자를 대상으로 제품을 만들 때에 좀 더 효율적이고 유연하게 제품을 만들 수 있게 도움을 준다.
디자인 시스템은 안에 존재하는 구성요소들을 시각적인 요소와 비시각적인 요소로 구분할 수 있다.
시각적 요소
UI 컴포넌트, UI패턴, 디자인 원칙, 규격...
비시각적 요소
브랜드 가치, 팀의 작업 방식, 사고방식... 추상적인 것들
이렇게 시각적 요소와 비시각적 요소를 모두 포함하고 있는 것을 '디자인 시스템'이라고 생각하면 된다.
정의 상으로는 디자인 시스템이 UI/UX 가이드 라인을 포괄하고 있지만, 실제 사례에서는 디자인 시스템 마다 그 범위는 다르다. 어떤 시스템에서는 단순 스타일 가이드, 패턴 라이브러리 역할만 하고 어떤 시스템은 브랜드 원칙, UX 원칙과 철학까지 담고 있다.
UI 가이드 라인
UI를 표준화하고 화면간 일관성을 확보하기 위한 가이드 라인이다. 주요 화면에서 사용되는 공통 UI 패턴과 주요 컴포넌트를 정의하고 속성을 규정하여 설계한다.
UX 가이드 라인
서비스와 브랜드 측면에서 사용자가 일관적이고 차별화된 경험을 할 수 있도록 한다. 컨텐츠와 기능 별로 사용자의 니즈를 반영해서 UX 원칙을 도출한다. 브랜드의 정체성이나 색깔을 일관되게 전달할 수 있도록 정의하고 설계한다.
❗ 디자인 시스템이 필요한 이유
프로덕트를 만드는 팀의 규모가 커질수록 기능에 맞는 사용자 인터페이스(UI)를 만드는 데 관여하는 작업자가 늘어나기 마련이다. 이 과정에서 폰트, 모달, 버튼, 아이콘, 레이아웃, 색상 등 애플리케이션을 이루는 UI 요소 하나하나 만든 사람에 따라 조금씩 차이가 날 수밖에 없다. 한 서비스를 구성하는 UI 결과물이 미묘하게 다르면 결국 사용자 경험(UX)에도 영향을 미치게 된다.
이 차이를 좁히고 맞추기 위해서는 번거롭고 많은 커뮤니케이션을 거쳐야만 한다. 또한 만들어진 기능을 테스트 및 유지보수하고, 팀이 쌓은 기술적인 노하우 및 브랜드 이미지를 보전하는 데도 어려움이 생기게 된다. 이렇듯 디자이너와 개발자 사이에 정해진 규칙이 없다보니, 처음 의도한 디자인과 실제 구현된 결과물이 달라지는 문제도 생긴다.
이렇게 되면 동일한 컴포넌트도 디자이너마다 각자가 디자인한 컴포넌트가 생겨나고, 개발자 같은 경우는 컴포넌트가 재사용성이 있는 건지 없는 건지 구분할 수 없어서 다시 새로 개발하게 되는 문제도 생긴다 이럴 경우에는 수정 사항이 생기면 같은 기능이 쓰인 부분을 변경해야 하는데, 비슷한 기능인데도 컴포넌트가 따로 되어있으면 테스트나 유지 보수가 힘들어진다.
이러한 문제들 때문에 개발자와 디자이너 간에 사용자 경험과 작업 과정의 효율성을 높이기 위해 일관된 규칙을 정의해야 할 필요성을 느끼게 되고 그러한 규칙이 디자인 시스템이다.
디자인 시스템은 디자인의 일관성을 유지하는데 도움이 되고 재활용 가능한 컴포넌트 사용을 통해 작업 시간을 단축시킬 수 있으며, 이해관계자인 다른 직무의 사람들이나 팀들과 함께 협업할 수 있게 해주고 디자인의 의사결정을 도울 수 있다.
또한, 개발에 필요한 리소스를 줄이고 개발 과정에서 유지보수하는 데 도움을 주고, 디자이너 개인과 조직, 프로덕트의 지속적 성장에도 도움을 준다.
❗ 디자인 시스템 도입의 장점
✔️ 효율성 확보 (Efficiency)
디자인 시스템을 사용하면 반복되는 요소들을 매번 새로 만들 필요 없습니다. 재사용 가능한 컴포넌트, 패턴 등을 이용해 작업의 효율성을 높일 수 있으며, 전체 제품 개발에 필요한 시간을 단축하여 더욱 빠르게 시장에 제품을 출시할 수 있습니다.
✔️ 일관성 있는 사용자 경험 (UX Consistency)
디자인 시스템의 표준 규칙과 원칙에 따라 서로 다른 페이지나 플랫폼을 걸쳐 일관된 사용자 경험을 구축할 수 있습니다. 반복되는 컴포넌트 제작에 소비되는 시간을 아껴서 사용자에게 더 집중할 기회를 만들 수 있습니다.
✔️ 다양한 제품에 대응 (Design at Scale)
디자인 시스템을 통해 효율성과 일관성을 확보함으로써 다양한 규모의 제품들을 빠르고 쉽게 만들 수 있습니다.
✔️ 협업에 기여 (Collaboration)
디자인 시스템은 디자이너, 개발자, 프로젝트 매니저 등 프로젝트팀 구성원 사이의 지식 격차를 줄이고 공통의 원칙을 숙지하여 협업에 기여할 수 있습니다. 이를 통해 프로젝트 구성원이 함께 학습하고 성장할 수 있으며, 결국 프로젝트의 생산성 향상으로 이어집니다.
➡️ 각 기업의 디자인 시스템
🔖 구글 (Material Design)
🔖 애플 HIG(Human Interface Guidelines)
https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/
🔖 스포티파이 (Encore)
https://spotify.design/article/reimagining-design-systems-at-spotify
🔖 토스 (TDS)
https://rhinestone-legend-4f0.notion.site/toss-design-system-959822692bec4f879450e361c623cf2a
https://www.youtube.com/watch?v=5WBlhIl8KkY
🔖 쏘카 (SOCAR FRAME)
https://socarframe.socar.kr/8bb3aba4a/p/5857a5-socar-frame
쏘카 프레임 구축 과정 배경 영상
🔖 라인 (LDS)
https://designsystem.line.me/
라인 디자인 시스템 LDS 소개영상
- 2020년 12월에 라인 앱을 개편한 내용으로 디자인 시스템을 어떻게 정리했는지 확인 할 수 있다.
출처
