경쟁력을 갖춘 디자이너가 되기 위한

디자인 시스템을 구축하는 방법

UI/UX 디자인 업계에서는 최근 앱이나 웹 서비스의 디자인 시스템을 이해하고, 이를 구축할 수 역량이 중요한 경쟁력으로 떠오르고 있습니다.

디자인 시스템이란?

디자인 시스템이란, 흔히 앱 또는 웹 사이트와 같은 디지털 제품의 개발 지원과 더 나은 사용자 경험을 위해

일관되게 구성된 디자인, 패턴, 컴포넌트 등을 만들고 이를 활용하여 디자인하는 것을 의미합니다.

즉, '불필요한 커뮤니케이션을 없애기 위해 체계적으로 정리해 놓은 시스템'인 거죠.

디자인 시스템이 구축되면

• 일관성 있는 UI/UX를 유지함으로써 다양한 채널에 걸쳐 브랜드 아이덴티티를 일관되게 전달하고, 높은 수준의 사용성을 만들어낼 수 있습니다.
• 미리 개발된 UI들을 재활용하는 것이 가능하여 디자이너들의 작업 시간을 크게 줄여줍니다.
• 스타일 가이드를 코드화 시키는 과정에서 개발자들의 커뮤니케이션 비용이 크게 낮아지고 생산성이 향상됩니다.
• 컴포넌트 수정을 효율적으로 할 수 있어 변경 사항을 빠르게 업데이트하는 것이 가능해집니다.

이러한 디자인 시스템의 효율성 덕분에 최근,

기업에서는 디자인 시스템을 구축하고 활용하는 역량을 UI/UX 디자이너의 핵심 역량으로 보고 있습니다.

하지만 디자인 시스템을 배우기란 쉽지가 않습니다.

"교수님... 왜 디자인 시스템 안 알려주셨어요!"

저도 대학교에서 UI/UX 디자인을 전공했지만 디자인 시스템을 이해하고 활용하는 법을 배우지 못했습니다.

대부분 영어로 작성되었고, 생소한 단어가 많이 사용되며 실습을 할 수 있는 자료가 너무나도 적었기 때문입니다.

학교에서도 알려주지 않는 디자인 시스템

저와 함께 차근차근 배워나가요!

안녕하세요,

정영호입니다.

저는 쥬신이라는 웹/앱 디자인 전문 회사를 운영하고 있는 디자이너 정영호입니다.

서비스 기획부터 UI/UX 디자인, 개발에 이르기까지 대표로서, 디자이너로서 다양한 웹/앱 서비스를 만들고 있습니다.

그러다 보니 누구보다 디자인 시스템의 중요성과 느끼고 직접 부딪치며 다양한 경험들을 해왔습니다.

이런 저의 경험과 노하우를 여러분에게 공유하고자 합니다.

저와 함께 디자인 시스템을 만들어 보실래요?

개념부터 실습까지

디자인 시스템 정복하기!

아무리 복잡한 그림도 결국엔 점, 선, 면으로 이루어져 있다는 것을 이해한다면 어렵지 않듯이

디자인 시스템의 점, 선, 면을 파악해 기본 구조를 이해하실 수 있도록 알려드립니다.

이후 실습을 통해 가상의 앱을 기획하고 디자인 시스템을 만들어 볼 예정입니다.

마지막엔 이를 활용하여 최종 화면 디자인까지 진행해 볼 거예요.

# 기업의 디자인 시스템 사례 보기

: 구글, 애플, IBM, 등

(Google의 Material design, IBM의 Carbon design)

구글, 애플, IBM을 비롯한 해외 기업들과 국내 기업들이 디자인 시스템에 대해 가이드를 내놓은 사례들이 있습니다.

함께 사례를 살펴보면서 디자인 시스템에 대한 감을 잡아갈 거예요.

# 실무에서의 앱 개발 프로세스 살펴보기

본격적으로 실습에 들어가기에 앞서,

실무에서 앱을 만드는 과정을 이해하면 훨씬 더 디자인 시스템을 통해 디자인을 하기가 수월해질 거예요.

