개발자 입장에서 정리해본 디자인 시스템
검색창에 디자인 시스템을 치면 수많은 정의들이 나옵니다. 어디서는 디자인 시스템이 스케치 라이브러리라고하고, 어디서는 리액트 라이브러리라고 하는데, 심지어는 그냥 디자인을 정리한 문서라고도 합니다.
도대체 어떤게 맞는걸까요? 결론부터 말씀드리면 디자인 시스템은 이 모든것들을 포함하는 개념입니다.
디자인 시스템 자체가 포괄적인 개념이다 보니까 오히려 더 헷갈리는 것 같습니다.
이 그림은 제가 생각했을때 디자인 시스템을 가장 잘 요약한 그림인 것 같아서 가져와 봤는데요.
우선은 간단하게 디자인 시스템을 “스타일가이드”와 “컴포넌트 라이브러리”가 합쳐진 것이라고 생각하고 하나씩 간단하게 살펴봅시다.
스타일 가이드를 한줄로 요약하자면 “어떤 서비스에 들어간 모든 디자인요소들을 정리한 문서” 라고 할 수 있습니다.
예를들어, 우리 서비스에서는 컬러는 분홍, 초록, 주황만 사용한다. 폰트는 타이틀1, 타이틀2, 타이틀3 3개만 쓴다.
뭐 이런것들이죠.그 스타일 가이드를 통해서 디자이너들이 일관성있는 디자인을 할 수 있는겁니다.
디자인을 했으면 실제로 동작하게 코드를 짜야겠죠?
스타일 가이드에 있는 디자인을 재활용 가능한 코드로 만들어 놓은것을 컴포넌트 라이브러리라고 합니다.
이 컴포넌트를 한땀한땀 만들수도 있지만, 너무 많은 양의 컴포넌트를 만들어야 할 수도 있기 때문에
저는 차크라 라고하는 리액트 기반 라이브러리를 사용해서 빠르게 스타일 가이드를 컴포넌트화 하는것을 추천드립니다.
기본적인 컴포넌트들을 차크라가 미리 만들어놔서 테마만 재정의하면 됩니다. 생산성이 굉장히 좋아요.
그럼 이제 디자인 시스템이 대충 뭔지는 알겠는데 이게 왜 필요하지? 라고 생각하실수도 있으니까 디자인 시스템을 도입했을때 어떤 장점들이 있는지 살펴보겠습니다.
유저가 사이트에 들어와서 많은 페이지를 보고 나가는 동안 일관성 없는 경험을 지속적으로 한다면 장기적으로 브랜드 충성도에 악영향을 미칩니다.
하버드 비즈니스 리뷰(하버드 경영대)의 연구 결과에 따르면 고객을 5% 더 사이트에 머무르게 할 경우 매출이 25%에서 95%까지 증가할 수 있다고 합니다.
사이트 전반에 걸쳐 일관성 있는 UI/UX를 유지하는것은 고객에게 혼란을 주지 않고 더 사이트에 머무르게 만들면서 매출을 증가 시킬 수 있습니다.
미리 개발된 UI들을 재활용한다면 디자이너들의 작업시간이 크게 줄어듭니다.
스케치 라이브러리를 활용하면 디자인 요소들을 클라우드에 올려놓고 다른 작업자들과 공유할 수 있습니다. 이렇게 하면 다른 작업자가 이미 만들어놓은 UI를 가져다가 새로운 디자인을 할때 재활용할 수 있습니다. 어떤 디자이너는 이 디자인 재활용덕분에 디자이너들의 작업시간이 30%이상 줄어들 수 있다고 얘기합니다.
그리고 디자인 시스템을 사용하면 개발 생산성도 굉장히 향상됩니다.
스타일 가이드를 코드화 시킨것이 패턴라이브러리라고 했죠? 그 라이브러리들을 여러 사람이 확인하기 쉽게 문서화한것을 스토리북이라고 합니다. 왼쪽 목록에 여러가지 컴포넌트들이 나열되어 있고 각각을 클릭하면 해당 컴포넌트들이 어떻게 생겼는지 확인할 수 있습니다.
이 스토리북을 보면 서비스의 UI 최신본이 항상 이 버전이라는것을 확신할 수 있죠. 그리고 여기에 정리되어 있지 않은 UI들은 작업자들이 임의로 서비스에 넣을 수 없습니다.
협의를 통해서 스토리북에 추가 된 컴포넌트만 실제 서비스에 배포될 수 있습니다. 그렇게 되면 작업자들끼리 비슷한 컴포넌트를 똑같이 만드는일을 없앨 수 있죠.
스토리북을 잘 활용하면 같은 컴포넌트를 모달, 레이어, 레이어팝업, 팝업 등의 여러가지 이름으로 불리게 되는것을 방지 할 수 있어요. 이렇게 디자인 시스템을 사용하면 커뮤니케이션 비용이 크게 낮아집니다.
만약에 디자인에서 어떤 버튼의 색상을 변경해야 한다고 해봅시다. 만약 디자인 시스템이 잘 갖춰지지 않았으면 그 버튼을 사용하고 있는 모든 컴포넌트가 어디에 있는지 다 찾은다음에 그 수많은 버튼들을 일일이 찾아서 수정해야합니다.
하지만 디자인 시스템을 통해서 디자이너들의 구조와 개발자들의 구조가 일치되어 있다면, 버튼만 수정하면 그 버튼을 사용하는 모든 컴포넌트들이 자동으로 업데이트 되게 만들 수 있습니다.
이렇게 변경사항을 빠르게 업데이트 할 수 있다는게 디자인 시스템의 또 하나의 장점입니다.
프로그래밍 원칙에는 DRY원칙이라는게 있습니다.
Dont Repeat Yourself라는 뜻인데 한마디로 “중복 작업하지말고 딱 한번만 작업해서 재활용 하라”는 말입니다.
이것이 제가 생각했을때 디자인 시스템의 가장 큰 장점입니다.
디자이너 A와 디자이너 B가 서로 무슨 작업을 했는지 공유되지 않아서 비슷한 디자인을 똑같이 만들면서 시간을 소모하고
개발자 A와 개발자 B가 서로 비슷한 코드를 작성하면서 버리는 시간을 제거할 수 있습니다.
이 비효율성 제거에 대한 환산 비용은 계산하기 매우 어려운 문제이지만,
규모가 크고 직원이 많은 기업일 수록 꽤 많은 돈을 절약해줄것이라는것은 직관적으로 아시겠죠?
그래서 디자인 시스템의 장점을 한번 더 요약해보자면,
첫번째로 일관성 있는 UI/UX를 통해 고객의 충성도를 높일 수 있고,
두번째로 디자인과 개발 생산성을 향상시켜 비용을 절감시킬 수 있고,
세번째로 커뮤니케이션 비용을 줄일 수 있습니다.
마지막으로, 업데이트도 빠르고 효율적으로 할 수 있죠.
하지만 아직은 디자인 시스템이 이제 막 유행하고 있는 개념이다보니 어떤 정립된 방법은 없는 것 같습니다.
적용을 고려하고 있는 각 회사나 조직에 알맞게 도입을 고려해보시는게 좋을 것 같습니다. 감사합니다.
