- 1 -

바야흐로 홈페이지를 가지는 것이 시대의 

유행이 돼버렸다. 통신 대화방에선 자신의 

홈페이지를 방문하라며 여기저기서 초대장

이 줄줄이다. 하지만 아직도 자신만의 스위

트홈이 없이 남의 홈페이지만을 기웃거리

고 방황한다면 이 얼마나 서글픈 일인가? 

그렇다고 자신만의 스위트홈을 가지기 위해 학원에 다니거나 많

은 시간을 투자하기는 싫고... 

하지만 걱정은 그만. 초보자를 위한 웹제작툴은 적은 노력과 짧

은 시간안에 아주 훌륭한 나만의 홈페이지를 마련할 수 있도록 

도와 준다. 

앞으로 연재하는 6회동안 초보자들은 자신도 모르는 사이에 어

느덧 홈페이지 전문가가 되어 있을 것이다. 

내집 마련의 준비

홈페이지가 무엇인지도 모르는 채 내집을 마련할 수는 없지 않

은가? 알아야 할건 일단 짚고 넘어가 보자.

홈페이지가 뭐여요?

‘홈페이지’라고 하는 것은 웹브라우저를 통해서 보게 되는 문서

를 말하는데 일종의 인터넷상에서 자기 집과 같은 것이다. 그러

니까 우리가 홈페이지를 예쁘게 특이하게 꾸미는 것도 내 홈페

이지를 방문하는 사람들에게 좋은 인상을 주려는 욕심때문인 것

이다. 

홈페이지는 텍스트 뿐 아니라 멀티미디어라 불리는 음성, 화상 

등과 같은 다른 미디어들을 포함한 문서이며, 또 다른 문서에 

연결되어 있다. 이러한 홈페이지는 HTML 이라는 언어로 작성

되어있다. HTML은 Hyper Text Makeup Language란 말의 약

자로, 하이퍼텍스트 문서를 만들기 위한 언어이다. 하이터텍스트

란 윈도우즈의 도움말 형식의 문서를 의미한다. 윈도우즈의 도

움말은 색깔이 다른 단어를 클릭했을 때 그 단어에 대한 설명이 

나온다. 이렇게 동적으로 연결되어 있는(이런걸 링크 되어 있다

고 한다) 문서를 HTML 문서라고 하는 것이다. 보통의 경우 

HTML 문서는 ‘.html'이나 ’.htm'의 확장자를 가지게 된다. 

HTML 문서는 무엇으로 만들어요?

홈페이지를 가지려면, HTML 문서를 만

들어야 한다. 그러면 HTML 문서를 어떻

게 만들어야 할까? HTML 문서는 기본적

으로 단순한 텍스트 기반의 언어이므로 

윈도우즈에서 기본적으로 제공되는 메모

장을 이용하여 작성할 수 있다. 

그런데 HTML 문서는 문서 중간에 문자

나 문장의 형태를 표시하는 태그(Tag)라는 꼬리표를 달고 있다. 

우리가 HTML을 공부하는 것은 이러한 태그라는 꼬리표를 배

우는 것이다. 어느 세월에 그 많은 태그를 공부할까? 하지만 걱

정하지 마라. 이러한 태그를 모른다하더라도 내집을 마련할 수 

있다. 

웹제작툴이 뭐여요?

웹제작툴이란 초보자들이 HTML 태그를 일일이 적어 넣지 않

아도 되는 홈페이지 전용 편집기이다. 따라서 웹제작툴만 있으

면, HTML 태그를 모른다하더라도 나만의 집을 마련할 수 있다. 

하지만 잊지 말도록! 내집을 보다 멋지게 꾸미기 위해서는 

HTML 태그에 대한 공부가 필요하다. 하지만 이 문제는 일단 

접어두고, 내집도 없는 상황이니 먼저 허름(?)할지라도 나만의 

스위트홈을 갖추자.

인터넷이 날로 커지다 보니, 초보자를 위한 아니 중급자, 고급자

를 위한 웹제작툴이 하루가 다르게 쏟아져 나오고 있다. 이러한 

