QuotaBook Design System
Period
2023. 04 – 2023. 10
Period
2023. 04 – 2023. 10
Role
Platform Designer
Role
Platform Designer
Deliverables
UI Design
Deliverables
UI Design
Contribution
Project Managing 60%, UI Design 90% (1 Product Designer, 1 Frontend Engineer)
Contribution
Project Managing 60%, UI Design 90% (1 Product Designer, 1 Frontend Engineer)
로드맵 설계 및 프로젝트 매니징은 Product Designer Lead의 도움을 받아 진행했습니다.
문제
문제
QuotaBook은 서비스 구현을 위해 Ant Design 라이브러리를 사용하고, 이를 기반으로 피그마에 컴포넌트를 만들어 소통하고 있었습니다. 그러나 정작 라이브러리 사용으로 인해 디자이너 및 엔지니어의 리소스가 불필요하게 소모되었고, 각 챕터의 작업자들이 문제의식을 가지고 첫 논의를 시작하게 되었습니다.
QuotaBook은 서비스 구현을 위해 Ant Design 라이브러리를 사용하고, 이를 기반으로 피그마에 컴포넌트를 만들어 소통하고 있었습니다. 그러나 정작 라이브러리 사용으로 인해 디자이너 및 엔지니어의 리소스가 불필요하게 소모되었고, 각 챕터의 작업자들이 문제의식을 가지고 첫 논의를 시작하게 되었습니다.
QuotaBook UI (As-is)
QuotaBook UI (As-is)
Ant Design 사용으로 인한 비효율
Ant Design 사용으로 인한 비효율
Ant Design은 비즈니스의 성능에 영향을 끼칠 정도로 무거운 라이브러리임에도 불구하고, 많은 제약 조건과 한계가 존재하여 디자이너의 요구사항을 반영하기 어려웠습니다. 요구사항을 반영하기 위해 라이브러리를 최신 버전으로 업데이트해야하는 경우도 존재했으나, 업데이트 시 하위호환성을 전혀 고려하지 않기 때문에 기존 레이아웃이 유지될 것이라는 보장이 없어 결국 업데이트를 할 때마다 모든 페이지를 검수해야 하는 문제가 있었습니다.
Ant Design은 비즈니스의 성능에 영향을 끼칠 정도로 무거운 라이브러리임에도 불구하고, 많은 제약 조건과 한계가 존재하여 디자이너의 요구사항을 반영하기 어려웠습니다. 요구사항을 반영하기 위해 라이브러리를 최신 버전으로 업데이트해야하는 경우도 존재했으나, 업데이트 시 하위호환성을 전혀 고려하지 않기 때문에 기존 레이아웃이 유지될 것이라는 보장이 없어 결국 업데이트를 할 때마다 모든 페이지를 검수해야 하는 문제가 있었습니다.
컴포넌트의 파편화
컴포넌트의 파편화
신규 컴포넌트 생성 및 개선에 대한 전파 부재와 여유롭지 못한 구현 일정으로 인해, 각 서비스별로 서로 다른 컴포넌트가 재생산되는 경우가 빈번했습니다. 이로 인해 같은 기능과 형태를 가졌지만 파편화된 컴포넌트를 각각 유지보수해야하는 비효율이 존재했습니다.
신규 컴포넌트 생성 및 개선에 대한 전파 부재와 여유롭지 못한 구현 일정으로 인해, 각 서비스별로 서로 다른 컴포넌트가 재생산되는 경우가 빈번했습니다. 이로 인해 같은 기능과 형태를 가졌지만 파편화된 컴포넌트를 각각 유지보수해야하는 비효율이 존재했습니다.
다양한 UI 패턴의 혼재
다양한 UI 패턴의 혼재
QuotaBook 서비스 안에 Ant Design을 그대로 사용하는 UI 패턴, Ant Design을 요구사항에 맞추어 개조한 UI 패턴, 새롭게 만들어진 컴포넌트를 바탕으로 만들어진 UI 패턴 등이 혼재하여 각 도메인 서비스에서 UX/UI가 통일되지 않은 문제가 있었습니다.
QuotaBook 서비스 안에 Ant Design을 그대로 사용하는 UI 패턴, Ant Design을 요구사항에 맞추어 개조한 UI 패턴, 새롭게 만들어진 컴포넌트를 바탕으로 만들어진 UI 패턴 등이 혼재하여 각 도메인 서비스에서 UX/UI가 통일되지 않은 문제가 있었습니다.
제품 고도화를 고려하지 않은 디자인 토큰
제품 고도화를 고려하지 않은 디자인 토큰
추후 사용자를 위한 Dark Mode 제공 또는 Notion, Slack과 같이 B2B SaaS의 컬러 테마 기능 등을 고려하고 있었으나, 기존에 QuotaBook이 사용하는 컬러 칩은 이를 전혀 고려하고 있지 않은 상태였으며 Space, Radius, Shadow 등의 파운데이션이 토큰화되지 않아 UI의 파편화가 지속적으로 발생했습니다.
추후 사용자를 위한 Dark Mode 제공 또는 Notion, Slack과 같이 B2B SaaS의 컬러 테마 기능 등을 고려하고 있었으나, 기존에 QuotaBook이 사용하는 컬러 칩은 이를 전혀 고려하고 있지 않은 상태였으며 Space, Radius, Shadow 등의 파운데이션이 토큰화되지 않아 UI의 파편화가 지속적으로 발생했습니다.
방향성 및 목표 설정
방향성 및 목표 설정
일관된 디자인 언어의 부재로 인해 발생하는 비효율을 최소화하면서, QuotaLab 비즈니스 로드맵에 맞추어 개선될 QuotaBook 제품의 구조에 맞게 확장성과 유연성을 가진 새로운 디자인 언어가 필요하다는 결론을 내렸습니다. 시스템을 만들고 지속적으로 관리하는 팀을 결성하고, 디자인 시스템의 방향성과 목표를 설정했습니다.
일관된 디자인 언어의 부재로 인해 발생하는 비효율을 최소화하면서, QuotaLab 비즈니스 로드맵에 맞추어 개선될 QuotaBook 제품의 구조에 맞게 확장성과 유연성을 가진 새로운 디자인 언어가 필요하다는 결론을 내렸습니다. 시스템을 만들고 지속적으로 관리하는 팀을 결성하고, 디자인 시스템의 방향성과 목표를 설정했습니다.
유연하게 설계하자
유연하게 설계하자
QuotaBook의 사용자 유형과 기능이 다양한 만큼, 사용자의 요구사항이 천차만별이기 때문에 다양한 상황과 문제에 대응할 수 있는 유연한 시스템이 필요하다고 판단했습니다. 컴포넌트 단계에서는 시각적으로나 기능적으로 유연함을 제공하고, 컴포넌트를 조합한 UI 패턴의 단계에서 일관성을 제공하기로 결정했습니다.
QuotaBook의 사용자 유형과 기능이 다양한 만큼, 사용자의 요구사항이 천차만별이기 때문에 다양한 상황과 문제에 대응할 수 있는 유연한 시스템이 필요하다고 판단했습니다. 컴포넌트 단계에서는 시각적으로나 기능적으로 유연함을 제공하고, 컴포넌트를 조합한 UI 패턴의 단계에서 일관성을 제공하기로 결정했습니다.
서비스 맥락의 개입을 최소화하자
서비스 맥락의 개입을 최소화하자
디자인 시스템에 도메인 서비스 맥락이 개입하게 되면, 시스템의 목적이 흐려지고 유지 및 보수를 위한 이력 관리가 어려워질 것이라 생각했습니다. 도메인 개입을 최소한으로 하여 시스템의 목적을 명확히 하기로 결정했습니다.
디자인 시스템에 도메인 서비스 맥락이 개입하게 되면, 시스템의 목적이 흐려지고 유지 및 보수를 위한 이력 관리가 어려워질 것이라 생각했습니다. 도메인 개입을 최소한으로 하여 시스템의 목적을 명확히 하기로 결정했습니다.
비효율의 재생산을 지양하자
비효율의 재생산을 지양하자
새로운 시스템을 만들기 위해 충분한 생산성을 확보해야하는 만큼, 시스템을 만들기 위한 또 다른 비효율을 만드는 일은 없어야 했습니다. 디자이너는 컴포넌트의 목적과 형태를 명확히 하여 리뷰하고, 모든 작업자는 시스템 개선을 위한 미팅의 아젠다를 명확히 공유하기로 하였습니다.
새로운 시스템을 만들기 위해 충분한 생산성을 확보해야하는 만큼, 시스템을 만들기 위한 또 다른 비효율을 만드는 일은 없어야 했습니다. 디자이너는 컴포넌트의 목적과 형태를 명확히 하여 리뷰하고, 모든 작업자는 시스템 개선을 위한 미팅의 아젠다를 명확히 공유하기로 하였습니다.
1개월 내에 Primitive를 완성하자
1개월 내에 Primitive를 완성하자
디자인 시스템 논의를 시작한 2023년 4월, QuotaLab은 신규 기능 개발로 바쁘게 움직이는 상황이었습니다. 효율성 증대를 위한 작업이 늘어져 제품 가치 향상에 지장을 주는 것은 본말전도이기에, 가능한 1개월 내에 기본이 되는 컴포넌트들의 구현을 마치고 그 후 서비스 디자인을 하며 UI 패턴을 정립해가자는 로드맵을 세웠습니다.
디자인 시스템 논의를 시작한 2023년 4월, QuotaLab은 신규 기능 개발로 바쁘게 움직이는 상황이었습니다. 효율성 증대를 위한 작업이 늘어져 제품 가치 향상에 지장을 주는 것은 본말전도이기에, 가능한 1개월 내에 기본이 되는 컴포넌트들의 구현을 마치고 그 후 서비스 디자인을 하며 UI 패턴을 정립해가자는 로드맵을 세웠습니다.
사례
사례
Foundations
Foundations
제품의 고도화를 고려하여, 토큰의 레벨을 스케일 토큰과 시맨틱 토큰으로 구분했습니다. 색명암 또는 사이즈, 비율 등을 기준으로 단계를 가진 스케일 토큰과 각 사용처에 맞게 지정된 시맨틱 토큰을 이용하여 컴포넌트를 제작하고, 추후 다크 모드 및 컬러 테마에 유연하게 대응할 수 있도록 작업하였습니다.
제품의 고도화를 고려하여, 토큰의 레벨을 스케일 토큰과 시맨틱 토큰으로 구분했습니다. 색명암 또는 사이즈, 비율 등을 기준으로 단계를 가진 스케일 토큰과 각 사용처에 맞게 지정된 시맨틱 토큰을 이용하여 컴포넌트를 제작하고, 추후 다크 모드 및 컬러 테마에 유연하게 대응할 수 있도록 작업하였습니다.
컬러나 텍스트 스타일 뿐만 아니라 컴포넌트 내부 Padding, 요소 간의 Gap 등에 활용할 수 있는 Space와 Popover, Card, Modal 등에 활용하는 Shadow, Radius를 토큰화하여 기본적인 기초적인 요소의 파편화를 방지하였습니다.
컬러나 텍스트 스타일 뿐만 아니라 컴포넌트 내부 Padding, 요소 간의 Gap 등에 활용할 수 있는 Space와 Popover, Card, Modal 등에 활용하는 Shadow, Radius를 토큰화하여 기본적인 기초적인 요소의 파편화를 방지하였습니다.
토큰에 대한 정의 (Space, Shadow, Radius)
토큰에 대한 정의 (Space, Shadow, Radius)
Primitive Components
Primitive Components
앞에서 정의한 Foundation을 이용한 컴포넌트 작업을 진행했습니다. 유연한 설계라는 방향성에 맞추어, 부모 요소가 되는 컴포넌트 내부에 시각적으로 표현되는 Icon, Badge, Chip 등의 자식 요소를 자유롭게 배치할 수 있도록 React Children을 활용하였으며, 이를 디자이너가 피그마에서 동일한 형태로 대응할 수 있도록 Slot 컴포넌트를 만들어 LeftSlot, RightSlot 등으로 이용하였습니다.
앞에서 정의한 Foundation을 이용한 컴포넌트 작업을 진행했습니다. 유연한 설계라는 방향성에 맞추어, 부모 요소가 되는 컴포넌트 내부에 시각적으로 표현되는 Icon, Badge, Chip 등의 자식 요소를 자유롭게 배치할 수 있도록 React Children을 활용하였으며, 이를 디자이너가 피그마에서 동일한 형태로 대응할 수 있도록 Slot 컴포넌트를 만들어 LeftSlot, RightSlot 등으로 이용하였습니다.
디자이너의 형태적 요구사항과 사용자의 인터랙션에 모두 대응
디자이너의 형태적 요구사항과 사용자의 인터랙션에 모두 대응
QuotaBook에 최근 1년간 접속한 사용자의 PC 해상도 통계를 통해, Width 1280이 가장 최소 사이즈라는 것을 확인했고 이에 대응할 수 있도록 각 컴포넌트의 Overflow 케이스를 함께 정의하였습니다.
QuotaBook에 최근 1년간 접속한 사용자의 PC 해상도 통계를 통해, Width 1280이 가장 최소 사이즈라는 것을 확인했고 이에 대응할 수 있도록 각 컴포넌트의 Overflow 케이스를 함께 정의하였습니다.
Tab의 구조도 및 Overflow 예시
Tab의 구조도 및 Overflow 예시
기초적인 Button, Badge, Chip, TextField, Switch 등으로 시작하여 각 아이템들을 묶어 제작하는 PageHeader, Dialog, DropdownMenu 등의 조합형 컴포넌트까지 제작을 완료하고 QuotaBook 서비스 마이그레이션도 함께 진행했습니다.
기초적인 Button, Badge, Chip, TextField, Switch 등으로 시작하여 각 아이템들을 묶어 제작하는 PageHeader, Dialog, DropdownMenu 등의 조합형 컴포넌트까지 제작을 완료하고 QuotaBook 서비스 마이그레이션도 함께 진행했습니다.
결과
결과
사용자의 정성적 피드백
사용자의 정성적 피드백
컴포넌트 단위로 QuotaBook의 형태가 점진적으로 변화하면서, 세일즈 팀을 통한 사용자의 정성적 피드백을 확인할 수 있었습니다. 기능적으로 개선이 된 부분이 없음에도 불구하고 사용자가 로그인했을 때 보이는 대시보드 및 내비게이션 화면이 변화한 것 만으로도 사용자들의 호의적 피드백이 발생하는 것을 보며, 형태적으로 유려한 것 또한 제품 이미지에 큰 영향을 준다는 것을 느낄 수 있었습니다.
컴포넌트 단위로 QuotaBook의 형태가 점진적으로 변화하면서, 세일즈 팀을 통한 사용자의 정성적 피드백을 확인할 수 있었습니다. 기능적으로 개선이 된 부분이 없음에도 불구하고 사용자가 로그인했을 때 보이는 대시보드 및 내비게이션 화면이 변화한 것 만으로도 사용자들의 호의적 피드백이 발생하는 것을 보며, 형태적으로 유려한 것 또한 제품 이미지에 큰 영향을 준다는 것을 느낄 수 있었습니다.
새로운 QuotaBook UI
새로운 QuotaBook UI
문제의식에 대한 공감과 내부 피드백
문제의식에 대한 공감과 내부 피드백
디자이너와 엔지니어는 디자인 시스템의 부재로 인한 문제를 충분히 공감하고 있었지만, 내부 다른 직군의 공감을 끌어낼 수 있을까, 시스템이 의미를 가질 수 있을까 하는 우려도 많았습니다. 디자인 시스템 설계와 동시에 작업자의 생산성에 지장이 없도록 내부에서 소소한 캠페인을 병행하여, 고민의 시간에서 오는 비효율을 최소화하고자 노력했습니다.
디자이너와 엔지니어는 디자인 시스템의 부재로 인한 문제를 충분히 공감하고 있었지만, 내부 다른 직군의 공감을 끌어낼 수 있을까, 시스템이 의미를 가질 수 있을까 하는 우려도 많았습니다. 디자인 시스템 설계와 동시에 작업자의 생산성에 지장이 없도록 내부에서 소소한 캠페인을 병행하여, 고민의 시간에서 오는 비효율을 최소화하고자 노력했습니다.
내부 전파를 위한 디자인 시스템 챕터의 캠페인
내부 전파를 위한 디자인 시스템 챕터의 캠페인
그동안 가이드라인 없이 파편화된 컴포넌트들의 히스토리를 일일히 파악하며 구현하던 환경에서, 피그마에 작업된 프로퍼티와 일원화된 스토리북을 기준으로 구현하기 때문에 커뮤니케이션 및 컨텍스트 파악에 소모되는 리소스를 최소화했다는 피드백을 들을 수 있었고 실제로 작업자의 스토리 포인트를 줄이며 팀의 생산성을 높이는 성과를 낼 수 있었습니다.
그동안 가이드라인 없이 파편화된 컴포넌트들의 히스토리를 일일히 파악하며 구현하던 환경에서, 피그마에 작업된 프로퍼티와 일원화된 스토리북을 기준으로 구현하기 때문에 커뮤니케이션 및 컨텍스트 파악에 소모되는 리소스를 최소화했다는 피드백을 들을 수 있었고 실제로 작업자의 스토리 포인트를 줄이며 팀의 생산성을 높이는 성과를 낼 수 있었습니다.
피그마와 일원화된 스토리북
피그마와 일원화된 스토리북
디자인 시스템의 필요성에 대해 전사적으로 공감대를 형성하고, 시스템 구현을 통해 전보다 향상된 생산성을 확인할 수 있어 뿌듯한 작업이었습니다.
디자인 시스템의 필요성에 대해 전사적으로 공감대를 형성하고, 시스템 구현을 통해 전보다 향상된 생산성을 확인할 수 있어 뿌듯한 작업이었습니다.
가이드라인 정의에 대한 백로그
가이드라인 정의에 대한 백로그
피그마와 코드를 일원화하는 스토리북이 있음에도 불구하고, 컴포넌트의 세부적인 인터랙션이나 Do, Don’t 등이 명시적으로 문서화되지 않은 상태다보니 부수적인 커뮤니케이션이 발생할 수 밖에 없었습니다. 가이드라인을 문서화하여 정리하는 것을 백로그로 추가하고, 시스템 가이드라인을 공개하여 채용에 기여할 수 있도록 하자는 다음 로드맵을 설정할 수 있었습니다.
피그마와 코드를 일원화하는 스토리북이 있음에도 불구하고, 컴포넌트의 세부적인 인터랙션이나 Do, Don’t 등이 명시적으로 문서화되지 않은 상태다보니 부수적인 커뮤니케이션이 발생할 수 밖에 없었습니다. 가이드라인을 문서화하여 정리하는 것을 백로그로 추가하고, 시스템 가이드라인을 공개하여 채용에 기여할 수 있도록 하자는 다음 로드맵을 설정할 수 있었습니다.
진행 중인 디자인 시스템 브랜딩 및 가이드라인 문서
진행 중인 디자인 시스템 브랜딩 및 가이드라인 문서
Contents
Contents
Contents
Contents
Contents
Contents