“알 수 없는 오류가 발생했습니다.”
“기획님, 사용자가 A 필드 입력 안하고 확인 버튼 눌렀을 때 보여줄 에러 메시지 써주세요.”
개발자로부터 에러메시지를 써 달라는 미션이 도착했다.
이제 나, 쪼렙기획자는 알아서 잘 딱 깔끔하고 센스 있는 에러 메시지를 써서 멋지게 전송하면 된다.
그런데…
겨우 한 두 문장 쓰는 건데도 몇 번을 지웠다 썼다…를 반복한다.
‘에러니까…죄송합니다로 시작하는 게 좋나?’
‘살짝의 위트를 가미해서 쓰는 게 센스 있는 걸까?’
‘해요체로 써야 하나 합니다체로 써야 하나?;;’
시간은 째깍 째깍 흘러가고, 쪼렙 기획자의 심장도 같이 조바심에 절여진다.
등줄기엔 약간의 식은땀도 흐르기 시작한다.
그래서 공부했다.
개발자의 에러 메시지 미션을 완벽하게 수행할 수 있도록 에러 메시지를 쓰는 방법을!!!
에러 메시지란
서비스에서 예측하지 못한 조건이 일어날 때 보여 주는 메시지를 뜻한다. 즉, 에러가 날 때 보여주는 메시지이다.
‘최고의 에러 메시지는 절대 보이지 않는 것’이라는 말이 있을 정도로, 에러 메시지는 사용자가 원하는 게 의도대로 흘러가지 않을 때 나타난다.
인라인(in-line)으로 보여주는 에러 메시지도 있고, 팝업(pop-up)으로 띄워주는 에러 메시지도 있다.
해당 위치에 띄울 수 있다면 간단하게 인라인을, 전체적으로 밸리데이션 체크 후 띄운다면 팝업을 주로 쓴다.
에러 메시지의 목표
에러 메시지를 쓰기 전에 에러 메시지가 이루고자 하는 것을 먼저 생각해보자.
1. 문제가 있다는 것과 그 문제가 무엇인지 간단하고 명확하게 설명해야 한다.
2. 사용자가 중단됐던 곳으로 되돌아가 프로세스를 바로 끝낼 수 있는 해결책을 제시해야 한다.
3. 지연되는 현재 상황을 가능한 한 즐거운 경험으로 바꿔야 한다. (마이크로카피, 136쪽)
요점은 지금 이 에러가 뜬 이유와, 사용자가 할 수 있는 해결책, 그리고 기분 상하게 하지 않게 말하기이다.
에러 메시지 쓰는 방법
1. 에러가 난 원인을 명확하게 알려주자.
사용자가 가이드와 다르게 입력 했든, 서비스에서 데이터 불러오기를 실패했든 어찌 됐든 이 에러가 발생한 이유는 존재한다.
그 이유들을 무조건 ‘알 수 없는 오류’, ‘예기치 못한 오류’라고 표현하면 사용자는 ‘아니 내가 뭘 잘못해서 오류가 난 거야 아니면 서비스 장애인 거야?’라고 당황하고, 고민한다.
중복된 아이디가 있는 건지, 비밀번호가 틀린 건지, 필수 입력 항목을 입력하지 않은 건지 등 정확한 에러 원인을 설명해주자.
대신증권 가입 중 본인인증을 위해 타 은행 계좌를 입력하다가, 이 에러 메시지를 보고 당황했다.
나는 분명 정확하게 썼는데, 왜 에러가 뜨는지 이유도 설명해주지 않고 ‘개설점에 문의 바람’이라고만 한다.
계좌번호가 틀린 건지 해당 은행 점검 시간인지 아무것도 에러 원인을 알 수 있는 정보가 없다.
“입력해주신 계좌의 명의가 본인이 아닙니다. 계좌번호를 다시 확인해주세요.”라고 원인을 알려줬으면 더 좋았을 것이다. (결국 끝까지 원인을 몰라서, 다른 은행으로 인증을 했다.)
2. 사용자에게 해결 방안을 제시해주자.
제일 중요하다고 생각하는 부분이다. (별 다섯개 ☆☆☆☆☆!)
예를 들어 밤 12시에 은행 어플에서 돈을 송금하려고 보니, 은행 서버 점검 시간이라 에러메시지가 떴다고 가정해보자.
“서버 점검으로 인해 송금이 불가능합니다.”
‘오케이. 서버 점검 시간 때문에 송금 못하는 건 알겠어. 그런데 그래서 뭐? 내가 어떻게 해야 하는 건데?’
사용자의 미션을 클리어할 수 있는 해결책을 줘야 한다. 에러 메시지의 목적은 에러창 닫기가 아니라, 사용자가 원래 하고자 했던 미션을 달성하게 하기이기 때문이다.
그래서 위 에러 메시지를 이렇게 쓰면 더 명확하고 좋았을 것이다.
“서버 점검으로 인해 송금이 불가능합니다. 00시 30분 이후에 다시 시도해주세요.”
비록 지금 미션에는 실패했지만, 00시 30분이 지나서 다시 시도하면 되는 것이다.
에러 메시지의 찐-목적 달성!
추가로 지그재그의 에러메시지를 가져왔다.
쿠폰을 등록할 때 유효하지 않은 쿠폰코드를 입력한 후, 등록 버튼을 누를 때 이런 에러 팝업이 뜬다.
- 에러의 원인 : 유효하지 않은 쿠폰
- 에러 해결방법 : 쿠폰코드를 다시 한 번 확인해라
사용자는 자신이 입력한 쿠폰코드를 다시 확인해서 올바른 코드를 입력하면 된다.
원인과 해결방안을 제시해준 Good Case!
그런데 솔직히 정말 나도 모르고 집나간 며느리도 모르고 아무도 모르는 오류가 발생할 수 있다… (인생사 어떻게 100% 확신할 수가 있겠는가…) ‘알 수 없는 오류’ 이게 찐 트루 팩트일 수도 있는 거다.
그럴 땐 서비스에서 원인을 파악하고 해결해야 하기 때문에,
‘고객 센터(02-000-0000)로 연락 부탁 드립니다.’
‘현재 서비스에서 대응 중이니, HH:MM 이후에 다시 시도해주세요.’
이런 문장을 덧붙여주는 것도 방법이다.
3. 짧게 쓰자.
글이 길어질 수록, 사용자가 흡수하는 정보의 양은 줄어들기 마련이다. 최대한 정리된 깔끔한 문장으로 쓰자.
경험상 정말 길어질 이유가 있는 케이스를 제외하고는, 한두 문장이면 충분하다.
한 문장으로도 충분히 사용자의 다음 액션을 가이드해줄 수 있다.
‘선택된 상품이 없습니다. 상품을 먼저 골라주세요.’ 라고 좀 더 부드럽게 얘기해볼 수도 있을 것 같다.
4. 기술 용어, 개발 용어를 노출하지 말자.
서버에서 내려주는 에러 코드를 그대로 노출하는 경우가 있는데, 사용자 입장에선 ‘이게 뭐지?’ 당황스러울 뿐이다.
에러 코드가 있어서 도움 되는 경우를 제외하고는 내부 개발 용어는 최대한 노출하지 말자. 서비스 뒤에 있을 내용은 서비스 뒤에만 놔두고, 불필요한 사용자 혼란을 야기하지 말자.
위 토스의 에러메시지를 보면 쿼리를 제대로 실행하지 못한 것 같은데, 사용자가 보기엔 알 수 없는 내용들이 그대로 에러메시지에 노출되고 있다.
왜 에러가 뜬 건지 그래서 이 에러를 해결하려면 어떻게 해야 하는지 전혀 알 수 없다.
5. 사용자를 탓하지 말자.
위에서 얘기했듯이, 이미 이 에러 메시지가 뜨는 상황은 사용자가 바랐던 상황이 아니다.
이미 약간의 낙담과 실망을 한 사용자에게 ‘너가 잘못입력했자나!!’라고 굳이 말할 필요는 없다.
이 에러를 무사히 넘기고 원하던 대로 서비스를 이용하게 도와주는 것이 바로 에러메시지의 역할이다. 사용자를 탓하지 말고, 해결책을 제안해주는 방향의 에러 메시지를 작성하자.
배달의 민족에서 이미 A 가게의 메뉴를 장바구니에 담은 뒤, B 가게의 메뉴를 장바구니에 담으려고 하면 뜨는 에러메시지이다.
“이미 장바구니에 담은 메뉴가 있습니다. 이전 메뉴를 지우고 담아주세요.” 가 약간은 사용자 탓을 하는 것 같다면,(사실 이것도 탓하는 정도는 아닌 것 같지만…)
“장바구니에는 같은 가게의 메뉴만 담을 수 있습니다.”로 객관적인 정책을 설명해주면 사용자가 잘못한 느낌을 덜어줄 수 있다.
6. 부정적인 단어는 피하자.
위 5번의 내용과 비슷한 맥락이다.
‘에러 메시지니까 안된다고 말하는 게 당연한 거 아니야?’라고 생각할 수 있다.
그치만 아 다르고 어 다르듯이, 똑같이 안된다고 설명하는 문장이어도 어떤 단어를 쓰냐에 따라 느껴지는 감정이 다를 수 있다.
최대한 긍정적인 단어로 현 상황을 설명하자.
내가 구매하지 않은 상품의, ‘리뷰 작성하기’ 버튼을 떴더니 뜨는 메시지이다.
“구매하지 않은 상품에는 리뷰는 쓸 수 없습니다.” 라고 표현할 수도 있었겠지만,
“상품평은 상품 구매 후 배송 완료 또는 쿠폰 사용 후에 작성할 수 있습니다.” 로 표현함으로써 리뷰 작성 가능한 상태를 알려주고, 부정적인 표현은 사용하지 않았다.
아래 세 가지 유의 사항은 실무에서 느낀 점을 적어보았다.
7. 유머, 잘 모르겠다면 하지 말자.
솔직히 말한다. 나도 욕심냈다.
위트있고 유머러스한 에러메시지로 낙담한 사용자에게 웃음을 불어넣어주고 싶었다.
나도! 센스 있는! 기획자가 되고 싶었다!
그치만… 유머는 자신이 없다면 하지 말자.
이미 부정적인 경험을 한 사용자에게 쉽게 던지는 농담은 오히려 더 부정적인 감정을 줄 수 있다.
상대방의 기분이 나쁘지 않고, 오히려 풀어주는 유머를 잘 구사하는 분이라면…하자! 그리고 부럽다!
카카오톡에서 ‘친구 추가’를 해 놓고 본인의 정보를 입력하면 뜨는 에러메시지다.
개인적으로 이 메시지가 너무 센스 있고 좋다고 생각했는데, 바로 옆에 앉아있던 친구는 “음…읭스러운데?”라고 했다.
유머는 이렇게 사람마다 다르게 받아들일 수 있으니, 자신이 없다면 자제하는 것도 방법이다. (그치만 난 저 메시지가 정말 좋다!)
8. 죄송합니다. 사과는 해야 할 때만 하자.
일상생활에서 워낙 죄송합니다를 달고 다니는 나는, 사용자가 이 에러메시지를 보게 한 게 미안하여 서비스에서도 사과할 뻔 했다.
그러나 정말 서버가 터졌거나, 찐- 장애거나 등의 오류 상황이 아닌 ‘상품이 품절되었습니다.’ 등의 케이스라면 굳이 죄송하다는 문장으로 시작할 필요는 없다.
사용자는 이 에러가 뜬 이유와 해결책이 궁금한 거지 지금 사과를 받고 싶은 상황은 아니기 때문이다.
사과보다는, 에러의 원인과 해결방안을 설명해주는 게 사용자가 더 환영하는 정보이다. (물론…정말 잘못한거면…해야되겠지만…)
9. 서비스에 맞는 문체를 사용하자.
제일 고민했고 어려운 부분이다. 서비스마다 가지는 분위기가 있고 대표하는 이미지가 있다. 에러메시지도 결국 그 이미지를 따라간다고 생각한다.
예를 들어, 유머 있는 이미지인 배달의 민족에서
“주소지를 입력해주세요! 맛있는 음식이 배달 갈 곳은 어딘가요?”
라고 하면 배달의 민족 서비스와 잘 어울리는 문체지만, 주식을 사고파는 서비스에서
“살만큼의 수량을 입력해주세요~ 얼만큼 사실 거에요?”라고 하면
이 돈이 걸린 절체절명의 순간에 이런 귀여운 문장은…무언가 신뢰성을 떨어트리는 것만 같다.
서비스의 성격이나 이미지에 어울리는 에러 메시지로 서비스 톤을 유지하자.
한 두 문장의 에러 메시지를 쓰기 위해 알아야 하는 내용을 백 줄도 넘게 쓴 것 같다.
하지만 위 9가지 내용을 지킨 에러메시지라면, 이미 당황한 사용자를 더 화나게 하진 않을 것이다.
물론 최고의 에러 메시지는 뜨지 않는 에러 메시지임을 다시 한 번 생각하며, 오늘의 공부를 마친다.
쪼렙 기획자들 화이팅!
- reference
https://uxwritinghub.com/error-message-examples/
https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
https://www.jiwon.me/tossbank-error-message/
http://icunow.co.kr/errormessage/
https://book.naver.com/bookdb/book_detail.nhn?bid=17360371
쪼렙 서비스 기획자님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
