Top 20 에러 페이지 5795 Votes This Answer

You are looking for information, articles, knowledge about the topic nail salons open on sunday near me 에러 페이지 on Google, you do not find the information you need! Here are the best content compiled and compiled by the https://toplist.maxfit.vn team, along with other related topics such as: 에러 페이지 에러페이지 종류, 에러페이지 만들기, 에러페이지 문구, 에러페이지 디자인, 에러페이지 처리, 403 에러 페이지, 404 에러 페이지 설정, 스프링부트 에러페이지

ASH ISLAND – Error (Feat. Loopy) [Error]ㅣLyrics/가사

에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기! | 지금 써보러 갑니다

Article author: icunow.co.kr
Reviews from users: 5378 Ratings
Top rated: 3.1
Lowest rated: 1
Summary of article content: Articles about 에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기! | 지금 써보러 갑니다 ‘404 에러페이지’는 사용자 입장에선 부정적 경험을 하게 되는 공간이기 때문이죠. 그래서 우린 사용자가 부정적인 경험을 안고 서비스를 이탈하지 않도록 … …
Most searched keywords: Whether you are looking for 에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기! | 지금 써보러 갑니다 ‘404 에러페이지’는 사용자 입장에선 부정적 경험을 하게 되는 공간이기 때문이죠. 그래서 우린 사용자가 부정적인 경험을 안고 서비스를 이탈하지 않도록 …
Table of Contents:

Article author: m.blog.naver.com
Reviews from users: 32530 Ratings
Top rated: 4.3
Lowest rated: 1
Summary of article content: Articles about 가장 현명한 “404 에러 페이지” 해결법 – 404 not found error : 네이버 블로그 그래서, 에러 페이지를. 남들보다 훨씬 자주 만납니다. . . “404 의미”는. 알 필요 없다. . 아래 표현들이 가장 흔한. 에러 메시지 예시입니다. …
Most searched keywords: Whether you are looking for 가장 현명한 “404 에러 페이지” 해결법 – 404 not found error : 네이버 블로그 그래서, 에러 페이지를. 남들보다 훨씬 자주 만납니다. . . “404 의미”는. 알 필요 없다. . 아래 표현들이 가장 흔한. 에러 메시지 예시입니다.
Table of Contents:

카테고리 이동

법인 회사 홈페이지 리뉴얼 크날 개발

이 블로그
기타 홈페이지 상식
카테고리 글

카테고리

이 블로그
기타 홈페이지 상식
카테고리 글

가장 현명한 “404 에러 페이지” 해결법 – 404 not found error : 네이버 블로그

Article author: brunch.co.kr
Reviews from users: 4511 Ratings
Top rated: 3.8
Lowest rated: 1
Summary of article content: Articles about [번역] ‘404 에러페이지’ 24가지 분석 – 1 ‘404’ 또는 ‘페이지를 찾을 수 없습니다.’는 여러분이 인터넷을 하면서 마주하는 매우 일반적인 에러입니다. 이건 당신이 존재하지 않는 웹주소에 들어갔 … …
Most searched keywords: Whether you are looking for [번역] ‘404 에러페이지’ 24가지 분석 – 1 ‘404’ 또는 ‘페이지를 찾을 수 없습니다.’는 여러분이 인터넷을 하면서 마주하는 매우 일반적인 에러입니다. 이건 당신이 존재하지 않는 웹주소에 들어갔 … UX/UI 디자인에서 중요한 것 중 하나는 사용자가 바른 길로 가지 않았을 때 그 길을 바로잡아주는 일입니다. 서비스는 항상 100프로 완벽하게 작동할 수 없고, 기술적인 오류나 사용자 실수에 의해 오류를 마주할 여지가 있습니다. 그 오류에 대응하는 404 페이지는 ‘부정적인 결과’지만 꼭 ‘부정적’으로 보여줄 필요는 없습니다. 다음 사례들을 통해 각 서비
Table of Contents:

1 Adobe

2 Amazon

3 Awwwards

4 Behance

5 Canva

6 DesignerNews

7Dribble

8 eBay

9 Etihad Airways

10 Flickr

11 Notes

12 Google

[번역] '404 에러페이지' 24가지 분석 - 1 — [번역] ‘404 에러페이지’ 24가지 분석 – 1

Article author: gold-goblin.tistory.com
Reviews from users: 13417 Ratings
Top rated: 5.0
Lowest rated: 1
Summary of article content: Articles about java 404, 500에러 페이지 지정 및 에러페이지 템플릿 만들기 404 /errorPage/404page.jsp … …
Most searched keywords: Whether you are looking for java 404, 500에러 페이지 지정 및 에러페이지 템플릿 만들기 404 /errorPage/404page.jsp … web.xml 에 아래 내용 추가 404 /errorPage/404page.jsp 500 /errorPage/500page.jsp 404페이지와 500페이지를 좀 이쁘게 만들고 싶다면 아래 사이트를 참조해 만들면 된다 css와 html로 간편하게 구성되어있다 ht..
Table of Contents:

최근글

에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기!

–

박물관 웹사이트에 이만한 에러페이지가 또 있을까요?

–

