KCD 디자인 시스템 도입기 — “북극성을 찾아서”

안녕하세요. 한국신용데이터(KCD) 프로덕트 디자이너 Todd(송준협)입니다.

KCD에 디자인 시스템을 도입하게 된 과정에 대해 설명해드리겠습니다.

시스템과 이에 앞서 제가 속한 ‘프로덕트 디자인팀’에 대해서 먼저 설명해 드리겠습니다. 프로덕트 디자인팀은 KCD가 서비스하는 다양한 프로덕트의 ‘경험’을 디자인합니다. 가장 오래된 프로덕트인 캐시노트 카카오톡 챗봇 서비스부터 시작해, 캐시노트 스마트폰 앱, 웹 서비스, 포스(POS, Point Of Sales, 판매단말기) 등 여러 디지털 프로덕트를 통해 캐시노트의 사용자인 사장님들과 만나고 있습니다. KCD의 비즈니스는 “데이터를 바탕으로 사장님들이 사업을 꾸려나가는 동안 맞이하는 모든 순간에 도움을 드리자”는 것인데요. 저희 팀은 프로덕트 디자인을 통해 사장님들에게 최상의 경험을 드리고, 이러한 문제를 해결하고자 하고 있습니다.

KCD의 프로덕트 디자인팀은 총원 4명(2021년 6월말)으로 구성돼 있습니다. 모두 입사한지 반년 남짓 밖에 지나지 않은 ‘새내기’ 팀이라고 할 수 있는데요. 입사 직후 비즈니스가 빠르게 성장하고 확장되는 과정에서 합류하게 된 상황이었습니다.

비즈니스와 제품이 빠르게 성장하는 순간은 구성원들에게 뿌듯한 희열을 안겨줍니다. 하지만 그 뒤에는 항상 문제가 있기 마련인데요. KCD의 제품군 역시 비슷한 문제를 맞이하고 있었습니다. 저희 팀은 이러한 문제를 해결하기 위해 디자인 시스템을 도입하기로 했습니다.

디자인 시스템 도입을 결정하면서 목표로 한 원칙은 다음과 같습니다.

  1. 기존 제품 경험을 유지하자.
  2. 모든 제품군에서 일관된 디자인 언어를 사용하자.
  3. 디자인 요소 재사용을 통해 서비스 개발을 효율적으로 만들자.

이에 따라 디자인 시스템의 적용 대상이 될 프로덕트를 리스트업해봤습니다.

  1. 앱(iOS, 안드로이드)
  2. 앱 내 웹 환경
  3. 포스(POS)
  4. 웹사이트(캐시노트 웹)

당연히 프로덕트 디자인팀과 협업하는 대상도 웹, iOS, 안드로이드 엔지니어 등 다수입니다. 이러한 대상자들이 모두 활용할 수 있는 공통 요소로서의 디자인 시스템의 토대를 만드는 것을 첫번째 마일스톤으로 삼고 여정을 시작했습니다.

“모든 과정이 매끄럽게 해결됐다.”라고 말씀드리고 싶지만, 이 과정이 전부 순탄하지는 않았어요. 당장 쳐내야 할 일이 있는데, 그걸 멈추고 시스템을 만드는 것이니까요. 다행히 디자인 시스템의 필요성 그 자체에 대한 공감대는 구성원 모두에게 형성돼 있었기 때문에 어려운 설득 과정 없이 진행할 수 있었습니다.

1. 디자인 시스템 접근 방식 — 사용자 경험의 일관성을 우선하자.

과거 KCD에도 디자인 시스템을 도입하려는 시도가 있었습니다. 슬랙 등을 통해 남아있는 흔적을 찾아보자, 이번 버전의 디자인 시스템에 앞서 여러분들이 디자인 시스템 도입을 시도했던 과거가 남아있었어요. 불과 몇 개월 전에는 파트너 디자이너께서 마련해놓은 디자인 시스템의 기초가 있었고, 그보다 앞선 과거에도 디자인 시스템 도입을 준비했던 흔적을 찾아볼 수 있었습니다. 저희는 이처럼 앞선 이들이 남겨놓은 토대 중에 현재와 흐름이 맞는 요소는 살리고, 부족한 부분은 새로이 만드는 방식으로 작업을 진행하기로 했습니다. 이분들의 작업은 캐시노트의 프로덕트 속에 남아서 자연스럽게 현재의 프로덕트 디자인팀에게까지 연결될 수 있었어요. 저희가 작업한 디자인 시스템에도 이분들의 터치를 여러 곳에 찾아볼 수 있습니다.

