디자인 시스템

 

인터페이스 디자인이란?

UI (User Interface Design, User Interaction Design)는 사용자가 시스템을 통해, 어떤 과업을 수행하기 위해 정보를 얻고  사용자가 원하는 것을 시스템에게 요구하기 위한 도구를 만드는것이라 할 수 있다.

DOS에서 GUI로 발전하면서 UI 또한 점점 발전해 왔다.

 

Tip. DOS와 GUI

DOS : 시스템과 대화하기 위한 상호간의 이해할 수 있는 언어다.

GUI(graphical user interface) : 타이핑을 통해 텍스트로 만들어서 입력해야했던 커멘드를 사용자가 눈으로 보고, 이해하고, 마우스를 이용한 액션을 통해 시스템을 작동할 수 있도록 그래픽으로 표현된 화면을 만든것이다.

이러한 발전을 통해 사용자들이 낮은 학습도를 가지고 더욱 쉽게 시스템을 사용할 수 있게 되었다.

 

컴포넌트의 이름을 알고, 해당 컴포넌트가 얼마나 다양한 활용성을 가지고 있는가를 잘알고있는 것이 UI 디자인의 중요한 요소라 할 수 있다.

하나의 UI 화면을 이루는 각각의 요소들은 개별의 UI 컴포넌트들이 조합되어 전체적인 화면을 구성한다.

그렇다면 어떤 기준에 의해 화면을 구성해야하는가?

디자인 시스템이 그 기준이 된다.

 

 

디자인 시스템(Design system)이란

디자인 가이드라인 이라고도 하며, 어떤 기준에 의해 화면을 구성해야 하는가를 나타내는 표준 가이드라인이다.

디자인 시스템을 정하지 않고 만들게 되면, 사용자의 입장에서 과업을 수행하는 시간이 길어질 수 있고 사용하는 시스템에 대해 불신을 갖게 될 수 있다.

 

디자인 시스템의 구성

디자인 시스템은 디자인 컨셉과 원칙, 색상, 아이콘, 폰트, 레이아웃 등으로 구성된다.

'우리의 디자인 시스템은 궁금적으로 이러한 디자인을 보여주기 위해 만들었다'와 같이 디자인 시스템의 목표, 다짐 등을 보여주는 것이 디자인 컨셉이라 할 수 있다.

디자인 UI 컴포넌트의 가장 최적화된 색상이 무엇인지, 브랜드의 정체성을 나타내는 색상 조합이 어떤것인지 정해 놓은  컬러 팔레트가 있으며, 브랜드와 어울리는 아이콘 제작 가이드라인과 폰트, 브랜드에서 기본적으로 사용하기를 권장하는 레이아웃이 있다.

 

Tip. UI 레이아웃

화면 안의 기본 틀이라 할 수 있다.

화면의 어디에 얼만큼의 크기와 비율로 어떤 컴포넌트를 넣는지를 정의한다.

보통 컬럼으로 화면을 나누어 레이아웃을 배치한다.

예를 들어, 웹 홈페이지에서 배너는 몇개의 컴럼안에 표시할 것인가 등으로 레이아웃을 잡는다고 할 수있다.

 

구글 머터리얼 디자인 가이드라인(Google Material Design Cuideline)을 예로 들어보자.
Design	어떤 컴포넌트가 어떻게 디자인 되어야하고 디자인할 때 지켜할 규칙과 컨셉을 확인할 수 있다.
Components	Google App에서 사용할 수 있는 Material Design 에서 제공하는 컴포넌트가 무엇인가를 확인할 수 있다. 컴포넌트는 어떤 구조로 되어있고 하나의 컴포넌트 안에 세부적인 컴포넌트는 무엇이 있는지 확인할 수 있다.
Develop	개발자가 알아야하는 소스 또는 팁을 확인할 수 있다.
Resource	디자인 시스템을 적용한, 디자인을 만들 때 사용할 수 있는 라이브러리를 다운로드 받아 사용할 수 있다.

 

디자인 게이트

AOS, IOS 와 같이 큰 플랫폼에 들어가는 애플리케이션은 심의를 거치게 된다.

심의 기준 중 반드시 지켜야하는 기준이 있는데, 이 기준을 지키지 못하면 앱이 릴리즈가 안될 수 있다.

디자인에서 절대적인 것은 없지만, 가이드라인을 벗어나는 디자인 결정을 내릴때는 릴리즈가 불가능하지는 않은지 꼼꼼하게 확인해야 한다.

 

디자인 환경

디자인을 플랫폼에 올리기 위해서 고려해야하는 사항들로 어느 플랫폼에 올리냐에 따라 고려해야하는 사항들이 달라진다.

디자인 자체의 퀄리티도 중요하지만, 만들어진 디자인이 우리 서비스의 디자인 언어를 잘 표현하고 있는지도 중요한 요소다.

아무리 잘 만든 디자인이라도 우리 서비스의 디자인 가이드와 맞지 않다면 사용할 수 없기 때문에, 디자인 시스템을 항상 생각하며 디자인 해야한다.

스마트폰, 타블랫, 노트북 등 보여지는 화면과 어떤 입력 장치를 가지고 있느냐에 따라 고려해야하는 디자인 요소가 다르다.

 

제품을 개발하고 안정적으로 운영하는데 문제가 없는지 기술적인 사항들도 고려해야한다.

아이디어가 구현이 가능한지, 구현 후 유지보수가 가능한지, 사용은 편리한지 등에 대한 사항들을 파악해야한다.