웹사이트를 새 주소로 이전하거나 방문자를 다른 페이지로 안내해야 하는 상황은 생각보다 자주 발생합니다. 리디렉션은 일반적으로 서버 백엔드에서 처리하지만, 이 글에서는 HTML만으로 클라이언트 사이드에서 리디렉션을 구현하는 방법을 소개합니다.
HTML 리디렉션의 기본 원리
HTML 리디렉션은 문서의 <head> 영역에 있는 <meta> 태그를 통해 수행됩니다. 이 문법의 가장 큰 장점은 브라우저가 새 페이지로 이동하기 전에 지정한 시간만큼 지연을 둘 수 있다는 점입니다. 덕분에 방문자에게 간단한 안내 메시지를 먼저 보여줄 수 있습니다.
기본 문법은 다음과 같습니다.
<head>
<meta http-equiv="refresh" content="<대기 시간(초)>; url=<리디렉션할 주소>">
</head>
http-equiv 속성은 HTTP 응답 헤더를 흉내 내는 역할을 하며, 이를 통해 페이지 새로고침(refresh) 동작이 실행됩니다. content 속성은 두 부분으로 구성되는데, 첫 번째는 리디렉션 전 대기 시간(초), 두 번째는 이동할 URL입니다. 대기 시간을 활용하면 "사이트가 영구적으로 이전했으니 새 주소를 즐겨찾기에 추가해 주세요" 또는 "서버 점검 중이므로 임시 페이지로 안내합니다"와 같은 메시지를 사용자에게 전달할 수 있습니다.
주의할 점: 초 단위와 밀리초 단위의 차이
여기서 시간 단위는 초(second)입니다. 웹 개발 세계에서는 애니메이션이나 API 요청 등 많은 값들이 밀리초(ms) 단위로 측정되지만, meta refresh에서는 해당하지 않습니다. 만약 실수로 1000처럼 큰 숫자를 입력하면 페이지가 실제로 이동하기까지 약 16분 이상을 기다려야 하므로 반드시 주의하세요.
content 속성의 두 번째 값은 사용자를 안내할 목적지 URL이며, 이 모든 설정은 HTML 페이지의 head 안에서 이루어집니다.
실제 HTML 문서 적용 예시
다음은 완성된 HTML 문서에 리디렉션을 적용한 모습입니다.
<html>
<head>
<meta http-equiv="refresh" content="1; url=https://www.careerkarma.com/blog/html">
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>잠시 후 <a rel="noreferrer noopener" href="https://www.careerkarma.com/blog/html">https://www.careerkarma.com/blog/html</a> 페이지로 자동 이동합니다.</p>
<p>5초 내에 이동하지 않으면 위 링크를 직접 클릭해 주세요.</p>
</body>
</html>
마무리
백엔드에 접근 권한이 없거나 서버 설정을 변경할 수 없는 환경이라면, 이러한 HTML 메타 리디렉션 방식을 적극적으로 고려해 보세요. 별도의 서버 스크립트나 설정 파일 수정 없이도 몇 줄의 코드만으로 간편하게 방문자를 원하는 페이지로 안내할 수 있습니다. 다만 검색 엔진 최적화(SEO) 관점에서는 301 리디렉션과 같은 서버 측 방식이 권장되므로, 가능하다면 장기적인 해결책으로 서버 측 리디렉션을 함께 검토하는 것이 좋습니다.