HTML 제작툴은 기능이 아주 강력할 뿐 아니라 사용법도 쉬워 

어렵지 않게 익힐 수 있다. 그런데 수많은 HTML 저작 툴중에

서 어떤 것을 선택해야 할까? 필자가 들어본 이름만 해도 85종

이 넘는다. 웹제작툴의 종류에 관한 것은 

‘http://sdg.ncsa.uiuc.edu/~mag/work/HTMLEditors/' 홈페이지를 

참고하면 될 것이다. 웹제작툴은 기능별로 보면 다음과 같이  

나누어 볼 수 있다. 그러나 이는 일반적인 구분이며, 보통의 경

우 하나의 프로그램은 태그 에디터이면서 위지윅 기능을 첨가하

고 있다.

* 태그(tag) 에디터 - 태그 에디터는 주로 HTML 태그(Tag; 

HTML을 구성하는 언어) 삽입을 쉽게 해주는 기능을 가진 프로

그램이다. 사용자는 특정 태그의 명칭을 외우고 있을 필요가 없

으며 혹은 쌍을 이루는 태그를 정확히 포함시켰는지를 걱정할 

필요가 없다. 태그를 붙이려는 텍스트를 선택하고 태그 에디터

가 제공하는 윈도우나 툴바 버튼에서 원하는 태그를 선택하기만 

PC사랑 기고글 (1화)

내집 마련하기

웹제작툴과 함께하는 인터넷 홈페이지 만들기

      1회: 내집 마련하기

      2회: 내집 기초다지기

      3회: 내집 장식달기

      4회: 내집 날개달기(1)

      5회: 내집 날개달기(2)

      6회: 사람들 초대하기

- 2 -

하면 되는 것이다. 이러한 태그 에디터로는 웹에디터의 최강자

라 불리우는 핫도그 프로(HotDog Pro)와 Kenn Nesbitt의 웹에

디트(WebEdit)가 대표적인 예이다.

* 위지윅(WYSIWYG) 에디터 - 위지윅 에디터에서는 일반 문

서를 작성하듯 쉽고 간편하게 인터넷 문서를 만들 수 있다. 복

잡한 태그 명령어를 하나도 몰라도 웹 문서를 만들 수 있도록 

도와주는 프로그램이다. 웹제작툴로 뛰어난 명성(?)을 듣고있는 

MS사에서 만든 프론트페이지(FrontPage)가 위지윅 에디터의 대

표적인 프로그램이다. 최근 국내에서 만들어진 나모 웹에디터는 

MS사의 프론트페이지와 견줄만큼 뛰어난(?) 위지윅 에디터로 

태그 에디터로도 전환이 가능하다. 

* 변환기(converter) - 널리 사용되는 워드 프로세서 문서를 

HTML 문서로 변환 시켜주는 프로그램을 말한다. MS 워드나 

ᄒᆞᆫ글 워드 프로세서는 이러한 변환기 기능을 제공해 주고 있으

므로 이를 이용하여 HTML 문서를 작성할 수 있다. 

어떤 웹제작툴을 선택할까?

어떤 웹제작툴은 선택하든 그리 큰 문제가 되지 않는다. 하지만 

어떤 분야에서든 최강자가 있기 마련! 자신의 입맛에 맞는 웹제

작툴을 구하는 것이 최선이다. 여기서는 우리들 입에 많이 오르

내리는 몇가지 웹제작툴을 살펴보겠다. 

HotDog Pro 4.5

핫도그(HotDog)는 소세지(정

말 잘 어울리는 이름이지 않

은가?)사에서 만든 프로그램

으로 인터넷에서 다운로드 받

을 수 있는 쉐어웨어 프로그

램 중 가장 강력한 것으로 정

평이 나 있다. 사용법이 상당

히 쉽어서 초보자들도 사용하

기에 적합하다. 핫도그에서 제공하는 HTML 튜토리얼을 참조하

면 보다 쉽게 핫도그에서 HTML을 작성할 수 있을 것이다. 하

지만 이제품의 단점이라면 위지윅(WISIWYG) 프로그램이 아니

라는 것. 따라서 HTML 태그를 모르는 사용자는 이 프로그램을 

