{후키템플릿}7.4.URL 리디렉션

written: Jan 28 2002
last modified: Sep 20 2006

URL 리디렉션(redirection)

URL 리디렉션의 필요성

사실 개발자가 템플릿을 이용하는 가장 큰 이유라면 당연히 웹디자인 부분과 PHP 코딩 부분을 분리하기 위해서 입니다. 이러한 이유로 템플릿은 웹디자이너가 나모 웹에디터와 같은 위지윅 웹에디터를 이용하여 작성하는데 불편함이 없어야 하며, 아울러 웹에디터에 나타나는 각 부분의 의미가 명확하여야 합니다. 이러한 관점에서 볼 때 현재까지 나와 있는 모든 템플릿툴에서 발견되는 문제라고 하면 템플릿에서 작성된 HTML 소스(자바 스크립트 소스 포함)에 포함된 URL(Uniform Resource Locator)이 PHP로 해석될 때는 설정된 템플릿 경로에 따라 전혀 다르게 표기된다는 것입니다.

이 문제를 해결하기 위해서는 템플릿과 PHP 문서를 동일한 디렉토리에 보관하든가, 아니면 템플릿에 있는 URL을 상대경로가 아닌 절대경로를 이용하든가 등등 해야 할 것입니다. 이것이 현실적으로 곤란하다면 템플릿에 있는 URL을 전부 PHP 문서 위치에 맞게 변경하는 수고를 해야겠지요.

후키템플릿에서는 이 문제를 해결하기 위해 제가 앞서 공개하였던 HTML 파서를 이용하게 되었습니다. define() 함수에 의해 읽어들인 템플릿 파일을 HTML 파서에 의해 태그 단위로 분석한 후 URL이 있는 부분들을 전부 찾아 내어 PHP 문서에 맞게 변경 시켜주게 됩니다.

URL 리디렉션 = 웹문서 리디렉션 + 리소스 리디렉션

나모와 같은 웹에디터를 이용하여 작성된 웹문서(여기서는 템플릿 파일을 의미함)에 포함된 각종 파일이 있는 위치를 PHP 문서의 위치에 맞게 적절히 변경해주는 "URL 자동 변경" 기능을 최초 버전부터 제공하여 왔었습니다만 이 기능이 그림과 같은 리소스를 처리하는데는 적절하였으나 하이퍼링크로 연결된 HTML 문서의 위치를 처리하는데는 문제가 많이 있었습니다.

따라서 1.0.0 버전부터는 그림과 같은 웹문서의 위치 변경과 웹문서가 아닌 나머지 모든 리소스(그림, 동영상 등)의 위치 변경에 대한 기능을 구분하여 제공합니다. 이 문서에서는 하이퍼링크로 연결된 HTML 문서의 위치 변경을 "웹문서 리디렉션", 그림 또는 동영상과 같은 나머지 리소스의 위치 변경을 그냥 "리소스 리디렉션"이라는 용어로 부르겠으니 혼동없기를 바랍니다. 즉, "리소스 리디렉션"이라고 했을 때는 웹문서를 제외한 파일에 대한 리디렉션을 의미합니다. 만약 웹문서를 포함한 모든 리소스에 대한 리디렉션을 지정할 때는 웹문서 또는 리소스라는 접두어없이 "리디렉션" 또는 "URL 리디렉션"이라고 부르겠습니다.

사실 태그의 속성으로 지정되는 각종 URL이 그림, 동영상, 웹문서를 모두 지원하는 경우가 많으므로 양쪽 기능을 설명하는데 있어서 명확히 구분되지 않는 부분도 많이 있을 것입니다.

URL 리디렉션이 적용되는 URL 형식

URL이 절대 경로로 지정되었다면 리디렉션이 필요없을 것입니다. 따라서 "./" 또는 "../"로 시작되는 URL이나 파일명과 쿼리문만으로 구성된 URL일 경우에만 리디렉션 기능이 적용됩니다. 만약 URL이 템플릿 변수로 지정되었다면 이 URL은 PHP 소스에서 자신의 위치에 맞게 정확하게 지정할 것이기 때문에 역시 리디렉션을 하지 않습니다.

URL 리디렉션이 가능한 태그 속성들

아래는 리디렉션 해주는 태그 속성 및 스타일 속성입니다.

태그명     속성명
------     ------
IMG        src, lowsrc
EMBED      src
INPUT      src
FRAME      src
IFRAME     src
SCRIPT     src
BODY       background
TABLE      background
TR         background
TH         background
TD         background
LINK       href
BASE       href
A          href
Q          cite
BLOCKQUOTE cite
INS        cite
DEL        cite
OBJECT     data
FORM       action
PARAM      value

스타일
------
<태그명 style="background-image:url(URL)">
<STYLE>
   @import url(URL);
   background-image: url(URL);
   background: #fcf url(URL) 50%;
   list-style-image: url(URL);
   list-style: lower-roman inside url(URL);
</STYLE>

1.0.0 이전 버전에서는 <PARAM> 태그에 포함된 URL에 대한 리디렉션 기능을 제공하지 못했습니다.

1.0.0 버전부터는 <PARAM> 태그의 'value' 속성이 URL일 경우에도 리디렉션 기능을 수행하도록 개선하였습니다.

혹시 리디렉션이 필요한 태그가 더 있다면 게시판을 통해 알려주시기 바랍니다.

자바 스크립트에 포함된 URL 리디렉션

