토스 디자이너가 제품에만 집중할 수 있는 방법

저번 아티클에서 메뉴 컴포넌트 추가를 위해 가설을 세우고 실험했던 과정을 소개해 드렸어요. 이 방법으로 유용성이 검증되어 빠르게 새 컴포넌트를 결정해 출시할 수 있었답니다.

1편 보고 오기 >

문제

그러나 점차 새 컴포넌트가 대응할 수 없는 케이스들이 발견 되기 시작했어요. 컴포넌트를 사용할 수 있게 된 뒤 많은 디자이너분들이 제품에 가져다 쓰시기 시작했죠. 그런데 초반에 빠르게 커버하고자 했던 케이스보다 훨씬 더 다양한 맥락에 적용되면서 문제가 발생했어요. 직접 없는 옵션들을 새로 추가하고 그리기 시작한 것이에요.

서비스를 만들기에도 바쁜 디자이너는 다시 하나하나 다크모드, 텍스트가 길어질 때의 정책, 접근성 및 voice over 대응 등을 직접 결정해야 했죠. 게다가 앱 사용자는 같은 컴포넌트인데 서비스마다 다른 경험을 하게 되고요.

가설

토스에는 메이커의 생산성과 사용자의 일관된 경험을 책임지는 디자인 시스템 팀이 있어요. 그리고 이를 위한 도구 중 하나로 Toss Design System을 운영하고 있죠. 디자인 플랫폼 팀은 레고 블록과 같은 활용 가능한 TDS 컴포넌트들을 만들고, 메이커는 이 컴포넌트들을 활용하여 화면과 제품을 만들어요.

저는 디자이너분들이 이젠 더 이상 다른 것에 신경 쓰지 않아도 되도록 컴포넌트를 다시 개선하기로 했어요. 디자인 개선에 필요한 3가지 요소를 가지고 메뉴 컴포넌트 설계 과정을 소개해 드릴게요.

1. 다양한 케이스를 패턴화 해요
2. 심미적인 경험을 설계해요
3. 모든 유저의 사용성을 지켜요

1. 다양한 케이스를 패턴화 해요

먼저 그동안 제보 주신 의견들을 수집했고, 컴포넌트를 모아보는 도구를 사용해서 현재 어떻게 사용하셨는지 먼저 분석해 봤어요.

반복해서 사용되는 체크형 아이콘

먼저, 오른쪽 옵션으로 체크 아이콘이 50% 가까이 쓰일 만큼 선택 사항을 표시하는 경우가 많았어요. 기존에는 단순히 우측에 아이콘을 받도록 열어두었는데, 체크 아이콘을 쓰는 경우 한 아이템이 길어지면 다른 아이템의 체크와 내용 사이가 멀어져 인식이 어렵기도 했고요.

→ 따라서 기본형과 아이콘형 외에도 체크형을 추가하고, 체크 아이콘은 왼쪽으로 두어 인지하기 쉬워지도록 가설을 설정할 수 있었어요.

5자 이상의 긴 단어를 쓰는 경우

4자 이하일 것으로 생각한 초반과 다르게, 5자 이상의 긴 단어 비율은 절반 이상이고 7자 이상도 꽤 높았어요. 기존에는 짧은 단어만 쓸 것으로 생각하고 OS의 큰 텍스트 크기를 기준으로 했기 때문에, 너비가 보장되지 않고 있었고 화면과의 위계도 맞지 않았죠.

→ 따라서 충분한 너비를 보장하고 위계에 맞도록 텍스트 크기를 변경하고, 화면 크기별 퍼센트 기준으로 최소/최대 너비를 지정하거나 받을 수 있도록 해두었어요.

메뉴 길이가 제한될 때

각 아이템의 개수는 대부분 3개 이하지만, 7개 이상도 종종 사용되고 있었어요. 그러나 메뉴가 길어지는 경우에 대한 처리가 없었기 때문에 스크롤이 필요해지거나 큰 텍스트로 설정하면, 아래쪽에 더 아이템이 있다고 상상하지 못해 탐색이 어려웠어요. 실제로 시니어 유저에게 VoC*가 들어온 적이 있었어요.

(*) VoC : Voice of Customer, 문의 등 유저가 직접 작성해 보낸 의견을 말해요.

→ 따라서 스크롤이 가능하다는 인지를 추가하여 부정적 경험을 막도록, 메뉴가 길어질 때 위아래에 흐림 효과가 있도록 스펙을 추가했어요.

2. 심미적인 경험을 설계해요

기능적인 측면에서의 개선뿐만 아니라 디자인의 퀄리티 또한 끌어올릴 필요가 있었어요. 기존에는 OS의 기본 모양에서 아주 살짝 바꾼 정도였기 때문에, TDS가 추구하고 보장하는 예쁘고 완성도 높은 디자인으로 다시 개선했어요.

팝업 요소의 무거움 없애기

가볍게 떠 보여야 할 필요가 있는 요소인데, 현재의 모습은 무겁게 뜨고 뒤쪽 화면을 가린다는 문제점이 있었어요. 특히 바텀 시트보다 가볍게 바로 띄울 수 있는 메뉴 자체의 장점을 살릴 필요가 있었죠.

