오류 화면에도 표정이 있습니다

1. 길을 잃은 순간에 만나는 화면

주소를 잘못 쳤거나 오래된 링크를 눌렀을 때 만나는 404 화면은 사용자가 이미 조금 짜증이 난 상태에서 보는 화면입니다. 그래서 브랜드 성격이 솔직하게 드러나는 곳이기도 하죠. GitHub의 404에서는 사막에 선 옥토캣 옆으로 'This is not the web page you are looking for'라는 문장이 뜹니다. 스타워즈의 유명한 대사를 비튼 농담이에요. 픽사는 인사이드 아웃 2의 불안이를 데려와 잔뜩 겁먹은 얼굴로 찾는 페이지가 없다고 말하게 하고, 본부로 돌아가자는 링크를 달았습니다. 같은 나쁜 소식인데 표정이 붙으니 화가 조금 누그러집니다. 다만 웃고 난 다음에 갈 곳이 없으면 결국 창을 닫게 됩니다.

2. 무엇이 잘못됐고 다음엔 어디로 가면 되는지

닐슨 노먼 그룹(NN/g)은 2023년에 정리한 오류 메시지 가이드에서 무엇이 잘못됐는지 쉬운 말로 알려 주고, '잘못된'이나 '유효하지 않은' 같은 표현으로 사용자를 탓하지 말고, 고칠 방법을 구체적으로 제안하라고 말합니다. 구글의 404는 '404. That's an error.'로 시작해 'That's all we know.'로 끝납니다. 솔직하긴 한데 다음에 뭘 하라는 말은 없죠. 반대로 스포티파이 한국어 404는 '조율이 되지 않은 페이지예요'라는 말장난으로 시작해서, 링크를 다시 확인하거나 웹 플레이어로 가거나 지원 페이지를 찾아가라고 갈 길을 세 개나 적어 둡니다. 검색창 하나, 홈 버튼 하나만 있어도 막다른 길에서 돌아 나올 수 있습니다.

3. 빈 화면과 끊긴 연결도 같은 이야기입니다

404만 오류 화면은 아닙니다. 검색 결과가 하나도 없을 때, 막 가입해서 아직 아무것도 없을 때, 지하철에서 연결이 끊겼을 때도 사람들은 비슷하게 막막해집니다. 크롬의 공룡 게임은 2014년 인터넷이 끊긴 화면에 숨겨 넣은 게임인데, 와이파이가 없던 선사 시대로 돌아갔다는 농담에서 출발했다고 합니다. 2018년 구글이 밝힌 바로는 한 달에 2억 7천만 번이나 플레이됐고요. 빈 화면도 마찬가지입니다. '결과가 없습니다'에서 멈추지 말고 철자를 확인해 보라거나, 둘러볼 거리를 보여주거나, 첫 프로젝트를 만드는 버튼을 놓아 두면 텅 빈 화면이 시작 화면이 됩니다. 이케아 한국 사이트는 검색 결과가 없을 때도 인테리어 갤러리를 이어서 보여주죠.

4. 세컨드펭귄의 시선: 오류 화면도 처음부터 디자인합니다

우리는 오류 화면을 개발 막바지에 기본값으로 남겨 두지 않으려고 합니다. Next.js로 사이트를 만들 때 not-found와 error 화면을 메인 페이지와 같은 시기에 디자인하고, 문장도 같은 목소리로 씁니다. 무슨 일이 일어났는지, 사용자 잘못이 아니라는 것, 다음에 어디로 가면 되는지가 들어갔는지도 확인하고요. 화면에는 없는 페이지라고 써 놓고 서버는 정상(200)이라고 응답하면 구글 서치 콘솔은 이걸 소프트 404로 분류합니다. 그래서 실제 404 상태 코드가 내려가는지까지 봅니다. 애니메이션을 넣더라도 움직임 줄이기를 켠 사용자에게는 멈춘 그림을 보여줍니다.