실무에서 UI/UX 디자이너의 역할과 업무를 살펴볼게요.

# 디자인 시스템의 가장 기초,

환경 시스템 이해하기

우리가 그림을 그릴 때 종이를 가장 먼저 고르듯이, 앱을 디자인하기에 앞서 우리가 디자인할 대지 사이즈를 먼저 골라야 합니다. 그 후, 그리드, 서페이스, 백그라운드, 엘레베이션 등 가장 기초적인 환경을 세팅합니다.

• 디자인을 대지 사이즈 선정하기 (Android/iOS)
• 대지 사이즈에 맞춰 그리드 설정하기 (feat. 마진, 컬럼, 거터)
• 서페이스(Surface)와 백그라운드(Background) 설정하기
• 엘레베이션 및 섀도우 시스템 설정하기

# 컬러 시스템 이해하기

적절한 컬러를 선정하고 이를 화면에 표현하는 역량도 중요하지만 디자인 시스템에서는 컬러의 역할에 맞게 컬러를 선정하고 이를 명시하는 것 역시 중요한 역량입니다.

• 메인 컬러와 보조 컬러
• 백그라운드 컬러와 서페이스 컬러
• 에러 컬러
• 텍스트 컬러 등

# 컴포넌트 이해하기

우리가 흔히 말하는 버튼, 네비게이션, 카드 등 앱 화면을 구성하는 요소들을 컴포넌트(Component)라고 이야기합니다. 각 컴포넌트들은 역할과 특성들이 있습니다. 이를 차근차근 살펴보고 주로 사용되는 컴포넌트들에 대해서도 알아볼 거예요.

# 앱을 기획하고 이를 토대로

디자인 시스템 실습하기

아무것도 없는 상태에서 디자인 시스템을 만들려고 하면 어려울 수 있습니다. 처음에는 우리가 만들려고 하는 서비스의 핵심 플로우를 설계하고 이를 토대로 메인 키 화면을 그린 후, 시스템을 만들면 훨씬 간단하게 만들 수 있어요.

(↑ 시각 장애인 안마사분들을 위한 앱 서비스 기획)

그 과정에서 간단하게 앱을 기획하는 법을 배워 볼 거예요. 사용자가 어떻게 앱을 사용할 것인지를 보여주는 유저 플로우를 중심으로, 화면 간의 이동을 보여주는 화면 플로우를 그리고 메인 화면을 디자인함으로써 우리가 그려내야 할 주요 화면의 개수와 컴포넌트들을 파악할 수 있습니다.

# 개발단의 실무를 고려한 팁들

디자인에만 몰두하다 보면 우린 실제 개발을 위한 디테일들을 놓치곤 합니다. 버튼들이 눌리기 전, 눌린 후, 마우스를 올렸을 때 등 다양한 상태 값을 갖는다는 것을 이해하고 이에 맞는 디자인을 할 수 있도록 도와드릴게요.

• 컴포넌트 별 상태 이해하기
• CRUD를 이해하여 화면에 빠진 부분 채우기

# 디자인 시스템 200% 활용하기

컴포넌트화/에셋화를 잘 활용하면 클릭 한 번으로 수 십, 수 백 장을 동시에 수정하는 것도 어렵지 않아요!

실무를 고려한 디자인 시스템 활용법을 알려드립니다.

• 실무에서 디자인 시스템 활용하기
• 취업/이직을 위한 디자인 시스템
• 프리랜서로서 디자인 시스템 활용하기

더욱 경쟁력 있는

디자이너로 거듭나기

현재 취업/이직 시장에선 인공지능의 발전과 디자인 자동화 기술의 발전으로 이에 발맞춰 디자인을 시스템화 시킬 수 있는 역량을 가진 디자이너를 선호하고 있습니다.

이번 디자인 시스템 클래스를 통해 가장 기초부터 실습을 통한 활용 방법까지, 여러분을 더욱 경쟁력 있는 디자이너로 거듭나게 도와드릴게요.

저와 함께 디자인 시스템 클래스, 시작해봐요!

디자인을 디자인하다. 디자인 시스템