iOS HIG - toast

2022년 10월 4일 • ☕️ 5 min read

아이폰을 사용하다 보면 위와 같은 토스트를 종종 볼 수 있다. 에어팟이 연결되거나 에어태그를 발견하거나 혹은 노트에서 복사한 텍스트가 사파리에 붙여넣을 때 등 여러 곳에서 토스트 메시지는 발견되지만 애플에서는 해당 기능을 제공하지 않는다. (documentation에 존재하지 않는다.) HIG 또한 어디에서도 토스트에 관한 내용을 찾아볼 수 없다. 왜 애플에서 토스트 기능을 제공하지 않는 것일까?

Toast

토스트는 짧은 순간에 나타났다 사라지는 일종의 알림 컴포넌트이다. 토스트 메시지는 주로 오류메시지나 현재 상태 변화를 나타내는 메시지를 표시한다. 메시지에 필요한 공간만 차지하며 진행 중인 활동은 그대로 표시되고 유저와의 상호작용도 유지된다. 유저가 행한 작업에 대한 결과와 오류 메시지를 통해 성공여부와 실패했다면 왜 오류가 났는지 해결방법은 무엇인지에 대한 내용을 전달하므로 HIG 문서에서 Feedback 패턴의 일종이라고 할 수 있다.

HIG - Feeback에 대한 정리 보러가기

왜 Toast는 HIG가 아닐까?

토스트 메시지와 비슷한 HIG 중 하나는 Alert이다. Alert는 유저에게 중요한 정보를 바로 알려주기 위한 컴포넌트이다. 유저가 데이터를 지우거나 상품을 구매하는 등 중요한 행동을 할 때 유저에게 한 번 더 고려해볼 수 있는 기회를 준다. 즉, 유저에게 정보를 알려준다는 점에서 토스트와 비슷하다. 예를 들어, 유저가 행한 작업에 대해 경고를 주거나 작업이 성공 혹은 실패했다는 메시지를 표시한다. 또한 토스트와 마찬가지로 상태 변경에 대한 정보를 전달하기 위해서도 사용한다. 하지만 분명히 차이점도 있다. 만일 유저에게 표시할 메시지가 너무 많은 내용이 담겨있다면 토스트는 5초 내외로 사라지는 컴포넌트이기 때문에 Alert가 적합할 것이다. 또한, Alert는 유저가 만난 상황이 오류라면, 해당 오류를 해결할 수 있게 바로 유도할 수 있는 버튼이 있다.

토스트에도 버튼을 넣을 수 있지만 해당 버튼이 무슨 일을 하는지 3~5초 사이 짧은 순간에 인지해야하기 때문에 좋은 유저경험이 아니다.

토스트메시지가 주는 장점도 확실하다. Alert는 유저가 경험중인 context를 벗어나게 만든다. 하지만, 토스트는 순간 나타났다 사라지기 때문에 context를 벗어나게 하지는 않는다. 토스트와 alert는 장단점이 확실하여 쓰임이 분명한 컴포넌트들이다.

헌데 왜 Toast는 HIG에 없을까?

그 이유를 필자는 유저가 보고 있는 화면의 일부를 가리면서 나타나기 때문이라고 생각한다. 애플은 유저 경험을 가장 중요시한다. 토스트메시지를 통해 유저에게 정보를 알려주는 것보다 유저가 보는 화면을 가리는 행위가 유저경험을 더욱 해친다고 판단했다고 생각한다. 그 근거로 에어팟에 연결되거나 에어태그를 발견하는 등의 상황에서는 토스트 메시지를 보여준다. 이 상황은 대부분 유저가 무엇인가를 하는 상황과 관련된 내용의 토스트 메시지가 아닌 대부분 백그라운드에서 자동으로 무엇인가가 이루어졌을 때 알려주는 토스트 메시지이다. 즉, 유저가 경험중인 context는 해치지 않고 그 외의 상황을 토스트 메시지로 알려주고 있다.