이런 에러페이지를 만난다면, 오히려 색다른 경험이 되지 않을까? 벌써 2년이 넘었네요. 당시 근무하던 스타트업에서 색다른 에러페이지를 만나곤, 다른 서비스들은 에러페이지를 어떻게 활용하고 있을까? 라는 호기심에 열심히 사례들을 찾아 정리한 내용입니다. 오랜 시간이 지났음에도 여전히 ‘지금 써보러 갑니다‘의 인기 콘텐츠로 자리잡고 있는 내용이기도 하죠.

그 당시에는 ‘사례’를 살펴보는게 우선이란 생각에 다섯가지의 사례를 중심으로 이야기를 풀어냈었는데, 얼마전 ‘사용자 경험 측면에서의 글쓰기‘와 관련된 시리즈 첫 번째 글을 발행하며 에러페이지를 구성하는 방법도 함께 간략히 정리할 기회가 있었습니다. 그래서 오늘은 최근 404 에러페이지 사례와 페이지를 어떻게 구성하면 좋을지에 대해 정리해보려고 합니다.

–

이 에러페이지는 잘 설계된 에러페이지 일까요?

–

최근 서비스 내 여러 공간에서 ‘일러스트레이션’을 활용하는 모습을 자주 볼 수 있습니다. (무료 일러스트레이션 확인하기) 서비스만의 분위기를 잘 살릴 수 있음과 동시에 부드러운 느낌을 전달해줄 수 있기 때문이죠. 에러페이지에서도 예외는 아닙니다. 위 에러페이지 역시 404라는 박스안에 고양이가 있는 일러스트레이션을 사용하고 있죠. 그런데 가만히 보면, 처음 봤을 땐 분명 귀엽지만 뭔가 어색합니다.

내가 항상 말장난 했던거 기억나? 나는 그 단어들의 조합을 통해 색다른 경험을 제공하기 위해 노력해. 항상 우리 앱을 들여다보고, 우리 앱을 쓰는 사용자들을 생각하면서 말이지. ‘UX Writer, Content Strategist, or Product Designer’ 등 사실 내 역할을 조금씩 다르게 생각하고 표현하기도 하지만 그건 크게 중요하지 않아. 중요한 것은 수많은 사람들에게 나의 메시지를 통해 긍정적인 경험을 제공하는 것이니까! (‘UX WRITING’ 파헤치기, 첫 번째 : UX WRITING이란 무엇일까요? 중)

고양이가 귀엽게 웃고 있는 모습은 눈에 잘 들어오는데 상황에 맞지 않은 ‘귀여움’에 너무 초점이 맞춰져 있다는 생각이 들죠. 이 상황을 마주할 ‘대상’과, 그 ‘대상’이 취해야 할 다음 ‘행동’에 대한 힌트가 이 에러페이지에는 존재하지 않습니다.

–

Adobe의 에러페이지

–

이번에는 ‘어도비’의 에러페이지입니다. 어도비와 잘 어울리는 시각적 이미지가 우측으로 배치되어 있으며 페이지 상단 가운데에 ‘404 에러페이지’ 텍스트를 통해 어떤 상황에 처해있는지를 알려주고 있습니다. 그리고 왼쪽 중앙으로 페이지를 찾을 수 없다는 기본적인 메시지와 함께 두 가지 링크 옵션을 제공해줍니다. 하나는 홈페이지 메인으로 이동하는 내용이며 또 하나는 검색 화면으로 이동하는 내용입니다. 상황에 대한 설명과 함께 이를 쉽게 빠져나갈 수 있는 옵션을 제공해주고 있는 것이죠.

두 가지 사례를 통해 우리가 알 수 있는 것은, ‘404 에러페이지’는 다른 화면들도 마찬가지지만 단순히 시각적인 접근으로 해결해선 안된다는 점입니다. ‘404 에러페이지’는 사용자 입장에선 부정적 경험을 하게 되는 공간이기 때문이죠. 그래서 우린 사용자가 부정적인 경험을 안고 서비스를 이탈하지 않도록 유도할 수 있는 방법을 생각해야 하며, 오류의 원인과 함께 빠르게 다음 행동을 할 수 있는 방법을 제공해줄 수 있어야 합니다. ‘404 에러페이지’를 설계하는데 있어 잊지 말아야 할 기본이라고 할 수 있는 것이죠.

–

ebay의 에러페이지

–

누구의 잘못일까? 누가 이 상황을 만들었을까? 이는 에러페이지 내 메시지에 반영될 수 있는 중요한 정보 중 하나입니다. 이베이의 사례를 볼까요? 이베이는 무언가 잘못되었다는 메시지와 함께 ‘우리’ 즉, 이베이가 미안하다는, 죄송하다는 말을 덧붙이고 있습니다. 그리고 하단에는 홈페이지 메인화면으로 돌아가거나 도움을 요청할 수 있는 페이지로의 링크가 붙어있죠. 기타 구성은 일반적인 ‘에러페이지’와 유사하지만 우리가 잘못했어! 미안해! 라는 문구로 부정적인 경험을 일정 부분 상쇄시키고 있습니다.

–

메일침프의 에러페이지

–

