조용한 피드백, 토스트 알림.

예전에 만든 폼에서 문의가 자꾸 두 건씩 들어온 적이 있습니다. 원인을 보니 단순했어요. 제출을 눌러도 화면에 아무 변화가 없으니, 사람들이 ‘안 됐나?’ 하고 한 번 더 누른 거죠. 그날 화면 구석에 ‘접수됐어요’ 한 줄을 띄웠더니 중복이 사라졌습니다. 저는 그 한 줄을 다듬는 사람입니다. 화면을 가리지 않고, 딱 필요한 만큼만 말하는 한 줄.

그래서, 직접 눌러보세요

설명보다 빠릅니다. 아래 버튼을 눌러보세요. 화면을 막지 않고, 결과만 살짝 떴다가 사라집니다. ‘오류 내보기’도 눌러서 톤이 어떻게 달라지는지 보세요.

토스트, 모달, 인라인 — 셋은 일이 다릅니다

같은 ‘알림’ 같지만 역할이 다릅니다. 토스트는 작업이 끝난 뒤 ‘됐다/실패했다’를 화면을 막지 않고 잠깐 알립니다. 모달은 사용자를 멈춰 세워 ‘정말 삭제할까요?’처럼 선택을 받아낼 때만 씁니다. 인라인은 입력칸 바로 옆에 ‘이메일 형식이 아니에요’처럼 그 자리에서 고칠 정보를 붙입니다. 헷갈리면 이렇게 묻습니다. 사용자를 멈춰야 하나? → 모달. 그 자리에서 고쳐야 하나? → 인라인. 그냥 알려만 주면 되나? → 토스트.

성공 문구와 오류 문구는 톤이 다릅니다

성공은 짧게 결과만 말합니다. ‘저장됐어요’, ‘접수됐어요’. 군말이 길면 오히려 의심이 듭니다. 오류는 두 가지를 같이 적습니다. 무엇이 잘못됐는지와 다음에 뭘 하면 되는지. 위 위젯의 ‘문제가 발생했어요. 다시 시도해 주세요.’가 그 형태입니다. ‘오류 발생’ 한 마디만 띄우면 사용자는 화는 나는데 할 일을 모릅니다.

토스트 한 줄을 쓸 때 저는 늘 이 기준을 먼저 떠올립니다.

좋은 토스트는 화면을 가리지 않으면서, ‘됐다’ 한 마디로 사용자를 안심시킵니다.

같은 ‘실패했다’도, 화만 돋우는 알림이냐 다음 손짓을 알려주는 알림이냐로 갈립니다. 제가 오류 토스트를 다듬는 방향은 이렇습니다.

왼쪽은 잠깐 떴다 사라지면 사용자에게 분노만 남깁니다. 오른쪽은 무엇이 실패했고 다음에 뭘 누르면 되는지를 알려, 사라진 뒤에도 손이 움직일 길을 남깁니다.

몇 초 동안 보여줘야 할까요?

성공 메시지는 3~4초면 대개 읽힙니다. 글이 길거나, 오류처럼 사용자가 행동해야 하는 메시지는 더 오래 두거나 사용자가 닫기 전까지 유지합니다. 핵심은 ‘읽을 시간’을 주는 것이고, 마우스를 올렸을 때 타이머를 멈추면 천천히 읽으려는 사람을 배려할 수 있습니다. 너무 빨리 사라지는 토스트는 없는 것과 비슷합니다.

화면을 못 보는 사용자에게도 들려야 합니다

토스트는 시각적인 알림이라, 그냥 화면에 띄우면 스크린리더 사용자에게는 존재하지 않는 것과 같습니다. 그래서 토스트가 뜨는 영역에 aria-live를 답니다. 일반 알림은 aria-live="polite"로 지금 읽던 걸 끊지 않게, 오류처럼 즉시 알려야 하는 건 assertive로 바로 읽게 합니다. 멋보다 먼저 챙기는 기본입니다.

가장 중요한 건, 토스트로만 끝내지 않는 것입니다

토스트는 잠깐 떴다 사라집니다. 그래서 결제 실패나 제출 오류처럼 꼭 봐야 하는 내용을 토스트로만 띄우면, 자리를 비웠거나 다른 곳을 보던 사용자는 영영 놓칩니다. 그런 메시지는 페이지 안에 인라인으로 남겨 두고, 토스트는 ‘거들어 주는’ 역할로 씁니다. 사라져도 괜찮은 정보만 토스트에 맡기는 거죠.

한 줄을 이렇게 다루는 사람이, 사이트 전체의 말투를 만듭니다

토스트 한 줄은 사용자가 ‘됐다’고 안심하는 거의 유일한 순간입니다. 그 한 줄을 진지하게 다루는 사람이라면, 버튼 글자도 폼 안내도 같은 태도로 다듬습니다. Findable에서는 이런 마이크로카피가 기본값입니다. 당신의 사이트, 어떤 말로 사용자를 안심시킬까요?