brunch

매거진 PM은 체질보다 어드벤쳐

라이킷 37 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김영욱 Aug 31. 2021

코로나19 백신예약시스템 인증 UI의 개선을 제안합니다

포용성과 접근성이 충분히 검증된 UI/UX 가 필요하다.

지난 8월 초에, 9일부터 코로나19 백신 사전 예약시스템의 본인 인증방식이 간편해진다는 뉴스 기사를 접했습니다. 대리예약 불허, 시간당 본인인증 횟수 제한과 더불어 시스템 개선 등으로 시간당 200만 건의 예약을 처리할 수 있을 것으로 기대한다는 기사였습니다.

지난번에 예약이 안되어 많은 시간을 대기하는 시민들의 고통을 이런 개선을 통해 해결해 나가는 점에 대해서는 당연히 박수를 쳐 주고 응원할 사항입니다.

이 글의 제목이 '개선 제안'이라고 해서, 이 글이 개발과 개선에 투여한 그분들의 피와 땀 수고에 대한 흠집 내기나 깎아내리기를 한다는 오해는 절대로 없었으면 합니다. 그저 저는 수고한 그분들이 다 보지 못하는 사각에 있는 한 부분을 먼저 볼 수 있었기에, 이러한 시도가 다음에 이루어질 때는 조금은 개선된 모습을 위한 고민이 동반되기를 바라는 부분에서 부탁하는 제언 정도로 생각해 주면 좋겠습니다.

저는 UI를 전문적으로 다루는 디자이너가 아니길래 디자인에 대해서는 잘 모릅니다. 그저 한 기업의 총괄 디자인 그룹에서 프로덕트/프로그램 매니저 역할을 하면서, 디자이너분들로부터 배우고 익힌 풍월 정도가 전부입니다. 저의 이런 부족한 부분을 메꾸기 위해, 제가 알고 있는한 최고의 UX 디자이너인 김 얼님과 함께 이 글을 작성하고 리뷰하였음을 미리 말씀드립니다.

글의 시작은 개선되기 전의 예약 시스템 페이지의 UI부터 리뷰를 시작해 보겠습니다.

8월9일 이전의 예약 시스템 UI

탈도 많고 문제도 많았던 이전 예약 시스템 UI의 스냅샷을 보시죠.

8월 9일 까지 사용하던 예약시스템 화면

UI에서 사용하는 컬러나 폰트는 제외하고, UX에 영향을 미치는 UI 컴포넌트에 대해서만 이야기하고자 합니다. 위에서 표시한 대로 3가지로 나누어 살펴 볼 필요가 있다고 생각을 합니다.

1. '상황 표시줄'에 해당한다고 생각되는 부분입니다.

화면 위의 "접속대기 중"은 앞 뒤의 문장 색깔과 다름을 통해서, 하단의 "대기시간이 더 길어진다"는 메시지는 현재의 대기 상황을 표시해 주는 것으로 보입니다.

상단의 '접속대기 중'은 앞 뒤의 글자색과 다르긴 하나 매우 비슷한 색감을 갖고 있어 눈에 띄기 쉽지 않습니다. 만약 좀 더 대비되는 색깔과 글자크기를 가졌다면 전달하고 자 하는 내용을 쉽게 인지 할 수 있었을 것으로 생각합니다.

하단의 상태 메시지 또한 일반 메시지와 차별하기 어려워 보입니다. 물론 글자색과 글자 크기가 위의 메시지와는 차이을 두고 있으나 그 차이가 크지 않아 직관적으로 읽히지는 않습니다. 중요한 상태를 표시하려 했다면 좀 더 대비되는 컬러 선택이 필요하지 않을까 생각합니다.

2. UI 디자인보다는 UX에 아쉬움이 많이 남습니다.

대기열의 상태를 보여주려 하는데 그곳에 무슨 의미였을까라는 다음과 같은 의문이 듭니다.

1) 앞에 몇 명, 뒤에 몇 명이라는 단단위의 숫자가 어떤 이유로 큰 의미를 가질까?

2) 무엇인가 처리를 기다릴 때 기본적으로 나보다 대기열에 앞에 있는 양에 관심을 갖는 것이 기본인데, 왜 뒤에 있는 양까지 표시를 할 필요가 있는 것일까?

3) 단 단위의 숫자 대신 기다리는 평균 대기 시간을 표시할 수 있다면 좀 더 효과적이고 논리적이지 않을까?

