UI/UX

누구나 편리한 토스 UI·UX 개발 이야기

슬래시 23으로 본 토스의 모바일 접근성

2023.06.23

“사용자라면 누구나 불편함 없이 공평하게 서비스를 이용할 수 있어야 한다”

모바일 접근성은 무엇이고, 왜 기업과 디자이너는 접근성에 대응해야 할까? 수많은 모바일 개발자와 디자이너가 작업을 하면서 한 번쯤 가져봤을 의문이다. 토스는 지난 8~12일 온라인 테크 컨퍼런스 ‘슬래시 23’을 진행, 이러한 질문에 답을 제시했다.

올해로 3년 차인 슬래시 테크 컨퍼런스는 편리하고 안전한 서비스를 위한 토스의 기술적 고민과 성취를 공유하는 행사다. 그동안 토스는 슬래시 컨퍼런스를 통해 다양한 개발 혁신을 공개했으며, 현재 토스 앱 사용자뿐 아니라 많은 개발자와 디자이너까지 주목하는 행사로 발돋움 했다.

이번 슬래시 23에는 ‘THE HIDDEN SIDE OF TECHNOLOGY: 토스, 그 이면의 이야기’ 라는 주제 아래 토스 및 주요 계열사의 보안전문가·디자이너·개발자가 모여 발표에 나섰다. 특히 ‘큰 글씨 모드’ 탄생 비화와 같이 모바일 접근성을 향한 토스의 고군분투를 다룬 세션이 UI·UX 디자이너의 주목을 받았다.

모바일 접근성이란 무엇?

행사 2일차 B트랙의 시작을 담당한 세션은 ‘누구나 쓸 수 있는 접근성 높은 토스 만들기’ 였다. 모든 사용자가 쉽고 편리한 금융 경험을 할 수 있도록 앱의 접근성을 높여왔던 토스의 노력을 소개하는 발표였다.

세션을 진행한 최동근 토스 디자인 플랫폼 팀장은 실제 사례를 바탕으로 쉽고 간편한 고객 경험을 제공하기 위해 고민한 내용을 구체적인 개선 과정과 함께 설명해 참관객의 이해를 도왔다.

최동근 팀장이 가장 먼저 언급한 것은 ‘모바일 접근성’ 이라는 단어의 정의였다. 최동근 팀장은 ‘모두에게 쉽고 간편한 금융’ 이라는 사훈을 보여주며 “모바일 접근성은 이 문장 중에서 ‘모두에게’ 라는 단어에 초점이 맞춰진 개념이다”라며 “모바일 서비스를 이용하는 사용자라면 누구나 불편함 없이 서비스를 이용할 수 있어야 한다”고 했다.

요컨대 모바일 접근성은 단순히 편리함을 의미하는 것이 아니라, 성별이나 나이에 관계 없이, 심지어 장애가 있는 사용자까지도 불편함 없이 공평하게 서비스를 이용할 수 있어야 한다는 개념이다.

추가로 최동근 팀장은 토스가 처음부터 모바일 접근성을 신경 써 개발한 것은 아니었다고 전했다. 과거 토스 사용자가 늘어나는 과정에서 접근성 문의 사항을 지속적으로 받아 개선으로 이어졌다는 이야기다.

당시 토스는 기존 업계의 접근성 대응 방식이 화면의 일관성을 깨고, 고객 경험을 손상시키며, 생산성을 낮췄다는 점에 주목했다.

그리고 이런 분석은 시스템 단계부터 접근성을 개선하면 사용자에게는 일관적이고 편리한 고객 경험을 제공하고, 메이커에게는 높은 개발 생산성을 제공해 더 많은 사용자를 공략할 수 있다는 판단으로 이어졌다.

우여곡절 끝에 만들어진 토스의 ‘큰 글씨 모드’

토스 앱의 접근성 개선을 결심한 토스 디자인 팀이 가장 먼저 대응하기로 한 요소는 ‘큰 글씨 모드’ 였다. 다른 앱에서도 어렵지 않게 찾아볼 수 있는 큰 글씨 모드는 이름처럼 텍스트 폰트의 크기를 키워 가독성을 높이는 기능이다.

통계적으로는 주로 중년층과 노년층이 애용하는 기능으로, 남녀노소 모두가 사용하는 금융 앱인 토스에 있어서 큰 글씨 모드 개선은 반드시 필요했다.

최동근 팀장에 따르면 디자인 팀은 큰 글씨 모드 개발 초기에 있어 “글씨 크기만 키우면 되는게 아닌가?” 라는 생각을 가지고 있었다고 한다. 얼마 지나지 않아 디자인 팀은 이 생각이 얼마나 안일했는지 깨달았다.

기존 UI 설정을 유지한 채 단순히 글씨 크기를 키운 결과, 버튼 텍스트 내용이 말줄임 표시 처리됐고, 사용자 입장에서 무엇이 어떤 버튼인지 구분할 수 없게 된 것이다.

큰 글씨 모드의 UI 표시 문제

일반 사용자도 자주 접하는 이러한 표시 문제는 대부분 앱 또는 웹을 구성하고 있는 요소인 ‘컴포넌트’와 관련 된다. 현재 많은 개발자가 프로그래밍에 있어서 컴포넌트의 텍스트 최대 표시 용량인 ‘맥스라인(maxLine)’을 한 줄로 제한하고 있다. 그리고 나머지 부분은 줄임 표시로 대체 설정해뒀다.