메일침프 역시 ‘우리’라는 표현을 에러페이지 내 두 번이나 사용하고 있습니다.

어떤 과정을 거쳤더라도 사용자 입장에서 ‘에러페이지’를 만난다는 것은 그리 유쾌한 경험은 아닙니다. 때문에 ‘우리’라는 표현 등을 활용해 부정적인 경험을 줄이는 메시지를 함께 활용하는 것이 필요합니다.

–

인스타그램의 에러페이지

–

아니, 나는 분명히 친구의 프로필 URL을, 이미지 URL을 복사해서 붙여넣기 했는데? 갑자기 에러페이지가? 라는 생각을 사용자 입장에서 충분히 할 수 있는데요! 그래서 ‘이유’를 설명해줄 수 있어야 합니다. 인스타그램의 사례를 살펴볼까요? 이 페이지는 이용할 수 없다는 메시지 아래로 페이지(이미지 또는 계정 등)가 삭제되었거나 관계가 끊어졌다는, 에러페이지를 사용자가 만나게된 이유를 설명해주고 있습니다. 인스타그램 메인 화면으로 이동할 수 있는 사례도 함께 활용하고 있네요.

–

레고의 에러페이지

–

레고 역시 페이지를 찾을 수 없는 이유에 대해 간략하게 설명해주고 있네요. 재밌는 점은 레고답게, 레고의 일부를 활용해 시각적인 메시지를 함께 전달하고 있다는 점입니다.

–

Mockplus의 에러페이지

–

플리커의 에러페이지

–

왜? 라는 질문은 에러페이지에도 동일하게 적용됩니다. 사용자에게 이 페이지를 만나게 된 이유를 충분히 설명해줄 수 있다면, 서비스에 대한 부정적인 경험 대신 긍정적인 경험을 하게 될 수 있지 않을까요? 예상치 못한 전혀 의외의 지점에서 말이죠.

왜? 라는 질문은 에러페이지에도 동일하게 적용됩니다. 사용자에게 이 페이지를 만나게 된 이유를 충분히 설명해줄 수 있다면, 서비스에 대한 부정적인 경험 대신 긍정적인 경험을 하게 될 수 있지 않을까요? 예상치 못한 전혀 의외의 지점에서 말이죠.

–

깃허브의 에러페이지

–

어제 오전이었죠. 인스타그램 피드가 새로고침 되지 않는 오류로 인해 네이버 실검에 인스타그램이 1위를 차지(?)했습니다. 별다른 공지가 되지 않아 사용자들의 불만이 쌓였죠. 물론 인스타그램은 이미 사용자들이 깊게 서비스를 이용하고 있어 불만이 있다 하더라도 오류가 해결되는 순간 다시 사용할 가능성이 높지만 그렇지 않은 서비스들에게 이는 치명적인 결과를 불러 일으킬 수 있습니다. 서버 다운? 오류? 사용자들에게 그 이유를 설명해주는 것도 좋지만, 언제쯤 다시 서비스를 사용할 수 있는지에 대한 정보를 제공하는 것도 중요합니다. 깃허브는 금방 해결될 것이라는 문구와 함께 실시간으로 복구 정보를 확인할 수 있는 페이지 정보와 트위터 계정 링크를 제공하고 있네요.

작년 이 맘때, 피들리(Feedly)를 실행했는데 오류로 인해 콘텐츠를 불러오지 못하는 상황이 발생했습니다. 순간 당황했지만 피들리는 깃허브와 비슷하게 서버 문제로 인해 콘텐츠 로딩이 되지 않고 있으며, 실시간으로 작업 상황을 공유하겠다는 메시지와 함께 트위터 주소를 남겨두었습니다. 저는 트위터를 통해 10분 단위로 업데이트 되는 그들의 소식을 볼 수 있었고, 그렇게 2시간 만에 복구가 되어 서비스를 다시 사용할 수 있었습니다. 그 뒤로 피들리에 대한 신뢰도는 더 높아졌죠.

–

Behance의 에러페이지

–

우리의 잘못이야, 의 ‘우리’란 표현. 이런 이유로 인해 에러페이지를 만나게 됐어, 에서의 이유. 복구중이야, 에서의 실시간 정보. 그리고 에러페이지에서 중요하게 생각해봐야 할 내용은 바로 ‘특정 행동 유도’입니다. 앞서 확인한 사례들은 모두 ‘특정 페이지로의 이동’을 링크 형태로 덧붙였는데요. 이를 더 적극적으로 활용하는 사례들이 많았습니다. 먼저 비핸스를 살펴볼까요? 페이지를 찾을 수 없다는 메시지 아래로 비핸스의 주요 ‘카테고리’와 인기 작품들을 확인할 수 있도록 구성해두었습니다. 사용자 입장에서는 에러페이지를 만남과 동시에 다른 페이지나 콘텐츠를 확인할 수 있는 ‘행동’을 바로 취할 수 있는 것이죠.

–

유튜브의 에러페이지

–

유튜브는 에러페이지에서 사용자로 하여금 어떤 행동을 할 수 있도록 구성했을까요? 바로 ‘검색’입니다. 에러페이지 내 검색창을 띄워 원하는 영상을 검색할 수 있습니다.