→ 따라서 배경에 블러 효과를 사용해 아주 가벼운 느낌을 냈어요. 화면과의 구분 및 투명한 분위기를 살리기 위해 밝은 외곽선도 살려 유리 같은 느낌을 줄 수 있었어요.

인터랙션의 정성적인 느낌 추가하기

적절한 등장과 퇴장뿐만 아니라 각 아이템의 터치 상호작용 등도 섬세하게 조절했어요.

미리 지정해둔 다양한 수치들을 활용하여 누른 곳에서 인지적으로 자연스럽고 가볍게 뜨도록 투명도와 위치, 속도, 가속도를 지정해요. 더 나아가 위 아래 흐림효과가 등장할 때에도 자연스럽게 나타나게 하는 등 아주 미세한 영역도 조절했어요.

3. 모든 유저의 사용성을 지켜요

마지막으로 접근성까지 챙길 수 있도록 한 번 더 체크해요. 컴포넌트 자체가 더 큰 텍스트 기능과 보이스 오버 등의 기능에 대응하도록 스펙을 설정한다면 사일로에서는 이를 신경 쓰지 않아도 돼요.

텍스트를 키우거나 해상도를 변경한 환경

더 큰 텍스트라고 불리는 기능은 OS의 큰 텍스트나 모든 해상도를 지원하는 것인데, 이를 메뉴 컴포넌트 단에서 자연스럽게 보이도록 조정해요.

→ 원래는 단어 단위로 개행하는데, 텍스트가 커지면서 차지하는 영역을 줄일 수 있도록 글자 단위로 개행하도록 해요. 또한 텍스트만 커지지 않고 아이콘의 크기도 같이 자연스레 커질 수 있도록 위계를 조정했어요.

화면 읽기 기능 대응

또한 화면 읽기 기능을 자연스럽게 할 수 있도록 컴포넌트 자체에 개발상 반영해 두어요. 각 기기에는 시각장애인의 화면 읽기 기능이 탑재되어 있고 보이스오버나 톡백이라고 불려요. 자문으로 도움을 요청하거나 다양한 접근성 UX 가이드라인을 찾아본 뒤 5가지 규칙을 정해 각 플랫폼에 맞게 개발해두어요.

→ 특히 열리거나 닫힐 때의 초점을 지정할 뿐만 아니라 별도의 투명한 닫기 버튼을 만든다거나, 아이콘 요소인 경우 우측 아이콘은 읽지 않기 등 놓치기 쉬운 접근성을 위주로 컴포넌트에서 챙겼죠.

결과

3가지 측면의 개선이 이루어진 메뉴 컴포넌트이 화면에 적용되었고, 약 3~5배 정도 생산성이 향상된 수준으로 제작 속도가 빨라지게 되었어요.

불필요한 커뮤니케이션이 줄었고, 화면의 심미성과 일관성도 지키며 개발까지 완료가 된 컴포넌트를 단지 사용만 하면 되기 때문이었어요. 사일로에서는 더 이상 체크 아이콘의 크기에 대해 시간을 쏟지 않고 빠른 속도를 유지할 수 있게 되었죠.

이 말은 30개의 화면을 만든다고 했을 때

• 제작 시간은 동일한데 30개가 아니라 90개의 화면을 제작 가능해요
• 월요일은 제품을 만들고, 남은 화수목금은 사용자를 만날 수 있어요

반복적이고 지엽적인 작업에서 벗어나 새로운 솔루션과 백 개의 아이디어를 더 검토할 수 있게 되었어요!

이 작업을 마무리하면서 디자인 시스템이 왜 존재해야 하는지, 컴포넌트가 고도화된다면 어디까지 커버할 수 있을지 다시금 느끼게 되었어요. 메이커의 생산성과 최고의 디자인을 만들기 위한 고민은 계속될 예정이에요!

적용해보기

여러분의 제품에는 다음 3가지 상황 중 어떤 것을 적용해 볼 수 있을까요?

1. 다양한 케이스를 패턴화해요
   1. 텍스트가 길어지는 경우나 폴드폰에서는 어떻게 대응하고 있나요? 일반적으로 max나 min width, height를 지정할 수 있어요.
   2. 무언가 위로 뜨는 요소를 사용하고 있나요? 메뉴뿐만 아니라 다이얼로그, 토스트, 바텀시트 등으로 대체 할 수도 있어요.
2. 심미적인 경험을 설계해요
   1. 터치하는 경우에 인터랙션을 어떻게 대응하고 있나요? 배경이 한 단계 진해진다거나 진동이 울리는 방법이 있어요.
   2. 다크모드에서는 어떻게 대응하고 있나요? 다크모드용 색상 팔레트를 만들어 1:1로 자동 대응할 수 있어요.
3. 모든 유저의 사용성을 지켜요
   1. 더 큰 텍스트 모드에서는 어떻게 보이고 있나요? 텍스트가 커질 수 있도록 개발에서 고정값이 아닌 단위로 부탁할 수 있어요.
   2. 이미지가 있다면 대체 텍스트를 설정했나요? 아이콘 버튼의 경우 필수적인데, 모양을 설명하기보다는 기능을 설명하면 좋아요.