4) 단 단위의 숫자를 표시하지 않고, 크게 올림이나 내림을 하여 만 명단위, 천 명, 백 명단위로 자릿수 표시를 하면 저 화면을 계속 보면서 드는 조급함을 덜해 주지 않을까? (고층 엘리베이터를 이용할 때 바깥에서 층수를 보여주지 않고 도착이 임박할 때만 깜빡거림을 사용하는 심리학의 기초를 이용하면 어땠을까 합니다.)

3. 메시지인가? 버튼인가?

도대체 이해가 안 되는 괄호로 묶인 '[중지]'라는 문자열은 제 경험으로는 이 기다림의 상태를 벗어나고자 할 때 누르게 되는 '버튼'으로 이해가 됩니다. 그런데 어디에도 이게 버튼이라는 UI표식은 없습니다. 마우스를 그곳으로 움직이고 나서야 커서 모양이 바뀌어 그것이 사용자로 하여금 버튼으로 인식이 된 다면, 그것은 잘못된 UI이고 UX입니다. 더더욱이나 앞에 표시하고 있는 상태 메시지와 같은 색깔, 거의 같은 크기의 문자열 아닌가요? 사용자는 이것을 '버튼이 아니다'고 인식하는 것도 무리가 아니고, 오히려 버튼이라고 인식하는 것이 놀라운 것이라 생각이 듭니다.

지난 일이고 지난 것이니 별로 중요하지 않다고 여길 수도 있습니다. 하지만, 무심코 지난 실수를 기억하지 않고, 복기하지 않기에 그 실수는 현재도 진행되고 있는지도 모릅니다. 실수를 개선하고자 하는 노력은 그 실수가 과거형이라고 유효하지 않은 것은 아닙니다. 그 실수 덕에 현재와 미래에 더 품질 좋은 서비스와 제품을 만들 기회가 생긴 것이라 생각하고 적극적으로 접근해야 합니다.

8월 9일 이후의 예약 시스템 UI

8월 9일부터 제공된 새로운 인증방식 화면

코로나19 예방접종 대응추진단은 지금까지 백신 접종을 사전에 예약할 때 본인인증을 하는 절차에서 가장 많은 시간이 걸렸다고 설명했습니다. 위의 화면이 그 전의 병목이 되던 인증 프로세스를 우회하게 만드는 UX 개선을 통해, 기존의 심각함을 크게 개선하였습니다. 많은 분들의 노력에 진심으로 감사드립니다.

글의 서두에서 말씀드린 바와 같이 이번 글에서는 서비스 기능이 아닌 UI의 개선점 만을 이야기하고자 합니다. 새롭게 개선된 인증방식 화면의 UI에서 크게 3가지 개선점을 발견하게 됩니다.

1. 색각 이상자 지원

2. 한글 서비스에 불편함을 느끼는 거주 외국인 지원

3. 시각 장애자 지원

위의 예약시스템 UI는 얼마나 많은 이용자가 접속 중인지 혼잡도를 신호등 방식으로 알려줍니다. 녹색은 '원활', 황색은 '지연', 빨간색은 '혼잡', 회색은 '선택불가'등으로 말입니다. 매우 직관적으로 현재의 상태를 알 수 있습니다. 단 여러분이 시각 장애나 색각이상이 없을 때만 말입니다.

저는 지금 물체를 시각으로 인지 못하는 시각장애자분들만을 이야기하는 것이 아닙니다. Color Blind Awareness에 따르면 세계 인구의 4.5%가 특정색을 구별하기 어려운 색맹과 색약을 갖고 있는 색각이상자입니다. 색각이상에는 여러 종류가 있지만, 일반적으로 빨간색, 녹색, 갈색, 그리고 오렌지를 구별하는 데 어려움을 겪습니다. 그중에서도 가장 많은 색각이상에 적록(Red-Green) 이상이 있습니다. 그분들에게는 왼쪽과 같은 색깔이 오른쪽과 같이 보이게 됩니다.

그렇다면, 우리 주위에서 색각이상을 가진 이웃이 보게 되는 예약시스템 UI는 어떻게 보일까요? 바로 다음과 같을 겁니다.

적록 색각 이상자가 접하는 예약화면

그래도 다행인 것은 색깔은 구별하기 힘들어도 옆에 상태를 설명해주는 문자열이 있으므로 진행은 가능합니다. (이곳에서 시각 장애자 분들은 또 다른 더 큰 어려움에 처하게 됩니다.-밑에서 설명하겠습니다.)

이런 이유로 디자인의 세계에서 녹색과 빨간색은 매우 특수 관계성을 갖고 있습니다.

