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: 에러 페이지 디자인 html 에러페이지 샘플, 에러페이지 종류, 에러페이지 무료 템플릿, 에러페이지 템플릿, 에러페이지 만들기, 404 에러 페이지 템플릿, 에러페이지 문구, 404 에러 페이지 html
에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기! | 지금 써보러 갑니다
- Article author: icunow.co.kr
- Reviews from users: 38819
Ratings - Top rated: 4.8
- Lowest rated: 1
- Summary of article content: Articles about 에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기! | 지금 써보러 갑니다 ‘404 에러페이지’는 사용자 입장에선 부정적 경험을 하게 되는 공간이기 때문이죠. 그래서 우린 사용자가 부정적인 경험을 안고 서비스를 이탈하지 않도록 … …
- Most searched keywords: Whether you are looking for 에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 404 에러페이지 두 번째 이야기! | 지금 써보러 갑니다 ‘404 에러페이지’는 사용자 입장에선 부정적 경험을 하게 되는 공간이기 때문이죠. 그래서 우린 사용자가 부정적인 경험을 안고 서비스를 이탈하지 않도록 …
- Table of Contents:
[번역] ‘404 에러페이지’ 24가지 분석 – 1
- Article author: brunch.co.kr
- Reviews from users: 35763 Ratings
- Top rated: 3.4
- Lowest rated: 1
- Summary of article content: Articles about [번역] ‘404 에러페이지’ 24가지 분석 – 1 Updating …
- Most searched keywords: Whether you are looking for [번역] ‘404 에러페이지’ 24가지 분석 – 1 Updating 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](http://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/13ur/image/Gh6QsFUsV-yYmSPXF5MCuPYQQtg.jpg)
재미있고, 기발하고, 신기한 에러페이지 디자인 10가지 | 요즘IT
- Article author: yozm.wishket.com
- Reviews from users: 1521 Ratings
- Top rated: 3.3
- Lowest rated: 1
- Summary of article content: Articles about 재미있고, 기발하고, 신기한 에러페이지 디자인 10가지 | 요즘IT 지금부터 여러 기업들의 에러페이지 디자인을 소개해드릴 테니, 잘 살펴보시고, 여러분의 웹사이트에도 적용해보시기 바랍니다:) 01. 슬랙 (Slack). (에러 … …
- Most searched keywords: Whether you are looking for 재미있고, 기발하고, 신기한 에러페이지 디자인 10가지 | 요즘IT 지금부터 여러 기업들의 에러페이지 디자인을 소개해드릴 테니, 잘 살펴보시고, 여러분의 웹사이트에도 적용해보시기 바랍니다:) 01. 슬랙 (Slack). (에러 … 에러페이지 하나까지도 신경 써서 제작한다면 소비자에게 불편한 경험을 즐겁게 풀어낼 수 있습니다. 여러분의 브랜드에도 긍정적인 영향을 끼칠 수 있죠! 지금부터 위시켓이 여러 기업들의 에러페이지 디자인을 소개해드릴 테니, 잘 살펴보시고, 여러분의 웹사이트에도 적용해보시기 바랍니다:)
- Table of Contents:
404 error page design / 404 에러 페이지 디자인
- Article author: mariedays.tistory.com
- Reviews from users: 13921 Ratings
- Top rated: 4.4
- Lowest rated: 1
- Summary of article content: Articles about 404 error page design / 404 에러 페이지 디자인 Updating …
- Most searched keywords: Whether you are looking for 404 error page design / 404 에러 페이지 디자인 Updating
- Table of Contents:
태그
‘WebDesign’ Related Articles
티스토리툴바
See more articles in the same category here: toplist.maxfit.vn/blog.
에러페이지는 어떻게 구성하고 활용해야 할까? 사례를 통해 살펴보는 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탄으로 곧 돌아오겠습니다.
재미있고, 기발하고, 신기한 에러페이지 디자인 10가지
웹사이트를 만들 때, 에러가 표시되는 페이지를 만드는 사람들은 많이 없겠지만 그래도 필수적인 페이지인 것은 맞습니다. 사람들이 에러페이지를 보지 않도록 하는 게 이상적이긴 하지만, 잘 만들어 놓는다면 에러가 난 상황에서도 디자이너와 브랜드에 대한 좋은 인상을 남길 수 있습니다.
위트와 재치가 있는 UX나 디자인으로 에러페이지를 만드는 사례는 점점 더 많아지는 추세입니다. 에러페이지는 잘 생각해서 만든 CSS 애니메이션 일 수도 있고, 패럴렉스 스크롤을 이용해서 멋진 효과를 보여줄 수도 있고, 단순한 에러 안내 문구만 보여줄 수도 있습니다. 여러분의 에러페이지에 활기를 불어넣을 수 있는 방법은 아주 다양한 편이죠. 아래 사례들처럼 말입니다.
잘 만든 에러페이지는 웹사이트의 작은 홍보대사 같은 역할을 할 수 있습니다. 사람들이 이런 화면들을 캡처해서 트위터와 관련 블로그에 공유하면서, 고객 서비스와 참신한 디자인을 위해 들인 노력들이 알려지게 되죠. 지금부터 여러 기업들의 에러페이지 디자인을 소개해드릴 테니, 잘 살펴보시고, 여러분의 웹사이트에도 적용해보시기 바랍니다:)
01. 슬랙 (Slack)
(에러페이지 디자인 출처: 슬랙)
슬랙은 편리한 업무용 메신저 툴을 제공하는 회사입니다. 슬랙에서 에러가 발생하면 무성한 나뭇잎과 산과 무지개가 펼쳐진 환상적인 풍경이 화면에 나타납니다. 나비와 닭, 작은 꼬마돼지가 자유롭게 돌아다니며, 마우스를 스크롤 하면 화면이 위아래로 움직이도 합니다. 사용자는 에러라는 화가 날만한 상황에서 마음이 평화로워지는 화면을 보게 됩니다.
02. 퓨레메종(Purée Maison)
(에러페이지 디자인 출처:퓨레메종)
퓨레메종은 커뮤니케이션 전략에 전문성을 가진 크리에이티브 에이전시입니다. 개성 있는 웹사이트에는 재미있는 애니메이션으로 가득 차있죠! 위에 나온 예시를 보시면 이곳의 에러페이지가 얼마나 기발한지 보실 수 있습니다. 디지털 공간에서 어떤 장벽에 부딪혔을 때의 괴로움을 애니메이션으로 아주 잘 표현해내고 있거든요.
03. 픽사 (Pixar)
(에러페이지 디자인 출처: 픽사)
에러페이지를 디자인할 때는 사람들의 마음을 자극하는 방법을 사용할 수도 있습니다. 픽사의 에러페이지는 2015년에 엄청나게 큰 인기를 끈 애니메이션 의 슬픔이(새드니스)입니다. 이 캐릭터를 통해서 보여주는 감정이 에러페이지를 만났을 때 느껴지는 일반적인 우리의 감정을 보여줍니다. 굉장히 간단하면서도 직관적인 이미지라고 볼 수 있습니다.
4. 20세기 폭스(20th Centry Fox)
(에러페이지 디자인 출처: 20세기 폭스)
20세기 폭스의 영화 사이트에는 페이지가 잘못되면 기발한 방식으로 사용자를 안내합니다. 에러페이지와 함께 컬트 무비의 한 장면이 튀어나오는데요. 화면에는 간략한 안내 문구와 함께 여러분이 좋아할 수 있는 영화들을 추천해줍니다. 폭스 웹사이트에서 에러페이지로 보여준 장면들로는 , , 가 있었습니다.
05. 마블 (Marvel)
(에러페이지 디자인 출처: 마블)
마블은 에러페이지에 마블 유니버스의 주시자(Watcher)캐릭터를 등장시켜서 자신들의 브랜드 입지를 더욱 견고하게 보여주고 있습니다. 블랙 위도우(Black Widow)를 배경에 두고, 우아투의 눈알이 여러분의 마우스 움직임을 따라다니게 되는데요. 마블의 팬이라면 이러한 에러페이지도 굉장히 달갑게 느껴질 것 같습니다.
06. 쿠알로(Kualo)
(에러페이지 디자인 출처: 쿠알로)
웹 호스팅 기업인 쿠알로는 에러페이지에서 방문자들이 스페이스 인베이더 게임을 즐길 수 있도록 만들었습니다. 침공하는 외계인들은 KUALO라는 글자로 진영을 이루고 있는데, 아주 잘 만든 게임은 아니지만 굉장히 재미있는 편이라고 합니다. 1000점 이상을 획득하면 호스팅 비용을 할인해준다고 하니, UX를 중시한 좋은 에러페이지 디자인이라고 볼 수 있습니다.
07. 피그마 (Figma)
(에러페이지 디자인 출처: 피그마)
다양한 UI를 제작할 수 있는 툴인, 피그마는 에러페이지도 서비스의 특성을 잘 반영한 디자인을 사용하였습니다. 우선 404라는 글자가 커다랗게 표시되어 보이는데, 벡터로 렌더링이 되기 때문에 원하는 사용자가 원하는 모양으로 얼마든지 바꿀 수 있습니다.
08. 에어비앤비 (Airbnb)
(에러페이지 디자인 출처: 에어비앤비)
에어비앤비의 에러페이지는 간단하지만 재미있는 애니메이션을 볼 수 있습니다. 불운한 소녀가 아이스크림을 바닥에 떨어뜨리고 있는데요. 에어비앤비는 친근한 매력으로 명성을 얻고 있는데, 에러페이지에서도 역시나 그런 브랜드 이미지를 정확하게 잘 보여주고 있습니다.
09. 레고 (Lego)
(에러페이지 디자인 출처: 레고)
우리가 익히 잘 알고 있는 레고도 위트 있는 에러페이지를 가지고 있습니다. 공사현장에서 갓 뛰어온 듯한 레고 무비의 캐릭터인 에밋(Emmet)이 나와서 에러페이지에를 안내하고 있는데요. 레고의 캐릭터와 에러페이지의 절묘함이 돋보입니다.
10. 드롭박스 (Drop Box)
(에러페이지 디자인 출처: 드롭박스)
드롭박스는 난해한 상자를 표현한 에러페이지로 오랫동안 사랑을 받아왔습니다. 그런데 에셔(Esher)의 판화 같은 원래의 이미지를 개구쟁이가 그린 것 같은 그림으로 바꾸었습니다. 자전거의 바퀴가 빠져버렸을 때와 같이 난감한 상황이라는 것을 표현한 것으로 보이는데요. 드롭박스의 메시지를 잘 전달해주는 간단하면서도 멋진 그림인 것 같습니다. 아래에는 UX를 위해 내비게이션 메뉴의 링크를 추가해 놓는 것도 잊지 않았죠.
지금까지 재미있고, 기발하고, 신기한 에러페이지 디자인에 대해 알아보았습니다. 이제 실제로 에러페이지 디자인을 만들어볼 차례입니다! 앞서 말씀드렸다시피, 에러페이지 하나까지도 신경 써서 제작한다면 소비자에게 불편한 경험을 즐겁게 풀어낼 수 있습니다. 여러분의 브랜드에도 긍정적인 영향을 끼칠 수 있죠
본문 내용은 404 pages: Check out the best error pages around을 각색하여 작성했습니다.
So you have finished reading the 에러 페이지 디자인 topic article, if you find this article useful, please share it. Thank you very much. See more: html 에러페이지 샘플, 에러페이지 종류, 에러페이지 무료 템플릿, 에러페이지 템플릿, 에러페이지 만들기, 404 에러 페이지 템플릿, 에러페이지 문구, 404 에러 페이지 html