brunch

You can make anything
by writing

C.S.Lewis

by Minnie Feb 13. 2021

‘디자인 시스템’에 대해 얘기해보다-Part 3

Part 3. 디자인 시스템은 어떻게 만들면 되나요?

이 글은 ‘디자인 시스템’에 대해 얘기해보다 part 3에 대한 글입니다. 이 글은 총 Part 4로 진행될 예정입니다. part 2를 안 읽으셨다면 Part 2. 디자인 시스템은 언제 만들어야 하나요? 를 읽고 오는 것을 추천드립니다.

첫 번째와 두 번째 파트를 통해 디자인 시스템이 무엇인지, 언제 도입해야 하는지도 살짝 알 것 같긴 한데 도대체 이것을 어떻게 만들면 될까요?

그리고 도대체 얼마나, 어느 만큼 을 디자인 시스템으로 정의하고 만들어야 하나요? 사실 이것도 회사마다 다를 수밖에 없는데요.

그 이유는 회사의 서비스 특징마다 디자인 시스템의 정의도 다르고, 그에 따라서 프로세스 또한 다를 수밖에 없기 때문입니다.

일반적인 디자인 시스템 프로세스

일반적으로 디자인 시스템 프로세스는 이런 프로세스를 가지고 있는데요.

여기서 우리가 앞에서 얘기했던 design과 system으로 분리해 프로세스를 나눈다고 했을 때 앞의 세 단계가 디자인을 만드는 단계, 그리고 뒤의 세 단계가 시스템을 만드는 단계로 정의할 수 있겠습니다.

여기서 우리 디자이너들이 좀 더 집중하고 중요시해야 하는 프로세스는 디자인을 하는 과정인데요. 디자인 시스템에서 디자인을 한다는 것은 일관되게 구성된 일련의 패턴을 만드는 일입니다.

이 작업을 세 단계의 프로세스에 맞게 좀 더 풀어서 설명하자면, 서비스에서 사용되는 일련의 패턴을 찾아 정의하고 범용적으로 사용할 수 있게 디자인하고, 그 패턴을 규칙으로 만드는 것입니다. 그래서 우리는 이 ‘패턴’을 만드는 것에 집중해야 하는데요.

디자이너인 우리가 만들고자 하는 이 패턴은 총 2가지로 나눌 수 있습니다.

첫 번째로는 펑셔널 패턴(Functional Patterns)과, 두 번째는 펄셉슈얼 패턴(Perceptual Patterns) 총 이렇게 총 2가지의 패턴을 우리는 인지하고 만들어야 하는데요.

슬프게도 영어로 하니 무슨 말인지 참 모르겠습니다.

잘 모르겠으니 예를 들어보겠습니다. 왼쪽 A라는 앱은 트레이딩 마켓 분석 앱이고, 오른쪽 B라는 앱은 공부와 토론을 할 수 있는 소셜 네트워킹 앱입니다.

A는 트레이딩 마켓 분석 앱에 맞게 위젯 베이스에 유저들이 멀티 태스킹이 가능합니다. 또한, 많은 정보를 스크린에 담아야 하기 때문에 밀도가 높은 디자인으로 구성되어 있습니다.

B는 공부 및 토론을 할 수 있는 소셜 네트워킹 서비스입니다. 여기서 보시면 해당 타이포의 대비 큰 여백으로 이뤄져 있는 하나의 콜론에 집중되어 있습니다. 또 하단에는 아티클을 읽는 싱글 테스크에 좀 더 집중이 되어 있고 토론하게끔 유저의 행동을 이끌어 내고 있습니다.

좀 더 두 패턴을 이해할 수 있게 예시를 하나 더 들어보겠습니다. 이번에는 파트 2에서의 예시였던 이러닝 서비스와 커머스 서비스를 이미지 없이 한번 상상해보겠습니다.

이러닝 즉 학습 앱은 아무래도 학습 앱이니깐 사용자가 학습할 내용이 본문으로 구성되거나 비디오로 제공이 될 것 같고, 또한 강의를 듣는 사용자들의 Q&A나 코멘트 같은 기능을 통해 답변이 달릴 것 같습니다. 또 얼마나 학습을 했는지 를 시각적으로 보여주는 진행에 관련된 UI도 있을 것 같습니다.

그럼 이커머스 앱을 상상해 봅시다. 커머스 앱이니 당연히 상품이 노출이 되어야 할 것 같습니다. 또한 커머스는 굉장히 많은 상품들을 노출해주고 있으니 사용자가 원하는 상품들만 볼 수 있게 필터 기능이 필수적으로 필요하겠고, 구매하기 전 담을 수 있는 장바구니나 구매까지 이어지는 체크아웃 페이지도 필요할 것 같습니다.

이처럼 저희는 UI를 보지 않고도 어떤 기능들을 필요로 하고 어떤 UI를 가지고 있는지 대충 머릿속으로 그릴 수 있는데요.

이러한 것들을 바로 첫 번째 패턴인 펑셔널 패턴이라고 합니다. 즉, 펑셔널 패턴이라는 것은 도메인의 특징에 따른 패턴입니다.

그렇다면 도메인이 같은 서비스에서는 어떤 패턴이 있을까요?

이번에도 예시를 들어보겠습니다. A는 Hipchat이라는 서비스고, B는 Slack이라는 서비스입니다. 두 서비스 모두 채널 기반 메시징 플랫폼입니다.

아무래도 두 서비스는 같은 도메인의 서비스이다 보니 정보의 구조 및 기능이 비슷한데요. 바로 이게 펑셔널 패턴이 동일하기 때문입니다.

하지만 우리는 이 두 서비스가 다른 서비스라는 것을 인지할 수 있는데요.

이것의 이유는 정보의 구조, 그리고 기능이 비슷하지만 UI에서의 컬러, 타이포, 아이콘, 이미지 크기 등이 다르게 구성되어 있기 때문인데요. 이 때문에 사용자는 두 서비스가 같은 도메인인데도 불구하고 다른 브랜드라는 것을 인식할 수 있습니다.

이것이 바로 2번째 패턴인 펄셉슈얼 패턴(Perceptual pattern)이라고 하는데요. 즉, 서비스의 브랜드를 인식할 수 있는 패턴을 뜻합니다.

디자인 시스템 - 디자인 프로세스의 주된 과정

그래서 우리는 디자이너로서 디자인 시스템을 만들다고 했을 시 만들어져 있는 UI를 정리하고 정돈하는 것이 아닌, 도메인 특징 즉 펑셔널 패턴(functional patterns)과 서비스 브랜딩 즉 펄셉슈얼 패턴(Perceptual patterns)을 이해하고 그것에 맞게 규칙으로 만드는 것이 주된 과정이자 디자인 시스템에서 디자이너가 가장 중요시해야 하는 부분입니다.