토스가 쉬운 UX, UI를 만드는 방법

토스는 모바일 접근성을 중요시 여긴다. 여기서 말하는 모바일 접근성은 모바일 서비스를 이용하는 사용자라면 누구나 불편함 없이 서비스를 이용할 수 있어야 한다는 개념으로, 인터페이스의 디자인부터 글씨 크기, 줄 간격 까지 모든 것이 해당된다. 토스는 모바일 접근성을 위해 어떤 노력을 할까. 

9일 토스는 자체 테크 컨퍼런스 ‘슬래시23’에서 ‘누구나 쓸 수 있는 접근성 높은 토스 만들기’를 주제로 토스의 쉬운 UX, UI 제공을 위한 노력을 소개했다. 이날 발표는 토스의 디자인 플랫폼팀 최동근 안드로이드 개발자가 맡았다.

토스에서 모바일 접근성은 사용자가 빠른 속도로 늘어나면서 더욱 중요해졌다. 다양한 환경에서 앱을 사용하는 사용자들이 늘어났고, 동시에 모바일 접근성을 올려달라는 문의사항이 지속적으로 들어오기 때문이다. 

이에 토스는 자체적인 디자인시스템(TDS)을 통해 접근성에 대응하고 있다. TDS는 각각의 고유한 기능과 형태를 가진 컴포넌트들이 정의되어 있어 레고 블록을 조립하듯 컴포넌트를 위에서 아래로 배치해 쉽고 일관적으로 화면을 구성할 수 있는 이점이 있다.

최동근 토스 개발자는 “TDS에서 접근성 대응을 결정하면서 가장 먼저 대응하기로 한 접근성 요소는 글씨 크기를 확대해 사용하는 큰 글씨 모드”라면서 “처음엔 쉽게 생각했으나 얼마 지나지 않아 이 생각이 완전히 틀렸다는 것을 알게 됐다”고 전했다. 

사용자의 요청으로 토스 모바일 화면에서 글씨 크기를 키운 결과, 버튼 내용이 말줄임이 되어 사용자 입장에선 어떤 동작을 하는 버튼인지 인지할 수 없다. 또 각 항목의 제목이 무엇을 의미하는지도 알 수 없는 문제가 생겼다.

사용자의 요청으로 토스 모바일 화면에서 글씨 크기를 키운 결과, 버튼 내용이 말줄임이 되어 사용자 입장에선 어떤 동작을 하는 버튼인지 인지할 수 없었다. 또 각 항목의 제목이 무엇을 의미하는지도 알 수 없는 문제가 생겼다. 

최 개발자는 “대부분의 컴포넌트에서 UI 깨짐을 방지하기 위해 맥스라인(Maxline)을 한 줄로 강제하고 말줄임 표시로 대체하면서 발생한 문제”라면서 “단점은 사용자에게 전달되는 정보가 줄어들면서 사용자의 알권리를 침해하게 되는 것”이라고 설명했다. 

이어 “TDS에는 사용자가 앱을 사용하는 환경에 따라 볼 수 있는 정보의 양에 차이가 있으면 안 된다는 규칙이 있는데, 이런 규칙이 지켜지지 않았던 것”이라고 덧붙였다.

토스는 모든 컴포넌트(텍스트)에 있는 맥스라인 제한을 해제했다. 이로써 기존에 말줄임 표시로 대체됐던 텍스트가 전부 표시되기 시작했으나, 컴포넌트가 의도했던 것보다 길어지거나 형태가 깨지는 상황이 발생했다. 이를 위해 토스는 텍스트의 공간을 넓혔고, 컴포넌트의 배치를 변경하는 방식으로 이를 해결했다. 

토스가 직면했던 또 다른 문제는 줄바꿈, 즉 개행 문제다. 토스는 글자가 길어지면 가독성을 위해 개행 문자를 추가해 두 줄로 나눠서 보여주고 있다. 이때 글씨가 커지면 첫 번째 줄의 텍스트가 커지면서 원하지 않는 위치에서 개행이 되는 문제가 생긴다. 

최 개발자는 “의도하지 않은 곳에서 개행되는 빈도가 높은 글씨 크기를 찾고 개행 문자를 공백으로 대체하는 방식으로 수정했다”며 “덕분에 의도와 다른 위치에서 개행이 되는 문제를 해결하고 일반 글씨 크기 화면에서 가독성도 유지할 수 있었다”고 말했다. 

이어 “드라마틱한 변화는 아니지만 특정 글씨 크기 이상에서 개행 문자를 대체하는 것만으로도 디자인의 완성도를 올릴 수 있다”고 덧붙였다. 

글. 바이라인네트워크
<홍하나 기자>0626hhn@byline.network

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다