2.1. Design System 이란 무엇인가?

2.1.1. 디자이너와 개발자간의 협업의 어려움

디자이너와 개발자간의 협업 어려움은 마치 서로 다른 국적의 두사람이 다른 언어를 사용하면서 생기는 의사소통의 문제와도 크게 다르지 않을 것입니다.

디자이너는 포토샵과 같은 그래픽 도구를 통해 디자인 산출물을 만들고, 개발자는 디자인 산출물 (포토샵이라면 아마도 PDS 파일) 을 가지고 코드로 변환하고 로직을 구현하게 됩니다. 이 과정에 디자이너와 개발자 사이에 통역을 담당하는 퍼블리셔(Publisher) 가 디자인을 개발자가 토딩할 수 있는 코드로 변환해 주기도 합니다.

디자이너 나름대로의 어려움이라면, 매번 수정되는 디자인을 그때 그때 다시 그려서 개발자에게 설명하기도 했으며, 실제로 계속해서 변화하는 서비스의 UI 와 디자인 파일이 동기화하는일은 불가능에 가까울 수 있다고 생각합니다.

개발자 역시 나름대로의 어려움이 있습니다. 디자이너로 부터 전달받은 파일을 기준으로 개발하는 중에 테스트나 Mockup 데이터가 아닌 실제 데이터가 보여지면서 예상치 못한 결과가 나오기도 합니다. 그리고 디자이너가 정의한 디자인 가이드를 100% 완벽하게 적용하기란 상당히 어려울 뿐입니다.

2.1.2. 디자인 시스템 (Design System) 는 ?

디자이너와 개발자, 더나아가 기획이나 프로젝트 구성원 전체가 지켜야할 표준이 필요할 수 밖에 없습니다.

색상 팔랫트나 타이포그라피(사용해야할 폰트/크기 등) 를 정의한 디자인 가이드나 화면 정의서, 그리고 화면에 공통으로 사용하는 UI 컴포넌트 모음 등다양한 방법으로 서로가 지켜야할 표준을 정의하고는 했습니다.

이중에 중요한 것 중 하나는 재사용할 수 있는 UI 컴포넌트의 모음입니다. 공통으로 사용할만한 UI 구성요소를 컴포넌트로 별도로 만들어 놓은 후 그대로 가져다 사용할 수 있도록 해야 합니다. 잘 정리되어 있다면 디자인하는 비용을 많이 줄일 수 있을 것입니다. 이 때문에 이러한 UI 컴포넌트와 UI 화면 Template 를 모아놓은 UI Kit 를 먼저 구축하고 디자인과 개발을 진행하는 경우가 많아졌습니다. 이러한 표준이나 컴포넌트 그리고 Template 은 점점더 규모가 커지고 있는 서비스라면 필수 일 수 밖에 없습니다.

이러한 UI 컴포넌트들과 UI 화면 Template 은 디자이너만을 위한 것은 아닙니다. 개발자 역시 디자인과 동일하게 UI 개발코드 역시 컴포넌트화 하고, 이를 사용하여 Template 을 만들어 놓으면, 변경되는 화면 정의를 좀더 쉽게 적용할 수 있을 것입니다.

Design System 이란 스타일가이드나 디자인에 참조할 수 있는 UI 라이브러리들을 모아 놓은 UI Kit 을 넘어서, 서비스 기획자나 마케팅 담당자 그리고 개발자와도 디자인을 기반으로 협업하고 커뮤니케이션하는데 필요한 지원 플랫폼의 역할을 하게 됩니다.

그러기 위해 Design System은 스타일가이드, UI 컴포넌트화, 화면 정의를 할 수 있어야 함은 물론이고, 아래와 같은 다양한 특징들이 요구되기도 합니다.

• 서비스 변경에 따른 UI 변경 관리 : 개발코드의 UI 가 Design System 의 화면 UI 와 동기화
• 디자인 변경의 용이성 : 스타일 가이드의 변수 변경에 따른 디자인 일괄 변경, Look & Feel 의 수시 비교
• 다양한 해상도에서 UI 확인
• 테스트 데이터가 아니라 실제 운영데이터를 기준으로 UI 확인
• 다국어(Internalization) 적용 등

Design System 이 이러한 기능을 갖고 있을 때 더욱 의미 있는 것은, 더욱 더 운영을 고려한 디자인을 설계하게 된다는 것입니다.

이제부터 설명하게 될 Airbnb의 react-sketchapp 오픈소스 프로젝트는 이러한 Design System을 구현하기 위한 방법 중 하나가 될 것입니다.