사용하기 어렵다. 자세한 내용은 'http://www.sauage.com'을 참

고하도록.

WebEdit Pro 2.0

핫도그와 더불어 웹에디터의 양대산맥을 이루는 웹제작툴이 바

로 Kenn Nesbitt의 웹에디트(WebEdit)이다. 핫도그와 같이 태

그 에디터로서 HTML 태그 입력을 간편히 할 수 있다.  Link 

Validation Check(올바른 링크인지를 검사) 기능이나, 멀티미디

어 요소를 추가하는 위저드(Wizard)가 탁월하다. 그리고 핫도그

보다 한글 입력이 탁월하기 때문에 국내에서는 더 유리할 수도 

있다. 자세한 내용은 'http://www.nesbitt.com'를 참고하도록.

FrontPage 98

마이크로소프트의 제품이다. MS 회사

의 제품답게 사용자 위주의 위지윅 기

능이 뛰어난 제품으로 HTML 에디터

중 최강자라 불린다. 다른 어떤 HTML 

에디터보다도 강력한 워드프로세싱 기

능은 HTML 에 대해서 문외한인 초보

자들도 쉽게 HTML 문서를 작성할 수 

있도록 도와준다. 워드에서 문서를 작성하는 것처럼 입력하면 

바로 홈페이지를 만들어 주며, 테이블, 폼, 자바 스크립트 등의 

구현을 마우스 클릭만으로 쉽게 할수 있다. 자세한 내용은 

'http://www.microsoft.com/FrontPage'를 참고하도록.

NetObject Fusion

넷오브젝트 퓨전은 다른 웹에디터와는 구별되는 중요한 특징이 

있다. 다른 웹에디터들이 텍스트 기반의 프로그램인 반면 넷오

브젝트 퓨전은 디자인에 입각한 시각적인 페이지이다. 그러나 

그 용량이 방대할뿐더러 구입시 가격이 비싸서 초보자들이 이용

하기에 그릭 적합하지 않다. 자세한 내용은 

‘http://www.netobjects.com'를 참고하도록.

나모 웹에디터

국내에서 만든 웹에디터로 외국 제품과 겨루어 자타 최고봉(?)

이라 불리우고 있다. 제품 기능면에서는 프론트페이지와 동일하

나 한글 처리를 완벽하게 처리한다는 면에서 많이 이용자들로부

터 사랑을 받고 있다. 한국정보산업연합회가 선정하는 신소프트

웨어 대상 일반소프트웨어 부문 수상작이기도 하다. 자세한 사

항은 ‘http://www.namo.co.kr'를 참고하도록.

웹제작툴을 고르는 요령은 무엇보다도 자신의 입맛이다. 어떤 

웹제작툴을 사용하든 그 기능의 활용가치는 오로지 당신에게 달

려 있는 것이다. 하지만 초보자들은 먼저 통신상에 올라와 있는 

쉐어웨어 버전을 이용하라고 권하고 싶다. 쉐어웨어 버전의 웹

제작툴은 사용기간이나 사용횟수면에서 제한이 있지만 내집을 

마련하는 데는 그리 문제되지 않는다. 

웹제작툴을 이용한 내집 마련하기

HTML 태그를 전혀 몰라도 웹제작툴을 이용하여 내집을 마련

할 수 있다. 웹제작툴로는 국내에서 개발한 나모 웹에디터를 이

용하겠다. 필자는 나모 웹에디터와는 아무 관계도 없음은 밝혀

두는 바이다. 하지만 IMF시대, 국산제품을 사용하는 것이 바람

직하지 않을까? 핫도그나 Kenn Nesbitt의 웹에디트(WebEdit)를 

이용해도 좋다. 모두들 통신상에서 쉐어웨어 버전을 구할 수 있

다. 만약 구하지 못한 분은 필자에게 연락을 취해도 좋을 듯.

웹에디터 시작하기

먼저, 나모 웹에디터를 자신의 컴퓨터에 설치하자. 나모 웹에디

- 3 -

터는 통신상에서 

“나모 웹에디터 

2.0 시험판”으로 

구할 수 있다. 설

치를 완료했다면 

