서비스 기획자가 디자인 시스템을 알아야 하는 이유

서비스 기획자와 디자이너가 개발자처럼 모듈을 이해할 수 있는 방식

이 작품은 ‘라즐로 모홀리 나기(László Moholy-Nagy)’의 ‘Fotogramm (1925)’입니다. 별다른 제목을 붙이지 않고 그가 만들어낸 작업 방식인 포토그램이라고 이름이 붙여졌습니다. 이름부터 참 읽기 어려운 이 헝가리 작가는 ‘바우하우스’와도 연관이 매우 깊은데요. 호기심이 생긴다면 더 찾아보셔도 좋을 것 같네요.

‘모홀리 나기’는 조형성이라는 개념에 대해 심도 있게 고민한 작가입니다. 합리적인 규칙을 바탕으로 레이아웃을 구성하고 이를 이론으로 만들어내기도 했습니다. ‘작품’ 보다 ‘조형’에 집중하는 이러한 방식은 현대 디자인에 많은 영향을 끼치게 됩니다.

모든 조형성에는 규칙이 있다고 생각합니다. 단순한 평면 작업이라도, 호감을 주는 색상과 사물의 배치에 많은 영향을 받습니다. 3차원 조형물도 마찬가지입니다. 상품성을 지닌 디자인이라면 더 말할 것도 없습니다. 이러한 연장선에서 서비스의 시각적 특징이 담긴 화면에서도 규칙은 매우 중요합니다. 디자인 시스템에 대한 이야기, 바로 시작해 보겠습니다.      

‘서비스’라는 주제에서 ‘디자인 시스템’이 중요한 이유를 크게 세 가지입니다.  

1. 효율적인 관리 

디자인 시스템은 최초에는 그리드와 같은 레이아웃을 설계하는 것으로 시작합니다. 그리고 프로젝트에 사용될 색상이나 텍스트, 아이콘 같은 원자 요소와 버튼이나 스위치와 같은 작은 단위로부터 핵심 기능을 담은 다양한 컴포넌트와 화면 구성 요소로 확장됩니다. 선언된 컴포넌트를 변경하면 서비스 전체에 사용된 해당 컴포넌트도 함께 변경됩니다. 이는 몇 가지 이점을 가질 수 있는데, 불필요한 형태의 제한, 일관성을 통한 유지보수의 용이함, 디자인 확장 등 모두 효율적인 관리와 연관됩니다.  

2. 예측 가능한 개발 

사전에 디자인 시스템을 먼저 설계함으로써, 화면구성부터 개발구현까지 예측가능한 상태를 만들 수 있습니다. 콤포넌트간의 융합규칙, 각 콤포넌트에 대한 최소한의 사용규칙 등을 바탕으로 예측 가능항 상태가 만들어집니다. 또한 규칙만 허용한다면 확장된 형태 또한 예측할 수 있습니다. 그래서 디자인 시스템을 설계할 때는 반드시 규격을 바탕으로 컴포넌트를 제언하는 것이 매우 중요합니다.  

3. 커뮤니케이션 

하지만, 디자인 시스템의 핵심은 커뮤니케이션입니다. 개발자가 구조를 설계하고, 화면에 배치하는 방식은 디자인 시스템을 설계하는 것과 상당히 닮아있습니다. 애초에 디자인 시스템 자체가 기획, 개발, 디자인 간의 협업을 위해 만들어진 방법론이며, 그 구성자체가 상당히 공학적이기 때문입니다. 디자인 시스템을 설계할 때 꼭 참고해야 하는 구글의 Material Design 같은 경우도 개발 도구인 Android studio에서 사용되는 용어를 일관적으로 사용하고 있습니다.   

디자인 시스템에 대한 자세한 설명이나 구축하는 방법에 대해서는 이 글보다는, 구글의 Material Design, 애플의 Human Interface Guidelines, 마이크로소프트의 Fluent Design System 등을 참고하시는 게 좋겠습니다. 디자인 시스템을 선도하는 기업이며, 대기업답게 설명이 매우 잘 되어있으니, 관심이 있다면 꼭 한 번 참고해보면 좋겠습니다.

사실 디자인 시스템 설계업무 자체는 디자이너의 영역입니다. 하지만, 서비스 기획자라면 디자인 시스템이 어떻게 구성되어 있는지는 반드시 공부해야 할 뿐만 아니라 제대로 이해하고 정복해야 합니다. 디자인을 하지 못하더라도, 시스템에 대해서는 어렵지 않게 이해할 수 있습니다. 개발자들 이미 디자인 시스템과 매우 유사한 형태로 개발을 해나갑니다. 이와 같은 이유로 서비스 기획자가 ‘디자인 시스템’을 제대로 이해하는 것만으로도, 디자이너, 기획자와의 커뮤니케이션 효율이 매우 높아질 수 있습니다. 

그러면, 서비스 기획자가 디자인 시스템을 어떻게 시작해 보면 좋을까요? 위 디자인 시스템의 가이드문서를 천천히 읽어보는 것 정도면 됩니다. 물론 이와 별개로 디자인 시스템을 실제로 도입하는 것은 또 다른 이야기입니다.

디자인 시스템은 그 규모가 방대합니다. 간단한 버튼 컴포넌트라고 할지라도, 작거나, 적당하거나, 큰 형태로 분류해야 하고, 아이콘의 사용유무, 버튼의 상태 등을 정의해주어야 합니다. Material Design는 30개가량의 컴포넌트와, 그 외에 컬러, 텍스트, 레이아웃 등에 대해 소개하고 있습니다. 이런 내용을 숙지하는 것만으로도, 화면 설계서 작성은 매우 유용해집니다. 특히 작성할 서비스와 동일한 도메인의 디자인 시스템을 이해한다면(예:Material Design = Android) 용어나 개발문서 등이 통일되어있기에 더할 나위 없겠지요.

디자인 시스템은 일종의 제약조건입니다. 제약조건은 곧 거버넌스의 한 요소이며, 이는 지독한 유지보수를 수반합니다. 또 제약조건은 크고 작은 규칙으로 선언됩니다. 수학 공식처럼 느껴질 때도 있습니다.

                     

“프로필 사진과 이름, 그리고 3줄 정도의 텍스트가 합쳐지면 타인의 포스트다. 여기에 미리 정의한 위치에 편집버튼을 보여준다면 내가 작성한 포스트다.” 같이 수학공식처럼 정의 내릴 수 있게 됩니다. 

나 여기 있고 너 여기 있지 너 여기 있고 나 여기 있냐

규칙은 혼자가 아니라 여럿을 위해 존재하는 것이기도 해요. 다시 위로 올라가 ‘디자인시스템이 중요한 이유’를 보면, 결국 협업을 통한 생산성 강화에 초점이 맞추어져 있다는 것을 알 수 있습니다. 이 정도면 서비스 기획자가 디자인 시스템을 이해해야 하는 이유로 충분하지 않을까요?    

beyes 님의 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.