가장 대표적인 요소는 민트색(#00B1BB 과 #00CCCC)으로 대표되는 컬러 팔레트와 카드 UI입니다. 저희는 기존의 디자인 언어와 단절된 새로운 디자인을 도입하기 보다 기존 프로덕트에서 사용되는 패턴을 찾아내고, 이를 컴포넌트로 정의하는 것에서 출발했습니다. 이는 전면적이고 파괴적인 방식의 디자인 혁신에 비해 진행 속도가 느릴 수도 있습니다. 하지만 꼭 필요한 것부터 하나씩 하나씩 차례로 도입해가며, 사용자가 기존 경험과의 변화에서 겪을 충격을 완화하고자 했습니다. 이는 다른 모바일 앱에 비해 50대 이상 사용자가 많은 캐시노트 서비스의 특성 상 필연적인 선택이기도 했습니다.

2. 첫번째 마일스톤 — 우선 순위에 따라 컴포넌트를 정의하자.

첫번째 마일스톤은 ‘캐시노트 2.0(6월말 현재 출시 전)’에서 쓰일 컴포넌트를 정의하는 걸로 삼았습니다. 캐시노트 2.0의 전반적인 프로덕트 디자인은 이미 결정된 상태였습니다. 저희는 이 디자인에서 패턴을 찾아내, 개별 컴포넌트를 정의하기로 했습니다. 이 과정과 동시에 디자인 시스템에서 쓰일 각종 규칙과 용어의 정의도 함께 이뤄졌습니다. 이를 통해 디자이너, 개발자, PM 등 프로덕트 메이커들 사이에서 사용될 공통 규칙을 마련하고, 이를 바탕으로 커뮤니케이션하기 시작했습니다.

첫번째 마일스톤은 업무 스코프를 작게 가져가기로 했습니다. 디자인 시스템에 투입할 수 있는 리소스가 제한된 상황이었으니까요. 가장 반복적으로 가장 중요하게 사용되는 요소를 우선적으로 시스템화하는 데에 집중하기로 했습니다. 현재의 사용 빈도수, 추후 사용도, 중요성 등에 따라서 우선 순위를 평가한 후 컴포넌트가 될 요소를 추출하고, 이를 사용 가능한 여러 형태의 배리에이션으로 제작했습니다.

사실 이번 버전에는 아쉬움이 많이 남습니다. 우리가 바라는 디자인 시스템의 프로덕트 커버리지를 100%이라고 한다면, 이번 시스템의 커버리지 수준은 20% 남짓이거든요. 하지만 파레토 법칙을 따르자면, 가짓수로 20% 수준의 커버리지라도 사용 빈도에 있어서는 80% 수준에 도달할 수 있습니다. 따라서 저희는 첫번째 마일스톤이 — 부족하지만 — 미래의 완전한 디자인 시스템으로 도약할 수 있는 발판을 마련하는 데는 충분하다고 생각했습니다.

3. KCD 폰트 제작 — 데이터 가독성을 높이자.

캐시노트 앱을 비롯한 KCD의 프로덕트 화면에는 숫자가 많습니다. 매출을 비롯해 사장님들의 매장의 현황을 알려주는 주요 지표가 모두 숫자로 표현되기 때문입니다. 따라서 이처럼 숫자로 표현되는 데이터를 정확하게 전달할 수 있는, 숫자 가독성이 높은 폰트를 사용해왔습니다.

하지만 실제 사용에 있어서는 페이지를 렌더링하는 과정에서 특정 문자열의 정렬이 어긋나거나, 아예 엉뚱한 위치에 표출되는 등의 이슈가 발생했습니다. 따라서, 이런 문제를 해결할 수 있는 자체 폰트 개발의 필요성이 생겨났고, Roboto 와 Noto Sans KR을 조합하고 일부 글리프를 수정해 새로운 한글 폰트 KCD Han Sans를 만들어냈습니다.

새 폰트 제작의 목표는 Noto Sans KR의 한글 가독성이라는 강점과 Roboto의 일관된 숫자 글리프 너비라는 장점을 동시에 가져오는 것이었습니다. KCD Han Sans는 오픈 폰트를 재가공해 만든 오픈 폰트입니다. 혹시 모를 오류가 없는 지 확인하고 사용성 검증을 완료한 후에 누구나 사용할 수 있도록 공개할 예정입니다.

4. 두번째 마일스톤 — 패턴을 정의하자.

현재 진행 중인 2번째 마일스톤에서는 패턴 정의에 집중하고 있습니다. 첫번째 마일스톤에서는 개별 컴포넌트를 정의하고 이를 활용성 높게 제작하는데 집중했습니다. 이번에는 개별 요소가 사용되는 패턴을 분석하고, 이에 대한 활용 규칙을 정의하는 데에 힘을 쏟고 있습니다. 동시에 필요한 컴포넌트는 지속적으로 추가해 커버리지를 확대해 나가고 있습니다.

최종적으로는 메이커 이외의 직군과 외부 파트너도 즉시 사용할 수 있는 수준의 라이브러리와 스티커시트를 갖추는 것이 이번의 마일스톤입니다. 이를 달성하려면, 기존의 디자인 시스템보다 더 정교한 시스템과 가이드 도큐먼트가 필요하리라 생각합니다.

앞서도 언급한 것처럼, 지금의 KCD 디자인 시스템은 겨우 첫번째 마일스톤에 도달한 상태입니다. 가야 할 길은 멀고, 굳이 말하자면 저희가 지나온 길이 그나마 평탄한 길이었기에 남아있는 길은 지나온 길보다 훨씬 험한 길일 거라고 생각합니다.

조만간 위에서 소개한 디자인 시스템이 적용된 ‘캐시노트 2.0’을 비롯해 다양한 기능이 차례로 배포될 예정입니다. 프로덕트 사용 상에서 눈에 띄는 큰 변화를 느끼기는 어려울 수 있습니다. (이는 의도된 것입니다.) 눈에 잘 보이지 않는 곳에서의 환경 적용을 통해서 제품 구현을 더욱 빠르게 하고, 사장님들이 더 나은 디자인 경험을 하실 수 있도록 노력하고 있습니다.

5. 앞으로의 여정 — 테세우스의 배

그리스 신화에는 ‘테세우스의 배’라는 이야기가 나옵니다. “항해하는 도중에 배를 구성하는 모든 판자를 교체한다면, 그 배는 최초의 배와 같은 배와 같다고 할 수 있겠는가?”라는 패러독스인데요. 저희는 디자인 시스템도 이와 비슷하다고 생각합니다. 지금 도달한 1번째 마일스톤, 그리고 진행 중인 2번째 마일스톤 역시 앞으로 저희가, 혹은 저희 다음에 올 디자이너가 교체해 나갈 수 있습니다. 애초에 디자인 시스템은 프로덕트 디자인의 발전과 함께 진화하는 것이기에 100%의 달성은 없습니다.

그렇다면 저희(프로덕트 디자인팀과 웹, 앱 개발팀)가 만들어낸 디자인 시스템은 사라지는 것일까요? 저희는 그렇지 않다고 생각합니다. ‘테세우스의 배’는 처음 그 배를 만든 사람의 설계에 따라 점진적으로 새로운 배로 바뀌어 갑니다. 중간에 설계가 바뀔 수도 있습니다. 하지만 그 설계조차 원래의 설계에 뿌리를 두고 있습니다.

저희는 디자인 시스템을 통해 현재 KCD 디자인이 나아가야 할 방향을 가리키는 ‘북극성(Polaris)’을 마련하고자 했습니다. 시간이 지나 모든 요소가 교체된다고 해도, 2021년 디자인의 북극성을 지도에 찍은 것이 지금의 디자인 시스템 메이커 구성원들이라는 점은 바뀌지 않으니까요.

그리고 지금, 저희와 함께 이 과정을 함께할 Product Designer 와 Platform Designer를 찾고 있습니다.

한국신용데이터 (KCD) 인재영입 노션페이지 바로가기

--

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Korea Credit Data (KCD)

Korea Credit Data (KCD)

사업의 모든 순간 — 더 쉽게, 더 빠르게, 더 똑똑하게

More from Medium

Embedded Systems Project 4: External Sensor on ESP32 (BMP280)

CS373 Spring 2022: Anthony Modica

On Memory

HostBill customers can now resell marketgoo SEO tools — marketgoo