–

.UI Movement의 에러페이지

–

조금 더 과감한 행동 유도를 이끌어내는 곳도 있습니다. ‘UI Movement’가 그 주인공인데요! 에러페이지 하단에 뉴스레터를 신청할 수 있는 링크를 활용하고 있네요. 부정적인 경험이 막 생겨난 시점에서 역으로 뉴스레터를 신청하라는 메시지를 띄우다니.. 결과가 어떤지 궁금해지는 사례이기도 합니다.

–

그라폴리오의 에러페이지

–

이미 여러번 사례로 등장했던 그라폴리오는 예상치 못한 ‘즐거움’을 제공해주는 대표적인 에러페이지 사례라고 할 수 있습니다. 에러페이지 내 등록된 크리에이터의 작품을 걸어두었기 때문이죠. 해당 작품을 만든 크리에이터 페이지로 바로 이동하는 것도 가능합니다. 이처럼 부정적인 상황 속 ‘예상치 못한 즐거움과 만남’을 이끌어 내는 것도 에러페이지의 역할이라고 할 수 있겠네요.

–

에러페이지를 얼마나 접한다고, 라는 생각을 솔직히 하지 않았던 것은 아닙니다. 그래서 웹 서비스 담당 시 GA를 통해 추적을 해봤는데 예상보다 비율이 높아 놀랐던 기억이 나네요. 이를 바탕으로 에러페이지 설계를 변경하니, 메일로 재미있다는 피드백이 오기도 하고 누군가의 블로그에 대표 사례로 소개되기도 했습니다. 단지, 부정적인 경험이었다면 서비스를 이탈하고 말았겠지만, 즐거운 경험이 될 수 있다는 생각으로 시작한 변화가 사용자들에게도 전해진 건 아니었을까요?

앞서 소개된 사례들은 모두 글을 쓰는 시점에 적용된 최근의 에러페이지들입니다. 아직 에러페이지에 대해 감이 잘 오지 않거나, 어떻게 구성해야 할 지 힌트가 부족한 분들이라면! 위의 사례와 구성 방법을 통해 사용자들에게 조금더 색다른 경험을 할 수 있는 공간으로의 변화를 시도해보면 어떨까요?

–

[번역] ‘404 에러페이지’ 24가지 분석 – 1

UX/UI 디자인에서 중요한 것 중 하나는 사용자가 바른 길로 가지 않았을 때 그 길을 바로잡아주는 일입니다. 서비스는 항상 100프로 완벽하게 작동할 수 없고, 기술적인 오류나 사용자 실수에 의해 오류를 마주할 여지가 있습니다. 그 오류에 대응하는 404 페이지는 ‘부정적인 결과’지만 꼭 ‘부정적’으로 보여줄 필요는 없습니다. 다음 사례들을 통해 각 서비스가 그들의 개성을 보여주면서 어떻게 오류메세지를 전달하는지 확인해보세요. 링크를 통해 직접 하나씩 살펴볼 것은 권합니다.
[원문] An Analysis of 24 Creative 404 Error Pages

출처 : dufrenesguideservice

‘404’ 또는 ‘페이지를 찾을 수 없습니다.’는 여러분이 인터넷을 하면서 마주하는 매우 일반적인 에러입니다. 이건 당신이 존재하지 않는 웹주소에 들어갔을 때 발생합니다.

이 메세지는 사용자에게 부정적인 영향을 주지 않는 방향으로 디자인되어야 합니다. 이러한 에러의 이유를 전달하면서, 사용자가 이 사이트에 존재하는 페이지로 재접근할 수 있도록 해주어야합니다.

인터넷을 하는 동안 ‘페이지를 찾을 수 없습니다.’라는 에러를 보면 큰 좌절감을 느끼게 됩니다.

많이 알려진 웹사이트들은 에러임에도 불구하고 사용자에게 기분좋은 사용자 경험을 제공하도록 디자인되어 있습니다. 유머스러운 방법으로 에러를 설명하고 올바른 경로로 돌아갈 수 있도록 가이드를 제공합니다.

이것은 당신이 웹사이트를 디자인할 때, 당신의 사용자를 위해 중요한 일로서 이 페이지를 부정적으로 만들면 안되고 적절함을 찾기 위해 많은 시간을 들여야한다는 것을 의미합니다.

이제 사용자 친화적인 에러페이지를 어떻게 만드는 것인지 이해할 수 있는 24가지의 404 에러페이지 사례를 보여드릴까 합니다.

1. Adobe

https://www.adobe.com/error

어도비의 에러페이지는 오른쪽에 큰 시각이미지를 두고 가운데에 짧은 메세지를 전하여 기분 좋아지는 룩을 제공합니다.

에러페이지의 타이틀 ‘404 에러페이지’는 상단바 아래에 표시되어 있습니다. 이 타이틀은 UI에서 두드러지지 않으며, 사용자는 처음에 텍스트 문구와 시각이미지를 먼저 봅니다.

