URL을 클릭해서 X 페이지에 접속하려고 했는데, 실제로는 전혀 다른 Y 페이지로 이동된 경험이 있으신가요? 이러한 현상은 바로 페이지 리디렉션(page redirection) 때문에 발생합니다.
페이지 리디렉션이란?
리디렉션은 사용자가 요청한 페이지 대신 다른 페이지로 자동으로 이동시키는 기술입니다. 사이트 개편 시 기존 URL을 새 주소로 연결하거나, 로그인 상태에 따라 접근을 유도하는 등 다양한 상황에서 활용됩니다.
JavaScript로 리디렉션 구현하기
클라이언트 측에서 JavaScript를 사용하면 페이지 리디렉션을 아주 간단하게 처리할 수 있습니다. 사이트 방문자를 새 페이지로 이동시키려면 head 섹션에 한 줄의 코드만 추가하면 됩니다.
예제 코드
아래 코드를 직접 실행해 보면서 HTML 페이지를 JavaScript로 리디렉션하는 방법을 익혀보세요. 이 예제에서는 버튼을 클릭하면 홈페이지로 이동하도록 구성했습니다.
<html>
<head>
<script>
<!--
function Redirect() {
window.location.assign("https://www.tutorialspoint.com");
}
//-->
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 홈페이지로 이동합니다.</p>
<input type = "button" value = "Redirect Me" onclick = "Redirect();" />
</body>
</html>
주요 리디렉션 메서드 비교
JavaScript에서 페이지를 이동시키는 대표적인 방법은 세 가지입니다.
- window.location.assign(url) — 지정한 URL로 이동하며, 브라우저 히스토리에 기록되어 뒤로 가기가 가능합니다.
- window.location.replace(url) — 지정한 URL로 이동하지만 현재 페이지를 히스토리에서 대체하므로 뒤로 가기로 돌아올 수 없습니다.
- window.location.href = url — assign()과 동일하게 동작하는 가장 널리 쓰이는 간편한 방식입니다.
상황에 맞는 메서드를 선택하면 더 깔끔한 사용자 경험을 제공할 수 있습니다.