자바 스크립트에 있는 URL의 리디렉션까지 지원한다는 것은 그 구현이 무척이나 어려운 것 같습니다. 그래서 완벽한 지원이라기 보다는 한가지 약속을 통하여 이를 해결하고자 합니다.

자바 스크립트에서 URL을 리디렉션하고 싶은 경로가 있다면 이 부분은 아래와 같이 별도로 관리하여 주시기 바랍니다.

[code html;gutter:false] <SCRIPT language="javascript" tpl="URL"> <!-- OpenMail = "./../mail.php"; OpenHelp = "./../help_search.php"; //--> </SCRIPT> <SCRIPT language="javascript"> <!-- function openMail(to) { pos = ',left='+(screen.width-240)/2+',top='+(screen.height-240)/2; popup = window.open('', 'mail_window', 'scrollbars=no,width=240,height=240' + pos); popup.location.href = OpenMail + '?to=' + to; popup.focus(); } //--> </SCRIPT> <INPUT type=button value='도움말' name=help onClick='openWindow(500, 400, OpenHelp)'> [/code]

OpenMail과 OpenHelp가 바로 리디렉션하고 싶은 URL이 저장되어 있는 자바 스크립트 변수입니다. 이 예처럼 URL을 변경하고 싶은 자바 스크립트 변수명들은 한 곳에 묶어서 따로(다른 SCRIPT 문장과 분리하여) 관리하세요. 이 때 태그 SCRIPT의 사용자 정의 속성 'tpl'을 'URL'라고 지정하여 주셔야 합니다. 그리고 나서 다른 자바 스크립트 문장에서는 이 변수를 이용하시면 됩니다. 이것만 지켜주신다면 자바스크립트에 포함된 URL을 자동 변경하는데 별 문제가 없을 것입니다.

버전 0.0.2 이전 버전에서는 사용자 정의 속성 'tpl' 대신에 'name'를 사용하였으나 이 속성명 'name'은 실제로 태그에서 사용하는 속성이다보니 충돌이 일어나는 경우가 발생하여 0.0.2 버전부터는 'name' 속성을 지원하지 않습니다.

< URL 자동 변경을 위한 속성 지정 <

버전	속성명	속성값	향후 호환성
0.0.1	name	URL4TPL	호환성 없음
0.0.2	name	URL4TPL	"
	tpl	URL	호환성 있음

'7.7.복수 템플릿 파일의 용법'에서 자세히 언급하겠지만 속성 'tpl'에 설정할 수 있는 또 다른 값 'TMP'가 있습니다. 'TMP' 용법에 대한 자세한 것은 뒷 장 '7.7.복수 템플릿파일의 용법'을 참조바랍니다. 만약 'URL', 'TMP' 값 모두를 설정하려면 아래와 같이 콤마로 구분하여 속성값을 지정하면 됩니다. 순서는 관계없습니다.

[code html;gutter:false] <SCRIPT language="javascript" tpl="URL,TMP"> <!-- OpenMail = "./../mail.php"; OpenHelp = "./../help_search.php"; //--> </SCRIPT> [/code]

이제는 URL 리디렉션 문제로 웹디자이너와 프로그래머가 만날 일이 별로 없을 것입니다.

내장 필터함수 url()을 이용한 URL 리디렉션

1.2.0 버전부터는 자바 스크립트에 포함된 URL의 리디렉션을 tpl 속성을 사용하지 않더라도 내장 필터함수인 url() 함수를 이용하여 아래와 같이 쉽게 구현할 수 있습니다.

[code html;gutter:false] <SCRIPT language="javascript"> <!-- function openMail(to) { pos = ',left='+(screen.width-240)/2+',top='+(screen.height-240)/2; popup = window.open('', 'mail_window', 'scrollbars=no,width=240,height=240' + pos); popup.location.href = "{=>url('./../mail.php')}" + '?to=' + to; popup.focus(); } //--> </SCRIPT> <INPUT type=button value='도움말' name=help onClick='openWindow(500, 400, "{=>url('./../help_search.php')}")'> [/code]

내장 필터함수를 이용하는 방법에 대하여는 '8.7.내장 필터함수'를 참조바랍니다.

자바 스크립트 이벤트 핸들러에 의해 실행되는 함수

[code html;gutter:false] <A href="index.html" onMouseOver="test('arg1', 'arg2', 'images/test.gif', true);"> test </A> [/code]

위의 예와 같이 각종 태그 내에 지정된 이벤트 핸들러에 의해 실행되는 함수로 전달되는 인수 중에 있는 URL을 리디렉션해 줍니다.

해당되는 이벤트 핸들러에는 'onAbort', 'onBlur', 'onChange', 'onClick', 'onError', 'onFocus', 'onLoad', 'onMouseOut', 'onMouseOver', 'onReset', 'onSelect', 'onSubmit', 'onUnload'가 있습니다.

이 기능은 1.0.0 버전부터 지원됩니다.

URL 리디렉션에서의 문제점

PHP 스크립트로 HTML 태그를 분석하는 일은 많은 시간이 소요되는 일입니다. 그러나 뒷장에서 언급하고 있는 '템플릿 캐시'을 이용하면 URL 리디렉션을 할 때와 하지 않을 때의 차이가 거의 없습니다. 템플릿의 변경을 즉시 반영하여 페이지를 생성하기 때문에 여러분은 캐시를 사용하는지 하지 않는지 조차 전혀 눈치챌 수 없습니다. 이 기술은 이전에 공개했던 유닛테이블에서 써 먹던 것이었는데 여기서 다시 써 먹게 되네요.