신규 서비스 디자인 시스템 구축하기
안녕하세요. 엔젤투자 플랫폼을 만들고 있는 NU Angels 팀의 프로덕트 디자이너 웨버와 리버입니다.
2022년 11월에 NU Angels에 합류하면서 디자인 시스템을 초기부터 새롭게 구축하며 배운점이 많았는데요, 이러한 경험을 글로 남김으로써 스스로 회고하고, 의미있는 인사이트들을 공유하고자 적게 되었습니다.
디자인 시스템 구축 전의 상황은?
NU Angels 디자인 시스템을 구축하게 된 이유는 제가 엔젤 팀에 합류했을 때 디자인 페이지마다 컴포넌트의 형태나 색상이 조금씩 달랐고, 디자인과 개발에서 같은 컴포넌트를 다르게 부르고 있어 커뮤니케이션 오류가 나는 등의 문제들이 발생했습니다.
이런 상황이 지속되면서 디자이너 간에도 미묘한 작업 차이가 생기고 개발자와 디자이너 간의 불필요한 사후 커뮤니케이션이 더 많이 생긴다는 걸 발견했습니다. 더 이상 이런 일이 발생하지 않고, 효율적으로 디자인을 하기 위해 합류하고 얼마 지나지 않아 바로 디자인 시스템을 구축했습니다!
그렇게 디자인 시스템 구축과 함께한 서비스 출시 1년 후… NU Angels는 초기부터 여러 방향으로 실험하며 서비스를 만들다 보니 현재 디자인 시스템에는 서비스에서 사용되지 않는 불필요한 자산이 꽤 쌓여있었습니다. 그래서 불필요함을 덜어내고 완성도를 높여서 개발과 디자인 간의 효율성을 가져오고자 디자인 시스템 개편을 진행했습니다. 많은 스타트업이 그렇듯 우선순위가 높은 스프린트와 병행하기 위해 업무 외 작업으로 준비하기로 했습니다.
다행히도 NU Angels의 프론트엔드 개발자분도 디자인 시스템의 중요성을 잘 알고 계셨기 때문에 수월하게 진행할 수 있었습니다!
NU Angels 디자인 시스템을 구축 및 개선까지 진행해 보면서 많은 점을 배울 수 있었는데요, 그 과정에서 얻은 인사이트와 구축 후 어떤 이점이 있었는지 얘기해 볼게요 😀
디자인 시스템 구축 시작!
디자인 시스템을 본격적으로 구축하기에 앞서 디자이너와 개발자의 공통된 명칭 정리와 뚜렷한 목표가 필요하다고 생각하여 노션에 NU Angels 디자인 시스템 위키를 만들어 공유해 드렸습니다. 내용은 아래와 같습니다.
🚩 NADS 목표
- UX 가이드 구축을 통해 다양한 이해관계자 설득하기
- 디자인-개발 간의 불필요한 커뮤니케이션 비용 줄이기
- 기획-개발-디자인 이해관계에서 발생하는 혼란 방지
- 사용자에게 일관성 있는 디자인 제공
- 고도화된 디자인시스템을 활용하여 빠르게 앱 서비스 출시하기
📚 NADS 과제
- 파편화되어 있는 컴포넌트를 신규 디자인 시스템으로 일괄 교체
- 토큰을 활용하여 디자인-개발 자동화 시스템 구축
- NU Angels 브랜드 컬러 시스템 새롭게 구축
- 컴포넌트 네이밍 룰 구축- 디자이너와 개발에서 다르게 사용하고 있는 컴포넌트 이름 선제적 파악 필요
- 컴포넌트 가이드 구축
Foundation
a. Color
먼저 컬러 시스템에 대해 얘기해 볼게요. 기존에 NU Angels의 브랜드 컬러는 쨍한 청록색의 Shine Blue를 사용하고 있었습니다. 하지만 해당 컬러를 Primary 컬러로 사용하기에는 흰색과의 대비가 약해 버튼과 같은 컴포넌트에서 가독성이 떨어지는 문제가 있었습니다. 그래서 저희는 웹접근성 최소 기준(AA Level)을 준수하기 위해 전경색과 배경색(Primary 컬러)의 명도 대비가 3:1 이상이 될 수 있도록 변경했습니다.
참고로 제가 컬러 명도 대비 체크를 할 때 사용한 툴은 Colour Contrast Analyser (CCA)입니다!
또한 컬러 사용의 확장성을 고려하여 Gray Color의 단계를 세세하게 나누었고, Rainbow Color Palette를 새롭게 정의했습니다.
컬러 시스템은 제로헤이트에 가이드로 정리를 해놓아 브랜드 컬러, 로고, 아이콘 등 리소스 센터로 활용하고 있습니다. 저는 그래픽 디자이너, 기획자, 마케터와 소통할 때 굉장히 편리했는데요, CRM, 안내 메일, 콘텐츠 제작 등 다양한 곳에 브랜드 컬러가 사용되다 보니 컬러 코드를 저에게 물어보시는 일이 종종 있었습니다. 그래서 컬러 시스템을 제로헤이트에 업로드하여 NU Angels의 브랜드 컬러를 포함한 모든 컬러 팔레트를 웹에서 손쉽게 확인하고 복사할 수 있도록 했습니다.
b. Typography
현재 NADS의 타이포그래피는 서비스에 사용될 법한 모든 케이스를 포함하고 있어서 디자인을 할 때 어떤 폰트를 사용해야 할지 어려운 상태였습니다. 서비스의 대한 맥락이 없어도 새로운 디자이너가 왔을 때 어떤 타이포를 사용해야할 지 예측이 가능하도록 단순하고 직관적으로 개선했습니다.
우선 서비스에 사용되고 있는 모든 타이포그래피를 나열했습니다. 디자인시스템에는 있지만 사용되지 않는 타이포도 많았고 비슷한 UI인데도 다르게 사용하고 있는 타이포도 많았습니다. 반응형 웹 프로덕트를 디자인 하다보면 브레이크 포인트가 바뀔 때 타이포 사용의 기준이 모호할 때가 종종 있을 텐데요. 이 부분도 시스템을 구축해서 해결하고자 했습니다. 디자인시스템과 비교하며 비슷한 케이스를 묶고 Heading, SubTitle, Body, Detail 사용처 기준으로 재구성했습니다.
프로덕트 특성상 상세 설명이 많고 연령대를 고려한 가독성이 좋은 Font Size가 요구됐습니다. Body의 경우에는 16과 14는 컴포넌트에 들어가는 UI, 18과 15는 딜 상세 설명 등 본문에 사용하는 규칙을 만들어서 구분합니다.
모바일 기반의 반응형 디자인을 지향하며 테블릿은 모바일에 종속되도록 하였으며, Heading은 PC와 Mobile에서 느껴지는 차이를 고려하여 시스템에 적용하여 일관된 경험을 할 수 있도록 구성했습니다.
Component
a. Component guide
NU Angels 디자인 시스템은 컴포넌트를 제작할 때 가이드를 같이 작성하면서 구축하고 있습니다. 피그마의 Configration 기능을 사용하여 디자이너가 가이드를 피그마에서 바로바로 확인하면서 디자인할 수 있도록 돕고, 구체적인 컴포넌트 가이드는 Zeroheight에 문서화하여 개발자, 기획자 등 모든 이해관계자가 컴포넌트 가이드와 히스토리를 확인할 수 있도록 했습니다.
제로헤이트에서는 스토리북과 연동시켜 모든 팀원이 컴포넌트 데모를 손쉽게 확인해 볼 수 있습니다. 이는 디자이너를 포함한 모든 이해관계자가 컴포넌트에 대한 이해도를 높일 수 있도록 도와주기 위한 목적으로 제작했습니다.
제로헤이트에서 데모 외에도 시각적 계층 구조와 활용도 그리고 레이블 작성법 등의 가이드를 확인해 볼 수 있습니다. 이 중 시각적 계층 구조의 구축 과정에 대해서만 간략하게 이야기해 보겠습니다. 시각적 계층 구조는 사용자의 액션 수행에 도움을 줌과 동시에 오류의 가능성을 줄이고, 각각의 버튼들이 어떤 시각적 계층을 가지는지에 대한 가이드를 이해관계자들에게 공유하여 커뮤니케이션 비용을 낮추기 위한 목적으로 작성했으며 컴포넌트 가이드를 구축하는 데 가장 중요한 요소라고 생각합니다.
NU Angels는 기능이 고도화됨에 따라 컴포넌트가 늘어나면서 화면의 복잡도도 높아졌습니다. 그 때문에 유저의 자연스러운 시각 흐름을 위해 화면에서 컴포넌트 및 버튼을 정리해야 할 필요가 있었지만, 버튼에 대한 명확한 활용법이 잡혀있지 않아 위계를 설정하는 데 어려움을 겪었습니다.😂
그래서 버튼마다 쓰임새와 중요도를 명확하게 명시하여 구조를 잡았고, 실제로 화면을 그릴 때 위의 피라미드를 근거로 설득의 과정을 부드럽게 만들 수 있었습니다.
이 외에도 활용법, 레이블 작성 가이드 등을 잡으며 최대한 디자이너가 불필요하게 소통하고 고민하는 시간을 단축하고 더 효율적인 방향에 시간을 쓸 수 있도록 도왔습니다.
b. Contents guide
라이팅 가이드 구축은 에러 메시지 정리로부터 시작되었습니다… 물론 라이팅 가이드가 서비스를 운영하는 데 필요하고 중요하다는 걸 알고 있지만, 스프린트를 진행하면서 동시에 가이드를 구축하는 건 꽤나 부담스러운 일이었습니다. 그러다 에러 메시지를 점검하던 중 어투, 단어, 맞춤법 등 메시지마다 다 다르게 쓰이고 있는 문제를 발견했습니다. 이렇게 다르게 메시지를 노출하게 되면 서비스의 일관성이 깨지고, 디자이너 혹은 기획자가 메시지를 작성할 때 불필요한 고민의 시간이 더 길어질 수 있습니다.(QA 할 때도 내부에 혼란을 줄 수 있다는 걸 몸소 겪었습니다.🥲💧) 이대로 두면 문제가 눈덩이처럼 불어날 것 같아 지금이라도 빠르게 개선하자고 팀원들과 일정을 논의했고, 바로 라이팅 가이드를 구축하기 시작했습니다.
그래서 저희는 NU Angels 유저 페르소나를 참고하여 친절한, 이해하기 쉬운, 전문적인 이라는 3가지 보이스톤과 원칙을 세웠습니다. 원칙에 대한 자세한 내용은 아래와 같습니다.
- 친절하게
엔젤투자는 비교적 일반인들이 접하기 어려운 투자입니다. 그래서 엔젤투자는 어렵다는 인식이 많은데, NU Angels는 친절하게 사용자를 이끌어줘 심리적 허들을 낮춥니다. - 이해하기 쉽게 그리고 간결하게
투자 플랫폼이기 때문에 비교적 전문적이고 어려운 단어들이 서비스에서 많이 쓰이고 있는데, 이를 최대한 쉽게 설명해 주기 위해 직관적이고 간결한 표현을 지향합니다. - 신뢰할 수 있게
투자 플랫폼 특성상 가장 중요한 가치는 신뢰입니다. 올바른 맞춤법 그리고 일관성 있는 표현과 같이 작은 부분도 유저에게 신뢰감 있는 목소리로 다가가고자 했습니다.
라이팅 가이드를 구축하고 난 뒤에는 화면마다 다르게 쓰여 각 이해관계자끼리 혼란을 야기하던 게 사라졌고, 문구 작성을 위해 다른 시안을 찾아보던 시간을 줄일 수 있어 업무의 효율을 높일 수 있었습니다.
마치며
디자인 시스템을 구축하며 일단 반복적인 작업을 없앴다는 것 자체도 좋았지만, 더욱 좋은 점은 디자이너가 문제를 풀기 위해 깊이 생각할 수 있는 환경을 만들었다는 점입니다. 디자인 시스템 구축 작업은 단순히 업무 효율을 높이는 걸 넘어 디자인이 비즈니스에 어떤 영향을 줄 수 있는지, 실제 기능하는 숫자와 매출은 어떻게 돌아가는지 생각해 볼 시간을 만들어 주기 때문에 꼭 필요한 작업이라고 생각됩니다.
NU Angels의 디자인 시스템은 지금도 계속해서 고도화 시키는 중입니다. 앞으로도 디자이너가 더 중요한 문제에 집중하고 고민할 수 있는 환경을 만들기 위해 지금까지 구축해 온 걸 잘 유지보수하면서 발전시키고자 합니다.😄
