JavaScript redirection: 리디렉션의 기본 개념

머리말

  JavaScript 리디렉션(redirection)은 웹 페이지가 자동으로 다른 페이지로 이동하도록 하는 기술을 의미한다. 웹 페이지에 방문하는 사용자가 특정 웹 페이지를 요청하면, 웹 페이지 내의 JavaScript 코드가 실행되어 자동으로 다른 페이지로 이동시키는 방식이다. 본 포스팅에서는 이러한 리디렉션의 기본 개념과 주의사항에 대해서 자세히 설명하도록 한다.

리디렉션의 기본 개념

  웹 영역에서는 리디렉션을 표현할 때, 일반적으로 웹 페이지를 이동시키는 기술을 의미한다. 사용자가 접속한 웹 페이지를 이동시키는 방법은 크게 두 가지로 구분할 수 있다. 서버 리디렉션과 클라이언트 리디렉션인데, Javascript를 이해하는데 도움이 될 수 있으니 조금은 어렵더라도 이해하고 넘어가도록 한다.

  첫 번째로 서버에서 수행하는 리디렉션이다. 사용자로부터 웹 페이지의 수신을 요청받은 서버는 일정한 규칙에 따라 URL을 리디렉션 시킨다. 이때 사용자는 서버로부터 웹 소스를 내려받는 과정 없이 자연스럽게 리디렉션 된 URL로 이동하게 된다. 이러한 처리 과정을 간략하게 그림으로 표현하면 아래와 같다.

  두 번째로 클라이언트에서 수행하는 리디렉션이다. 클라이언트라 함은 사용자 장비(device)를 의미한다. 먼저, 사용자가 접속한 URL은 서버로부터 웹 소스를 내려받는다. 이후 사용자 장비는 내려받은 웹 소스 중 리디렉션 코드를 수행하면서 새로운 URL로 리디렉션 한다. 이러한 처리 과정을 간략하게 그림으로 표현하면 아래와 같다.

  코드 한 줄짜리 리디렉션을 이렇게도 자세히 설명하는 이유는 Javascript 특성 때문이다. Javascript는 전통적으로 클라이언트 장비에서 수행되는 웹 소스다. Javascript 소스에서 리디렉션을 수행하게 될 경우, 상대적으로 불필요한 리소스의 전달 과정이 동반된다. 클라이언트의 인터넷 환경이 좋지 않거나 웹 소스가 용량이 큰 경우, 웹 페이지를 두 번이나 이동하느라 화면이 깜박이는 순간은 피하기 어렵다. 이러한 이유로 사용자의 경험을 우선시하는 웹 사이트라면 서버 리디렉션을 권장한다. 서버에 직접 소스 코드를 작성할 수 있는 상황이 아닐 경우에만 선택적으로 클라이언트 리디렉션을 사용하는 것이 좋다.

일반적인 리디렉션의 종류

  리디렉션은 JavaScript의 window.location 객체를 사용하여 구현할 수 있다. window.location 객체는 현재 페이지의 URL 정보를 포함하고 있으며, href 속성을 변경하여 리디렉션을 수행시킬 수 있다. 이렇듯 Javascript 소스에서 리디렉션을 수행하는 코드는 단 한 줄이면 완성된다. 이러한 리디렉션을 자신의 상황에 따라 적절히 연출해야 하는데, 일반적으로 사용되는 방법은 아래와 같이 3가지 정도가 존재한다.

페이지 이동

  가장 단순한 형태로써 사용자가 특정 버튼을 클릭하거나 특정 조건을 만족했을 때, 다른 페이지로 이동시키는 경우에 사용된다. 예를 들어, 로그인 버튼을 클릭하면 로그인 페이지로 이동하도록 리디렉션을 설정할 수 있다. 예제 소스 코드는 아래와 같다.

window.location.href = "https://www.wookoa.com";

시간 지연 이동

  일정 시간 후에 사용자를 다른 페이지로 이동시키는 경우에 사용된다. 이는 일시적으로 공지사항과 같은 메시지를 표시하거나 페이지가 변경되었음을 사용자에게 알린 후 다른 페이지로 이동해야 하는 경우에 유용하다. 예제 소스 코드는 아래와 같다.

setTimeout(function() {

    window.location.href = "https://www.wookoa.com";

}, 3000);

조건부 이동

  특정 조건을 만족할 때만 사용자를 다른 페이지로 이동시키는 경우에 사용된다. 단순하게 분기문으로 소스 코드를 분기시키는 방식이다. 예를 들자면, 웹 페이지의 유효성 검사에 실패했을 때 오류 페이지로 이동하도록 리디렉션을 설정할 때 사용된다. 예제 소스 코드는 아래와 같다.

if (window.location.href == "https://www.wookoa.co.kr") {

    window.location.href = "https://www.wookoa.com";

}

꼬리말

  간편하게 페이지를 이동시킬 수 있는 리디렉션은 사용자 경험 측면에서 주의해야 할 점이 있다. 너무 빈번하게 혹은 무분별하게 리디렉션을 사용하면, 웹페이지에 방문하는 사용자가 원하지 않는 동작을 경험할 수 있다. 또한 검색 엔진 등에서도 웹 페이지의 사용성 평가에 적지 않은 영향을 미칠 수 있다. 그렇기 때문에 리디렉션을 사용할 때에는 사용자 경험을 고려하여 적절히 활용하며 정확한 페이지로 이동시키는 것이 매우 중요하다.