실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 UI/UX 꿀팁

404 에러 페이지 만들기, 방문자를 놓치지 않는 구성과 상태 코드 확인법

404 에러 페이지는 주소를 잘못 입력했거나 삭제된 글로 들어온 방문자가 보는 화면입니다. 서버 기본 화면을 그대로 두면 대부분 바로 창을 닫고 나갑니다.
이 글에서는 이탈을 줄이는 404 페이지 구성과, 검색엔진에 제대로 404로 전달되는지 상태 코드 확인하는 법까지 정리합니다.

💡 리뉴얼 직후에 특히 챙겨야 하는 이유

홈페이지를 새로 만들면 예전 주소로 저장된 즐겨찾기, 블로그에 걸어 둔 링크, 검색 결과가 한동안 남아 있습니다. 중요한 주소는 301 리디렉션으로 옮겨 주더라도 전부 잡기는 어렵습니다. 결국 놓친 주소는 404 페이지가 받게 되는데, 이 화면에 다음 행동이 없으면 광고비를 들여 데려온 방문자도 그대로 빠져나갑니다.

1. 404 페이지에 꼭 넣을 것

사과 문구를 길게 쓰기보다 다음에 어디로 갈지를 바로 보여 주는 쪽이 효과가 좋습니다. 실무에서는 아래 네 가지를 기본으로 넣습니다.

  • 무슨 일인지 한 줄 안내: "요청하신 페이지를 찾을 수 없습니다"
  • 메인으로 가는 버튼과 자주 찾는 메뉴 3~4개
  • 사이트 검색창 (게시판이 많은 사이트라면 특히)
  • 문의 페이지 링크: 찾던 정보가 없을 때 바로 물어볼 수 있게

헤더와 푸터는 다른 페이지와 똑같이 유지해 주세요. 디자인이 갑자기 달라지면 방문자는 다른 사이트로 넘어간 줄 압니다.

2. 서버에 404 페이지 연결하기

Apache 서버라면 .htaccess에 한 줄이면 됩니다. 여기서 자주 하는 실수가 경로를 https://로 시작하는 전체 주소로 적는 것입니다. 이렇게 쓰면 Apache가 리디렉션으로 처리해서 응답 코드가 404가 아니라 302로 바뀝니다.

# 올바른 예: 사이트 내부 경로로 지정
ErrorDocument 404 /404.html

# 피해야 할 예: 전체 주소로 쓰면
# 302 리디렉션으로 처리됩니다
# ErrorDocument 404 https://example.com/404.html

같은 이유로 "없는 페이지면 메인으로 보내기" 같은 스크립트도 권하지 않습니다. 방문자는 왜 메인으로 왔는지 모르고, 구글 서치 콘솔에서는 이런 주소가 소프트 404로 분류되는 경우가 많습니다. 안내 화면을 보여 주되 응답 코드는 404로 보내는 것이 맞습니다.

3. 상태 코드가 제대로 나오는지 확인하는 법

화면이 예쁘게 떠도 응답 코드가 200이면 검색엔진은 정상 페이지로 받아들여 색인에 남겨 둘 수 있습니다. 확인은 간단합니다. 크롬 개발자 도구의 Network 탭을 열고 없는 주소로 접속해 첫 줄의 Status 값을 보거나, 터미널에서 아래처럼 확인합니다.

# 첫 줄에 404가 나오면 정상
curl -I https://example.com/no-such-page

# 결과 예시
HTTP/2 404

CMS나 게시판 솔루션을 쓰는 사이트는 삭제된 글 주소가 200으로 응답하면서 "글이 없습니다" 문구만 띄우는 경우가 있으니, 일반 주소와 게시글 주소를 각각 한 번씩 확인해 보시길 권합니다.

"길을 잃은 방문자에게 다음 길을 보여 주는 것까지가 페이지 설계입니다."

나눔웹은 리뉴얼을 마칠 때 예전 주소 정리와 함께 404 화면과 응답 코드까지 점검해서 넘겨 드립니다.


List of Articles
번호 분류 제목 글쓴이
63 웹 성능 PageSpeed Insights 점수 보는 법, 실사용자 데이터와 실험실 점수가 다를 때 new 나눔웹
» UI/UX 404 에러 페이지 만들기, 방문자를 놓치지 않는 구성과 상태 코드 확인법 new 나눔웹
61 퍼블리싱 카드 목록 반응형 정렬, 미디어쿼리 대신 grid auto-fill과 minmax로 new 나눔웹
60 마케팅 구글 검색 사이트 이름이 엉뚱하게 나올 때, WebSite 구조화 데이터로 지정하는 법 나눔웹
59 모바일 모바일 가로 스크롤이 생길 때, 화면 밖으로 튀어나온 요소 찾아 고치는 순서 나눔웹
58 웹 성능 외부 폰트가 늦게 뜰 때, preconnect와 dns-prefetch로 연결 시간 줄이는 법 나눔웹
57 퍼블리싱 모달 팝업 만들기, dialog 태그로 ESC 닫기와 배경 클릭 닫기까지 처리하는 법 나눔웹
56 마케팅 301 리디렉션 설정법, 페이지 주소를 바꿀 때 검색 노출 지키는 순서 나눔웹
55 UI/UX 화면 애니메이션 줄이기 설정, prefers-reduced-motion으로 대응하는 법 나눔웹
54 웹 성능 유튜브 영상 넣었더니 페이지가 느려질 때, iframe 지연 로딩과 썸네일 대체법 나눔웹
53 마케팅 이미지 alt 태그 작성법, 검색 노출과 접근성까지 같이 챙기는 실무 기준 나눔웹
52 모바일 모바일 viewport 설정법, 화면이 작게 보이거나 확대가 막혔을 때 점검할 것 나눔웹
51 퍼블리싱 긴 URL·이메일 줄바꿈이 안 되고 박스를 뚫을 때, overflow-wrap 쓰는 법 나눔웹
50 마케팅 카톡 공유 썸네일이 예전 그대로일 때, OG 캐시 초기화로 바로 바꾸는 법 나눔웹
49 UI/UX 문의 폼 중복 접수 막는 법, 전송 버튼 연타와 새로고침 재전송 정리 나눔웹
48 웹 성능 브라우저 캐시 설정으로 재방문 속도 높이기, .htaccess 작성법 나눔웹
47 퍼블리싱 z-index 올려도 메뉴가 가려질 때, 쌓임 맥락(stacking context) 확인법 나눔웹
46 마케팅 canonical 태그 설정법, 같은 페이지가 주소 여러 개로 검색될 때 정리하는 순서 나눔웹
45 UI/UX 문의 폼 placeholder를 라벨 대신 쓰면 생기는 문제와 label 배치하는 법 나눔웹
44 마케팅 모바일 전화 문의 버튼 만들기, tel: 링크 작성법과 클릭 수 측정하는 법 나눔웹
Board Pagination Prev 1 2 3 4 Next
/ 4
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4