좋은 에러 메시지의 3요소: 무엇이, 왜, 어떻게좋은 에러 메시지의 3요소: 무엇이, 왜, 어떻게

"오류가 발생했습니다." 이 한 문장은 사용자에게 아무것도 알려주지 않으면서 불안만 줍니다. 에러는 제품이 사용자와 나누는 가장 예민한 대화입니다. 잘 쓰인 에러 메시지는 세 가지 질문에 답합니다. 무슨 일이 일어났는가, 왜 일어났는가, 이제 어떻게 하면 되는가.

3요소를 갖춘 메시지의 구조

나쁜 예: "업로드 실패." 좋은 예: "파일이 업로드되지 않았어요(무엇). 20MB를 초과하는 파일은 올릴 수 없습니다(왜). 파일을 압축하거나 더 작은 파일을 선택해 주세요(어떻게)." 세 요소 중 가장 자주 빠지는 것이 '어떻게'입니다. 해결책 없는 에러 메시지는 사용자를 막다른 길에 세워 두는 것과 같습니다. 재시도 버튼, 대안 경로, 문의 링크 등 다음 행동을 반드시 함께 제시하세요.

톤: 책임은 시스템이, 해결은 함께

"잘못된 비밀번호를 입력하셨습니다"처럼 사용자를 주어로 한 문장은 비난처럼 읽힙니다. "비밀번호가 일치하지 않아요"처럼 상황을 서술하는 쪽이 부드럽습니다. 기술 용어(Error 500, NullPointerException)는 로그에만 남기고 사용자에게는 사람의 언어로 번역해 주세요. 다만 지나친 익살("앗! 뭔가 단단히 꼬였어요 🙈")은 결제 실패처럼 심각한 맥락에서 오히려 신뢰를 깎습니다. 유머의 수위는 에러의 심각도에 반비례해야 합니다.

에러를 보여주는 위치와 시점

폼 검증 에러는 문제의 필드 바로 옆에, 색뿐 아니라 아이콘과 텍스트로 함께 표시해야 합니다(색맹 사용자 고려). 입력 도중 실시간 검증은 사용자가 필드를 떠난 시점(blur)에 하는 것이 친절하고, 타이핑 첫 글자부터 빨간 경고를 띄우는 것은 가장 나쁜 패턴입니다. 그리고 최고의 에러 메시지는 에러를 미리 막는 디자인입니다. 형식을 자동 보정하는 입력란, 조건을 미리 보여주는 비밀번호 규칙 안내가 그 예입니다.

제품의 모든 에러 메시지를 모아 '무엇·왜·어떻게' 체크리스트로 점검해 보세요. 에러의 순간을 잘 설계한 제품은 실패조차 신뢰의 기회로 바꿉니다.

에러 상황별 문구 템플릿

자주 쓰는 상황의 템플릿을 만들어 두면 품질이 일정해집니다. 네트워크 오류: "연결이 불안정해요. 네트워크를 확인하고 다시 시도해 주세요. [다시 시도]". 입력 형식 오류: "이메일 형식이 올바르지 않아요. example@domain.com 형태로 입력해 주세요." 권한 부족: "이 기능은 관리자만 사용할 수 있어요. 권한이 필요하면 관리자에게 요청해 주세요. [요청 보내기]". 서버 오류: "일시적인 문제가 발생했어요. 잠시 후 다시 시도해 주세요. 문제가 계속되면 문의해 주세요. [문의하기]". 모든 템플릿에 무엇·왜·어떻게가 들어 있는지 확인하세요.

404와 빈 상태도 에러 디자인이다

가장 많이 노출되는 에러 화면은 404 페이지입니다. 막다른 길 대신 갈림길을 주세요. 검색창, 인기 콘텐츠 링크, 홈 버튼이 있는 404는 이탈을 회수합니다. 검색 결과 없음, 빈 목록 같은 빈 상태(Empty State)도 같은 원리입니다. "결과가 없습니다"로 끝내지 말고 "철자를 바꿔 보거나, 필터를 줄여 보세요"라는 다음 행동을 제시하세요. 시스템이 잘못한 것이 아니어도, 사용자가 멈춰 선 모든 순간은 디자인의 책임 영역입니다.