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

나눔웹 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
번호 분류 제목 글쓴이
62 웹 성능 홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드 나눔웹
61 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
60 마케팅 카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법 나눔웹
59 모바일 모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법 나눔웹
58 웹 성능 홈페이지 첫 화면 글자 깜빡임(투명 현상) 1초 만에 해결하는 법 나눔웹
57 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
56 웹 성능 클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법 나눔웹
55 모바일 고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법 나눔웹
54 UI/UX 모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법 나눔웹
53 UI/UX 레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS 나눔웹
52 UI/UX 상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄 나눔웹
51 모바일 아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법 나눔웹
50 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
49 모바일 모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기 나눔웹
48 UI/UX 애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법 나눔웹
47 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
46 UI/UX 1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기 나눔웹
45 UI/UX 투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기 나눔웹
44 모바일 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 나눔웹
43 모바일 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 (Overscroll) 나눔웹
Board Pagination Prev 1 2 3 4 Next
/ 4
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4