티스토리 뷰

IT

리다이렉트 전용 페이지 만들기

현정경 2021. 5. 30. 01:01
23.10.26 코멘트
예전에 블로그는 워드프레스로 만들었었어요. 닷홈을 쓰다가 블루호스트로 이전하면서 이 리다이렉트 페이지를 만들어야 했었는데 당시 그 경험을 작성한 글입니다. 지금이야 티스토리로 완전히 갈아탄 상황이지만ㅎㅎ 아무튼 리다이렉트 페이지를 만들어야 할 상황이시라면 이 글이 도움이 되길 바랍니다.

이번에 도메인 변경을 하게 되면서 문제는 기존의 url로 알고 있는 사용자와 검색을 통해 들어오는 사람들에게 이 새로운 주소를 알려줄 페이지를 만들 필요가 있었다. 그래서 오늘은 이 페이지 하나를 만드는데 내가 주요하게 생각한 건

  • 타이머가 돌면서 새로운 주소로 이동하게 한다
  • 뭔가 읽을 꺼리를 만들자
  • 디자인이 개발자스럽게 너무 구리게 하지는 말자
  • 기능을 넣자

뭐 이정도이다.

리다이렉트가 대체 난데스까?

리다이렉트는 일종의 포워딩이라고 보면 된다. A웹서버와 B웹서버가 있다고 하자. A웹서버의 주소로 들어오는 사용자들을 B웹서버의 주소로 보내버리는 거다. 이는 굉장히 친숙한 기능이다. 우리가 "http://www.google.co.kr"이라고 쳐도 "https://www.google.co.kr"로 보안접속이 되는 이유는 http 서버를 구글에서 https 보안프로토콜로 리다이렉트 시켰기 때문이다. 이렇듯 리다이렉트는 여러 이유로 사용되며 비즈니스에서도 활용하는 경우가 많다.

방법

먼저 기존의 사이트에 들어가보자. 나 같은 경우는 아예 웹서비스 자체를 초기화시켜버렸다. 워드프레스를 설치하지 않고 웹서비스 최상단 폴더 [WWW]에다가 index.html이라는 파일을 만들었다. index.html로 이름과 확장자를 지정하는 것만으로도 아파치 웹서버는 사용자가 어떻게 들어오든 404같은 오류만 아니면 이 index.html을 무조건 먼저 보여주도록 되어있다.

다음의 코드를 참고하라. 이는 내 리다이렉트 전용 페이지의 전체 코드이다. 이에 대한 지적재산권은 특별히 정하지 않았으며 마음껏 수정해서 사용해도 상관없다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!--<meta http-equiv="refresh" content="10; URL='https://jobmg.info'" />-->
	<style>
		h1, h2, h3, h4, h5, h6 {
			font-family: "Segoe UI",Arial,sans-serif;
			font-weight: 400;
			margin: 10px 0;
		}
		html, body {
			font-family: Verdana,sans-serif;
			font-size: 15px;
			line-height: 1.5;
		}
	</style>
	<title>폐쇄공간 이사 안내</title>
	<script>
		var count = 15;
		var new_url = "https://jobmg.info";
		var stop = 0;

		function countDown(){
			var timer = document.getElementById("timer");
			if(stop == 0 && count > 0){
				count--;
				timer.innerHTML = "<strong>"+count+"</strong> 초 후 폭파.. 아니;; ";
				setTimeout("countDown()", 1000);
			}
			else if (stop == 1){

			}
			else{
				window.location.href = new_url
			}
		}
		function countStop(){
			if(stop == 0){
				document.getElementById("btnStop").value = "아사히나 선배! 시간을 흘려주세요!";
				stop = 1;
			}
			else{
				document.getElementById("btnStop").value = "아사히나 선배! 시간을 멈춰주세요!";
				stop = 0;
				countDown();
			}
		}
		
	</script>
