404, 숫자부터 조금 수상합니다. 왜 123도 999도 아닌 걸까요? 웹에서는 브라우저가 페이지를 요청하면 서버가 결과를 세 자리 숫자로 알려줍니다. 404는 그중 ‘요청한 페이지를 찾을 수 없음(Not Found)’에 붙인 약속된 번호입니다.

맨 앞의 4는 요청을 처리할 수 없는 오류 계열을 뜻합니다. 뒤의 04는 그 안에서 ‘찾을 수 없음’을 구분하는 번호입니다. 0과 4에 각각 숨은 뜻이 있는 것은 아닙니다. 주소에 오타가 있거나, 페이지가 삭제되거나 옮겨졌는데 예전 링크가 남아 있을 때 만날 수 있습니다. 내가 뭘 잘못했다고 혼내는 숫자는 아닌 셈입니다. 😅

여기서 작은 구분 하나! 모든 오류 화면이 404인 것은 아닙니다. 인터넷 연결이 끊긴 크롬 공룡과, 사람이 몰렸을 때 등장했던 트위터의 고래는 다른 상황입니다. 오늘은 404를 출발점으로, 여러 오류 화면 속 귀여운 얼굴들을 만나봅니다.

크롬에서 인터넷 연결이 끊겼을 때 만나는 작은 티라노사우루스. 스페이스바를 누르면 선인장을 피해 달리기 시작하는 그 공룡입니다.

여기서 첫 번째 궁금증입니다. 달릴 수 있는 동물도 많은데, 왜 하필 공룡일까요? 개발자들은 와이파이가 없는 상황을 ‘선사시대로 돌아간 것’에 빗댔다고 설명했습니다. 공룡과 사막은 그렇게 등장했습니다. 인터넷을 못 쓰게 됐으니, 아주 오래전 세상으로 보내버린 셈입니다.

스페이스바를 아무리 눌러도 와이파이가 살아나지는 않습니다. 대신 선인장을 넘다 보면 기다리는 시간이 조금 덜 지루해집니다. 크롬 팀이 게임을 넣은 이유도 여기에 있습니다.

작은 장난은 생각보다 잘 통했습니다. 2018년 개발자 인터뷰에는 학생뿐 아니라 일해야 할 어른들까지 게임에 빠져, 학교나 회사 관리자가 게임을 끌 수 있게 해야 했다는 이야기도 나옵니다. 오류 화면에서 시작한 공룡이, 일을 방해할 만큼 재미있어졌습니다.

한때 트위터에 사람이 몰리면 새들이 커다란 고래를 들어 올리는 그림이 나타났습니다. ‘페일 웨일(Fail Whale)’이라고 불리던 오류 안내 이미지입니다.

그런데 이 고래, 의외의 전직이 있습니다. 바로 생일 카드입니다. 🎂 디자이너 이잉 루는 멀리 사는 친구들의 생일 파티에 갈 수 없어, 대신 웃음을 전하려고 만든 전자 카드였다고 밝혔습니다. 원래 제목도 ‘실패한 고래’가 아니라 ‘꿈꾸는 이를 들어 올리기(Lifting Up a Dreamer)’였습니다.

작은 새들이 힘을 합쳐 거대한 고래를 든다는 불가능한 장면이, 나중에는 너무 많은 요청을 감당하지 못하는 서비스의 얼굴이 된 것입니다. 친구를 웃기려고 그린 그림이 서비스가 멈춘 순간 사람들을 맞이하게 됐습니다.

GitHub의 404 화면은 작은 SF 영화 세트장 같습니다. 사막 같은 풍경에 후드를 쓴 문어 고양이 ‘옥토캣’이 서 있고, 옆에는 “찾는 웹페이지가 아닙니다”라는 문구가 떠 있습니다. 스타워즈를 떠올리게 하는 장면입니다.

잠깐, 옥토캣만 보고 나가기에는 아깝습니다. 그 아래도 눈여겨볼 만합니다. 코드·프로젝트·사람을 찾는 검색창과 검색 버튼이 바로 이어집니다. 길을 잘못 들었다는 농담을 건넨 뒤, 다시 목적지를 찾을 도구도 함께 내어놓는 셈입니다.

구글의 404 화면에는 파란 로봇이 등장합니다. 그런데 멀쩡하게 인사하는 로봇이 아닙니다. 몸체는 벌어져 있고, 부품은 바닥에 흩어져 있습니다. 페이지가 제대로 작동하지 않는 상황을 로봇의 몸으로 보여줍니다.