에러에 대한 설명은 사용자를 어필하는 관용구를 활용하고 있습니다. 모든 사용자가 이 관용구를 이해할 필요는 없습니다. 그러나 상세 메세지는 ‘죄송합니다. 이 페이지는 찾을 수 없습니다.’ 와 같이 단순한 언어와 표현을 사용해야 합니다. 왜 이런 에러가 발생했는지 이유가 드러나 있지는 않습니다.

사용자는 이 에러를 제거하는 2가지 옵션을 갖게 됩니다. 하나는, 어도비 홈페이지로 이동하는 것이고 다른 하나는 검색페이지로 이동시켜 사이트에서 원하는 것을 찾도록 검색옵션을 제공하는 것입니다.

관용구와 관련된 시각이미지는 오류메세지보다 먼저 눈에 띠는데, 이는 매력적으로 느껴집니다.

다른 사이트들과 마찬가지로, 로그인 옵션과 일반페이지로 이동하는 링크도 에러페이지의 일부분입니다.

2. Amazon

https://www.amazon.com/error

아마존은 단순하고 매력적인 에러페이지를 제공합니다.

‘죄송합니다’라는 큰 폰트를 보여주고 무언가 잘못되었다는 걸 전달합니다. 에러 설명은 ‘우리는 이 페이지를 찾을 수 없습니다’라고 말합니다. 이 에러의 이유는 언급되어 있지 않습니다.

사용자에게는 이 에러를 없앨 수 있는 2가지 옵션이 제공됩니다. 홈페이지로 이동하거나 아니면 사이트 전체에서 검색을 시도해볼 수 있습니다.

강아지 이미지는 사용자에게 밝은 인상을 줍니다. 아마존 블로그로 가는 링크와 흥미로운 태그라인은 사용자에게 재미있는 경험을 제공합니다. 사용자는 블로그 링크를 따라 아마존의 블로그 페이지로 이동할 수도 있습니다.

3. Awwwards

https://www.awwwards.com/error1/

Awwwards의 에러페이지는 설명한 것들보다 훨씬 심플합니다.

에러가 발생했음을 보여주는 404 이미지를 크게 보여줍니다. 에러메세지는 사용자에게 친근한 언어로 구체적인 에러와 이유를 설명하고 있습니다.

이 페이지는 이 사이트의 다른 페이지들과 마찬가지로 일반적인 링크와 옵션을 포함하고 있습니다.

사용자가 다른 페이지로 이동할 수 있는 메뉴와 사이트 디스플레이를 제출할 수 있는 옵션이 상단에 마련되어 있습니다.

그리고 사용자가 원한다면 다가오는 컨퍼런스 일정 안내를 확일할 수 있는 링크도 보여집니다.

4. Behance

https://www.behance.net/error

Behance의 에러페이지는 페이지 중앙에 에러메세지가 있는 다른 사이트들과 같습니다.

페이지를 찾을 수 없다고 간단하게 상황을 나타냅니다. 그러나 이 메세지가 왜 나타났는지 유저가 뭘 잘못했는지는 알려주지 않습니다.

에러를 없애기 위해 다른 갤러리나 프로젝트로 이동할 수 있는 옵션을 제공합니다. 이를 위해 사용자가 클릭해서 넘어갈 수 있는 카테고리 리스트를 제공합니다.

인기있는 디자인 프로젝트들도 보여주고 있습니다.

5. Canva

https://www.canva.com/error

Canva의 에러페이지는 블러처리된 배경이미지 위에 다이얼로그창 에러메세지를 보여줍니다.

이 에러메세지는 사용자 친화적이지 않으며 기술적인 언어로 쓰여있습니다. 이것은 어떤 에러의 원인이 무엇인지, 어떤 에러인지 명확하지 않으며 이 에러를 없애기 위해 사용자가 무엇을 해야하는지도 정확하지 않습니다.

그러나, 홈페이지로 가는 링크는 페이지 오른쪽 하단에서 볼 수 있습니다. 클릭하면 이 사이트의 홈페이지로 이동하게 됩니다.

6. DesignerNews

https://www.designernews.co/error

DesignerNews의 에러페이지는 텍스트 없이 아주 심플한 구성입니다.

에러에 대한 설명이 전혀 없이 404라는 큰 이미지만 있습니다.

아마도 사용자가 404 에러코드를 이해하기에 충분히 학습되어있다는 전제가 있는 거 같습니다. 그렇지만 이건 올바른 가정이 아니며 디자이너는 사용자와의 갭을 이렇게 남겨두어서는 안됩니다.

홈페이지로 갈 수 있는 링크도 제공되고 있습니다.

7.Dribble

https://dribbble.com/error1

Dribble의 에러페이지는 사용자에게 멋지고 밝은 인상을 줍니다.

이 페이지는 404 에러 타입의 시각적인 요소를 활용하여 에러메세지를 표현하고 있습니다. 다른 추가 설명은 없습니다.

그리고 사용자가 에러페이지의 테마를 바꿔볼 수 있는 흥미로운 옵션이 제공됩니다. 이 페이지에 머무는 동안, 컬러테마를 가지고 놀아볼 수 있으며 404 이미지의 변화를 바로 확인할 수 있습니다.

게다가 홈이나 컨텍트 페이지 링크도 제공되고 있습니다.

