멋진 403 페이지를 만들기 위한 8가지 CSS 및 JS 스니펫

웹 디자이너는 오류를 기회로 바꾸는 데 익숙해졌습니다. 일반적이고 가장 널리 발생하는(놀라울 정도로 인식 가능한) HTTP 상태 코드 404("찾을 수 없음"이라고도 함)가 개발자에 의해 프로젝트에 이점을 가져오도록 강요되었다는 것은 비밀이 아닙니다. 과거에는 사용자를 두렵게 만들고 전반적인 인상을 파괴했으며 개발자에게는 악몽이었습니다. 모두 한 번에 사라지기를 원했습니다.

오늘날 웹 사이트의 필수 세부 사항입니다. WordPress에는 특별히 할당된 템플릿도 있습니다. "404 페이지"는 사용자 경험의 필수 요소입니다. 대부분의 경우 아름다운 디자인뿐만 아니라 웹 사이트의 전체 미학에 기여하는 것을 목표로 하는 테마가 있습니다.

세심한 디자인, 상호 작용, 애니메이션과 함께 길을 잃은 사용자가 정상 궤도로 돌아올 수 있도록 도와주는 유용한 링크와 도피처가 포함되어 있습니다. 그러나 웹 디자인의 "404" 오류는 현실 세계의 힙스터와 같습니다. 그들은 여전히 ​​촌스러운 안경, "빈티지" 셔츠 및 수염으로 우리의 시선을 사로잡지만 우리에게는 전혀 새로운 것이 아닙니다. "403" 오류는 이야기가 다릅니다. 그것은 가까운 친척만큼 인기가 없지만 여전히 블루 문에서 발생하고 한 번도 발생하지 않습니다.

백그라운드의 경우 "403 Forbidden"이라고도 하는 HTTP 상태 코드 403은 페이지에 액세스할 수 있는 권한이 없음을 의미합니다. 이유는 다양할 수 있습니다. 부적절한 폴더 권한으로 시작하여 로그인 자격 증명에 대한 기본적인 요구 사항으로 끝날 수 있습니다. 그럼에도 불구하고 경험에 따르면 모든 오류는 개선에 영향을 줄 수 있는 기회입니다. 그렇다면 더미 "403 페이지"를 "404 페이지"와 동일한 역할을 수행할 장소로 바꾸지 않겠습니까?

이러한 유형의 오류에 대해 수십 가지의 멋진 작업을 고려해 보겠습니다. 영감의 원천일 뿐만 아니라 바로 사용할 수 있는 솔루션의 원천이기도 합니다.

당신은 통과하지 않습니다

"당신은 통과하지 못할 것입니다." - 가상 세계에서 가장 강력한 흰 수염 마법사 중 한 명이 말한 적이 있습니다. (Dumbledore의 모든 팬이 이것을 용서하기를 바랍니다). Gandalf Gray의 마지막 문구(백색이 아니라 회색에 주의)는 여기 문맥에 완벽하게 들어 맞습니다. 그리고 Noah Rodenbeek, A van Hagen 및 Jhey는 이것을 실제로 보여줍니다. 그들의 코드 스니펫에는 "호빗" 소설의 정신과 매력이 스며 있습니다. 처음 두 아티스트는 스태프와 함께 간달프를 재창조했지만 후자는 장면을 암시했지만 꽤 성공적이었습니다.

호도르 403

위에 소개된 가상 소설의 모티프가 충분하지 않다면 Yasio의 이 코드 스니펫을 주목해야 합니다. 놀랍게도 그는 George RR Martin의 판타지 소설 시리즈에서 영감을 얻었습니다. 그는 HODOR 403이라는 작업을 제안했습니다. 저는 대다수 사람들에게 이 솔루션이 자명하다고 믿습니다. 나머지는 HBO로 전환하여 이 가상의 캐릭터가 이러한 유형의 오류와 완벽하게 어울리는 이유를 직접 확인하는 것이 좋습니다.