서로 간의 기능 대비를 위해서 사용하기도 하지만 매우 조심스럽게 사용해야 하는 이유가 됩니다.

UX/UI 디자인을 조금이라도 배운 사람이라면 모두가 알만한 어마어마한 중요한 룰이 있답니다.

색깔만을 사용하여 의미를 전달해서는 절대로 안된다.
(Never rely on color alone to convey the meaning)

두 가지 예를 들어봅니다.

아래의 휴대폰의 전화가 걸려 왔을 때의 화면 예를 보시면 그 대비를 쉽게 알 수 있습니다. 절대로 색깔만으로 그 의미를 전달하지 않습니다. 원형의 배경 색 안에, 그 의미를 담을 수 있는 아이콘을 넣고, 그 하단에 정확한 의미를 담은 문자열을 넣습니다. 색각 이상자의 경우에는 배경 색깔은 구별이 어려울 수 있으나, 그 안에 있는 아이콘의 모양과 정확한 문자열의 조합으로 그 의미를 실수 없이 알아낼 수 있는 것입니다. 같은 이유로 예, 아니오를 선택하는 경우에도 다음과 같이 적용할 수 있습니다.

색깔만으로 의미를 전달해서는 안된다.

색맹, 색약을 위한 디자인은 대부분의 디자이너들이 그 신체적 상황이 아니기 때문에 쉽게 간과될 수 있는 부분입니다. 또한 우리가 어렸을 때부터 무의식적으로 신호등은 빨강, 노랑, 녹색 이렇게 삼색 동그라미를 사용한다는 고정관념이 그 한몫을 합니다. 그러나 사실 실제 우리가 매일 접하는 신호등도 실생활에서 많은 발전이 있었는데, 우리가 인식하지 못했을 뿐입니다. 자동차 전용의 신호등을 제외하고 색깔만으로 의미를 전달하는 보행자 신호등은 이젠 거의 없습니다.

실생활에서 보이는 보행자신호등은 문자나 이해할 수 있는 모양의 이미지를 사용한다.

여기까지 오는 이야기가 길었습니다. 결과적으로 지금의 UI를 어떻게 개선하면 좋을까요. 간단하게 수정을 해 보면 이렇게 되지 않을까 합니다.

1차 개선(제안)된 화면

기존의 신호등 체계의 UI를 유지하면서 이해될 수 있는 영어 문자열을 함께 삽입함으로써 위에서 제기했던 1번- 색각이상자, 2번-한글이 서툰 거주 외국인을 지원하는 문제를 해결할 수 있습니다.

그런데 3번-시각 장애자 분들에게는 아직 풀지 못한 문제가 있습니다. 제가 실제 사이트에서 저 UI를 경험해 보고 깜짝 놀란 부분이었는데, 중간에 신호등 상태를 알려주는 부분이 모두 비트맵 이미지였기에 실제 '원활, 지연, 혼잡, 선택불가'라는 문자열을 읽을 수 없었습니다. 시각 장애자분들은 일반적으로 나레이터와 같은 스크린리더 툴의 도움으로 화면을 읽게 되는데, 비트맵 이미지인 경우 페이지를 제공하는 프로그래머가 해당 최종 HTML코드에 그 이미지를 설명하는 문자열 (alt text나 content description)을 의식적으로 넣지 않은 이상, 나레이터는 그 안에 무슨 정보가 있는지를 전혀 파악하지 못합니다.

UX 플로우에 비트맵이미지가 있다면 그것을 설명하는 텍스트가 반드시 필요하다.

그럼 시각장애자 분들을 위해서 어떻게 해결을 하면 될까요? 물론 하나하나 비트맵 이미지를 쪼개고, 그에 따른 HTML 코드에 설명을 집어넣으면 스크린리더가 읽게 될 듯합니다. 그런데 저는 조금 다른 방법으로 제안을 해 볼까 합니다. 제 접근법은 "왜 저 부분이 필요할까?"입니다. 밑에서 각각의 인증방법에 대해서 상태 표시를 해 주는데, 위에서 모든 신호등 경우수를 보여줄 필요가 있을까입니다.

좋은 서비스/제품은 꼭 필요한 것만 넣고, 필요하지 않은 부분은 모두 빼는 것입니다. 어느 순간 그 빼는 것이 더욱더 어려워지고, 그 일이 많은 경험을 필요로 할 때도 있습니다. 제 최종 제안은 해당 부분을 빼내고, 다음과 같은 간편화된 UI를 제공하는 것입니다. 이때 각 인증에 보여지는 신호 상태 문자열 (예-원활, 지연)는 비트맵이 아닌, 실제 문자열로 구성이 되어 있기에, 별도의 코드가 필요하지않습니다.

