디자인 시스템은 무엇인가?
-
개발자와 디자이너 사이의 긴밀한 협업 제공
개발자와 디자이너의 대화에서는 정확한 정보를 전달하기 쉽지 않으며, 이것은 의사소통 오류의 발생을 높인다. 이 부분을 해결하고 두 집단 사이의 원활한 커뮤니케이션을 위한 수단으로 디자인 시스템이 필수적이다. -
서비스의 통일성을 제공
여러 명의 디자이너가 하나의 서비스를 만들 때 기준이 되는 서비스 정책이 없다면, 각각의 디자인 UI로 제작하게 될 것이기 때문에 그 서비스는 통일성을 잃게 된다. 이것은 사용자가 각각 다른 페이지에서 새로운 서비스를 보게 되는 낯선 느낌을 들게 할 것이다. -
최적화된 서비스를 제공
디자이너와 개발자 사이의 커뮤니케이션이 잘 되었다고 하더라도, 개발자가 디자이너의 제품을 퍼블리싱 하기 위해서는 이 디자인이 재사용이 가능한 component 인가를 검토해 보아야 한다. 이것은 디자인적 구조를 이해하지 못하는 개발자가 코드를 해석하는 작업이기 때문에 Learning Cost가 발생하게 되며, 새로운 Component를 재구성하는 것이 더 편하다고 생각하게 된다. 새로운 Component의 구성은 서비스를 무겁게 만들며 최적화와는 거리가 멀어지게 한다.
디자인 시스템이란 위의 세 가지 문제점을 해결하기 위해 시스템화 시킨 것이다.
공동 목표의 최적화
디자이너와 개발자의 공동 목표는 최적의 서비스를 만들어 내는 것이다.
디자인 시스템의 활용은 첫 번째, 대화 비용을 줄여서 작업의 생산성을 높이고, 두 번째, 여러 작업자가 참여하게 되어도 서비스 사용자에게 통일성을 제공할 수 있으며, 마지막으로는 서비스 코드의 재사용성을 가져옴으로써 그 목표를 실행할 수 있다.
디자인 시스템을 위해서는 세분화가 되어 있는 매뉴얼(Design UI Kit)이 필요하다. 버튼 하나에도 각 속성에 따라 무수히 많은 디자인이 생겨나게 되는데, 세분화된 매뉴얼의 제공은 디자이너와 개발자가 공동의 목표에 대해 대화할 수 있는 지도를 준비한 것과 마찬가지다.
하지만 디자이너가 매뉴얼 제공하고자 하는 방식과 개발자가 제공받고자 하는 방식은 차이가 있다. 이때, 디자인 시스템으로 개발자가 component를 구성하는 것과 동일한 모양으로 디자인을 그룹화하고 네이밍에 속성을 부여한다면 이 차이를 현저하게 줄일 수 있다.
위의 이미지는 figma 디자인 툴을 사용하여 layer를 정리한 방식이다. 이것을 보면 버튼 네이밍에 각 속성을 부여하였고 그 요소를 그룹화하였음을 알 수 있다. 물론 디자이너가 개발자가 원하는 방향으로 component의 구조를 짜고 네이밍을 하는 것은 쉽지 않기 때문에 Design UI Kit를 바탕으로 개발자가 각 요소를 구조화, 네이밍 처리를 해주는 사전 작업이 필요하다.
디자인 export json
이렇게 정리된 내용을 ‘toJson’이라는 플러그인을 표현해 json의 형태로 출력하면 개발자는 위의 이미지와 같은 형태로 받아볼 수 있다. 이런 식으로 개발자는 모든 것이 정리되어 있는 json 파일을 받게 되고, 이를 알맞게 시스템화만 해주면 hand-off 할 수 있는 제플린 등의 프로그램에서 디자인을 개발코드로 재해석할 필요가 없게 된다.
전달받은 json 파일 역시 시스템화하여 쉽게 활용할 수 있다. 버튼, 모달, 텍스트 Field 등 다양한 component를 서비스에 맞게 구성해 놓으면 새로운 페이지를 만들더라도 정리된 서랍에서 꺼내 쓰는 형태로 진행을 할 수 있게 되고, 이는 코드의 재사용성을 줄이게 된다.
버튼의 component화 처리
추가될 때 재사용되는 layout 등은 각 component를 담아 layout components로 정리해 놓으면 기존 디자인 내에서 기획자의 정책 방향 전달만으로도 개발자가 새로운 페이지를 구성할 수 있게 한다.
이는 각각의 component를 중앙 container화 시켜놓은 것이기 때문에 하나만 수정하더라도 서비스 전체의 component가 바뀔 수 있는 구조가 되고, 따라서 통일성이 높으며 유지 보수가 쉽다.
디자인 시스템의 문제점
- 디자이너가 디자인 시스템을 숙지하기 위해선 Learning Cost가 많이 든다. 대규모 서비스의 경우 방대한 양의 매뉴얼 때문에 디자이너가 연구하기에 시간 소요가 많이 된다. 이를 보완하기 위하여 Design UI Kit 검색 시스템을 제작하였는데, 구조와 component 제작 방식을 디자이너가 좀 더 빠르게 숙지할 수 있었다.
- 좋은 디자인이란 서비스의 통일성이 높아 사용자에게 동일한 UI만을 제공하는 것이 아니며, 디자이너의 자유도를 보장해 줄 필요가 있다. 그렇기 때문에 가이드를 벗어나는 UI 실험(디자이너의 자유)을 주는 게 중요하다.
따라서, 디자인 사이즈에 따라 매뉴얼에 new Design을 추가하거나 디자인 시스템이 좀 더 유연해지도록 custom option을 추가함으로써 이를 조금 보완할 수 있다.
어려운 이야기지만 엄격함(디자인 시스템의 획일성) VS 유연함(디자인의 자유) 사이에서의 밸런싱이 매우 중요하다.
디자인 시스템에도 문제점이 있지만 디자이너와 개발자가 서로에게 한발 더 다가와 매뉴얼에 도움을 줄 수 있는 방향으로 가다 보면 이 문제들을 잘 보완할 수 있을 것이다.
'사용자에게 보다 나은 UI를 제공하기 위해서'라는 두 집단의 공통 목표는 같다. 이 시스템을 잘 활용하여 서비스에 적용해 보길 추천한다.