일러스트레이션 및 애니메이션 사용

목록에 있는 다른 솔루션은 "403"이 금지된 영역을 상징한다는 개념에 따라 안내되어 애니메이션 및 정적 CSS 일러스트레이션, 즉 이 아이디어를 염두에 두고 재창조되었습니다.

오류 403 – Aimie의 금지는 동화의 고전적인 장면을 묘사합니다. 어둠의 시간에 등장하는 애니메이션 박쥐, 마녀의 집, 벌거벗은 나무, 소름 끼치는 타이포그래피는 확실히 여기에서 트릭을 수행합니다.

403 Forbidden by Dylan과 403 Forbidden by Visual Composer는 독특한 중세 시대의 매력을 가지고 있습니다. "문을 닫으세요": 프로젝트는 이러한 연관성을 불러일으킵니다. 첫 번째는 바로 눈앞에서 닫히는 고전적인 목조 가드 게이트 문이 특징입니다. 두 번째 것은 또한 가드 게이트 주제로 이동하여 금지된 표시를 드러내는 톱니와 사슬이 있는 메커니즘을 묘사합니다.

금단의 영역에 대한 Arturo Wibawa의 비전은 오늘날 고궁 박물관으로 알려진 유명한 중국 '자색 자금성'의 놀랍고 매우 상세하며 부분적으로 애니메이션된 CSS 일러스트레이션을 통해 제공됩니다.

당신을보고있다

403 Forbidden Page by Mariana는 방향 인식 효과 덕분에 모든 곳에서 마우스 커서를 따라다니는 기발한 괴물과 같은 캐릭터로 표시됩니다. 항상 감시당하는 느낌을 재현합니다. 또한 앞으로 나아가지 못하게 하는 화려한 페어리 가드를 모방한다. 마스코트의 "위협적인" 모습에도 불구하고 프로젝트는 재미있습니다.

끈기있게

Gabriele Corti는 또한 "403" 오류 페이지에 대한 비전을 제공합니다. 그의 "지속성이 핵심" 프로젝트는 초기에 액세스를 거부하고 올바른 사용자 작업 후에 액세스를 허용하는 전체 프로세스를 보여줍니다. 올바른 작업은 키를 열쇠 구멍에 삽입하는 것을 의미합니다. 그럼에도 불구하고 로그인 및 비밀번호 입력과 같은 일부 고급 작업의 기반으로 이 개념을 항상 사용할 수 있습니다.

단순함 유지

403 by lsgrrd는 확실히 존재할 권리가 있는 "403 페이지"를 지나치게 단순화한 것입니다. 소소하지만 요점에 충실합니다. 그것은 컴퓨터 영역 고유의 테크노 분위기를 풍기는 특정 디지털 품질을 가지고 있습니다. 마지막에 깜박이는 커서가 디지털 타이포그래피와 함께 환상적인 효과를냅니다. 솔루션은 깨끗하고 우아하며 간단합니다.

리스트에 있으신가요?

Cassidy Williams의 프로젝트로 컬렉션을 마치겠습니다. 여기에 소개된 대다수와 달리 이 솔루션은 인기 있는 나이트클럽의 일반적인 상황을 보여주는 현실 세계의 은유입니다. 경비원은 이 코드 조각의 핵심이자 영혼입니다. 캐릭터는 모든 것이 사실적으로 보이도록 부분적으로 애니메이션되었습니다.

사용자를 참여시킬 수 있는 또 다른 기회

사실 "403 오류"는 "404 오류"만큼 널리 퍼져 있지도 않고 대중적이지도 않습니다. 그럼에도 불구하고 여전히 존재하고 시간이 지나면서 발생합니다. 이는 웹사이트에 전체 사용자 경험을 깨뜨릴 수 있는 구멍을 만듭니다. 따라서 기회를 포착하고 프로젝트의 유효한 부분으로 전환하십시오. 의심할 여지 없이 새로운 방문자를 확보하고 기존 방문자를 잃지 않도록 할 것입니다.