검색옵션은 사용자가 그가 원하는 것을 찾을 수 있도록 해줍니다.

8. eBay

https://www.ebay.com/n/error

eBay의 에러페이지는 가장 심플한 것 중 하나입니다.

해당 사이트의 다른 페이지에서 노출하는 일반적인 옵션을 모두 포함하고 있습니다.

에러메세지는 페이지 중앙에 일반적인 말로 나타납니다. 메세지에서 어떤 특별한 에러 유형이나 이유 등을 설명해주지 않습니다.

홈페이지 링크를 사용해 다시 시작할 수도 있습니다. 또한 도움말 링크를 통해 사용자가 필요한 도움을 찾을 수 있도록 제공하고 있습니다.

검색 옵션을 통해 사용자는 원하는 항목을 찾을 수도 있습니다.

+ 내용추가

eBay에서 그 사이에 에러페이지를 리뉴얼 했더군요. After의 모습은 제가 따로 추가합니다! 바뀐 모습을 보니 모자를 뒤집어쓴 어린아이 모습을 통해 오류를 더 재미있게 전달하고 있습니다. 그리고 아래에 추천컨텐츠도 추가되었습니다. 기존의 오류 페이지보다 훨씬 사용자 친화적으로 변화한 룩입니다!

리뉴얼된 에러 페이지

9. Etihad Airways

https://www.etihad.com/error/

Etihad Airways 에러페이지는 다른 평범한 에러페이지들과 같이 사이트의 다른 페이지로 넘어가는 링크를 제공합니다.

UI에서 에러에 대한 시각적 표현은 찾아볼 수 없습니다. 페이지 제목만이 이 페이지는 에러페이지라고 알려줍니다.

좀 더 자세하고 친절한 설명은 제목 아래에 제공되고 있으며 홈으로 이동하는 링크도 포함하고 있습니다.

에러 설명의 앞 부분에는 사용자가 사이트를 더 탐색할 수 있도록 미리보기용 썸네일이 제공되는 것 이외에 일반적인 옵션이 거의 없습니다.

10. Flickr

https://www.flickr.com/photos/404error1

Flickr의 에러페이지는 매우 심플하며 많은 정보를 제공하지 않습니다.

페이지 제목은 에러가 발생했음을 알려주는 404입니다. 이 에러코드는 사용자들이 이해하기 어려운 기술적인 언어이기도 합니다.

사용자는 이 에러를 없애기 위해 인기있는사진을 선택할 수 있는 옵션이 주어집니다.

다른 일반적인 옵션은 다른 사이트와 유사합니다. 검색옵션에서 사용자에게 사진, 사람, 그룹의 이름을 입력할 수 있습니다.

11. Notes

https://www.get-notes.com/error

Notes는 단순하지만 직관적으로 오류 페이지를 보여줍니다.

귀여운 이미지는 이 에러가 왜 발생했는지에 대한 설명과 함께 나타납니다.

그리고 유일하게 홈으로 이동하는 링크 하나만 제공됩니다. 사용자가 사이트 소유자에게 연락을 취하도록 권하고 있지만, 사용자에게 허락된 다른 링크나 주소는 전혀 없습니다.

12. Google

https://www.google.com/error

Google의 에러페이지는 매우 심플하며 아주 적은 정보만을 담고 있습니다.

언어는 사용자 친화적이지 않습니다. 이미지는 연장을 손에 들고 있는 부서진 로봇을 표현하고 있습니다. 에러를 해결하기 위해 당신을 도와줄 수 없다는 설명을 묘사하고 있습니다.

여기에는 이 에러페이지에서 다른 곳으로 이동할 수 있는 그 어떤 시각적 옵션이 없습니다. 사용자는 홈으로 이동할 수 있는 구글 로고이미지만 클릭할 수 있습니다.

나머지 12개는 2탄으로 곧 돌아오겠습니다.

쉽게 지나칠 수 있는 404 에러 페이지의 중요성

한 번은 보았을 404 에러 페이지

우리 모두 웹 페이지를 들여다보면서 한 번 쯤은 페이지를 찾을 수 없다는 404 에러 페이지를 마주친 경험이 있을 것입니다.

물론 이 페이지를 찾을 수 없다는 표현을 명확하게 표시해주는 친절한 404 에러 페이지가 대부분이지만, 그렇지 않은 웹 서비스도 꽤나 많죠.

당연히 웹 개발자 또는 웹 개발 쪽에 지식을 가지고 있는 사람이라면 아주 불친절한 404 에러 페이지를 봐도 무슨 뜻인지 정확하게 알 수 있을테지만 그렇지 않은 사람이라면 어떨까요?

분명히 제대로 링크를 타고 들어간 것 같은데 내가 보고싶은 사이트는 뜨지 않고 이상한 흰 바탕에 404 Not Found 라는 텍스트만 덩그러니 놓여있다면 정말 당황스러울 것입니다.

바로 아래 사진과 같이 말이죠.

한 눈에 봐도 정말 불친절해보이는 404 에러 페이지입니다.

웹 개발 지식이 거의 없는 일반 사용자들이 처음 이 페이지를 보게 된다면 아마 대부분 이 웹 사이트에 대한 신뢰도가 떨어질거라고 생각됩니다.