컴포넌트의 텍스트 맥스라인을 한 줄로 강제하는 이유는 간단하다. 개발 난이도가 낮아지고, 텍스트에 변화가 생겨도 UI 디자인 구성이 유지되기 때문이다. 이처럼 편리한 맥스라인 설정에는 치명적인 단점이 존재한다. 사용자에게 전달되는 정보가 말줄임 표시로 줄어들면서 결과적으로 사용성이 떨어지고, 사용자의 알 권리까지 침해한다는 것이다.

토스의 경우 사용자 환경에 따라 주어지는 정보의 양을 차별하면 안된다는 규칙이 있었기에 팀은 다른 해결책을 찾아야만 했다. 우선 가장 먼저 모든 컴포넌트에서 맥스라인 제한을 해제했다.

그러자 말줄임 표시로 대체되던 텍스트가 전부 표시되기 시작했다. 하지만 동시에 컴포넌트의 형태가 변형돼 의도했던 디자인 UI가 붕괴하기 시작했다.

한 번쯤 휴대폰이나 PC 등을 이용하다가 오류로 폰트가 기존 설정과 다르게 커지고 UI가 깨지는 현상을 겪어본 적이 있을 것이다. 토스 디자인 팀이 겪은 문제도 정도의 차이만 있을 뿐 같은 맥락이었다.

토스는 이렇게 연이어 발생한 문제를 앱 화면의 컴포넌트 재배치로 해결했다.

좌우로 배치하던 버튼을 텍스트의 크기 변화에 맞춰 위아래로 배치하거나, 우측에 있는 텍스트를 하단으로 내리는 등의 조건을 추가한 것이다. 이런 방법을 통해 토스는 텍스트의 크기가 커지더라도 사용자에게 전달되는 정보량을 줄이지 않고 의도한 디자인을 유지할 수 있었다.

물론 이런 컴포넌트 재배치를 ‘전가의 보도’처럼 무한정으로 써먹을 순 없다. 탭과 같이 한정된 공간에 UI를 표시해야 할 때는 레이아웃 배치 변경만으로는 해결하지 못하기 때문이다.

이에 대한 해결책으로 팀은 탭을 누르면 말줄임 로직을 유지한 채 화면 아래에서 추가의 탭이나 선택지를 보여주는 ‘바텀 시트(BottomSheet)’ 방식을 사용했다.

큰 글씨 모드의 텍스트 개행 문제

큰 글씨 모드 개발 도중 발견된 마지막 문제는 텍스트 개행 관련 문제였다. 기존에 토스는 많은 제품에서 타이틀이 길어지면 가독성을 위해 개행 문자를 추가해서 두 줄로 나눠 보여주고 있었다.

하지만 큰 글씨 모드가 적용되자, 기존에 디자이너가 의도하지 않은 구간에서 개행이 일어나는 문제가 발생했다. 의도와 다르게 개행이 진행된 결과 화면 내 정보량이 줄어들고 디자인적인 완성도가 떨어졌다.

이는 개행 문자 사용을 금지하면 손 쉽게 해결이 가능하지만, 일반적인 글씨 크기에서 가독성 문제 발생이 예상되는 상황이었다. 앱 서비스, 특히나 금융 앱에서 가독성 감소는 곧 사용자 감소로 직결되는 문제다.

결국 토스는 개행 문자를 계속 사용하면서도 화면 내 정보량이 감소하지 않게도록 수작업을 통해 의도하지 않은 곳에서 개행 되는 빈도가 높은 글씨 크기를 찾아내고, 찾아낸 크기 이상에서는 개행 문자를 공백으로 대체하는 방식으로 수정을 진행했다.

덕분에 토스는 일반적인 글씨 크기와 큰 글씨 모드 모두에서 가독성을 개선할 수 있었다. 다른 유명 포털사이트 및 앱의 큰 글씨 모드와 대비돼 토스의 노력이 더욱 엿보이는 대목이었다.

최동근 팀장은 “드라마틱한 변화는 아니지만 특정 글씨 크기 이상에서 개행 문자를 대체하는 것만으로도 디자인의 완성도를 높일 수 있었다. 실무자라면 한번 적용해 보기를 권한다”고했다.

접근성의 중요성… 디자이너의 고려는 계속돼야

끊임 없이 접근성을 개선하고자 했던 팀의 노력은 시장에서 빛을 발했다. 실제로 토스는 수많은 금융 앱 중에서도 가장 UI·UX가 뛰어나기로 손꼽히며 많은 사용자가 애용하고 있다.

2015년 2월에 정식 서비스를 시작한 토스는 2016년 말 35억 원이었던 매출이 지난 해 1조 원을 돌파했다. 매출뿐만 아니라 올해 1분기 기준 약 1,510만 명의 월간 활성 이용자 수를 기록했다.

이런 토스의 인기에는 높은 접근성과 편리함이 주요 요인으로 작용하고 있다. 혜성과도 같았던 토스의 등장 이후 많은 금융 앱이 토스의 흥행 원인을 분석하고 UI·UX를 벤치마킹해 변화를 시도하고 있다.

실제로 지난 3월 대학생활 플랫폼 에브리타임의 운영사 비누랩스가 공개한 ‘Z세대 트렌드 리포트 금융 생활 편’에서는 토스뱅크 등 인터넷 전문 은행을 주거래 은행으로 이용하는 이유를 묻자 “모바일 이용이 편리해서”라는 응답이 1위를 기록했다.

이날 최동근 팀장은 세션을 마무리하면서 “그동안 접근성에 대한 많은 문제를 마주했지만, 대부분의 문제는 간단한 변화로도 해결할 수 있었다”며 적극적으로 접근성 요소를 개선하길 권장했다.

• UI
• UI·UX
• UX
• 컨퍼런스
• 토스
• 플랫폼

• 에디터김동욱 (jkkims@ditoday.com)