안드로이드의 Toast를 살펴보자.
안드로이드에선 자체적으로 toast 기능을 제공한다. Developer 문서에서 “토스트란 유저에게 작은 팝업으로 작업에 대한 피드백을 제공한다”고 한다. 하지만 해당 문서에서도 토스트 메시지 대신 스낵바를 선호한다고 한다. 스낵바에는 유저가 실행할 수 있는 옵션이 포함되어 있어 유저에게 더 나은 경험을 제공할 수 있기 때문이다.

그럼에도 불구하고 Toast를 사용하면 좋은 상황

필자는 유저의 context와 관련된 내용을 토스트 메시지로 띄우면 유저 경험을 해친다고 생각하여 애플이 토스트를 HIG에서 배제했다고 생각했다. 그렇기에 유저가 경험 중인 context와 전혀 무관한 상황에 토스트 메시지를 사용하는 것이라 했지만 그럼에도 불구하고 토스트메시지를 사용하면 좋은 상황이 몇가지 있다고 생각한다.

☠️ 오류메시지

iOS에서 오류메시지를 알려주는 상황은 2가지가 있다. 첫 번째는 비밀번호가 틀렸을 경우 textField 아래에 비밀번호가 invalid하지 않은 오류메시지를 표시하는 방법처럼 UI에 녹이는 방식이 있다. 다른 방식은, Alert를 사용하는 것이다. 유저가 행한 작업에 오류가 있을 경우 Alert에 띄워지는 버튼 혹은 메시지, 이미지 등을 읽은 후 오류를 처리할 수 있도록 하는 방법이다.

하지만 어떤 경우엔 위 두가지 방식이 적합하지 않다.

유저 닉네임, 카드 정보 등 많은 정보를 등록하는 화면과 같이 복잡하게 구성된 화면에서 오류메시지를 UI에 녹여낼 수는 없다. 또한 “없는 카드 정보예요. 확인 부탁드려요.”와 같이 간단한 문구는 토스트 메시지로 유저에게 오류 정보를 빠르게 전달할 수 있다. 서비스가 복잡해질수록 토스트메시지는 개발적으로도, 디자인적으로도 경제적이며 사용자 입장에서도 화면 전환에 따른 피로도가 적다. 반면 Alert를 사용한다면 서비스가 더욱 복잡해보일 수 있다. (경우에 따라서 화면 전환같아 보이기도 한다.)

토스트 메시지는 수동성이 매우 낮은 ui이기 떄문에 매우 중요한 정보는 토스트 메시지로 경고하면 안된다. 텍스트를 작성중에 실수로 뒤로가기 버튼을 눌렀다면, 유저에게 취소할 기회를 주어야하기 때문에 “삭제중입니다” “삭제했습니다”라는 토스트 메시지가 나온다면 최악의 상황이 될 지 모른다.

♻️ 자동 상태 변경

블루투스가 연결되었을 때나, 아이폰이 수면모드로 들어갔을 떄 등 자동으로 상태가 변경되는 경우가 있다. 유저에게 상태가 변경이 되었다는 정보를 전달해야 하지만 갑자기 context를 해친다면 문제가 있다. 이런 경우엔 토스트 메시지가 적합하다.

마무리

이 글은 iOS에서 토스트의 best practice는 무엇일까에 대한 고민이다. 토스트는 HIG에 작성되어 있진 않지만 더 좋은 유저경험을 만드는 좋은 컴포넌트임이 틀림없다. 특히 오류메시지를 표시할 경우엔 절대 무시할 수 없는 컴포넌트이다. 많은 훌륭한 개발자들이 swift로 toast메시지를 라이브러리로 만들어 놓았다. 그 중 몇가지 라이브러리를 적어둔다. 더 나은 UX를 위한 고민은 애플이 왜 이렇게 만들었을까라는 항상 생각에서 나오고 더 고민하며 결론을 내리는 것은 언제나 즐거운 경험이다.

iOS 플랫폼에서 더 좋은 UX를 위해 더욱 고민하고 공부하자.

Toast Library

토스에서 소개한 좋은 오류메시지를 만드는 방법 6가지

최고의 에러는 발생하지 않는 것
적절한 컴포넌트 쓰기
스스로 해결할 수 있는 방법 알려주기
사용자 입장에서 이해할 수 있는 언어로 쓰기
쉽게 해결할 수 있게 도와주기
부정적인 감정 최소화하기