서비스기획/ 모달 VS 토스트 사용법
우리는 어떤 걸 어떻게 잘 보여줄 수 있을까요?
다양한 앱 서비스를 이용하면
우리는 이렇게 화면에 톡! 튀어나오는 토스트 메시지를 쉽게 접할 수 있다.
당근 마켓 동네 변경 시 다음과 같이 토스트가 노출된다.
마치 토스트기에서 빵이 '슝'하고 나오는 모습과 동일해 토스트 혹은 스낵바라고 부르는 메시지 전달 UI 중 하나다. (토스트는 이해가 되었는데 스낵바 이름 유래가 궁금해 찾아봤는데 '스낵 = 빠르게 먹는 음식'에서 시작해 빠르게 전달되는 메시지 라는 의미로 시작된 것 같다.)
토스트와 가장 비슷하게 메시지를 전달하는 UI 모달. 주로 특정 버튼을 클릭했을 때 네모 박스 형식으로 딱! 나타나 메시지를 전달하는 형식으로 이전 윈도우 사용 시절, 웹서핑 시절 팝업창을 허용하겠어요? 같이 화면을 보고 있거나 접속하자마자 새로운 창으로 오픈하여 특정 정보를 전달할 때 사용하곤 했다.
서비스를 기획할때 어떤 메시지를 토스트를 사용해야 할지, 모달을 사용해야 할지가 늘 고민이다! 현재 담당하는 서비스 내에 노출되고 있는 모달들을 토스트로 변경하는 작업 하면서 고민했던 부분들을 여러 가지 레퍼런스를 통해 어떻게 사용하는지 살펴보고자 한다.
더 다양한 관점 분석을 위해 국외 서비스도 같이 볼까 싶었는데 영문 > 한글 번역 투라 주로 담고 있는 문장들이 짧아 디테일하게 파악하기를 어려울 것 같아 국내만 우선적으로 살펴보았다.
토스의 모달 / 토스트 사용 예시Q. 오류 메시지도 토스트로 처리 할까요?
오류 메시지는 유저에게 정확한 액션 성공을 위해 안내 메시지를 유저가 똑바로 전달되어야 하는데 과연 토스트로 노출하는 게 맞을까?라는 고민이 있었다. 예상과 다르게 요즘 서비스 내에서는 모달을 찾기 힘들었고 최근 핫했던 쓰레드를 보아도 대부분 토스트를 사용하는 케이스가 많았다. (스포티파이, 유튜브, 당근마켓, 배달의 민족)
모달은 유저가 직접 창을끄기 전까지는 메시지가 노출된다.모달이 가지고 있는 큰 성격 중 하나는 메시지 전달력이 다른 방식보다 강요적이다. 유저가 특정 상황을 만났을 때 메시지가 노출되고 닫기 / 확인 / 이동 같은 CTA 버튼을 유저가 클릭해야 메시지 창을 종료할 수 있어 메시지를 확인하게 된다. 반면 토스트는 안드로이드 개발 가이드 설명처럼 " A toast is a view containing a quick little message for the user. " 메시지가 짧고 빠르게 전달되어 모달보다는 메시지를 읽을 가능성이 낮지만 사용자가 버튼을 누르지 않아도 되니 방해받는 정도가 약해 요즘의 서비스는 토스트를 선호하는 것으로 보인다.
비마트 토스트 UI우선 비마트 사례를 찾아보면 에러 & 경고성 메시지 또한 길이와 상관없이 토스트를 사용하고 있다. 다만, 메시지 전달력을 높이기 위해 화면 중앙에 노출하여 토스트의 단점을 최소화하는 점을 발견할 수 있었다.
토스 토스트 UI토스는 경고/에러 메시지 역시 모달이 아닌 토스트로 노출하고 있었다.
토스트 내 메시지 성격에 구별 없이 일관된 UI로 노출시키고 있는 비마트 사례와 다르게 토스는 성공/에러 메시지 2가지 성격으로 분리하여 다른 UI를 사용하고 있다. UI를 통해 해당 메시지가 유저가 원했던 결과(성공) 인지 문제가 발생했는지 직관적으로 보여주어 토스트가 가지고 있는 단점을 어느 정도 보완해주고 있다.
또한 토스 같은 경우는 비마트와 다르게 하단에 위치하였지만, 토스트 크기 / 글자 크기가 보다 커 메시지 가독성이 더 높고 토스의 심플한 UI 때문에 토스트 메시지가 화면 내에 위치해도 뒷 배경에 묻혀 보이는 효과가 덜하다 생각된다. 또한 토스트 메시지 노출 애니메이션을 하단에서 노출 시간을 0.5초 정도 길게 세팅하여 유저가 메시지를 놓칠 가능성을 낮게 한다.
레퍼런스를 찾아보면서 토스가 확실히 원칙에 따라 토스트 메시지를 보내고 있다는 느낌을 많이 받아 읽어보길 권장한다 :)
좋은 에러 메시지를 만드는 6가지 원칙
https://toss.tech/article/how-to-write-error-message
두 가지 레퍼런스를 확인해 보았을 때 경고성 메시지 또한 토스트로 사용하는데 무리가 없으며 토스트가 가지고 있는 메시지 전달 방식의 단점을 최소화할 수 있는 방법을 덧붙였다.
Q. 그럼 어떨 때 모달을 사용할까요?
흥미롭게 지그재그 사례를 확인했을 때, 모달 사용에 대한 공통된 상황을 찾기 다소 어려웠다.
왼 - 쿠폰 받기 성공 시 토스트 , 오- 쿠폰 등록 실패 시 바텀 슬라이드비슷한 쿠폰 받기 액션이었지만 쿠폰 다운로드 성공(완료) 시에는 왼쪽과 같은 토스트 형식, 유효하지 않은 쿠폰 번호로 쿠폰 다운로드 실패 시에는 오른쪽과 같이 바텀 슬라이드모달 형식으로 안내 문구가 제공되고 있다.
왼쪽 쿠폰팩 받기 선택 후 성공 시 오른쪽 모달이 노출된다.또한 기획전 > 쿠폰 상세 정보를 제공하지 않고 쿠폰팩이라는 일괄된 쿠폰팩 발급 시에는 오른쪽과 같이 "쿠폰팩이 발급되었습니다." 설명이 담긴 모달을 제공하며 어디서 확인할 수 있을지, 쿠폰 다운로드 오류 케이스 안내 문구까지 적극적인 친절하게 설명해주고 있다.
왼 - 쿠폰 받기 성공 시 토스트 , 오- 왼쪽과 다른 경로에서 쿠폰 다운 받을시 모달 노출비슷한 정보 메시지라도 왼쪽과 같이 쿠폰 상세 내역이 보이는 화면에서는 토스트, 종합적인 쿠폰팩 발급 시에는 모달을 노출하여 보다 상세한 내용을 보여주고 있다. 개인적으로 왜 이렇게 노출 처리를 다른 방식으로 하게 되었지 추측해 보면 서비스 내 1. 안내 문구 노출 방식에 대한 정확한 규칙이 없거나 2. 오류 메시지 전달 정도에 따라 노출 방식을 다르게 설정하지 않았을까 생각된다.
당근 마켓 사례를 보면 특정 규칙에 따라 메시지전달 방식을 3가지로 하고 있다. 취소 / 유도 액션 CTA가 담긴 방식을 제외하고는 대부분 토스트를 사용 중이다.
1. 단순 메시지 전달 토스트
당근마켓 토스트 UI현재 유저가 상태가 변경되었을 때는 토스트 방식으로 단순 메시지 전달하고 있다.
2. 메시지 전달 + 이동경로 제공 토스트
당근마켓 토스트 UI쿠폰 다운로드 성공 시 상태/ 상황에 대한 메시지를 메인 목적으로 전달하고 그 행동에 대한 내용을 상세적으로 확인할 수 있도록 서브 목적으로 이동경로를 제공하고 있다. 모달 토스트 내 이동경로 여부는 동일한 프로덕트 내 사용 중인 모달과 비교해 보면 조금 더 정확하게 파악할 수 있다.
왼쪽 - 당근마켓 토스트, 오른쪽 - 당근마켓 모달 UI위 설명처럼 왼쪽 안내 메시지 + 이동 경로 토스트는
특정 액션 시도 > 완료 > 상태 변경 > 메시지 전달 (메인 목적), 이동 경로 - 메시지 내 담긴 내용 상세 정보 확인 할 수 있는 페이지 (서브 목적)을 전달할 때 사용되며
오른쪽 투버튼 모달 형식은
특정 액션 시도 > 특정 액션을 성공하기 위한 최종 확인 메시지 전달
메인 버튼 > 액션 적용 ( 메인 유도 행동) 서브 버튼 > 액션 적용 포기 (취소, 닫기)와 같은 옵션을 제공할 때 사용되는 규칙을 발견할 수 있었다.
결론적으로.....
토스의 메시지처럼 "에러 메시지"를 노출하는 것보다 유저에게 노출되는 "에러 메시지"를 최소화하는 게 가장 중요하다. 하지만 에러 메시지는 불가피한 만큼 어떻게 그리고 잘 보여주는 게 두 번째로 중요하다.
꼭 이런 상황에는 "모달 대신 토스트를 써야 해!" "문장이 이렇게 긴데 토스트는 안돼"와 같이 토스트 사용 방식에 따른 정확한 법은 없다. 하지만 각각 프로덕트 별로 일정한 패턴에 따라 토스트 / 모달을 규칙적으로 사용할 때 유저에게 아무리 긴 문장이라도, 짧게 스쳐가는 메시지라도 일괄된 메시지를 전달할 수 있으며, 사용자의 흐름 속에 자연스롭게 녹아질 수 있다 생각한다. 또한 명확한 UX Writing, 직관적인 UI 디자인을 통해 토스트가 가지고 있는 한계는 최소화하여 유저의 원활한 탐색을 도와주는 장치가 될 수 있다. 결론은 토스트를 적극적으로 활용하고, 꼭 특정한 규칙을 만들어 사용하자!
