디자인 시스템이란 - 1
회사가 가지고 있는 모든 UI 리소스들과 일관된 디자인을 위한 원칙(Principle)과
해당 원칙을 기반으로 만들어진 디자인 패턴과 적용가능한 예제 그리고 스타일가이드가 모인
"방대한 디자인 데이터 라이브러리" 입니다.
(출처/참고 : Anatomy of a Design System, Adobe 디자인 시스템 디자이너 Nate Baldwin)
패턴라이브러리란
패턴라이브러리는 반복적으로 혹은 자주 사용되는
디자인 요소들의 모임이자 Library -저장소 입니다.
그렇다면 패턴라이브러리가 디자인시스템이 아닌가 하는 의문이 생길 수 있습니다.
하지만 디자인시스템은 시각적/비시각적인 요소들을 모두 포괄하는
디자인 원칙과 소스,가이드 들의 거대한 집합으로서
디자인시스템에 패턴라이브러리가 종속된 시스템의 일부라고 할 수 있겠습니다.
하지만 이런 학문적인 설명은 직관적이지 않을 뿐더러
"그래서 왜 쓰는건데?" 라는 의문을 해결해주지 않습니다.
우리는 왜 디자인 시스템을 알아야할까요?
그럼 잠시 조별과제를 하던 추억을 떠올려볼까요?
아무리 친하게 지냈던 동기,선후배여도 한번도 손발을 맞춰본적이 없던 사람들이라면
프로젝트를 진행하는 것부터 의사결정과 일의 분배와 모임일정의 조율 그리고
마지막으로 자료를 취합하는 것을 비롯해 전체적인 과정이 너무나 힘듭니다.
모두 다른 생각과 관점을 가진 사람들이 만나 누구하나 손해보는 일 없이
공정하고도 공평하게 일을 나누고 다들 동의할만한 시간과 일정을 잡는건...
실무에서도 마찬가지로.
-내부 구성원들의 공감과 동의
-변경된 디자인 현황을 모르는 구성원
-공유,전달의 업무 로직이 미흡한 조직
-구체적이지 않고 모호한 디자인 원칙
-상충하는 개념이 동시에 포함된 디자인 원칙 등
구성원들 사이에 디자인 Protocol[약속-규칙]이 없다면.
간단한 디자인 수정에도 기존 디자인과 차이가 날 수 있습니다.
예를 들자면 RGB값/font-size/bold/opacity 등에서 말이죠.
간단한 수정과 새로운 컴포넌트 생성, 서비스 개설에 따라 미세한 오차가 누적되면.
나중에는 일반유저의 시각에서도 일관성을 찾아보기 어려워질 수 있습니다.
더군다나 유저의 니즈도 빠르게 변화하는 시대적 상황에서
서비스의 기능과 형태가 시장 요구에 맞추어 재빠르게 움직이지 못한다면.
시장 파이를 어느정도 차지하고 있는 기업이라도 도전자에게 자리를 내주게 될 것입니다.
한번 네카라쿠배 같은 큰 IT기업을 생각해봅시다.
이런 큰기업들은 보통 하나의 서비스만 보유하고 있지않고. 엄청나게 다양한 프로덕트를 가지고 있는 경우가 많습니다.
그리고 그 하나의 서비스는 웹과 안드로이드 그리고 IOS 등 구동 플랫폼 기반으로 또 나누어지고.
각각의 플랫폼에서 스마트폰화면과 태블릿화면 데스크탑 화면까지 고려해야하는 경우가 거의 항상 있을겁니다.
그리고 스마트폰과 테블릿, 모니터는 정말 다양한 규격을 가지고있죠.
이렇게 되면 정말 많은 디자이너와 디자인팀이 하나의 프로덕트를 만들기 위해 유기적으로 협업을 해야하는데. 이렇게 점점 IT 산업이 고도화됨에 따라.
디자인 조직도 점점 커져가게 되었고.
따라서, 더 효율적으로 디자인하는 방법인 디자인 시스템이 중요해진 것입니다.
자, 그럼 디자인 시스템이 왜 중요해졌는지 알았으니.
기업들이 사용하는 구체적인 이유에 대해서도 알아봅시다!
디자인시스템을 도입하게되면,
회사의 모든 구성원은 디자인 레퍼런스와 원칙 그리고 패턴 및 메인 색상 코드와 사용 예시, 디자인 소스들이 모여있는 하나의 온전한 "시스템"을 갖게 됩니다.
이를 통해 작업을 일관적이고[Consistency] 시간을 절약하고[Time Efficiency] 협업[Collaboration]생산성을 높이고 리스크를 최소화[RickLess]하고 업무속도[Progress]를 높일 수 있습니다.
1. 일관성의 장점
여러 서비스에서 혹은 다양한 페이지에서 사용자 경험을 통합하는 큰 도움이 됩니다.
디자인적은 일관성은 유저에게 브랜드인식을 높이고 기능적으로도 유저가 화면의 정보의 구조를 빠르게 파악하고 동작 방식에 대해서도 쉽게 학습하고 사용할 수 있게 합니다.
But
사용 편의성이 일관성보다 우선시 되야합니다. 서비스에서는 사용 편의성을 향상하기 위해 새로운 컨트롤 위치 또는 동작이 추가되야하는 경우가 있습니다. 휴대폰을 한 손으로 사용했다고해서 계속해서 휴대폰을 한손으로만 조작하는 일관성을 유지하게 된다면. 기능이 많고 복잡해질 경우 서비스를 사용하는데 큰 어려움과 불편이 생길 것 입니다. 일관성을 유지하는 것도 좋지만 기능이 많아질 경우 조작 간편성/ 사용 편의성을 더 높이는 것이 좋습니다. 요약하자면 - 유저의 조작법이 더 간편해지도록 유저인터페이스를[UI를] 일관성보다는 편의성 측면에서 직관적으로 추상화 합시다.
2. 시간절약의 장점
초기에 디자인 시스템을 구축하는데 시간과 인력자원이 많이 사용되는 것은 사실입니다.
하지만 새로운 프로젝트와 피드백마다 필요한 디자인 요소들을 매번 새로 그리며
반복적인 작업을 계속하게 되는 것은. 내부 인력을 낭비하는 것입니다.
디자인 시스템으로 미리 만들어 놓은 컴퍼넌트를 통해 빠르게 시안을 만들고, 시안과 시스템을 토대로 프로토타입을 만들게 되면 프로젝트 목표를 빨리 달성할 수 있을 것 입니다.
에셋화와 심볼화를 잘 사용한다면, 버튼 클릭 한번으로 수백수천장에 뿌려져있는 버튼의 디자인을 한번에 바꿀 수 있죠. 이렇듯 디자인 시스템을 잘 구축해둘 경우 많은 부분에서 시간을 절약할 수 있습니다.
3. 협업에서의 장점
디자인 시스템은 조직이 원할한 협업을 할 수 있게 도와주는데요. 디자인 시스템은 기존 구성원들의 의견과 공감을 토대로 세워진 명확한 원칙과 그에 대한 기술이 서술되어 있습니다.
그렇기 때문에 디자이너가 아닌 이해관계자를 설득시키는데 도움이되고.
새로운 구성원이 들어왔을 때 디자인 시스템을 보고 기존 팀원들의 디자인 방식이나 의사결정 방식, 공유방식등을 학습하여 팀에 빠르게 적응하고 회사가 디자인 역량을 보존하는데 큰 도움을 줄 수 있습니다.
4. 리스크 최소화의 장점
디자인시스템은 개발에 필요한 디자인적 요소를 명확하게 기재하고, 개발자에게 공유함으로서, 개발자가 새로운 컴포넌트를 추가할때 전체 디자인과 서비스 맥락을 이해하는데 도움을 줍니다.
그리고 만일 서비스의 업데이트와 유지보수를 위해 디자인시스템을 코드기반으로 구축한다면!
버튼의 디자인을 한번에 바꾸는 것 뿐만 아니라, 기기별, 디스플레이별 디자인 수정이 한번에 이루어지도록 로직을 짤 수도 있을 것 입니다. 그리고 이는 반복적인 디자인 작업을 최소화하죠.
5. Progress[진척,성장]의 장점인데요.
디자인에 대한 원칙과 가이드가 불필요한 의사결정 과정을 줄이고 효율적인 업무를 진행할 수 있게 도와줌으로서 프로젝트에서 더 중요하고 혁신적인 것들에 집중할 수 있게 도와줍니다.
반복적인 작업들을 줄임으로서, 서비스의 핵심적인 기능과 UX에 중요한 화면을 개선하거나 새로운 서비스에 대한 구상에 더 시간과 에너지를 집중할 수 있을겁니다.
그렇기에 프로세스가 빨라지고 서비스의 Progress[진척]가 있으며, 팀 내부의 역량에도 Progress[성장]가 있을 것 입니다.
디자인 시스템의 장점 5가지에 대해 살펴봣는데요.
디자인 시스템에는 장점만 있는 것이 아닙니다. 어느 순간 디자인 시스템이 너무 방대해지고 커져서 외우고 숙지해야할 것들이 너무 많아지는 경우. 뜻의 전달이 다르게 이루어 질 수 있고. 또 서로 상충하는 원칙들이 동시에 적혀져있을 수 있습니다. 서비스에서 가장 중요시 여겨야하는 유저의 경험과 기능들을 개선하기 보다는 디자인 시스템을 수정하고 디테일을 만드는데 시간을 더 쓰게 될 수도 있다는 말이죠. 그렇기 떄문에 디자인 시스템을 처음부터 너무 완벽하게 만들려고 하기보다는.
현재 회사 혹은 프로젝트 팀의 환경과 자원 구성원의 배경 등에 맞추어 필요한 최소한의 디자인 원칙과 시스템을 구축하고 서비스 성장방향에 맞추어 계속하여 업데이트 하는것이. 중요하다고 할 수 있겠습니다.
RE:CAP
디자인 시스템이란 일관된 디자인을 위한 원칙(Principle)과 해당 원칙을 기반으로 만들어진 디자인 패턴과 적용가능한 예제와 스타일가이드 그리고 모든 디자인 소스로 이루어진.Design System = "방대한 디자인 데이터 라이브러리"
디자인 시스템의 5가지 장점으로는
- 일관성
- 시간절약
- 협업
- 리스크 최소화
- Progress
다음번 글 Part2에서는 디자인 시스템의 3가지 핵심 요소와 구체적인 내용에 대해 알아 보겠습니다.