웹에디터를 시작

해 보자. 윈도우

즈 작업 표시줄에

서 [시작-프로그

램-나모 웹에디

터-웹에디터]를 

선택한다. 그러면 

나모 웹에디터가 

실행되고, noname1.html 문서 탭이 열릴 것이다. 이때 정식 사

용자가 아닌 경우에는 제품구입화면이 보일 것인데 일단 [계속] 

버튼을 누르자. 후에 제품이 마음에 든다면 구입하는 것도 좋을

지도.

화면에 내용을 입력한다. 내용을 입력하다가 <Enter> 글쇠를 

누르면, 한 줄 정도의 빈 공간을 띄운 채 다음 줄로 이동한다. 

웹브라우저에서는 문단과 문단사이에 빈 줄을 하나 띄우도록 되

어있기 때문이다. 빈 공간을 띄우지 않고 바로 다음 줄에 내용

을 입력하고 한다면 <Shift+Enter> 글쇠를 눌러야 한다. 이것은 

문단을 바꾸지 않고 줄만 바꾸는 기능만 하는 것이다. 모든 내

용은 기본 글꼴로 입력된다

문서만들기

먼저 만들고자 하는 문서를 편집한다. 방법은 일반 워드프로세

서를 사용하는 것과 동일하게 하면 된다. 강조하고 싶은 부분은 

강조하고, 글자 크기도 바꾸고, 문단의 위치도 조절하여 좀 근사

한 문서로 바꾼다. 여기서 필요한 것은 홈페이지에 대한 지식보

다는 미적 감각이다. 뛰어난 세련미를 유감없이 발휘해 보자.

① 글꼴 유형 바꾸기. 

현재 글씨의 크기는 문

단 유형 바뀌기로 간단

하게 바꿀 수 있다. 먼

저 글씨 크기를 바꿀 곳

에 커서를 위치시킨다. 

그리고 리본 막대의 맨 

왼쪽에 있는 문단 유형 

바뀌기를 눌러서 제목2

를 선택한다. 문서에서

는 6가지의 제목 유형을 

제공하는데 제목 2는 두 번째 큰 제목 유형을 가르키는 것이다. 

커서가 위치한 문단 모양이 제목 2 유형의 글꼴로 바뀔 것이다. 

메뉴에서 실행할 때는 [서식-문단과 목록]을 선택한다. 

② 글꼴 색깔 바꾸기. 

색깔을 바꿀 부분을 마

우스로 선택한다(블록

으로 지정한다). [서식-

글꼴]을 선택하면 글꼴 

속성 대화상자가 나타

난다. 색깔에서 글꼴의 

색깔을 지정(여기서는 

진분홍색을 선택)한다. 

사용자 정의를 선택하

면 훨씬 다양한 색깔 

중에서 선택할 수 있다. 색깔 이외에도 [서식-글꼴]을 이용하면, 

현재 글꼴의 모양을 자유로이 바꿀 수 있다.

③ 수평선 넣기. 수평선은 보통 내용을 구분하고나 분리하고 싶

은 부분에 삽입하게 된다. 수평선을 삽입할 곳으로 커서를 이동 

시키고 리본 막대의 ‘수평선 넣기’를 클릭하면 된다. 메뉴에서 

실행할 때는 [삽입-수평선]을 선택하면 된다.

④ 목록 달기. 목록이란 

일련의 나열 항목이나 내

용을 숫자나 점으로 구분 

짓는 것을 말한다. 목록

을 지정할 부분을 마우스

로 선택한다. 메뉴에서 

[서식-문단과 목록]을 선

택한다. 그러면 [문단과 

목록] 대화 상자가 나타

나는데 이때 원하는 속성

을 선택한 후 단추를 누르면 된다. 여기서는 ‘점으로 된 목록’에

서 ‘둥근점’을 선택한 뒤, [확인] 단추를 누른다. 목록의 종류는 

점으로 된 목록과 숫자로 된 목록 중에서 선택할 수 있다. 마우

스로 선택한 부분에 둥근 점으로 된 목록이 나타나는 것을 볼 

수 있다.

⑤ 웹브라우저 지정