필요없는 부분을 제외하고 최종 제안하는 화면

개선된 UI가 전문가분들이 보기에는 완벽하지 않을 수 있으나, 최소한 제가 제시했던 3가지 문제는 해결하는 방법으로 제공이 될 수 있습니다. 더 발전할 수 있도록 전문가님들의 활발한 참여와 열정이 필요한 부분입니다.

왜 이런 일이 생겼을까?

이 잘문에 정확한 답은 제가 알수 없습니다. 그렇지만 경험에 따른 나름의 접근은 해 볼 수 있습니다.

1. PM의 역할에서 포용적 디자인(Inclusive Design), 접근성(Accessibility) 지원은 서비스 스펙에 존재했는가? 사회적 약자에 대한 배려가 아닌, 서비스와 제품의 사용성과 품질을 높이기 위해 이런 접근법을 사용했다면 좋았을 텐데 아쉬움이 있습니다.

2. 실제 기능 개선 작업을 할 때 디자인 팀과의 리뷰가 충분했는가?

매우 중요한 부분입니다. 어쩌면, 개발이 들어가기 전에, 디자인팀의 UX리뷰가 있었다면 어렵지 않게 걸러낼 수 있었던 문제라고 생각합니다.

3. 개발자는 비트맵이미지에 대한 설명이 최종 HTML 코드에 삽입되어야 한다는 사실을 인지하지 못했는가?

4. QA 테스팅 팀은 접근성 테스트에 대한 계획을 갖고 테스트를 했는가?

소프트웨어가 서비스로 제품으로 출하되기까지는 여러 개의 품질 게이트를 갖고 있습니다. 지금의 UI의 문제는 어떻게 보느냐에 따라 매우 큰 문제도, 아주 작은 문제도 될 수 있습니다. 우리가 개선해야 할 중요한 점은 위에서 이야기한 4개의 품질 게이트(PM, 디자인, 개발, 테스트)에서 단 한 번도 걸러지지 않고 통과되었다는 점을 인식하고 이 프로세스가 동작하도록 개선하는데 무게 중심을 두어야 할 것 같습니다.

공공의 서비스일수록 이런 부분이 더욱 강조되고, 사회적 사명감이 강해져야 그 서비스/제품의 품질이 올라갑니다. 선진국의 경우에는 유럽의 European accessibility act 이나 미국의 ADA Compliance 에서 명시한 바와 같이 공공의 서비스를 제공할때는 이런 사회적 약자에 대한 지원은 기본 사항이며, 이 기본이 지켜지지 않을 경우에는 아예 입찰이나 참여가 불가한 상황입니다.

우리가 실력이 없고 리소스가 부족해서 이런 현상이 일어난다고 생각하지 않습니다. 대한민국에는 다른 어떤 나라에서도 찾기 힘든 열정으로 가득한 최고의 개발자, 최고의 디자이너들이 너무나도 많습니다. 단지 우리가 함께 구슬을 꿰는 연습이 지금까지 부족했을 뿐입니다. 이제부터라도 연습 과정을 충실히 거치면 세계인이 모두 놀랄만한 디테일이 살아있는 서비스를 만들어 낼 수 있습니다.

최근에 민주당 대통령 후보 중의 한명인 추미애 후보의 IT공약이 많은 분들로부터 호응과 울림을 받았습니다. 그럼에도 그중에 디자인에 관해 언급된 부분은 없더군요. CDO가 Design 인가 싶어서 봤는데 데이터 더군요. 물론 데이터 또한 엄청나게 중요합니다. 그만큼 디자인도 중요합니다. 무엇이 더 중요하지 않게 모두 중요합니다. 디자인은 예쁘게 보기 좋게 만드는것이 아니라, 더 많은 사람들이 최적의 조건에서 사용하기 편하게, 오류를 줄여줍니다. 또 다른 디자인 책임자 자리가 필요하다고 우겨대는 것이 아닌, 이런 인식 (Awareness)이 자연스럽게 생겨나길 바라는 의미, 그래서 좀 더 튼튼하고, 확장성이 있으면서도 사용이 편한 품질 좋은 서비스가 더욱 더 많이 생겨나길 바라는 희망을 갖고 이 글을 마무리합니다.

읽어주신 모든 분들께 감사의 말씀을 드립니다.

keyword