리모콘 하나로 웹페이지 감싸안기
가전 제품용 리모콘이 주는 편리함을 웹페이지에서 느낄 수 있는 방법이 있다. 주인공은 웹용 리모콘. 웹용 리모콘과 함께라면 서핑 시간을 단축하는 것은 따논 당상으로 또다른 웹서핑의 감미로운 마저 느낄 수 있다.
최근 웹서핑을 하다 보면 리모콘을 사용하는 홈페이지를 자주 접하게 되는데, 리모콘을 이용하면 네비게이션 툴바의 버튼(이를테면 Back이나 Forward, Reload와 같은 버튼)이나 하이퍼링크 등을 직접 고르면서 일일이 홈페이지를 뒤지는 수고를 덜 수 있기 때문이다.
월간 <인터넷> 7월호에서 필자가 윈격 윈도우(Remote Window)에 대해 소개했는데, 그때의 팁은 단순히 새로운 윈도우를 생성하는 정도였지만, 이번호에는 새로운 원격 윈도우를 생성할 뿐만 아니라 원격 제어까지 직접 할 수 있는 방법을 알아보자.
내가 선택한 리모콘 방식
리모콘을 생성하는 방법은 크게 두 가지가 있다. 하나는 자동 생성으로 어떤 홈페이지를 방문하는 순간 <BODY> 태그의 onLoad 항목에서, 함수 호출을 통해 리모콘을 자동 생성하는 방식이다. 또 하나는 수동 생성인데, 이는 사용자가 원하는 경우 리모콘을 생성하고, 원하지 않으면 생성하지 않는 방식이다. 보통 방문자의 편의를 도모하기 위해 전자의 방식을 많이 택하지만 반드시 좋은 방식이라고는 볼 수 없다. 자동으로 생성한다는 게 문제점인데, 리모콘을 필요로 하지 않아서 리모콘을 제거시켰는데도 불구하고 메인 홈페이지로 다시 돌아오면 리모콘이 다시 생성돼 사용자를 짜증스럽게 만들기 때문이다.
필자가 생각하기에는 방문자의 용도에 맞게 선택할 수 있는 후자의 방식이 더 좋다고 본다. 하지만 웹서핑에 미숙한 초보자들에게는 전자가 더 유리하므로 홈페이지를 방문하는 방문자의 수준과 방문 용도를 잘 생각해가며 알맞은 방법을 선택해야 할 것이다. 여기서는 후자의 방식을 택했지만, 소스 코드를 조금만 수정하면 전자로 바꿀 수 있다.
리모콘의 뼈대, 원격 윈도우
일단 현재 윈도우가 아닌 리모콘으로 사용할 새로운 윈도우를 생성해야 한다. 일단 리모콘을 생성할 HTML 문서를 선택하거나 새로 만든 후, 다음 소스 코드를 <HEAD>와 </HEAD> 사이에 끼워 넣되 </TITLE> 뒤에 넣도록 한다.
(예제 1) 리모콘 윈도우를 위한 원격 윈도우
<SCRIPT LANGUAGE = "Javascript">
var farwindow = null;
function RemoteWindow() // 새로운 윈도우를 생성하는 함수
{
farwindow=window.open(' ', 'RemoteWindow', 'width=200, height=100,
scrollbars=0, resizable=0');
// 새로운 윈도우를 열고 이 윈도우의 이름을 RemoteWindow라 명명한다.
// 그리고 가로, 세로 크기를 정하고 스크롤바를 없애고
// 크기 변경을 못하도록 한다.
if (farwindow != null)
// 새로운 윈도우 생성이 실패했을 때(이미 존재할 경우)
{
if (farwindow.opener == null)
// 생성된 윈도우의 부모 윈도우가 없을 때
{
winow.opener = self;
// 현재 윈도우가 부모 윈도우가 된다.
}
farwindow.location.href='remote3.html';
// 리모콘이 될 HTML 문서
}
}
</SCRIPT>
이 소스에서 새로 생성하는 윈도우를 가리키는 변수가 farwindow이고, 그 윈도우 이름은 RemoteWindow가 된다. 또한 그 새로운 윈도우의 부모 윈도우, 즉 그 윈도우를 생성하는 생성자 윈도우가 바로 opener다. 이제 위의 함수를 실제 호출시키기 위해 <BODY>와 </BODY> 사이의 적당한 위치에 다음의 코드를 삽입하자.
<A HREF=javascript:RemoteWindow()>리모콘 띄우기</A>
웹브라우저에서 본문을 불러올때 이때 '리모콘 띄우기'를 클릭하면 새로운 윈도우가 나타난다. 단, 이때 위의 소스 코드에 있는 remote3.html이 같은 디렉토리에 존재해야 하며, remote3.html이 HTML 형식이면 어떠한 내용이어도 상관없다. 이제 리모콘을 호출하는 HTML 문서가 완성됐다. 다음 단계부터는 리모콘으로 사용할 새로운 HTML 문서 파일을 가지고 작업을 계속해보자.
리모콘 디자인과 파워 충전
자, 이제 실제 리모콘 역할을 할 remote3.html을 만들어 보자. 파일 이름을 원하는 대로 바꾸어도 되지만, (예제 1)에 있는 remote3.html도 같이 변경하는 것을 잊어서는 안된다. 일단 모양을 리모콘처럼 만드는데, <BODY>의 내용을 다음과 같이 작성하자.
(예제 2) 리모콘 만들기
<body marginwidth=1 marginheight=0 bgcolor=BBBBBB>
<table border=0 width=200 height=100>
<tr><FORM><td>
<INPUT type=button value="메인" width=94 height=44
OnClick="javascript:RemoteWindow(1); return false;">
</td><td>
<INPUT type=button value="성욱이는?" width=94 height=44
OnClick="javascript:RemoteWindow(2); return false;">
</td></tr>
<tr><td>
<INPUT type=button value="게임" width=94 height=44
OnClick="javascript:RemoteWindow(3); return false;">
</td><td>
<INPUT type=button value="강좌" width=94 height=44
OnClick="javascript:RemoteWindow(4); return false;">
</td></FORM></tr>
</table>
</body>
(예제 2)위의 형태가 리모콘의 전형적인 형태로 두 개의 윈도우 중 앞쪽에 있는 작은 윈도우다. 이 윈도우는 <FORM>과 <INPUT>, <TABLE> 태그를 이용해 단순히 세로 2칸, 가로 2칸을 가진 표의 형태로 만든 것 뿐이다. 아직 구현하지는 않았지만, 각 4개의 버튼을 각각 클릭했을 때 호출되는 javascript:RemoteWindow() 함수는 다음 단계에서 구현할 것이다.
이제 모든 준비는 끝났다. TV 리모콘을 눌렀을 때 선택한 채널이 화면에 나오는 것처럼 리모콘을 클릭했을 때 메인 윈도우에서 우리가 선택한 HTML 문서를 볼 수 있도어야 한다. (예제 3)을 <HEAD>와 </HEAD> 사이에, 그리고 </TITLE> 다음에 넣도록 한다.
(예제 3) 링크를 위한 리모콘 윈도우 소스
<SCRIPT LANGUAGE = "Javascript">
add=new Array(4); // 분기할 주소 배열
// 다음의 HTML 주소는 원하는 파일 이름을 써주면 된다.
add[1]="index.html";
// 성욱이 메인 홈페이지 HTML 파일 이름
add[2]="index1.html";
// 성욱이 소개 HTML 파일 이름
add[3]="java/csu.html";
// 게임 "성욱이의 모험"의 HTML 파일 이름
add[4]="comlec.html";
// 성욱이 컴퓨터 강좌 HTML 파일 이름
var farwindow = null;
function RemoteWindow(i)
// i는 호출했을 때 넘어오는 숫자
{
opener.location=add[i];
// 부모 윈도우의 위치를 바꾼다.
}
</SCRIPT>
리모콘의 핵심은 (예제 3)에 있다. opener.location이 바로 자신을 생성한 부모의 위치를 의미하는데, 이것을 바꾸어 주는 것이 리모콘이 갖는 대부분의 역할이다.
리모콘 예제의 실습은 http://opera.cse.cau.ac.kr/~csucom/main.html에 가면 할 수 있다. 언제나 질문 사항이 있으면 필자에게 전자우편을 보내기 바란다.
(리스트 1) 리모콘을 불러오는 HTML 문서(main.html)
<html>
<head>
<title>성욱이의 리모콘</title>
<SCRIPT LANGUAGE = "Javascript">
var farwindow = null;
function RemoteWindow()
{
farwindow=window.open(' ', 'RemoteWindow', 'width=200, height=100,
scrollbars=0, resizable=0');
if( farwindow != null)
{
if (farwindow.opener == null)
{
winow.opener = self;
}
farwindow.location.href='remote3.html';
}
}
</SCRIPT>
</head>
<body background="csu1.gif">
<p>
<pre>
<pre>
<center>
<h1>
<A HREF=javascript:RemoteWindow()>리모콘 띄우기</A> </h1>
<pre>
</pre><B><font size=5 color=22aa33>
<br>
이 리모콘으로 성욱이의 홈페이지를 <p>
좀더 수월하게 구경하실 수 있어요. <P>
</font><BR><BR><BR><BR><BR>
<font size=3 color=FF0000>
* 영어 한마디 : 리모콘은 Remote Contoller의 줄임말.
</B></font></center>
</body>
</html>
(리스트 2) 리모콘으로 사용되는 HTML 문서(remote3.html)
<html>
<head>
<title>성욱이의 리모콘</title>
<SCRIPT LANGUAGE = "Javascript">
add=new Array(4); // 분기할 주소 배열
// 다음의 HTML 주소는 원하는 파일 이름을 써주면 된다.
add[1]="index.html";
// 성욱이의 메인 홈페이지 HTML 파일 이름
add[2]="index1.html";
// 성욱이 소개 HTML 파일 이름
add[3]="java/csu.html";
// 게임 "성욱이의 모험"의 HTML 파일 이름
add[4]="comlec.html";
// 성욱이 컴퓨터 강좌 HTML 파일 이름
var farwindow = null;
function RemoteWindow(i)
{
opener.location=add[i];
}
</SCRIPT>
</head>
<body marginwidth=1 marginheight=0 bgcolor=BBBBBB>
<table border=0 width=200 height=100>
<tr>
<FORM>
<td>
<INPUT type=button value="메인" width=94 height=44
OnClick="javascript:RemoteWindow(1); return false;">
</td>
<td>
<INPUT type=button value="성욱이는?" width=94 height=44
OnClick="javascript:RemoteWindow(2); return false;">
</td>
</tr>
<tr>
<td>
<INPUT type=button value="게임" width=94 height=44
OnClick="javascript:RemoteWindow(3); return false;">
</td>
<td>
<INPUT type=button value="강좌"
width=94 height=44
OnClick="javascript:RemoteWindow(4); return false;">
</td>
</FORM>
</tr>
</table>
</body>
</html>
[월간 인터넷]