읽는시간

0

읽는시간

0

Getting Started

2025. 7. 17.

커스텀 404 페이지 만드는 방법

Framer를 사용하여 커스텀 404 페이지를 쉽게 생성할 수 있으며, 사용자에게 유용한 정보를 제공하여 사이트 이탈을 방지하고 자연스러운 탐색을 도와줍니다.

프레이머 스페이스의 로고

Posted By

Framer Space

'페이지를 찾을 수 없음'이라는 어두운 테마의 오류 메시지와 함께 '홈으로 돌아가기' 및 '알려주세요'라는 두 개의 버튼이 표시되면 페이지가 누락되었음을 나타냅니다.
'페이지를 찾을 수 없음'이라는 어두운 테마의 오류 메시지와 함께 '홈으로 돌아가기' 및 '알려주세요'라는 두 개의 버튼이 표시되면 페이지가 누락되었음을 나타냅니다.
'페이지를 찾을 수 없음'이라는 어두운 테마의 오류 메시지와 함께 '홈으로 돌아가기' 및 '알려주세요'라는 두 개의 버튼이 표시되면 페이지가 누락되었음을 나타냅니다.

목차

Table of Contents

본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

404 페이지란?

404 페이지는 웹사이트에서 존재하지 않는 주소(URL)에 접근했을 때 표시되는 에러 페이지입니다. 흔히 주소를 잘못 입력했거나 누군가 링크를 잘못 걸었을 때, 페이지가 삭제되었거나 이동되었는데 리디렉션이 안 된 경우 404 페이지가 나오게 됩니다.

커스텀 404 페이지가 필요한 이유는 무엇일까요?

웹사이트를 운영하다 보면 사용자가 존재하지 않는 주소로 접속하는 경우가 종종 발생합니다.
이때 아무런 안내 없이 딱딱한 에러 메시지만 표시된다면, 사용자가 당황하거나 사이트를 이탈할 수 있기 때문에 커스텀 404 페이지가 필요합니다.단순히 “페이지를 찾을 수 없습니다”라고만 알리기보다, 상황을 쉽게 이해할 수 있는 설명‘홈으로 돌아가기’ 버튼이나 추천 콘텐츠를 함께 제공해 보세요. 그렇게 하면 사용자는 혼란 없이 사이트 탐색을 자연스럽게 이어갈 수 있습니다.

커스텀 404 페이지 생성 방법

  1. 좌측 사이드바에서 Pages 페이지 패널을 선택

  2. 페이지 텍스트 우측에 위치한 + 버튼을 클릭

  3. 메뉴에서 New 404 Page 항목 선택

이 순서를 따라 하면 프로젝트 내에 자동으로 /404 페이지가 추가됩니다.

Note : 404 페이지도 다른 일반 페이지처럼 디자인을 자유롭게 수정할 수 있습니다.

커스텀 404 페이지 생성 확인 방법

사이트를 퍼블리시한 후, 브라우저에서 존재하지 않는 주소(예시.example.com/thispagedoesnotexist)로 접속해보세요. Framer의 기본 에러 페이지 대신 여러분이 만든 커스텀 404 페이지가 정상적으로 표시되는지 확인할 수 있습니다.


본 글은 Framer 공식 블로그의 ‘Creating a custom 404 page’ 를 번역·각색한 콘텐츠입니다.

블로그 공유하기
블로그 공유하기

Become a
Framer Expert

프레이머 외주가 가능한 전문가라면 누구나 지원할 수 있습니다.
중개 수수료 없이, 전문가와 클라이언트를 직접 연결합니다.

Become a
Framer Expert

프레이머 외주가 가능한 전문가라면 누구나 지원할 수 있습니다.
중개 수수료 없이, 전문가와 클라이언트를 직접 연결합니다.

Become a
Framer Expert

프레이머 외주가 가능한 전문가라면
누구나 지원할 수 있습니다.
중개 수수료 없이, 전문가와 클라이언트를
직접 연결합니다.