</head>
<body>
	<h1><span style="color: #008080;"><strong>아.. 고..고멘! 도메인이 변경되어버렸습니다!</strong></span></h1>
	<li>이 페이지는 약 <span id="timer"><script type="text/javascript">countDown();</script></span> 새로운 폐쇄공간으로 이동합니다.</li>
	<li><input type="button" id="btnStop" value="아사히나 선배! 시간을 멈춰주세요!" onclick="countStop();" /></li>
	<li>아니면 >> <strong><a title="폐쇄공간閉鎖空間" href="https://jobmg.info/" rel="home">새로운 폐쇄공간閉鎖空間</a> << </strong>링크를 클릭하세요.</li>
	<h3><p>기존의 현정경의 폐쇄공간은 폐쇄되었습니다(?)<br /> 스즈미야 하루히의 우울이 풀린 걸까요?</p></h3>
	<p><img src="https://ncache.ilbe.com/files/attach/new/20170820/14357299/925680566/9974932494/e52dd252495520140a51957701294146.jpg" width="208" height="117" /></p>
	<h2><p><strong>아닙니다!</strong></p></h2>
	<h3><p>다른 곳에 폐쇄공간이 생겼을 뿐이죠! 하루히는 당신의 등에! 가슴에! 하나가 되어 살아가!</p></h3>
	<p><img src="https://cfs4.tistory.com/upload_control/download.blog?fhandle=YmxvZzExMTk0MkBmczQudGlzdG9yeS5jb206L2F0dGFjaC8wLzk5LmpwZw%3D%3D" width="214" height="121" /></p>
	<ul>
	</ul>
	<p>앞으로도 오네가이시마스~~!</p>
</body>
</html>

그 결과는 다음과 같다.

리다이렉트 페이지

처음에 15초의 시간이 주어지게 되는데 이는 계속 시간이 0으로 카운트다운된다. 0이 되면 새 도메인을 갖는 블로그로 자동 이동하는 것이다.

물론 이 흐르는 시간은 아사히나 미쿠루 센빠이(캡쳐에서 "아사히"라고 오타낸 거 보소)의 TPDD를 이용한 능력으로 멈출 수 있으며 일시중단을 했다가 다시 시작할 수도 있다. 이는 아래의 글을 좀 더 읽고 싶은 분들을 위한 선택지를 남겨둔 것이다. 또한 바로 새로운 사이트로 가고 싶은 사람들을 위해서도 하이퍼링크 텍스트도 남겨두었다.

이런 구조가 되면

  • 처음 들어온 사용자
  • 내 유머를 보고 싶지 않은 사람(유머였어???!!!)
  • 유머를 보고 싶은 사람
  • 바로 가고 싶어하는 사람

다양한 목적을 갖는 별별 이용자들에게 모두 열려있는 페이지가 되는 것이다. 이것이 바로 UI/UX이다! (뭐래씹덕이)

후기

즐거운 시간이었다. 오랜만에 웹 스크립트를 하려고 하니 고생하긴 했다. 아니 더 큰 문제는 디자인이 너무 안 예뻐서 여기에 공수가 더 들어가긴 했다;; 내 디자인력이 넘모 딸리기 때문에;; 결국 별 스타일시트를 시도하다가 난장판이 되길래 폰트만 이쁘게 바꾸고 끝.ㅋㅋㅋ 아무튼 방문하시는 분들 새로운 공간에서 앞으로도 잘 부탁드립니다!

[이관 글. 2019-02-26 작성]

저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

네이트온 대화백업본 파일 분류 전용 프로그램 제작  (0) 2021.05.30
자유소프트웨어와 공산주의  (0) 2021.05.30
MySQL을 이용하여 워드프레스 글(포스트) 일괄수정  (0) 2021.05.30
Problem by Toad for SQL server information pop-ups for object  (0) 2021.05.29
SCI-HUB 유효한 주소 찾기 프로그램 SCI-HUB Valid Address Lookup Program  (0) 2021.05.29