디자인 시스템의 개념
디자인 시스템이 필요한 이유는?
웹사이트나 앱을 디자인하는데 이 웹과 앱을 프로덕트(제품)라고 부른다. 우리 디자이너는 사용자들이 겪는 문제를 찾아서 디자인적으로 개선하는 것이 임무인데, 이를 계속 빠르게 반복하다가 보면 매번 새롭게 UI를 만드는 것이 여러워지기에 미리 만들어 놓고 필요할 때마다 가져와서 사용하게 만든다면 굉장히 편할 것이다.
이때 중요한 점은 다른 디자이너 또는 개발자와 함께 일한다는 것이고, 이 말은 즉 UI는 다른 디자이너도 똑같은 방법으로 제작 및 사용해야 하며 개발자와도 같은 생각을 해야 한다는 것이다.
디자인 시스템의 목적
-
반복적인 UI를 효율적으로 관리함
반복적으로 쓰이는 UI를 미리 만들어서 효율적으로 사용 가능 -
일관적으로 진행되는 팀 전체의 이해
어떤 디자이너든 UI 사용 시 일관된 사용법을 준수할 수 있고, 어떤 개발자가 UI를 개발하더라도 디자이너의 의도 등을 제대로 파악할 수 있음
디자인 시스템의 장단점
장점
1. 디자인 반복 사용으로 시간과 비용 절감
반복되는 디자인에 개발 코드까지 연결하여 저장하면 많은 일들이 줄어든다. 그만큼 디자이너가 더 중요한 일에 집중할 수 있다.
2. 동일한 품질의 제품 설계 가능
UI를 만들 때 사람마다 다른 디자인이 나온다면 이를 서로 이해하기 위해 불필요한 소통에 시간을 낭비하게 된다. 때문에 형태와 구조, 기능 등의 퀄리티를 항상 일관성 있게 유지할 수 있도록 가이드라인을 만들면 팀 모두가 한 사람처럼 일할 수 있다.
단점
1. UI를 모아서 하나로 통일하는 과정이 오래 걸림
디자인 시스템에서는 UI를 통일하는 과정이 필수적인데 이때 디자이너는 물론 개발자와 기획자 모두 맥락을 이해해야 한다. 팀 전체 단위로 논의 및 준비의 과정이 매우 오래 걸린다.
2. 사용하는 것에 비해 UI가 과하게 많아질 수 있음
디자인 시스템도 결국 꾸준한 업데이트가 필요한데 이때 사용하는 것에 비해서 내용이 너무나 방대해질 수 있다. 이는 노동력에도 영향을 준다.
3. 디자인에 대한 혁신이 줄어듦
높은 업무 효율을 위해 도입하지만, 새로운 디자인이 필요한 상황에서도 디자인 시스템을 최대한 활용하게 되면서 새로운 아이디어에 대한 다양한 UI를 만드는 것에 소극적으로 반응하게 되어 팀 전체가 경직될 수 있다.
UI 키트와 디자인 시스템의 차이
UI 키트
이렇게 디자인이 되어서 이렇게 써야해!라는 사용 방법은 없고 단순히 UI만 존재하는 구성이다.
이렇게 UI만 있고 규칙이 없다면...
디자이너와 개발자 모두 자신의 경험에 따라 이해한 그대로 사용하고 코드를 짜게 될 것이고, 효율적인 UI 사용을 위하던 의도는 망가지게 된다.
디자인 시스템
UI 구조, 사용법, 유의사항까지 상세히 적힌 문서 형태
디자인 시스템, UI키트 모두 좋다 나쁘다 정확히 편을 가를 수는 없으며, 디자이너와 개발자의 합이 잘 맞거나 팀 인원이 적다면 UI키트로 빠르게 제작하는 것이 더 효율적일 수도 있다.
디자인 시스템의 구성 요소
- 기초 재료인 파운데이션, 그것을 활용한 구성품인 컴포넌트
- 파운데이션 : 컬러, 폰트, 레이아웃, 곡률, 간격
- 컴포턴트 : 파운데이션을 조합하여 만든 버튼, 체크박스, 탭, 바텀시트
Atomic Design System
파운데이션들을 모든 구성의 가장 작은 단위인 원자(Atom)에 비유하여 이것들을 결합후 기능할 수 있는 최소 단위의 분자(컴포넌트)로 만드는 것이다.
간단한 버튼 하나도 자세히 보면 다양한 파운데이션의 조합이 보인다. 이 요소들은 그 자체로 기능을 가진 것은 아니지만, 모두 모여서 버튼이란 UI로 결합을 하게 되면, [눌러서 작동시킨다!]라는 기능이 생기는 것이다.
디자인 시스템의 좋은 예시들
내용과 어려운 개념이 많은 방대한 특성의 디자인 시스템을 공부히기 위해선 기존에 잘 만들어진 것들을 분석, 모방, 비교, 연구하며 이해도를 높이는 것이 좋다.
-
머터리얼 디자인
현재 UI 설계 중 가장 복잡하고 정교한 디자인 체계를 가짐 -
밀리의 서재 디자인 시스템
버전이 좀 되기는 했지만 설명이 잘 되어있으며, 글 하단에 피그마 파일 링크도 있음 -
라이트닝 디자인 시스템
슬랙 개발사 [세일즈포스]에서 운영하는 디자인 시스템으로 분량이 방대하고 복잡함 -
디자인 시스템 DB
전세계 디자인 시스템 문서를 확인할 수 있는 곳 다만 대부분이 해외 서비스임
