아스트라 404 페이지 만드는 방법｜Custom Layouts로 오류 페이지 수정

아스트라 404 페이지 만드는 방법을 찾게 된 이유는 기본 404 화면이 너무 단순했기 때문입니다. 글을 삭제했거나 주소를 잘못 입력했을 때 기본 오류 페이지가 나오면 방문자는 다른 글을 찾기보다 바로 나가버릴 가능성이 높습니다.

404 페이지는 검색 순위를 직접 올려주는 기능이라기보다, 잘못된 주소로 들어온 방문자가 다시 사이트 안에서 검색하거나 다른 콘텐츠를 찾을 수 있게 도와주는 역할에 가깝습니다. Astra Pro를 사용하고 있다면 별도 404 플러그인을 추가하지 않아도 Custom Layouts 기능으로 직접 오류 페이지를 만들 수 있었습니다.

아스트라 404 페이지를 따로 만들어 두면 단순 오류 안내가 아니라 검색과 재탐색을 유도하는 페이지로 바꿀 수 있습니다.

기본 404 페이지가 아쉬웠던 부분

워드프레스 기본 404 화면은 내용이 짧고 사이트 안에서 다음 행동을 유도하기 어렵습니다. 방문자가 잘못된 URL로 들어왔을 때 “페이지를 찾을 수 없다”는 안내만 보이면 검색창이나 다른 이동 경로를 찾기 전에 이탈할 수 있습니다.

제가 원하는 404 페이지는 단순 오류 안내가 아니라 검색창이 포함된 화면이었습니다. 방문자가 찾던 글이 없어도 사이트 내부 검색을 통해 비슷한 글을 다시 찾을 수 있어야 했기 때문입니다. 그래서 기본 화면을 그대로 두기보다 아스트라 404 페이지를 직접 만들어 검색창까지 넣어두는 방식이 더 낫다고 판단했습니다.

아스트라 404 페이지 만드는 방법에서 필요한 기능

Astra Pro를 사용하고 있다면 먼저 Custom Layouts 모듈이 켜져 있어야 합니다. 이 기능이 꺼져 있으면 404 Page 레이아웃을 만들 수 없기 때문에 외모 메뉴에서 아스트라 옵션으로 들어가 모듈 상태를 확인했습니다.

모듈을 활성화하면 외모 메뉴 아래에 Custom Layouts 항목이 나타납니다. 이 메뉴에서 404 페이지뿐 아니라 헤더, 푸터, 훅 영역 같은 레이아웃도 별도로 만들 수 있습니다.

Custom Layouts에서 404 Page 선택

Custom Layouts 화면으로 들어가면 기존에 만든 레이아웃 목록이 보이고, 상단의 Add New 버튼으로 새 레이아웃을 만들 수 있습니다. 404 오류 페이지를 만들 때는 일반 페이지가 아니라 404 Page 유형을 선택해야 합니다.

레이아웃 유형 선택 화면에서는 Header, Footer, Hooks, Inside Post/Page Content, 404 Page 중에서 고를 수 있습니다. 여기서 404 Page를 선택하면 잘못된 주소로 접속했을 때 해당 레이아웃이 표시됩니다.

404 페이지에 이미지와 안내 문구 추가

404 페이지는 너무 복잡하게 만들 필요는 없었습니다. 방문자가 상황을 바로 이해하고 다시 검색할 수 있도록 이미지, 안내 문구, 검색창 정도만 넣는 편이 보기 좋았습니다.

구텐베르크 편집기에서 제목을 입력하고 오류 안내용 이미지를 먼저 배치했습니다.

이미지 아래에는 방문자가 이해할 수 있는 짧은 안내 문구를 넣었습니다. 단순히 “404”만 보여주는 것보다 검색 기능을 안내하는 문장을 함께 넣으니 페이지 목적이 더 분명해졌습니다.

검색창까지 넣어야 하는 이유

404 페이지에서 가장 중요한 요소는 검색창이라고 생각했습니다. 잘못된 주소로 들어온 방문자가 다시 사이트 내부 콘텐츠를 찾을 수 있어야 하기 때문입니다.

블록 추가 메뉴에서 검색 블록을 찾아 페이지 안에 넣었습니다.

이미지, 안내 문구, 검색창까지 넣고 나니 기본 404 화면보다 훨씬 자연스럽게 보였습니다.

아스트라 404 페이지에 검색창을 넣어두면 잘못된 주소로 들어온 방문자가 바로 이탈하지 않고 다른 글을 다시 찾을 수 있습니다.

표시할 기기 설정

404 페이지를 만든 뒤에는 어떤 기기에서 표시할지도 확인했습니다. 데스크톱, 태블릿, 모바일이 모두 선택되어 있어야 모든 환경에서 같은 404 페이지가 나타납니다.

이 설정을 놓치면 특정 기기에서 기본 404 페이지가 계속 보일 수 있습니다. 특히 모바일 방문자가 많은 사이트라면 모바일 표시 여부를 꼭 확인하는 것이 좋았습니다.

적용 후 확인한 결과

설정을 저장한 뒤 일부러 잘못된 주소를 입력해 확인했습니다. 새로 만든 404 페이지가 정상적으로 표시됐고, 검색창도 문제없이 동작했습니다. LiteSpeed Cache를 사용 중이라면 변경 직후 바로 반영되지 않을 수 있습니다.

이럴 때는 캐시 삭제 후 다시 확인하거나 Ctrl + F5로 강제 새로고침을 해보는 것이 좋습니다. 테스트 결과 아스트라 404 페이지가 정상적으로 출력됐고, 검색창도 문제없이 작동했습니다.

FAQ

관련 글 추천

• 워드프레스 아스트라 테마 발췌 길이 0 설정 후 점 제거 방법
• 아스트라 이미지 문단 간격 사라졌을 때 추가 CSS로 해결한 과정
• 워드프레스 아스트라 Font Swap 경고 해결 후기 – 공식 문서 기준 수정 방법
• 아스트라(Astra) 테마 제목 아래 애드센스 넣는 방법 정리 (CLS 문제 방지 포함)