옆의 안내는 의외로 담백합니다. 요청한 주소를 서버에서 찾을 수 없다고 말한 뒤, “그게 우리가 아는 전부입니다”라고 끝납니다. 공룡 쪽에는 게임까지 있었는데, 이쪽은 꽤 말수가 적습니다. 같은 구글의 오류 화면인데도 성격이 다릅니다.

아마존의 기업 소식 사이트 ‘About Amazon’에서 없는 페이지를 열면, 상자에 들어간 진짜 강아지 사진을 만날 수 있습니다. 이번에 확인한 화면의 주인공은 ‘프랭키’입니다. 상자에 쏙 들어간 모습을 보고 나니, 찾던 페이지가 뭐였는지 잠깐 잊을 것 같습니다. 📦

아마존은 직원들이 반려견과 함께 출근하는 문화를 공식적으로 소개해 왔습니다. 이 오류 화면에도 홈페이지로 돌아가는 링크와 함께 ‘아마존의 강아지들을 만나보세요’라는 링크가 놓여 있습니다. 찾던 페이지는 없어졌는데, 회사 강아지 구경이라는 샛길이 생긴 셈입니다.

공룡은 기다리는 시간을 놀이로 바꿨고, 옥토캣은 검색창으로 이어졌습니다. 고장 난 로봇은 상황을 그림으로 보여주고, 아마존의 강아지는 회사 문화까지 전합니다. 같은 오류 화면에도 서비스마다 다른 표정과 개성이 담겨 있습니다.

Atlassian의 디자인 지침도 일러스트를 사용자의 상황과 감정에 맞춰 쓰도록 안내합니다. 오류나 빈 화면에 맥락을 보태고, 사용자가 할 일을 이해하도록 돕는 용도입니다.

하지만 모든 오류에 같은 귀여움을 넣을 수는 없습니다. 가볍게 페이지를 구경하다 길을 잃은 순간과, 마감 직전에 문서를 저장하지 못한 순간은 다릅니다. 후자의 사용자에게는 캐릭터의 표정보다 내 문서가 남아 있는지, 지금 무엇을 해야 하는지가 훨씬 급합니다.

Mailchimp의 말투 지침에서도 재미보다 명확성을 앞에 두고, 읽는 사람의 감정에 따라 어조를 달리합니다. 평소에는 웃겼던 농담도 사용자가 곤란한 순간에는 다르게 들릴 수 있습니다.

큰 캐릭터 아래에 “이런!” 한마디만 적혀 있다면 어떨까요? 귀여운 녀석을 만난 것은 알겠는데, 내가 뭘 해야 할지는 여전히 모릅니다.

좋은 오류 안내는 무슨 일이 생겼는지 설명하고, 사용자가 취할 수 있는 다음 행동을 알려줍니다. 인터넷 연결을 확인할지, 잠시 뒤 다시 시도할지, 다른 페이지로 돌아갈지 알면 막막함도 줄어듭니다.

Nielsen Norman Group의 오류 메시지 지침에서도 그림과 함께 구체적인 설명과 복구 방법을 다룹니다. 같은 오류를 자주 만나는 사용자에게는 반복되는 농담도 금세 싫증 날 수 있다고 덧붙입니다.

오프라인 상황을 예로 들면, 안내는 이렇게 이어집니다. 👇

• 무슨 일이 생겼는지: “인터넷 연결이 끊겼습니다.”

• 무엇을 확인할 수 있는지: “Wi-Fi 연결을 확인해 주세요.”
• 어디로 이어지는지: “연결한 뒤 새로고침” 또는 “이전 화면” 버튼을 제공합니다.

캐릭터를 보고 잠깐 웃은 뒤에도, 다음 행동은 쉽게 찾을 수 있는 구성입니다.

처음에는 ‘오류 화면을 왜 이렇게 귀엽게 만들었지?’가 궁금했습니다. 들여다보니 기다리는 시간을 채우는 게임도, 친구에게 보낸 생일 카드도, 회사 강아지의 출근 이야기까지 들어 있었습니다.

이제 오류 화면에서 귀여운 녀석을 만나면 조금 궁금해질 것 같습니다. 너는 어쩌다 여기서 일하게 됐니? 👀

오류 화면, 에러 페이지, 404 페이지, UX 디자인, 캐릭터 디자인, 크롬 공룡, Chrome Dino, 페일 웨일, Fail Whale, GitHub 옥토캣, 구글 404 로봇, 아마존 강아지, 마이크로카피, 오류 메시지