디자인 시스템의 사용자에 관한 생각

디자인시스템 요모조모

디자인 시스템 디자이너로 일하면서 알게 된 한 가지는 내가 신경 써야 할 사용자가 두 사람이라는 것이다.

한 명은 제품을 직접 사용하는 사람, 그리고 다른 한 사람은 디자인 시스템을 가지고 이리저리 사용하는 디자이너이다. 아, 그리고 나머지 한 명이 또 있는데 그 사람은 바로 엔지니어이다. 하지만 이 사람은 사용자라기보다는 동료에 가깝다.

그럼 이 두 사람에 대해 이야기해볼까 한다.

처음 알게 된 이 첫 번째 사용자는 예민한 아기처럼 챙겨줘야 하는 존재이다. 내가 디자인하는 제품에 따라 다르겠지만 연령대도, 신체적 제한도 다양할 것이기 때문에 접근성을 생각해서 컬러 대비 그리고 폰트의 사이즈나 굵기도 국제 기준에 맞추어 디자인해야 한다. 소셜미디어를 예로 들자면 크리에이터와 컨슈머 등으로 또 나뉘기도 하고 그들이 만들어내는 창작물에 따라 디자이너가 미처 생각하지 못한 케이스들이 나올 수 있다. 그때마다 디자인 시스템 디자이너들은 계속 보완해서 개선해 나간다. 그래서 완성된 디자인 시스템이란 없다고 했던 것이었다. 그 제품이 망해서 더 이상 쓸모없기 전까진.

두 번째 사용자는 디자인 시스템을 갖고 일하는 다른 디자이너이다. 이 친구는 나와 크게 다르지 않은 배경을 가지고 있다. 근데 이 친구는 질문이 많다. 사실 질문이 많을수록 나는 생각하지 못했던 부분들을 고칠 수 있기에 많은 도움을 받지만 때로는 피곤하다. 인간은 늘 편하게 있고 싶기 때문이다. 이 친구를 위해서 내가 하는 일들은 다음과 같다.

컴포넌트를 잘 사용할 수 있도록 가이드라인을 만든다. 왜, 무엇인지, 어떻게, 어디서 등을 이미지나 영상 등을 더해할 것과 추천하지 않는 것들을 적은 문서를 만들어 공유한다.

그런데 디자인 시스템팀이 미처 생각하지 못해서 가이드라인에 빼먹었던 구멍들을 팀 밖의 디자이너인 친구가 질문을 하곤 한다.

이 경우 디자인시스템 팀은 이런 것들을 촘촘히 채워서 많은 것들을 그들이 우리의 디자인시스템을 잘 사용할 수 있도록 서포트해 주는 역할을 하게 된다.

이 친구의 질문은 다음과 같다.(내가 상상해서 재구성해본 질문들이다)

사용자가 광고 페이지에 있을 때 오른쪽 상단에 '닫기' 버튼 그리고 '더 보기' 버튼 외에 광고에 직접적으로 도움 되는 '장바구니' 아이콘 버튼을 넣고 싶은데 우리가 갖고 있는 A, B 아이콘 버튼 중에 B스타일을 더해도 될까요?

이미지가 여러 장일 때 이를 알려주는 여러 개의 점들이 'Carousel'이 이미지 위에 올라가도록 하는데 최근에 추가된 '태그' 버튼이 이미지 속에 사용된 제품의 광고임을 보여줄 경우 이 '태그' 버튼 또한 이미지 위에 올라가요. '태그' 버튼이 안의 글자들 때문에 길어지면 두 개의 위치가 겹치는데 이럴 땐 어떻게 하나요?

세 번째로는,

이 디자이너 친구의 일의 효율성을 돕는 일도 신경 쓴다. 이 친구가 컴포넌트들을 시스템 내에서 Configuration 조정을 쉽게 할 수 있도록 컴포넌트를 잘 만들어놓기 위해 고민하는 것이다.

버튼을 넣기도 하고 빼기도 하고, 헤드라인+바디 텍스트를 모두 넣기도 하고 부분적으로 빼기도 하며 다양한 경우를 디자인된 Configuration 안에서 조정하는 걸 쉽게 하도록 하는 것이다. 이를 위해서는 사용하는 용어도 일관되고 모두가 이해하기 쉬운 용어와 구조를 사용하여 만드는 것도 중요하다.

예를 들어 어떤 컴포넌트는 Headline - on/off라고 했다가 또 다른 곳에서는 With Hedline - on/off라고 하면 일관성도 떨어져 이 디자이너 친구가 디자인시스템에 익숙해지기 어려울 것이다.

또한 컴포넌트를 쉽게 검색할 수 있도록 돕는 것도 중요하다. 컴포넌트의 이름이 직관적이지 않을 수도 있으며 카테고라이징이 헷갈리게 되어있을 수도 있기 때문이다.

그리고 네 번째는,

디자이너의 디자인이 디자인 시스템을 올바르게 썼는지 확인하는 작업을 돕는다. 법을 잘 준수했는지 확인하는 것과 비슷하다.

이 경우 피그마를 쓴다면 플러그인을 만들어서 데이터로 보여줄 수도 있고 여건이 안된다면 여러 번의 미팅을 통해 일일이 확인할 수도 있다. 물론 커스터마이징이 필요한 경우가 반드시 있기 마련이다. 이 경우에는 커스터마이징을 할 수 있도록 자유롭게 두되 이 경우가 잦아지면 나중에 디자인 시스템에서 서포트할 수 있도록 하면 디자인시스템 적용률이 높아져서 오히려 우리에게 좋다.

디자인 시스템의 디자이너로서 저 두 사용자를 염두에 두며 일을 하는 것에 대하여 적어보았다. 요즘에는 두 번째 사용자를 고려하는 시스템의 개선에 대하여 많이 고민하고 있다. 다음 장에서는 가이드라인에 대하여 적어볼 생각이다.