[2022] 카카오워크 어드민 디자인시스템

kompass

 

서론

디자인모듈파트의 시작

카카오엔터프라이즈는 B2B 서비스를 제공하기 때문에 신규 사업이 생길 때마다 필연적으로 어드민이 같이 개발되어 고객사에게 전달이 되어야 한다. 각각의 서비스 자체의 모든 디자인을 시스템화 하기는 정말 어려운 일이었지만 어드민이라는 특수 환경은 어느정도 통일이 가능한 영역이었다. 비슷한 디자인을 각각의 디자이너, 개발자가 매번 새롭게 만드는 것도 리소스 낭비로 여겨질 즈음이었다.

 

2022년 5월에 정식으로 목적 조직인 '디자인모듈파트'로 발령이 되었고 파트장을 맡아 프로젝트를 이끌었다. 사실 내가 아니더라도 모두가 조직장이 될만한 훌륭한 팀원들 덕에 완성도 높은 작업을 진행할 수 있었다. 대부분의 회사에서는 디자인 시스템을 구축하는 것이 업무 외 적으로 시간이 되면 하는 일로 우선순위에서 뒤쳐지고 업무 성과로 인정 받기도 쉽지 않다. 그런데 이번 기회에 조직 발령까지 나서 업무로서 인정받으며 개발할 수 있었던 순간이라 뿌듯했다.

 

팀 빌딩

약 1년여 시간동안 디자이너 3명, 프론트엔드 개발자 3명, 마크업 개발자 1명. 총 7명이서 함께 만든 어드민 디자인 시스템이다.

 

 

본론

팀 빌딩부터 내가 맡아야 했기 때문에 놓치고 싶지 않은 실력자들만 포섭했다. 그래서 시작부터 참 든든했었다. 모두가 디자인시스템에 진심인 사람들이 만나 다양한 의견을 주고 받았다. 개발자가 디자인시스템에 관심을 갖는 경우가 많지는 않은데 모두가 기술적 능력도 뛰어나면서 섬세함을 갖고 있어 정말 배울 점이 많았다. 예를 들면, 개발상 어떤 어려움을 이야기 하면 밤을 새서라도 그 다음날이나 늦어도 그 주 안에는 해결책을 가지고 와주셨다. 누가 시켜서가 아니라 스스로 개척해 나가는 팀이었다.

 

파운데이션

디자인 시스템의 가장 기본이 되는 Colors, Typography, Icons 요소들을 따로 정리해서 안내했다. 컬러는 팔레트에서 바로 hex값을 복사할 수 있도록 되어있다. 아이콘은 Thin, Regular, Fill 타입을 선택하여 바로 SVG 다운로드 가능하다. 

 

 

코어 컴포넌트 26종

• 마크업 (HTML/CSS) 제공 완료 (내 담당)
• React 컴포넌트 작업중 
• Vue 컴포넌트 작업중
• Svelte 컴포넌트 작업중

Avatar, Badge, Banner, Breadcrumb, Button, ButtonGroup, Checkbox, Combobox, Date picker, Divider, Dropdown menu, File uploader, Help text, Input & Input field, Link, Radio button, Search, Segmented control, Select, Skeleton, Spinner, Switch, Tabs, Tag, Toast, Tooltip

 

공식 가이드

Astro로 제작한 kompass 사이트를 통해 공식 가이드 및 사용 방법을 확인할 수 있다.

 

 

결론

2023년 5월부터 회사의 위기가 공식화되면서 아쉽게 디자인 시스템은 실제 개발에 사용도 되어보지 못하고 막을 내리게 됐다. 느꼈던 점은 전사 표준 시스템을 만들겠다는 생각을 갖고 있으니 애자일하게 진행하기가 생각보다 어려웠고 컴포넌트의 확장성과 예외를 어디까지 인정할 것 인가가 항상 딜레마였다. 또한 컬러값을 디자인 토큰과 시맨틱 토큰으로 나누어 진행하는 것이 물론 큰 틀에서 보면 맞는 것인데 처음부터 이렇게 진행하는게 오히려 너무 많은 변수들을 관리하게 되는 것이 아닌가 하는 혼란스러움도 있었다. 

 

실제 프론트 개발 단에서까지의 효율성을 검증하기에는 역시나 시간이 부족했다. 하지만 이 시스템을 정비하면서 적어도 마크업개발파트 내 개발자들 끼리는 같은 디자인을 여러벌로 마크업 하지 않도록 했다. 이미 구현되어 있는 HTML/CSS로 코어 컴포넌트를 채워놓고 나머지를 작업하니 업무 효율에는 분명히 영향이 있었다.

 

단순히 서비스가 접히는 수준이 아니라 회사가 정리되는 상황에서 카엔에서 했던 업무들을 제대로 기록으로 남기지 못한게 아쉬움으로 남는다. 그리고 다시 만날 수 있을까 싶은 팀원들에게도 늦었지만 고맙다는 말을 전하고 싶다...

Thanks to.
   "tony.chan",
    "damien.song",
    "teo.yu",
    "dana.kwon",
    "joseph.g",
    "silver.l"