2024 · UX · 카카오페이 QA 상담품질평가
카카오페이 QA 상담품질평가 시스템 설계
AI가 매긴 점수와 사람이 매긴 점수를 한 시스템에 담기
배경
카카오페이가 AI 컨택센터(AICC)를 도입하면서, 상담 품질을 평가하는 시스템을 처음 만들게 됐다. 상담사가 콜·채팅·메일로 응대한 기록을 평가표에 맞춰 채점하고, 그 결과를 조직 단위로 모아 보는 일까지가 범위였다. 카카오페이가 발주하고 비비디글로벌과 tinto lab이 함께 수행했다. 우리는 화면설계와 디자인을 맡았다. 겸임 두 명이 기능별로 화면을 나눠 맡았다.
SCORE SHEET
문제
문제 — 한 시스템에 담아야 할 두 가지 평가
AI가 채점하는 자동평가와 사람이 채점하는 수동평가는 평가표를 만드는 방법부터 달랐다. 자동 평가표에는 어떤 상담유형을, 어느 조직을 대상으로 평가할지를 조건으로 걸어 둔다. 수동 평가표에는 평가항목마다 몇 점을 줄지 배점 기준을 적는다. 그렇다고 두 방식이 끝까지 갈라서는 것도 아니었다. 같은 상담 한 건을 AI와 사람이 각각 채점한 다음, 두 점수가 얼마나 일치하는지 비교하는 화면도 있어야 했다.
CONDITIONS OUTSIDE
POINTS INSIDE
단계가 서로 물려 있다는 점이 두 번째로 어려웠다. 평가항목이 있어야 평가표를 만들고, 평가표가 있어야 평가계획을 세운다. 계획이 서야 평가를 실행하고 결과를 볼 수 있다. 앞 단계에서 무엇을 골랐느냐에 따라 뒤 단계에서 고를 수 있는 것이 달라진다. 그래서 화면 하나를 그리려면 앞뒤 단계가 어떤 상태인지까지 함께 정해야 했다.
전략
전략 — 업무가 흐르는 순서대로
설계서의 그룹 순서를 실제 업무가 흐르는 순서와 똑같이 맞췄다. 평가항목을 모아 평가표를 짜고, 그 평가표로 평가계획을 세운다. 계획대로 평가를 실행하면 상세 화면에서 채점이 이뤄지고, 그 결과가 통계와 평가결과로 모인다. 앞 단계에서 만든 것이 뒤 단계의 재료가 되기 때문에, 문서를 이 순서로 읽으면 화면 하나가 무엇을 전제하는지까지 같이 읽힌다.
이 순서 위에 두 개의 축이 곱해진다. 평가 방식이 수동과 자동으로 갈리고, 상담 채널이 콜·채팅·메일 셋으로 갈린다. 방식과 채널이 만나는 평가상세는 그룹 하나에서만 화면 정의가 열두 장 나왔다. 화면이 이렇게 불어나면 같은 규칙을 여러 화면에 반복해 적는 일이 생긴다.
그래서 어디서나 똑같이 쓰이는 것은 공통 그룹으로 내려 한 번만 정했다. 표와 상단 메뉴(GNB), 화면을 탭으로 쌓는 MDI Bar, 로그인 화면은 물론 글자가 길어져 칸을 넘칠 때 어떻게 보여줄지도 여기서 정했다. 화면에는 QA_ADM_1.1.1처럼 그룹과 화면, 상태를 차례로 나타내는 번호를 붙였다. 번호만 봐도 그 화면이 어느 단계의 몇 번째 상태인지 알 수 있다. 화면 이름 앞에는 [관리자], [관리자/중간 관리자]처럼 볼 수 있는 권한을 적어, 같은 기능이라도 누구의 화면인지 문서에서 구분했다.
해결
해결 1 · 앞 화면을 닫지 않고 쌓아 두는 구조
평가표를 보다가 평가계획으로, 계획에서 다시 상세 화면으로 건너가면서 앞 화면에 적힌 값을 계속 확인하는 업무였다. 그래서 화면을 열 때마다 상단 바에 탭이 하나씩 쌓이는 MDI 구조를 우리가 먼저 제안했다. 여러 화면을 동시에 열어 두고 오갈 수 있는 방식이다. 목록에서 추가를 누르면 새 탭이 열리면서 그 화면으로 넘어가고, 보고 있던 화면은 그대로 남는다.
TABS STACK
해결 2 · 성격이 다른 두 평가표
자동 평가표는 무엇을 평가할지보다 어디에 적용할지를 정하는 표다. 상담유형과 평가대상조직을 지정하는 흐름을 표 안에 넣었다. 등록된 것이 아직 없을 때와 새로 추가할 때를 각각 따로 그렸다. 수동 평가표는 평가항목마다 배점 기준을 매기는 별도의 표로 설계했다. 두 표 모두 앞서 만들어 둔 평가표와 평가항목을 불러와 다시 쓸 수 있다.
해결 3 · AI 점수를 믿어도 되는지 확인하는 화면
신뢰도 평가는 상담 한 건을 AI와 사람이 각각 채점해 두 점수의 일치도를 보는 화면이다. 상담 기록의 형태가 채널마다 달라서 상세 화면은 콜·채팅·메일 세 가지로 따로 설계했다.
TWO SCORES
디자인
디자인 1 · 카카오페이 기존 화면과 결을 맞춘 표현
카카오페이에는 이미 운영 중인 화면의 표현 문법이 있었다. 새 체계를 세우기보다 그 아이덴티티를 이어받는 쪽을 택했다. kakaopay developer 화면과 우리 시안을 나란히 놓고 톤앤매너, 팝업과 버튼, 표 세 항목을 하나씩 대조했다. 항목마다 기존 값을 기준으로 두고, 관리자 업무 화면에 맞는 값을 따로 정했다.
디자인 2 · 모든 화면이 같은 시각 경험을 제공하도록
같은 표와 같은 버튼이 87개 화면에서 반복된다. 입력창, 버튼, 탭, 체크박스, 라디오, 토글, 상단 메뉴, 좌측 메뉴(LNB)를 변형까지 묶은 세트 12개로 정리했다. 밝은 화면과 어두운 화면을 바꾸는 화면모드 전환은 상단 메뉴의 개인정보 영역에 뒀다. 컴포넌트는 모두 117개다. 세트 정리와 컴포넌트 구축은 두 사람이 함께 했다.
