내 홈페이지는 살아 움직인다

- 1 -

홈페이지에 글씨가 움직이고, 아이콘이 살아

돌아다니고, 홈페이지에 게임이 있다. 누구나

가 한번 보면 잊지 못하는 그럼 홈페이지를

만들고 싶지 않은가. 여기 그 해법이 있다.

자바 애플릿이 그것이다. 자바 애플릿이란

것을 알고 나면, 내 홈페이지는 그 누구라도

매료시킬 것이다.

지난 호에 ‘자바 스크립트’라는 것을 배웠

다. 자바 스크립트로 하기 어려운 것을 ‘자바

애플릿’에서는 가능하다. 홈페이지에 게임을

넣을 수도 있고, 채팅도 할 수 있다. 당신은

‘자바 애플릿’의 놀라운 능력에 반하게 될 것

이다. 자바 애플릿은 프로그램 언어이므로

초보자에게는 조금 어렵다. 하지만 걱정하지

마라. 우리는 다른 사람들이 만들어 놓은 것

들을 이용하면 되는 것이다. 단지 HTML 코

드에 몇 줄만을 첨가함으로써 놀라운 능력을

가질 수 있게 된다.

(그림 1) 자바 소프트 홈페이지

자바 애플릿?

자바 애플릿도 자바 스크립트와 마찬가지

로 자바라는 언어로 만들어져 있다. 자바는

선마이크로시스템즈사가 만든 객체 지향 프

로그래밍 언어이다. 이를 이용하여 분산환경

에서 실행되는 애플리케이션을 만들 수 있

다. 자바가 제공해주는 가장 큰 특징 중 하

나가 상호대화성(Interactivity)이다. 즉, 야구

와 같은 게임을 한다고 가정했을 때 또는 주

식 시장과 같이 데이터의 실시간 갱신 등을

제공해 준다는 것이다.

자바 애플릿이란 자바 언어로 구현되어 있

다. 웹페이지 안에 내장되어 애니메이션을

보여준다거나, 그래픽을 처리하는 등의 특별

한 기능을 하는 작은 프로그램이다. 사용자

가 웹페이지에 접근하면 이 애플릿은 사용자

의 컴퓨터로 다운로드 된다. 다운로드된 애

플릿은 사용자의 컴퓨터에서 실행된다.

웹에 내장된 자바 애플릿을 실행시키기 위

해선 특별한 브라우저가 필요한데, 요즘 넷

스케이프 2.0이상, 인터넷 익스플로러 모두

PC사랑 기고글 (5화)

자바 애플릿으로 홈페이지를 화려하게 꾸민다

- 2 -

이를 지원한다.

자바 애플릿 만들기

자바 애플릿을 만드는 과정은 일반 프로그

램을 만드는 방법과 동일하다. 따라서 초보

자에게는 좀 어려울 것이다. 이 과정은 건너

뛰어도 좋다. 남이 짠 자바 애플릿을 우린

이용만 할 것이기 때문이다.

자바 애플릿으로 짠 프로그램은 웹 페이지

내에서 실행된다. 다음은 “Hello World!"라는

글씨를 출력하는 자바 애플릿 소스 코드이

다.

import java.applet.Applet

import java.awt.Graphics;

