Check Design System

모든 크루들이 일관된 사내시스템 경험을 누릴 수 있도록 회사에 선제안하여 진행한 프로젝트입니다. 사내시스템에서 사용하는 UI 컴포넌트들을 모으고 표준 사용 패턴을 정의하여 개발자들이 기획자 없이도 사내시스템을 원활하게 제작할 수 있도록, 또한 이런 디자인 시스템으로 개발자-기획자-디자이너 사이의 커뮤니케이션 기준이 되길 기대하며 진행한 프로젝트였습니다.

문제의 발견

아직은 카카오가 스타트업 성향이 짙던 시절, 회사에 필요한 시스템들은 대부분 필요한 사람이 만들어서 쓰는 경우가 많았습니다. 장비대여 시스템, 회의실 예약 시스템, 콘도 예약 시스템 등 필요한 상황에 그때그때 만들어서 배정된 기획자 / 디자이너에 따라 각기 다른 디자인 Theme과 컴포넌트를 사용하고 있었습니다.

사실 목적달성만 된다면 문제가 없다고도 할 수 있겠으나, 정작 문제는 개발자는 준비되어 있지만 필요한 기획자나 디자이너가 없을경우 필요한 시스템이 적시에 공급되기 어려웠고 이것은 전체적으로 회사 운영에 차질을 빚는 경우가 있었습니다.

결국 개발자가 기획도 하고, bootstrap 같은 곳에서 UI를 가져와서 만들다보니 시간도 오래걸리고 사내 시스템 사용성도 그다지 높지 않았습니다. 그래서 기존 회사에서 표준 UI 가이드를 제작해 본 경험을 살려, 카카오 사내시스템의 표준을 만들자! 라는 포부를 가지고 프로젝트를 시작했습니다.

사내시스템 분석

가장 먼저 진행한 것은 각종 사내시스템을 유형화 하고, 그 안에서 사용되고 있는 UI의 종류와 사용 시나리오를 정리하는 일이었습니다. 각 시스템의 공통점 / 차이점을 분석하고 취할것과 버릴 것을 선별하였습니다. 특히 데이터의 CRUD Flow는 전체 시스템에서 동일하게 적용하게 만들었습니다. 테이블에서 row를 추가/삭제 하는 방법의 표준 프로세스를 제시했습니다.

디자인가이드 수립

디자인 가이드는 당시 화제였던 Atomic Design 개념을 차용했습니다. 시스템의 기본을 이루는 Foundation (폰트, 컬러, 아이콘 등) / Component (재사용이 가능한 UI들, Input, Button 등) / Template (목적을 달성할 수 있도록 구성된 컴포넌트들의 집합, 검색, 로그인 등)으로 나누어 개별 요소들을 정의하고 배포했습니다.

위에 정의된 UI들은 사내 위키와 사이트를 통해 배포되었고, 현재 카카오 사내시스템의 근간을 이루고 있습니다. 어떤 문제를 발견했을때 그냥 지나치치 않고 먼저 제안하여 과제화시킨, 저에게는 아주 의미있는 프로젝트였습니다.