하기. 여기까지 만든 

문서가 웹브라우저에

서 어떻게 보일지 궁

금하지 그지 없다(?). 

[보기] 메뉴를 이용

하면, 현재 작성중인 

문서를 바로 웹브라

우저로 볼 수 있다. 

넷스케이프 네비게이

터로 보려면 [보기-

넷스케이프로 보기]를, 인터넷 익스플로러로 보려면 [보기-인터

넷 탐색기]를 선택하면 된다. 

그러나 이 두 종류의 브라우저를 사용하지 않을 경우 사용자의 

- 4 -

웹브라우저를 나모 웹에디터의 메뉴에 추가하여 바로 보기 위한 

방법이 있다(필자의 생각으로 그럴 경우가 1%도 안되리라 생각

된다). 하지만 1%의 사용자를 위해서 웹브라우저의 종류를 지정

하는 방법을 설명하면 다음과 같다. [도구-프로그램 설정]을 실

행한다. [프로그램 설정] 대화상자가 나타나면 [브라우저 탭]으

로 이동한다. 브라우저의 종류는 두 개까지 지정할 수 있다. [찾

아보기] 단추를 이용하여 사용할 웹브라우저의 프로그램 경로를 

입력한 후 [확인] 단추를 눌러 설정을 마친다.

⑥ 문서 저장하기. 이제 

문서를 저장하는 일만 

남았다. [파일-저장하

기] 메뉴를 선택하면 

[다른 이름으로 저장] 

대화상자가 나타난다. 

파일을 저장할 위치를 

지정하고, 입력 창에 파

일의 이름(여기서는 

index라 하자)을 입력

한다. 문서 제목은 홈페

이지를 볼 때 최상단에 표시되는 것으로 여기서는 ‘피시랑 홈페

이지’라고 입력한다. [저장] 단추를 누르면 문서 탭의 이름이 

‘index.htm'으로 바뀌어 나타날 것이다. 

⑦ 새문서 만들기. 웹사이트를 돌아다녀 보면, 특정 문장에 이동

할 대상을 지정해 놓아, 그곳을 누르면 다른 곳으로 이동하는 

것을 보게 된다. 이것을 하이퍼링크라고 하는데, 다른 곳으로 이

동하려면 그 곳에 문서가 있어야 하지 않은가. 메뉴에서 [새 글]

을 선택하면, 새 내용 대화 상자가 나타나고 문서탭의 보통을 

선택하면 새로운 문서가 보인다. 또는 간단히 리본메뉴에서 [새 

글] 아이콘을 클릭하면 된다. 

⑧ 하이퍼링크 연결하기. 먼저 하이퍼링크로 연결시킬 부분을 

마우스로 선택한다. [삽입-하이퍼링크]를 선택하면 [하이퍼링크 

만들기] 대화상자가 나타나는데 주소에 연결할 파일 이름을 입

력하면 된다. [찾아보기] 단추를 입력하면 쉽게 찾아 선택할 수 

있다. 

여기까지 오면 혹자는 홈페이지 만드는 것도 별 것 아니구나하

는 생각이 들 것이다. 그렇다. 홈페이지란 사실상 별거 아니었다. 

하지만 우리의 마음을 사로 잡는 홈페이지가 있는 반면 어떤 홈

페이지는 우리의 눈을 찌푸리게 하기도 한다. 내집이 남들에게 

어떻게 보이기를 원하는가? 보다 멋진 집을 가지기 위해서는 그

림과 스크립트를 삽입하여 보다 동적인 홈페이지를 꾸며야 할 

것이다. 하지만, 그렇기 하기 위해서는 HTML 태그에 대한 어

느 정도의 공부가 필요한다. 하지만 걱정하지 마라. HTML 태

그를 외울 필요는 없다. 다만 그것을 이해하는 정도만 하면 된

다.

다음호에 설명할 ‘내집 기초다지기’에서는 HTML 태그설명과 

함께 보다 멋진 홈페이지를 꾸미는 데 필요한 기본 수칙에 대해

서 공부해 보도록 하겠다. 

소재우

jwso@sogang.ac.kr / 현재