public class HelloWorldApplet extends Applet {

public void paint(Graphics g) {

g.drawString("Hello World!", 50,25);

}

이것을 javac를 이용하여 컴파일한다. javac

는 JDK라는 자바 개발자 키트(Java

Developers Kit)에 들어있다. 자세한 내용은

http://www.javasoft.com을 참고하면 된다.

컴파일 과정이 성공적으로 이루어졌으면

HelloWorldApplet.class 라는 파일이 생성된

다. 여기서 알아두어야 할 점을 최종적으로

생성되는 파일은 확장자가 ‘class'라는 점이

다.

HTML 문서에 자바 애플릿 넣기

자바 애플릿은 넷스케이프와 같은 브라우

저를 통해서 실행된다. 앞에서 만든 자바 애

플릿을 실행시키는 HTML 문서를 만든다.

<html>

<head>

</head>

<body>

HelloWorld Demo

<applet code=HelloWorldApplet.class

width=200 height=50>

</applet>

</body>

</html>

(그림 2) HelloWorld 화면

<applet> 택이 새로 등장하였다. <applet>

택은 HTML 문서 속에 자바 애플릿을 넣기

위해 사용하는 형식이다. 다음과 같이 사용

한다.

사용방법: <applet> ... </applet>

포함할수 있는 택: param

속성: code, width, height, codebase, alt,

name, align, vspace, hspace

<applet> 택에는 여러 가지 속성들이 들어

간다. 이 중에서 반드시 들어가는 속성은

code와 width, height이다. 첫 번째 code 속

성은 현재 지정하려고 하는 자바의 클래스를

지정하게 된다. 그리고 width와 height는 초

기에 나타나는 자바 애플릿의 가로와 세로

길이를 픽셀로 나타낸 값이다.

<applet code=HelloWorldApplet.class width=200

height=50>

</applet>

- 3 -

위의 예는 다음과 같다. HTML 문서는

HelloWorldApplet.class라는 자바 애플릿을

포함한다. 이 애플릿은 HTML 문서와 같은

디렉토리에 위치한다. 애플릿의 크기는 가로

200 픽셀, 세로 50 픽셀이다. 세가지 이외의

속성들의 기능은 다음과 같다.

codebase: 애플릿이 들어가 있는 URL을 지정

alt: Lynx와 같은 텍스트 브라우저일 경우에 보여

줄 글

name: 애플릿의 이름. 같은 페이지 안에서 애플릿

의 위치를 가리키고 싶을 때 사용한다.

align: 애플릿의 정렬방식.

vspace: 애플릿의 수직 여백 크기 지정

hspace: 애플릿의 수평 여백 크기 지정

<applet> 택을 이용한 다른 예를 살펴보자.

<applet codebase="http://www.digital.co.kr/classes"

alt="This is HelloWorld Applet"

code="HelloWorld.class" width=200 height=50>

</applet>

이 예는 HTML 문서가 들어 있는 컴퓨터가

아닌 다른 곳에 있는 애플릿을 사용하고 있

다. www.digital.co.kr이라는 주소를 가진 컴

퓨터의 ‘/classes'디렉토리에 있는

HelloWorld.class 애플릿을 사용하고 있다.

<param> 택 배우기

앞의 <applet>은 모든 애플릿에 공통으로

사용되는 것이다. 그런데 만약 특정 애플릿

에만 해당되는 속성을 지정해야 한다면? 예

를 들어, 애니메이션이 되는 애플릿이라면

이미지 파일을 지정해야 한다. 화면에 글자

를 쓰는 애플릿은 글자를 정의해야 한다. 이

와 같이 특정 애플릿에만 해당되는 속성을

지정할 때 사용하는 것이 <param> 택이다.

사용방법: <param>

속성: name, value

<param> 택에는 name과 value라는 두가지

속성이 들어간다. name은 애플릿에 사용한

매개변수의 이름이고, value는 매개변수에

할당되는 값이다. 두 속성은 <param> 택에

반드시 포함되어야 한다. 다음은 자바의 귀

염둥이 ‘듀크’의 애니메이션이다. 매개변수로

애니메이션될 연속된 그래픽 파일을 지정하

면 자동으로 애니메이션이 된다.

<html>

<head>

<title>The Animator Applet Demo</title>

</head>

<body>

Animator Demo

<applet code=Animator.class width=200

height=200>

<param name=sounds

value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.a

u">

</applet>

</body>

</html>

(그림 3) 애니메이션 듀크 화면

내 홈페이지에 자바 애플릿 넣기

- 4 -

어려운 이야기를 많이 해서 벌써 지쳐버린

독자들이 있을지 모르겠다. 하지만 여기서

부터는 본격적인 자바 애플릿을 화려함을 볼

것이다. 내 홈페이지에 테트리스가 있고, 특

징적인 미려함이 있다면 남과 다른 뛰어남을

가질 수 있을 것이다. 먼저 자바 애플릿을

모아둔 곳을 찾자. 대표적인 곳으로는

http://www.javasoft.com 이 있다. 국내에서

는 웹디자인이라는 곳을 방문하면 된다.

(http://www.webdesign.co.kr/developer/ja/ja

.htm).

(그림 4) 자바 애플릿 모음

볼록한 내 얼굴

웹디자인이란 곳을 방문한다

(http://www.webdesign.co.kr/developer/ja/ja

.htm). 자바 애플릿 모음에서 ‘Lens'를 선택

하자. 우스꽝스러운 얼굴위로 볼록거울이 움

직이는 홈페이지를 만날 수 있을 것이다. 내

사진을 배경으로 해보자. 내 사진을 배경으

로 하면 남과 다른 모양을 나타낼 수 있을

것이다. HTML 문서에서 매개변수 하나만

고치면 내 사진을 배경으로 할 수 있다. 마

우스의 오른쪽 버튼을 누르고 페이지 소스를

클릭하면 아래와 같은 소스코드를 볼 수 있

다. 아래 부분의 value 값 이미지를 자신의

이름으로 바뀌어 주기만 하면 된다.

<html>

<head>

<title>Lens Applet</title>

</head>

<body>

Lens Applet

<applet code="AnLens.class" width=320

height=256>

</applet>

</center>

</body>

</html>

(그림 5) 돋보기 그림

예쁜 시계 삽입하기

화면에서 Bills-Clock를 클릭해 보자. 아주

- 5 -

귀엽고 이쁜 시계가 나타날 것이다. 다음과

같은 매개변수를 바꾸어 본인 취향의 시계를

만들어 낼 수 있을 것이다.

<applet code="billsClock.class" width=100 height=100

align=middle>: 애플릿의 크기와 위치 지정

: 애플릿의 배경색깔 지정

: 시계의 앞면 색 지정

: 시계의 초침색깔 지정

: 분침색깔 지정

: 시침색깔 지정

: 시간글자의 색깔 지정

: 시계 케이스의 색깔 지정

: 시계안의 로고 이미지 지정.

(그림 6) 시계

그 밖의 여러 자바 애플릿

신문 같을 곳을 보면 글씨가 밑에서부터 올

라오는 것을 볼 수 있다. ‘Ocvscroll'를 클릭

하자. 뉴스속보라고 나오면서 밑에서 위로

스크롤 되는 글씨를 볼 수있다.

자바 애플릿을 이용하면 바이오 리듬도 알

수 있다. Biorythm이란 곳을 클릭하면 바이

오 리듬 웹페이지 나타난다. 여기에 년/월/일

을 입력하면 당신의 바이오 리듬을 알려 줄

것이다. 또한 자바 애플릿을 이용하면, 웹페

이지에 게임도 넣을 수 있다. FallingVGA를

클릭하면 슈팅 게임도 즐길 수 있다.

(그림 7) 스크롤되는 글씨

(그림 8) 바이오리듬

(그림 9) 슈팅 게임

JARS 선정 TOP 사이트

JARS(Java Applet Rating Service)는 전세

계 자바 애플릿들 중 1%, 5%, 25% 안에 드

는 것들을 선정하여 알려주는 서비스이다.

여기 있는 추천되고 있는 사이트들을 한번씩

둘러보면 최근 동향을 볼 수 있을 것이다.

1% 안에 선정된 팩맨 게임은 옛날 애플컴퓨