JavaScript window.location 객체로 방문자를 다른 URL로 리디렉션하는 방법

JavaScript의 window.location 객체를 사용하여 웹사이트 방문자를 다른 URL로 리디렉션하는 방법과 그 활용 사례를 알아보세요.

페이지 리디렉션 방법

웹사이트 방문자를 새 URL로 리디렉션하는 데 필요한 것은, 리디렉션을 시작할 웹페이지에서 다음 JavaScript 코드를 실행하는 것뿐입니다:

window.location = "https://wheretoredirect.com"

이 코드는 외부 .js 파일에 넣거나, 웹페이지의 <head> 섹션에 인라인으로 삽입할 수 있습니다:

<script type="text/javascript">
  window.location = "https://wheretoredirect.com"
</script>

이제 https://yourwebsite.com에 접속하는 모든 방문자는 window.location 값으로 지정된 URL로 즉시 리디렉션됩니다.

페이지 리디렉션은 다음과 같은 대상으로 방문자를 안내할 때 활용할 수 있습니다:

다른 웹사이트 도메인 (oldsite.com에서 newsite.com으로)
같은 도메인 내의 다른 페이지 또는 게시물 (yourwebsite.com/your-post)
같은 도메인의 하위 폴더 (yourwebsite.com/archive)
서브도메인 (support.yourdomain.com)

사용자를 리디렉션할 때는 올바른 웹사이트 프로토콜(https, www, https://www 등)을 사용해야 한다는 점에 유의하세요.

리디렉션 전에 메시지 표시하기

사용자 경험을 개선하려면 방문자에게 메시지를 먼저 보여주고, 카운트다운 타이머로 리디렉션 시점을 늦출 수 있습니다. 이렇게 하면 방문자가 갑자기 다른 URL이나 도메인으로 이동하게 된 이유를 혼란스러워하지 않습니다.

앞서 살펴본 코드에 다음 두 가지 요소를 추가해 보겠습니다:

리디렉션이 진행되는 이유를 설명하는 메시지
5초 후 리디렉션 코드를 실행하는 카운트다운 타이머

메시지 표시 + 카운트다운 타이머

function showMessageBeforeRedirect() {
  window.location = "https://wheretoredirect.com"
}
document.write("5초 후 새 도메인으로 이동합니다 :-)")
setTimeout("showMessageBeforeRedirect()", 5000)

여기서 5000 값의 단위는 밀리초입니다.

앞서와 마찬가지로 이 코드를 웹사이트의 <head>에 추가해 보세요:

<script type="text/javascript">
  function showMessageBeforeRedirect() {
    window.location = "https://wheretoredirect.com"
  }
  document.write("5초 후 새 도메인으로 이동합니다 :-)")
  setTimeout("showMessageBeforeRedirect()", 5000)
</script>

실제 동작 과정은 CodePen 예제를 통해 확인해 볼 수 있습니다.

방문자를 리디렉션해야 하는 이유

실무 프로젝트에서 사용자를 리디렉션해야 하는 대표적인 이유는 다음과 같습니다:

새 도메인 이름으로 사이트를 이전했고, 기존 도메인을 방문하던 사용자들이 새 도메인으로 자연스럽게 연결되도록 하고 싶은 경우
레거시 브라우저용과 최신 브라우저용처럼 웹사이트의 여러 버전이 존재하며, 사용자가 자신의 브라우저 환경에 맞는 버전에 접속하도록 하고 싶은 경우
동일한 웹사이트의 다국어 버전을 운영 중이며, 예를 들어 브라우저 언어 설정이 이탈리아어인 사용자를 yourwebsite.com/it으로 안내하고 싶은 경우