당연히 신뢰도가 떨어지면 사용자는 쉽게 이 사이트를 이탈할 수 밖에 없겠죠.

그래서 사용자 경험 측면에서 404 에러 페이지는 꽤나 중요한 문제입니다.

흔하게 볼 수 있는 404 에러 페이지 유형

다양한 웹 서비스에서는 친절하게 사용자에게 페이지를 찾을 수 없다는 안내와 함께 다른 메뉴를 볼 수 있도록 링크를 제공하고 있습니다.

이는 가장 흔하게 볼 수 있는 404 에러 페이지 유형으로, 이 페이지를 맞닥뜨린 사용자로 하여금 잘못된 페이지라는 것을 인식시켜주고 다른 콘텐츠를 찾아보도록 의도할 수 있습니다.

첫 번째 예시는 Adobe Creative Cloud 앱을 통해 제작한 여러 작품을 게시하고 다른 유저의 작품을 탐색할 수 있는 서비스인 Behance입니다.

우선 Behance에서는 크게 페이지를 찾을 수 없다는 안내 문구를 표시해주어 사용자에게 콘텐츠가 표시되지 않는 이유를 명확하게 설명해주고 있고, 다른 작품을 찾아볼 수 있도록 여러 카테고리 링크를 띄워주었습니다.

또한, 그 아래에는 여러 작품에 대한 정보를 띄워주어 손쉽게 확인할 수 있도록 해주었습니다.

물론 작품 상세 보기 페이지로 연결되는 링크도 포함되어 있습니다.

두 번째 예시는 카카오의 블로그 서비스인 브런치입니다.

브런치에서는 위와 같이 브런치만의 감성을 담아 미니멀하게 페이지를 찾을 수 없다는 문구를 출력해주고, 브런치 메인 페이지로 이동할 수 있는 링크가 연결된 버튼을 표시해주고 있습니다.

또, 바깥 배경에 독특한 폰트로 은은하게 Page not found 문구를 띄워주어 심심하지 않도록 해주었죠.

세 번째 예시는 온라인 출판 플랫폼을 제공하는 해외 서비스인 미디엄입니다.

미디엄에서는 정확하게 무엇을 표현한 것인지는 모르겠지만 조금 색다르게 텍스트로 만든 문양을 페이지를 찾을 수 없다는 문구와 함께 띄워주고 있습니다.

그리고 Behance와 마찬가지로 다른 게시글을 볼 수 있는 미리보기 데이터를 제공하고 있습니다.

404 에러 페이지를 재미있게 풀어낸 서비스

위에서 봤던 예시처럼 단순히 메인 페이지로 이동할 수 있는 링크나 다른 콘텐츠를 볼 수 있도록 해주는 링크를 띄워주는 것도 사용자 경험을 끌어올리는데 효과적이고, 이탈률을 크게 감소시킬 수 있습니다.

하지만 여기에 더해 다른 서비스에서는 제공하지 않는 독특한 경험을 통해 해당 서비스가 가진 개성을 표현해줘 조금 딱딱할 수 있는 404 페이지를 재미있게 풀어낸 서비스도 있습니다.

여기에서는 재미있고 독특한 사용자 경험을 제공하는 서비스 예시를 알아보겠습니다.

첫 번째 예시는 여러 시각 디자인 콘텐츠를 제작할 수 있는 플랫폼을 제공하는 서비스인 Canva입니다.

겉으로 보기에는 되게 심플한 404 에러 페이지이지만, 다른 서비스에서는 볼 수 없는 재미 요소가 하나 섞여있죠.

그 요소가 하단에 있는 퍼즐인데, Canva에서는 퍼즐을 통해 독특한 유저 인터랙션 경험을 제공함으로써 서비스의 개성을 드러냈다고 볼 수 있습니다.

물론 실제로 퍼즐을 풀어보는 유저는 소수일지라도 다른 곳에서 볼 수 없는 독특한 요소를 넣었다는 점만으로도 충분히 Canva라는 서비스의 정체성을 재미있게 풀어낸 것 같다고 생각합니다.

다음 예시는 디자이너를 위한 소셜 네트워크 플랫폼 서비스인 Dribble입니다.

Dribble도 404 에러 페이지를 처음 마주했을 때, 진짜 개성있고 독특하게 잘 풀어냈다고 생각했었습니다.

일단 눈에 가장 먼저 들어오는 404라는 텍스트는 일반 텍스트가 아닌 여러 사진으로 구성된 형태입니다.

그런데 여기서 더 신기한건, 404 텍스트를 이루는 사진이 모두 유저가 선택한 색상을 기반으로 하는 사진들이라는 점입니다.

그래서 404 텍스트 하단의 컬러 선택 부분에서 색상을 변경하면 그 색상을 기반으로 하는 사진들로 새롭게 404 텍스트가 구성되는 것입니다.

이를 통해 유저들은 자신이 직접 색상을 선택함으로써 새로운 작품을 만들어내는 느낌을 받을 수 있겠죠.

게다가 저 사진들 모두 작품 상세 보기 페이지로 연결이 되어 있기 때문에 미리보기 역할을 같이하는 셈입니다.

404 에러 페이지의 구현 목적

여기까지 404 에러 페이지의 다양한 예시를 알아보았습니다.

그러면 이런 예시들을 분석하면서 어떤 이유로 404 에러 페이지를 직접 만들어서 띄워주는지 정리해봅시다.

긍정적인 사용자 경험을 제공할 수 있습니다 단순히 흰 배경에 404 Not Found라는 검정 텍스트를 마주했을 때에는 일반 사용자들은 정확하게 어떤 이유로 콘텐츠가 보이지 않는지 잘 모를 수 있기 때문에 나쁜 사용자 경험을 받게 됩니다. 하지만 직접 404 에러 페이지를 구현하게 되면 사용자로 하여금 내가 왜 콘텐츠를 확인하지 못하는지 명확하게 이유를 인지할 수 있어 보다 긍정적인 사용자 경험을 느낄 수 있습니다. 따라서 사용자는 당황스럽고 불쾌한 감정을 덜 느끼게 되어 해당 서비스에 대한 좋은 인상을 유지할 수 있는 것입니다.

사용자 이탈률을 감소시킬 수 있습니다 위에서 확인한 모든 404 에러 페이지의 공통점이 뭐라고 생각하시나요? 그것은 바로 404 에러 페이지를 직접 구현하는 가장 큰 목적인 메인 페이지 또는 다른 콘텐츠로 연결되는 링크를 제공한다는 것입니다. 만약 구글 검색 결과로 접속한 페이지의 링크가 깨진 상태이거나 잘못된 URL을 통해 웹 사이트에 접속하는 경우에는 404 에러 페이지를 맞닥뜨리게 되고, 이를 본 사용자는 곧바로 검색 화면 또는 이전 화면으로 다시 돌아갈 것입니다. 하지만 위와 같은 과정은 해당 서비스의 이탈률을 크게 증가시키는 요인입니다. 따라서 404 에러 페이지에서 메인 페이지 또는 다른 콘텐츠로 이동할 수 있는 링크를 제공해주어야만 합니다. 실제로 페이지 이동 버튼의 유무에 따라 사용자 이탈률이 크게 10% 가까이 변동될 수 있다고 합니다.

서비스의 정체성 또는 개성을 표현할 수 있습니다 위에서 살펴본 모든 404 에러 페이지 예시를 봐도 충분히 해당 서비스의 정체성이나 개성을 알 수 있을 것이라고 생각합니다. Behance, Canva, Dribble과 같은 경우에는 디자인 관련 플랫폼이라는 정체성에 맞게 색다른 유저 인터랙션 경험 또는 다양한 디자인 콘텐츠로 연결되는 요소들을 제공하고 있습니다. 반면에 Medium이나 Brunch 같은 경우에는 각 서비스만의 감성에 맞게끔 404 에러 페이지를 색다르게 표현해냈죠. 이런 다양한 요소를 통해 보다 더 사용자 친화적으로 서비스가 가진 개성 혹은 정체성을 느껴볼 수 있고, 이는 곧 서비스나 기업의 브랜딩을 보여주는 것이기 때문에 사용자들에게 확실하게 인상을 남길 수 있습니다.

글을 마무리하며

단순히 웹 개발자의 입장이라면 404 에러 페이지가 얼마나 중요할지 잘 모르고 지나칠 수 있을거라 생각합니다.

하지만 만약 단순 개발자의 영역에서만 생각하지 않고, UI/UX 부분에서도 사용자를 생각하는 영역에까지 오게된다면 그렇게 자주 보지 않는 404 에러 페이지도 많이 중요하다는 것을 알 수 있을 거라고 생각되네요.

이제서야 UX 측면을 고려하기 시작한 저로서 많은 레퍼런스를 찾아보며 고민할 수 있었던 주제였던 것 같습니다.

앞으로 UX 관련 게시글도 많이 올려보고 싶은 마음입니다.

So you have finished reading the 에러 페이지 topic article, if you find this article useful, please share it. Thank you very much. See more: 에러페이지 종류, 에러페이지 만들기, 에러페이지 문구, 에러페이지 디자인, 에러페이지 처리, 403 에러 페이지, 404 에러 페이지 설정, 스프링부트 에러페이지

Top 20 에러 페이지 5795 Votes This Answer

에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기! | 지금 써보러 갑니다

가장 현명한 “404 에러 페이지” 해결법 – 404 not found error : 네이버 블로그

[번역] ‘404 에러페이지’ 24가지 분석 – 1

java 404, 500에러 페이지 지정 및 에러페이지 템플릿 만들기

쉽게 지나칠 수 있는 404 에러 페이지의 중요성 | Developer Hyun

[JSP] 에러페이지 지정하기

404 에러페이지 만들기 – .htaccess 파일 (404 error 페이지 404.html) :: 키스세븐지식

JSP Error Page 에러 페이지

Ray의 기록로그

에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기!

[번역] ‘404 에러페이지’ 24가지 분석 – 1

쉽게 지나칠 수 있는 404 에러 페이지의 중요성

Leave a Comment Cancel reply