강좌는 HTML문서 작성을 쉽게 해주는 나무 웹 에디터로 작성하는 것을 기본으로 했습니다. 다른 웹 에디터가 많고 많지만, 한국제품인데다가 성능도 뛰어나고 한글이기 때문에 쉽게 접할 수 있는 장점으로 나모를 택했습니다.
▶▶ 강좌 순서: 인터넷 개념 -> 홈페이지 개념 -> 홈페이지 제작 (나모 웹 에디터)-> 그래픽 개념 -> 그래픽 파일 변환 (페인트 샵 프로) -> GIF-animation 제작 (GIF-Construction set) -> 파일 업로드 (Cute FTP 2.0, 나모) -> 부수적인 유틸 이용들 -> 기타
사실 제가 강좌하기에는 너무나도 부족한 면이 많습니다. 이 방면 전문가도 아닙니다. 때문에 저 역시 영원한 초보일 수밖에 없고 그 수준에서 만족하며 살고 있습니다. 저와 비슷한 분들이 많으리라 생각합니다. 너무 많은 것을 배우기에는 시간도 부족하고 필요성도 없는 분들에게 이 강좌가 필요할 것으로 생각됩니다.
이전에 많은 관심과 격려를 해주신 많은 분들께 감사드리며 부족한 점이 있다면 많이 도와 주십시오. ?澎紡? 다시 정리하면서 첨가하고 싶은 내용이 많았으나 너무나 방대한 양을 저 혼자서 정리한다는 것은 불가능 했습니다. 단지 이해를 쉽게하기 위해 그림을 삽입했습니다. 모든 네티즌들이 하나씩의 홈페이지를 갖는데 작은 도움이 되길 바라면서...
I. 인터넷 개념 잡기
◆ 인터넷은 어떻게 생겼을까?
한번쯤 이런 생각을 해본 사람이 있을 것이다. 인터넷은 우습게도 냉전의 산물이라고 할 수 있다. 1960년대 미국 국방성에서 네트웍을 구성하기 시작한 것이 지금의 인터넷으로 확대되었다.
CERN 입자 물리학 연구소의 몇몇 연구원들이 만들어낸 서비스로 인터넷이 갑자기 인기 끌게 된 원인이 되었다. 월드 와이드 웹이 많은 사람들에게 인기를 끌게 된 것은 하이퍼텍스트(Hypertext)가 사용하기 쉬웠기 때문이다. 하이퍼텍스트의 장점은 원하는 내용을 볼 때 화면에 나타난 글자나 그림을 클릭만 하면 되는데 이것을 하이퍼링크(HyperLink)라고 한다. 윈도우 95를 사용하면서 늘 만나는 도움말은 이 하이퍼텍스트 기능을 이용한 것이다.
◆ HTML(Hypertext Markup Language)
웹 문서는 HTML형식을 따라 만들어진다. HTML은 이름에서 알 수 있듯 일반적인 문서를 하이퍼텍스트 문서로 만들어주기 위한 특별한 정보를 가지고 있다. 보통 태그(Tag)라고 하는데 요즘은 굳이 태그를 몰라도 쉽게 웹문서를 작성할 수 있는 웹 에디터가 많기 때문에 굳이 태그를 외우지 않아도 쉽게 작성할 수 있다. 하지만 웹 에디터의 한계가 약간은 있기 때문에 강좌 뒤에 태그를 정리하도록 하겠다.
◆ 자바 애플릿이란(Java Apelet)
자바 애플릿은 썬 마이크로시스템스 사에서 웹을 위해 개발한 새로운 프로그래밍 언어 자바를 이용한 작은 애플리케이션이다. 자바를 이용하여 HTML이 생겼을 때만큼 많은 변화가 WWW에도 생겼다. 이제는 자바를 이용하지 않는 웹사이트는 거의 찾아보기 힘들 정도다.
◆ 웹 브라우저(Web Browser)
웹 브라우저는 월드 와이드 웹을 사용할 때 반드시 필요한 프로그램이다. 이는 서버에서 보내주는 HTML문서를 컴퓨터 화면에 표시해주는 역할을 한다. 대표적으로 익스플로러와 넷스케이프가 있으며 윈도우 98출시이후 시장 점유가 많은 네티즌에게 관심을 끌었었다. (개인적 생각으론 앞으로 98이후에는 익스플로러가 브라우저 시장을 거의 독점할 것으로 예상된다.)
◆ TPC/IP(Transfer Control Protocol/Internet Protocol)
인터넷이라는 큰 네트웍을 이용하기 위해서는 정보가 오고 가는 것을 통제하는 프로토콜이 필요하다. 이를 해결해준 것이 TPC/IP이며 이는 정보가 출발하는 곳과 도착할 곳의 주소를 지정해주면 적당한 경로를 따라 정확하게 정보를 전달 할 수 있도록 만들어졌다. TPC/IP가 정보의 출발점과 목적지를 지정하는데 사용하는 주소가 바로 IP 어드레스이다.
◆ IP Address
IP 어드레스는 1부터 255까지의 숫자가 피리어드(.)로 분리된 일종의 문자열로 인터넷에 연결된 모든 컴퓨터는 개개의 다른 IP 어드레스를 가지고 있다. 인터넷에서 서버에 연결하는 원리이다.
◆ 도메인 네임(Domain Name)
IP 어드레스를 알면 모든 서버에 연결할 수 있다. 그러나 단점은 숫자로 되어있어 기억하기 힘들다는 것이다. 그래서 만들어진 것이 바로 도메인 네임이다. 때문에 유니텔에 접속하려면 unitel.co.kr를 치기만 하면 되는 것이다.
도메인 네임에는 어떤 규칙(?)이 있다. 미국은 국가 표시를 하지 않는 것을 빼고는 거의 공통적으로 나타내는 국가 도메인이 있다. 예를 들어 한국은 kr 일본은 jr이다. 또 상업적 도메인은 com, 네트웍 기관은 net으로 나타내는 것이다. 그 외 학교는 edu, 공공기관은 gov,등으로 나타낸다.
◆ URL(Uniform Resource Locator)
도메인 네임을 이용하면 원하는 인터넷 서버에 접속할 수 있으나, 어떤 정보를 서버에 요구할 것인가 지정할 수는 없다. 때문에 생겨 난 것이 URL이다. URL의 첫 번째 요소는 사용할 서비스의 종류이다. HTTP는 Hypertext Transfer Protocol의 약자로, 월드와이드웹을 위한 프로토콜이다. 또 파일 전송 프로토콜(FTP) 서버에 접속하려면 ftp를 사용할 수 있다. 그 외에 gopher, telnet등도 사용할 수 있다.
◆ 서버는 어떤 OS를 이용할까?
아직까지는 Unix계의 OS(Linux..)가 주류를 이루고 있다. 윈도우 NT를 사용하는 서버도 늘어나고 있다.
II. 홈페이지 개념과 제작 준비
[홈페이지는 왜 필요한가?]
학술적 목적, 기업 홍보, 판매를 위한 홈페이지등 다양한 목적으로 홈페이지를 만든다. 이전에는 인터넷 하면 무료를 의미할 정도였으나 이제는 인터넷을 접속하기 위해서도 돈(아직 무료도 있지만..)을 써야하고 각 웹사이트에서도 정보를 얻기 위해서 돈을 제공해야 한다. 그러나 인터넷은 정보를 공유하는데 그 의미가 아직 크다는 것을 생각하고 정보를 제공할 수 있는 홈페이지를 만드는 것이 중요하다. 어떤 정보를 제공하는 가에 따라 홈페이지에 방문객 수가 결정된다.
[홈페이지 제작에 필요한 것은??]
이 강좌는 태그를 모르는 대부분의 초보자들이 쉽게 홈페이지를 만들 수 있도록 나모 웹에디터를 이용하여 제작하는 것에 준하여 설명하겠다. 다음의 프로그램을 가지고 홈페이지를 예쁘게 꾸며보자. 기본적으로 페인트 샵과 Gif-컨스트럭션까지 알면 된다고 할 수 있다. 그 외의 유틸은 후에 부가적으로 설명하겠다.
§ 나모웹에디터 사용자 설명서 - 나모의 기본적인 사용법을 그림과 함께 설명
§ 나모웹에디터 2.01 프리뷰 (30회) - 웹에디터
§ Paint Shop Pro 4.1 - 작지만 막강한 기능을 가진 그래픽 프로그램
§ GIF-Construction set 32 - gif 애니메이션을 만들어주는 작고 편리한 유틸
§ Cute FTP 2.0 - ftp를 이용해 계정에 업로드하도록 해주는 손쉬운 유틸
§ 1 Cool Button Cool 1.1 - 자바애플릿을 이용하여 예쁜 버튼 만드는 유틸
§ Unlead 3D - 3차원 글자를 만들어주는 유틸, 애니메이션도 지원한다.
§ 웹 브라우저 - 인터넷 익스플로러나 넷스케이프
§ 계정 - 무료로 제공하는 계정을 이용하기로 하자.
위의 유틸은 유니텔 홈페이지 제작 동호회 웹플러스(w3p)자료실에서나 공개 자료실 등에서 쉽게 구할 수 있다. 위의 모든 유틸이 홈페이지 제작에 필수적인 것은 아니고 단지 위의 유틸을 기준으로 쉽고 보기 좋게 만들 수 있도록 설명 할 생각이다.
[컴퓨터 사양은?]
위의 유틸을 사용하려면 윈도우 95 운영체제와 최소 486이 상급의 컴퓨터가 필요하다. 사운드를 이용하고 싶다면 사운드 카드가 필요하다. (없는 컴퓨터가 있을까...??)
[HTML에 대한 기본 개념]
무엇보다도 HTML에 대한 개념이 제작에 앞서서 필요하다. 앞에서 언급했듯이 월드 와이드 웹에 있어 HTML은 기본 중에 기본이다. HTML은 World Wide Web Consortium: W3C 에서 만들어지며 지금은 HTML 버전 4.0을 개발하고 있다. 자세한 정보는 HTTP://www.w3.org/ 에서 얻을 수 있다.
홈페이지는 여러 장의 문서로 이루어진다. 가장 중요한 개념중 하나가 홈페이지는 각각의 페이지로 이루어진다는 것이다. 각각의 페이지를 만들어 놓고 하이퍼링크를 이용해 적당히 연결해놓으면 홈페이지가 완성되는 것이다. 각 페이지는 HTML규약에 따라 태그로 만들어지며 태그를 모르더라도 웹 에디터는 워드 프로세서와 같이 쉽게 작성 할 수 있도록 해준다.
[마지막 준비]
초보들이 마지막에 고생하는 것들이 있다. 다름 아닌 홈페이지를 업로드했을 때 링크가 제대로 연결이 되지 않았다던가 또는 그림이 뜨질 않는다는 것 등이다. 이는 유닉스 서버에서는 대/소문자를 구별하기 때문이거나 또는 당신 컴퓨터에서 그림 설정해놓은 것의 위치가 당신 계정에서는 실제 그림이 있는 위치와 틀리기 때문이다. 그러므로 당신 컴퓨터에 계정과 비슷한(?) 환경에서 작업하도록 당신 계정아이디로 디렉토리를 하나 만들어 놓자. 꼭 계정아이디일 필요는 없다. 단지 다른 디렉토리와 구별하기 쉽기 때문이다.
디렉토리를 만들었는가? 그렇다면 또하나의 디렉토리를 만든다. image란 디렉토리 또는 pic이란 디렉토리를 만들어 이곳에다가 사진이나 그림, 아이콘 등을 저장한다. 단 홈페이지에서 불러올 사진이나 아이콘만 넣는다. (간혹 제작에 쓸만한 아이콘을 다 넣는 분들이 있다...) 미리 정하기가 힘들면 그때그때 필요한 것들을 이 디렉토리로 이동시키는 것이 좋겠다.
III. 나모 웹 에디터
[나모 웹 에디터]
드디어 웹 에디터를 이용해서 HTML문서를 만들어 보자. 웹 에디터는 태그를 자동으로 지정해주는 기능을 가진 유틸이다. 즉 웹 에디터란, 말 그대로 웹 문서 편집기이다. 이제 워드 프로세서를 작성하듯이 쉽게 HTML문서를 작성해보자.
1) 나모의 장단점
나모를 쓰면서 장단점을 자연히 느끼겠지만, 일단 나름대로 지금까지 쓰면서 느낀 점을 적어보겠다.
(장점)
① 메뉴가 한글이다. 때문에 영어를 모르더라도 쉽게 접할 수 있다.
② 인터페이스가 워드프로세서와 동일하다.
③ 거의 모든 기능이 아이콘화 되어 있다.
④ 한글의 사용이 자유롭다. 외산 에디터의 경우 한글 입력시 깨지는 경우가 종종 있었다.
⑤ 표 만들기가 무척 쉽고 속성을 수정하기도 매우 쉽다.
⑥ 이미지를 입력하기 쉽다.
(단점)
① 속성메뉴가 어렵게 이름지어있어 어떤 기능인지 잘 모를 때도 있다. (이럴 때 나모 메뉴얼을 참고하거나 도움말을 참고한다.)
② 블록지정시 불안정하다.
③ 나모에서 작성한 대로 브라우저에서 뜨지 않는 왜곡률이 프론트 페이지보다 좀 높다고 한다. (프론트 페이지는 써보지 못했음..)
④ 나모에서 HTML문서 태그로 볼 때 복사와 붙이기가 되지 않는 점이 다소 불편하다.
2) 나모 익숙해지기
먼저 나모를 좀 써본 분들은 나모에 대한 강좌를 건너뛰어도 된다고 생각한다. 아주 기본적인 기능만 둘러볼 생각이기 때문이다. 일단 처음 써보시는 분들도 이리저리 써보면 "이게 뭐 워드프로세서 아닌가?" 란 생각도 들것이다.
우선 이리 저리 둘러보자. 우선 나모를 실행 시켜보자. 나모를 시작시키려면 윈95아래 있는 시작 -> 프로그램 -> 나모 웹 에디터 -> 웹에디터 순으로 가서 실행시킨다. (이하 모든 유틸은 이와 같은 방법으로 실행시킨다.)
실행되면 등록할 것인지 물어보는 창도 뜨고, 또 몇 회 남았다는 말도 보인다. 넘어가면 이제 웹 에디터 화면이 보인다. (비등록판의 기능적 단점은 없다.)
워드 프로세서같이 몇 글자 써보자. 글쓰는 것은 누구나 할 줄 아는 것이다. 그런데 이 문서는 일반 텍스트 문서가 아닌 HTML문서다. 웹 에디터 상에는 보이지 않지만 태그가 문서에 자동적으로 삽입되어 있다. 그러나 사용자가 쉽게 웹 디자인을 하기 위해 태그가 보이지 않도록 한 것이다. (이를 확인하려면 나모 웹 에디터 위쪽 아이콘 모음에 있는 HTML아이콘을 누르면 태그가 보일 것이다. 여기서 태그를 이용한 수정도 가능하다.)
3) 속성 정하기
속성이란 무엇인가? 한마디로 이해하자면 윈도우에서 등록 정보와 비슷한 개념이다. 그렇다면 속성은 어디에 쓰는 것인가? 일단 한 예를 가지고 알아보자.
아까 글을 마음껏 쳐봤을 것이다. 그 글에 블럭 설정을 해보자.
♣ Tip : 블럭 설정이란?
블럭이란 일종의 범주를 정해주는 개념이다. 아마 아래 한글을 사용해본 사람이라면 블록의 개념을 알고 있을 것이다. 블록을 설정해주면 그 블록(범주)안의 내용에 대해 속성을 지정할 수 있다.
♣ Tip : 블록 설정은 어떻게 하는가?
두 가지 방법이 있다. 마우스를 가지고 자신이 원하는 곳(글씨)에 가져가 왼쪽 마우스 버튼을 누르고 원하는 곳까지 마우스를 움직인다. 그러면 반전되는 것이 보일 것이다. (글씨가 가장 대표적인 예가 되겠다. 수평선이나 표, 그림 등의 속성을 지정하기 위해 블록을 설정시는 마우스로 가져가 왼쪽 버튼을 한번 클릭한후 오른쪽 버튼을 눌러 속성을 정해주면 된다.) 또 다른 방법으로 키보드를 이용하는 방법이 있다. 윈도우 내에서 공통적으로 사용하는 방법으로 Shift와 함께 방향키를 움직이는 것이다.
블록 설정을 끝냈으면 그 위에 마우스를 가져간 후 오른쪽 버튼을 눌러본다. 글꼴 속성이 보일 것이다. 이곳을 클릭 하면 글꼴 속성 대화 창이 나온다. 이 곳에서 자신이 원하는 글자 크기와 글자 모양 등을 정해 줄 수 있다.
다른 예를 보자. 위에 아이콘 모음에 보면 수평선 넣기라는 아이콘이 있다. (아이콘의 설명을 보고 싶으면 마우스를 가져가 2~3초정도 기다린다. 그러면 아이콘 이름이 나온다.) 수평선은 문서에서 보기 좋게 나눌 때 많이 쓰인다. 즉 자료를 알파벳 순으로 나누었다면 A와 B사이에는 이런 수평선을 넣으면 보기에 깔끔하다.
좀전에 쓴 글 밑에 수평선을 넣어보자. 일단, 커서를 엔터를 눌러 다음 줄로 이동한 후 수평선 아이콘을 누른다. 수평선이 보일 것이다. 그런데 이 수평선은 다소 입체적으로 보이기는 하지만 배경이 하얗다보니 좀 뚜렷하지 않아서 실선으로 바꾸고 싶다면 어떻게 해야 할까?
벌써 감을 잡은 분도 계실 것이다. 수평선을 블록 설정한다. 이는 글자와는 달리 왼쪽 마우스를 클릭 하는 것으로 블록 설정이 된다. 그 다음에 오른쪽 마우스를 눌러 수평선 속성을 클릭 한다. 이곳에서 자신이 원하는 속이찬 실선에 체크하면 실선으로 바뀔 것이다. 그 외 속성들도 변경해서 어떤 것인지 알아보자. (각자 해보시길..)
그 외에 표등도 속성을 정할 수 있다. 자세한 것은 각각을 설명할 때 부가 설명하도록 하겠다. (한글이라 쉽게 속성을 이해할 수 있을 것이다.)
☞ 숙제 : '웬 숙제냐?' 라고 하시는 분들, 검사 안 하는 숙제니 안심하시길..(검사 못하는 숙제가 맞나?) 나모 웹 에디터에 익숙해지기 위해 이리 저리 기능을 둘러보시면 강좌를 보는 것보다 더 빨리 익숙해 질 것입니다. 오늘은 이리 저리 나모의 기능을 둘러보세요.
4) 그림 삽입
위의 아이콘 모음에 보면 그림과 관련된 두 가지 아이콘이 있다. 하나는 나모에서 지원하는 클립아트 삽입이고 또 하나는 기타 이미지를 삽입하는 아이콘이다. 일단 눌러보자.
먼저 클립아트를 눌러 보자. 클립아트란 말이 거창하지만 예쁜 아이콘 모음이란 말이다. 나모에서 종류별로 아이콘을 제공하는데 이 것을 이용하면 아이콘 때문에 골치를 썩힐 필요는 없다. (단, 누가 쓰는 가에 따라 틀에 박힐 수도 있고, 반면 같은 아이콘인데 어떻게 쓰는가에 따라 이렇게 달라지는 구나란 말이 나올 수도 있다. 마치 예쁜 사람과 못생긴 사람이 같은 옷을 입었지만 옷걸이에 따라 보는 사람 생각이 다른 것과 같은 것이 아닐까?? ^^;)
클립아트 버튼을 눌러보자. 이미지를 골라본다. Group, Theme, Type은 분류 기준인데 일반적 기준은 아니니 별로 신경 쓰지 않아도 된다. 원하는 것을 찾아보자. 찾았으면 아래 삽입 버튼을 누른다.
♣ Tip : 이 클립아트의 경로는 어떻게 되나?
이런 질문을 할 정도라면 아주 엑설런트한 사람이다! 이런 질문을 다들 생각했으리라 믿습니다!! 그 경로는 일단 신경 쓰지 않아도 된다. 우리는 이미 앞에서 언급했듯이 이미지 저장할 디렉토리를 만들어 놓았다. x:/자신계정ID/image/ 이런 식으로 만들어 놓았을 것이니 우린 이 클립아트를 이 디렉토리에 저장하는 것이 편할 것이다. 일단 이 절대 경로를 알고 있어야 한다. 나중에 이 HTML문서를 저장할 때 클립아트 모음 디렉토리에서 어느 디렉토리로 복사할 것인지 묻는다. 그때 이 절대 경로를 기입하면 만사 오케이!!
♣ Tip : 절대 경로와 상대 경로란?
절대 경로는 아까 적은 식 즉, x:/자신계정ID/image/ 이런 방식의 지정이다. 하지만 이 절대 경로는 자신의 컴퓨터만의 절대 경로다. 다시 말해서 웹 상에서 이런 경로 지정은 아무 소용이 없다는 뜻이다. 인터넷에서 절대경로는 무엇인가? 첫 강좌에서 말했듯이 URL이다. 즉 http://www.xxxx.com/~자신계정ID/image/Yangkwangmo.jpg 등 같은 주소가 절대 경로가 된다. 이 절대 경로라면 xxxx.com에서 자신계정ID 디렉토리안에 있는 image디렉토리안에 있는 광모의 사진을 지정하는 것이다. (하하하...왜 하필 내 사진일까??) 하지만 웹 에디터에서는 이런 URL을 이용해서 이미지 삽입을 하는 것이 아니다. 이는 상대 경로를 이용하는 것이다. 상대 경로는 계정 안에서도 통용되고 자신의 컴퓨터에서도 광모가 미리 알려 준 [마지막 준비] 대로 해 놓았으면 컴퓨터에서도 같은 상대 경로를 쓰게 된다. 즉 지금 자신의ID명으로 디렉토리를 만들어 놓았고 그 안에 image 디렉토리를 지정해 놓았다면 자신의ID 디렉토리에 있는 HTML에서 image디렉토리 안에 있는 이미지를 불러 들일 때 ../image/광모사진.jpg라고 쓰면 된다. 이는 HTML문서를 계정에 옮겼을 때 같은 상대 경로가 유효하면 브라우저에서 사진이 뜨게 된다. (이해가 되시는지? 좀 난해한가요? 몰라도 따라하다 보면 막판 가서는 제 말을 이해하게 됩니다.)
다음 넘어가고 이미지 삽입을 보자. 삽입할 이미지는 여러분이 만들어 놓은 image디렉토리에 넣어둔다. (탐색기를 이용해서 복사해 넣는다.) 대화 상자가 뜨면 소스에서 찾아보기를 눌러 우리의 image디렉토리를 찾아 원하는 이미지를 선택한다. 그 다음에 삽입을 누르면 이미지가 삽입된다. 삽입 전에 그림 속성을 미리 정해 줄 수도 있다. 일반/모양 중에 모양에서 이미지가 삽입될 모양을 정해보고 각각의 차이를 느껴보자.
이미 삽입된 이미지는 앞에서 말한 속성지정을 통해 다양한 옵션으로 변형시킬 수 있다. 키 포인트는 속성 지정하는 방법은 왼쪽 버튼을 누르고 오른쪽 버튼을 누른 다음에 속성을 택하란 것이다. 표, 이미지, 수평선, 글자 등 모두 같은 방법이니 오른쪽 버튼을 눌러서 사용할 수 있는 옵션을 확인해 보시라!!!
5) 테이블 편집하기
테이블이 말썽이다. 언제나 태그로 HTML문서를 작성할 때 이게 어느 정도 크기인지 어떤 모양인지 감이 안 잡히는 것 중 하나가 테이블 이였다. 그런데 웹 에디터에서는 테이블이 너무 쉽다는 강점이 있다. 사실 이 것 땜에 내가 왜 그런 고생을 했지? 란 생각도 든다.
테이블 사용하는 방법은 한글을 사용해본 사람이라면 누구나 쉽게 할 수 있다. 웹 에디터 위쪽에 보면 수평선 삽입 옆에 표 삽입 아이콘이 있다. 누르고 가로 세로를 정해준다. 테이블이 지금 창에 가득 찰(?)것이다. 한 마디로 크기가 맘에 들지 않는다는 얘기다. 테이블의 크기는 테이블 속성에서 지정해준다. 여기서 테이블의 테두리 두께 선종류등도 선택이 가능하다. 쉽게 크기를 정해주려면 마우스를 테이블 선에 가져가 조절한다.
☞ 테이블 응용은 뒤에 실제로 첫 페이지를 제작하면서 설명하기로 하겠습니다. 프레임, 링크도 같이 설명할 것이니 없다고 걱정 마시길~☆
표 속성은 테이블 전체의 속성이다. 반면 셀 속성은 무엇인가? 셀이란 것은 표 안에 있는 사각형 공간을 말한다. 이 셀의 색상 등을 셀 속성에서 정해줄 수 있다.
5) 메일주소 넣기
인터넷에서 홈페이지마다 꼭 있는 것들이 있다. 방명록, 카운터 그리고 이 메일 주소다. 이 메일 주소를 클릭 하면 바로 자신의 브라우저에 내장되어 있는 메일 편집기가 뜰 것이다. 이건 어떻게 만들까?
태그로는 mailto란 태그가 들어간다. 나모에서도 비슷하다. 이 메일을 쓰고 나서 블록 설정후 오른쪽 버튼을 눌러 하이퍼링크 만들기를 선택한다. (블록 설정 후에는 우측버튼을 누르는 것이 키포인트!! 모든 기능은 오른쪽 기능에서 나온다!!)
하이퍼링크 만들기에서 주소(URL) 요소에서 방식(S)을 선택해서 mailto로 바꾸어 준다. 그리고 위의 주소(URL)에 mailto:다음에 자신의 이 메일 주소를 쓰고 확인을 누른다. 그럼 완성된 것이다.
♣ Tip : 링크된 글자는 항상 파란색?
아니다. 속성에 대해 설명할 때 예로써 빼 놓은 것이 하나 있다. 글자, 표, 수평선, 그림 등의 속성뿐 아니라 문서의 속성도 설정할 수 있다. 문서에서 커서가 껌뻑거릴때 오른쪽 버튼을 눌러 문서 속성을 누른다. 문서 속성 대화 창에서 하이퍼링크 기본 색을 바꾸어 준다. 그 외 속성이나 정보도 관심 있다면 바꾸어 보자!
6) 자바 스크립트 삽입하기
♥ 이건 저도 많이 안써봤습니다. 1 Cool Button이란 유틸을 이용하면 자바 버튼을 만들어주는데 그때 쓸 것 같습니다. 이 기능에 대해 불편을 호소하는 유저도 있다는데 저는 잘 모르겠습니다. (무식해서요 ^^;) 이 부분에 대해서는 질문하셔도 답해드릴 것이 아직은 없습니다. 죄송합니다. T_T ♥
먼저 자바스크립트를 작성후 복사해 놓는다. 삽입 -> 고급 -> 스크립트를 선택한 후 화면의 중앙부분에 붙여 넣기 해서 자바스크립트가 실행되도록 한다.
III. 실전 홈페이지 제작
[자! 첫 페이지를 만들어보자]
너무 거창하게 계획할 필요는 없다. 일단 간단하게 홈페이지 입구를 디자인해보자. 일단 나모를 실행시키고 어떤 모양을 만들지 생각해보자. 입구는 간단하게 어떤 홈페이지인지 나타내는 정도가 좋다. 너무 길게 글을 쓰면 읽지 않을 뿐더러 보기에도 매끄럽지 않다.
나모를 실행시켜 보면 마치 워드프로세서와 같다는 느낌이 들것이다. 맞다. HTML이란 문서를 만드는 워드프로세서라고 생각하면 된다. 일단 맘에 드는 홈페이지에서 아이디어를 얻어오자. 너무 어려운 홈페이지 빼고.. ^^;
배경 색을 먼저 정해본다. 검은 색, 흰색 또는 회색이 많이 쓰인다. 회색의 장점은 테이블(표)이 입체적으로 보인다는 것이다. 나모에서 우측 마우스 버튼을 선택하면 문서 속성에서 색상을 선택할 수 있다. -자세한 나모 사용법은 자료실에 있는 설명서를 참고하길 바람-
대부분 첫 페이지는 사진과 간단한 소개 그리고 들어가는 입구를 만들어 놓는다. 입구는 글로 만들 것인가 아니면 아이콘을 달아 놓을 것인가 아니면 자바로 버튼을 만들 것인가?
1) 글로 입구 만들기
가장 손쉽게 만드는 방법이다. '환영합니다.' 또는 '입구' 등으로 글을 적은 후 하이퍼링크를 이용하여 연결시킨다. 글자부분에 블록을 설정한 후 오른쪽 마우스 버튼을 누르면 하이퍼 링크 만들기란 메뉴가 있다. 선택후 연결시키길 원하는 HTML문서를 선택하거나 수동으로 설정할 수 있다. 아직 다음 페이지를 작성하지 않았으므로 직접 선택은 할 수 없다. 그러나 다음 페이지를 home.htm로 만들 생각이니 직접설정에 home.htm으로 정해놓는다. HTML과 HTM은 같은 확장자이다. 단 첫 페이지는 html확장자를 쓰는 것이 좋다.
☞ 블록 설정을 어떻게 하는가 : 블록 설정을 못하는 왕초보를 위해 잠깐 설명하면 원하는 글자 앞에 마우스를 가져가 한번 클릭 하면 커서가 글자 앞으로 이동한다. 여기서 다시 왼쪽 버튼을 클릭한 체로 글자 끝가지 마우스를 이동하면 글자가 반전되면서 블록이 설정된다. 마우스 버튼에서 손을 떼고 오른쪽 마우스 버튼을 누르면 블록에서 지정할 수 있는 옵션이 나온다.
2) 아이콘 달아 놓기
아이콘을 이용하면 좀더 화려한(?) 홈을 꾸밀 수 있다. 우선 필요한 것이 아이콘인데 나모에 삽입 옵션에 보면 클립아트란 메뉴가 있다. 기본적으로 제공하는 아이콘들로 이것 외에 다양한 아이콘을 사용하고 싶다면 공개 자료실 등에 있는 아이콘 모음이나 직접 제작하는 것도 좋다. 그림을 삽입하고 싶다면 원하는 위치에 커서를 이동시키고 나모에서 그림 삽입 메뉴를 선택한다.
그림 속성이란 메뉴가 뜨는데 이곳에서 직접 그림을 선택할 수도 있고 그림위치를 수동으로 지정할 수도 있다. 그림이 나왔다면 이제 블록 설정한 후 다음 페이지를 링크해 놓는다.
3) 버튼 만들기
입체적 버튼을 만들고 싶으면 1-cool button이라는 유틸을 이용하여 다양한 버튼을 만들 수 있다. 이는 나중에 따로 설명하겠다.
이제 입구가 완성된 셈이다. 그런데 주의 사항이 있다. 인터넷 서버에서는 당신의 홈페이지의 첫 장이 index.html이거나 default.html이여야 당신의 홈페이지 주소, 즉 당신의 아이디(사실 디렉토리)만 지정해도 이 디폴트 html문서가 나오게 정해져 있다. 대부분 서버에서는 index.html로 지정해야한다. 그러므로 지금 저장할 입구페이지 이름은 index.html로 정한다.
[메인 페이지 작성]
당신 집에 들어갔을 때 어떤 메뉴로 손님을 맞을 것인가? 프레임을 사용할 것인가? 프레임이란 화면을 둘로 나누어주는 것이다. 많은 홈페이지에서 프레임을 사용하여 좌측에 메뉴판을 만들고 우측에 메뉴를 선택시 해당 메뉴가 나오게 만든다. 그러나 프레임을 사용할 때 주의 사항이 있다. 프레임을 만들면 사용자도 편하고 만드는 사람도 각 페이지를 어떻게 연결할 것인가 고민하지 않아도 된다는 장점이 있으나 어떻게 보면 투박해지고 갑갑해 보이게 된다. 이런 문제들을 유념해 두고 프레임을 썼지만 쓰지 않은 것처럼 보이도록 해보자.
1) 프레임 사용하기
일단 나모에서 새 페이지 버튼을 누른다. 메뉴에서 프레임란에 수직으로 프레임 나누기를 누른다. 아마 화면이 두동강 날 것이다. 만약 다른 프레임형식을 원한다면 수평프레임을 사용해도 좋다. 프레임 크기를 정하는 것이 좋겠다. 좌우로 나눈 막대에 마우스를 가져가 보자. <-||-> 이렇게 마우스가 변할 것이다. 여기서 클릭하고 좌우로 움직이면 프레임 크기를 손쉽게 조정할 수 있다. 또는 오른쪽 버튼을 누르고 프레임 속성에서 폭을 지정해준다. 퍼센트로 정하면 가변적이니 픽셀로 정하자. 보통 사용자들이 14' 모니터를 사용한다는 것을 감안하고 전체 홈의 폭을 600픽셀로 잡자. 프레임을 사용하니 작은 프레임은 100정도 잡고 나머지는 500정도 잡자.
화면을 보기 좋게 나누었는가? 그렇다면 프레임 이름을 설정해주어야 한다. 이것은 파일 이름을 지정해주는 것과는 달리 좌/우 프레임을 구별해주어야 하기 때문이다. 즉 좌측에서 메뉴를 눌렀을 때 해당 메뉴가 어디에 떠야하는가 하는 문제를 해결하기 위해서다. 좌측에서 메뉴를 눌렀을 때 오른쪽 프레임에서 떠야 하므로 우측 프레임 이름을 정해줘야 한다. 우리는 good으로 정해보자. 우측 화면에 마우스를 가져간 후 우측 버튼을 누르고 프레임 설정으로 들어가 이름을 정해준다.good으로 정하기 싫으면 다른 것으로 정해도 무방하다.
정했다면 좌측 프레임으로 가서 프레임 속성을 다시 해준다. 기본 대상 프레임을 good으로 정한다. 또 브라우저에서 떴을 때 좌측 프레임에도 스크롤 바가 있다면 보기도 투박하고 사용하는 사람도 스크롤 따로 움직이기가 귀찮다. 그러므로 좌측 프레임은 스크롤 바가 없도록 설정해주자. 프레임 속성에서 말림 막대 없음으로 지정해준다.
2) 프레임에 사용할 메뉴 만들기
좌측 프레임을 만들었으니 들어갈 메뉴를 만들어야 한다. 전에 설명했듯이 글자로 링크를 만들 수도 있고 아이콘을 이용할 수도 있으며 자바 버튼을 이용할 수 있다. 학술적 홈페이지라면 굳이 이뻐야 할 필요성이 적으므로 글로 링크해도 배경만 잘 살려준다면 얼마든지 이쁠 수도 있고, 직접 만든 아이콘, 그림 등을 사용해도 좋다. 자바로 만든 버튼은 다양한 모습으로 멋(?) 있을 수 있으나 자칫 홈페이지 로딩 시간이 너무 오래 걸릴 수도 있다. 무엇을 사용하던 간에 가장 중요한 것은 당신의 디자인 감각이다. 이건 타고 나는 것이므로 구제(?) 방법이 없음을 안타깝게 여긴다... 그러나 방법이 없는 것은 아니다. 잘된 홈페이지를 적당하게 참고하자. 베끼는 것은 좀 비양심(?)적일 수도 있으니 말이다. 어느 정도 구성이 잡히는가?
그렇다면 본격적으로 만들어보자. 프레임은 단지 프레임으로 나누어주는 역할만 할 뿐 내부에 다른 정보를 가지고 있지 않다. 프레임파일 이름을 home.htm으로 저장하고 메뉴를 작성해보자. 나모에서 새 파일을 누르고 표작성을 한다. 표작성은 나모 위쪽 메뉴에 창처럼 보이는 아이콘을 누르면 한글에서 표작성하듯이 쉽게 작성 할 수 있다. 테이블을 1X1로 잡아준다. 즉 한 칸의 박스를 만드는 것이다. 폭은 100으로 정한다. 그리고 그 안에 원하는 메뉴를 만들어 넣는 것이다. 만약 원하는 메뉴가 '나의 소개' '우리집소개' '학교소개' '방명록' ' 이메일'등이라면 이렇게 써 놓는다. 만약 적당한 아이콘이 있다면 아이콘을 넣어도 좋다. 보통 글 앞에는 작은 동그라미를 넣는다. 작은 아이콘이지만 보기에 깔끔하고 용량도 작다.
다른 홈페이지를 인터넷을 헤메며 참고한다. 메뉴를 작성했다면 이제 링크를 걸어주어야 한다. 만약 나의 소개란 페이지가 intro.htm이라면 링크로 해당 페이지를 정해주면 된다. 주의 할 것은 각 메뉴에 해당하는 페이지를 우측 프레임에 띄울 생각이므로 대상 프레임을 우측 프레임이름으로 정해줘야 한다. 우리의 경우 good으로 정해야겠다.
♣ Tip: 이 메뉴뿐 아니라 모든 페이지를 한 칸의 박스 즉 테이블에 넣어 만드는 것이 하나의 요령이다. 즉 테이블 속성으로 당신이 원하는 폭을 설정해주면 그 이상으로 글이 나갈 수 없다. 초보자들이 만드는 홈페이지에 가보면 브라우저를 옆으로 길게 늘릴 경우 (요즘 17'이상의 사용자도 많다) 홈페이지인지 알아 볼 수 없을 정도로 잔인하게(?) 깨 져버리는 경우가 있다. 그러므로 해상도, 화면의 크기에 관계없이 항상 일정하게 모양을 유지시키기 위해서는 작은 모니터를 고려한 상태에서 큰 모니터나 고해상도를 사용하는 사람을 고려해서 테이블로 규격을 맞추어 주는 것이 좋다. 단 테이블 속성을 두께 없음으로 정해주어야 화면에 테이블이 보이지 않는다.
☞ 홈페이지 한 장의 크기는 얼마가 적장한가? : 홈페이지 한 장의 크기는 30K정도 안밖이 적당하다고 본다. 사람이 참는데 한계가 30초 정도라고 한다면 말이다...
☞ 숙제 : 자신의 홈페이지의 구성에 대해 생각해보세요. 즉, 어떤 메뉴를 넣고 어떤 내용으로 구성할 것인지 미리 생각하면 강좌를 들으면서 자신에게 꼭 필요한 부분을 쉽게 이해할 수 있을 겁니다. 꼭 꼭 꼭!!!
♥ 프레임을 잘 이해하시면 홈페이지에 많이 응용할 수 있습니다. 우선은 이해가 안되면 따라 해보세요. 그리고 인터넷에서 프레임 사용한 홈페이지들을 잘 보세요. 어떻게 사용했는지 그럼 오늘 강좌는 이만~ 내일로 나모를 이용한 홈페이지 제작 강좌가 끝납니다. 그 다음에는 그래픽강좌가 시작됩니다. 그래픽부터는 하루에 4개씩 올리겠습니다. (그 전에 강좌 올렸던 내용과 동일하기 때문에...) ♥
3) 우측 프레임에는?
메뉴를 만들었다면 일단 프레임화일 home.htm에서 좌측프레임에서 메뉴를 만든 html파일을 불러주면 나모에서 편집하기가 더 수월하다. 좌측 프레임에서 프레임 속성에서 소스지정을 menu.htm을 정해주면 된다.
그렇다면 우측 프레임에 기본으로 나오는 소스는 무엇으로 채워 넣는가? 우측프레임 기본 소스는 나모에서 새 파일을 지정해서 만들어보자. 자신만의 아이디어로 독특하게 만들 수 있다면 그보다 좋은 것은 없다. 하지만 막막한 초보들은 다음과 같이 하는 것이 무난하다 하겠다. 메뉴에 있는 내용을 우측에 간단한 설명과 함께 소개한다. 자신의 홈페이지에 걸맞은 아이콘들을 이용해서 소개하면 더 좋겠다. 아이콘 제작 등은 뒤편에 가서 설명하겠다. 다 작성하셨는지? 그렇다면 이 페이지를 main.htm으로 저장하고 우측 프레임에서 프레임 속성으로 들어가 소스로 main.htm을 지정해준다. 그렇다면 일단 홈페이지의 틀은 다 짜여진 셈이다.
너무 엉성한가? 더 이쁘게 만드는 방법들은 후에 아이콘 제작 및 애니메이션 제작 편을 참고하시라. 일단 구성을 어떻게 하는지가 가장 중요하다. 잘 만들어진 홈페이지를 참고하고 처음에는 흉내내는 것이 좋겠다.
♣Tip: 링크에 보면 조금 전에 만든 good이라는 프레임대상 말고도 _top, _self등이 있다. 말 그대로 _top은 프레임 틀을 없앤 상태로 불러드린다는 말이고 _self는 그 링크가 걸린 프레임에서 해당 페이지를 불러들인다는 옵션이다. 그 외에도 새 브라우저 창을 열어서 그곳에서 보여주는 옵션도 있다.
☞주의: 만약 다른 홈페이지를 링크해 놓는다면 링크에서 대상 프레임을 _top으로 설정해주기 바란다. 그렇지 않으면 방문객이 링크해 놓은 다른 홈페이지로 이동시 당신의 홈페이지 프레임이 없어지지 않고 프레임 안에 다른 홈페이지를 불러들여 갑갑한 모습이 된다. 대부분 네티즌은 이런 모양에 짜증을 내며, 또한 그 홈페이지 만든 사람에 대한 예의(?)도 아니다.
4) 각 메뉴의 페이지는?
지금 까지 설명했든 내용과 동일하다. 먼저 테이블을 이용해 폭을 지정해 그 안에 내용을 써넣는다. 만약 자신의 소개를 넣고 싶다면 자신의 사진을 스캔하여 넣는다. 테이블을 작성하여 짜임새 있도록 만들고 싶다면 테이블을 이용하는 것도 좋다. 테이블이 보이지 않게 테이블의 특성을 이용하고 싶다면 테이블 속성에서 (속성은 우측 마우스를 누르면 나온다.) 테두리 두께를 0으로 정해준다. 테이블 외에도 수평선 등을 넣는 것도 가능하다. 수평선 모양을 선택하고 싶다면 우선 테이블 아이콘 옆에 있는 수평선 아이콘을 눌러 수평선을 화면에 띄우고 수평선을 눌러 블록설정 후 오른쪽 아이콘을 눌러 수평선 속성에서 지정해주면 된다.
♣Tip: 스캔 해상도는 얼마가 적당한지 고민하는 초보들도 있을 줄로 안다. 해상도는 72dip정도면 충분하다. 자신의 사진을 선명하게 보여주고 싶다면 그보다 좀더 높일 필요도 있으나 간단한 사진들이라면 괜히 파일의 크기만 크게 하는 고해상도는 필요치 않다.
5) 기타
①글자 역시 속성을 정해서 다양한 모양을 만들 수 있다. 깜박임 같은 속성은 넷스케이프에서만 지원되니 주의하길 바란다. 여러 모양과 크기를 사용해서 보기 좋게 만들어본다.
②불릿(bullet)을 이용하면 간단한 메뉴는 손쉽게 만들 수 있다. 나모의 우측 위편에 보면 번호 적히고 작대기 있는 것은 번호리스트이고 점 옆에 선이 있는 것은 불릿 리스트이다. 어떤 것인지는 누르고 해보시면 아신다. 편리하게 사용할 수 있다.
③태그로 확인하고 싶다면 위쪽 html버튼을 눌러 간단하게 확인할 수 있다. 만약 나모에서 지원하지 않는 것이 있다면 이 기능을 이용하기 바란다.
♥ 나모를 이용한 html문서 만들기는 이것으로 마칩니다. 이젠 홈페이지를 만들 준비가 60%정도는 되었다고 말할 수 있습니다. 남은 것은 그래픽 다루기와 파일을 업로드하는 일이 남았죠. 그래픽의 개념을 잡으러 다음 장으로~~♥
IV. 홈페이지에 필요한 그래픽 제작
♥ 오늘부터는 그래픽입니다. 어찌 보면 홈페이지의 꽃이라고 할 수 있습니다. 하지만, 하나의 컴 그래픽이 나오려면 생각보다 많은 시간과 노력과 수고가 있어야 합니다. 물론 배우기도 어렵죠. 우리가 하고자 하는 것은 새로운 이미지를 제작하는 것이 아니라 제작된 이미지를 사용에 적당하게 수정하는 것을 목표로 합니다. 이 것만 알아도 아주 훌륭하다고 생각합니다. ^^ ♥
[그래픽 입문]
1) 이미지 파일의 종류와 특성
홈페이지에서 그래픽의 중요성은 아무리 강조해도 지나치지 않는다. 그래픽의 범주와 기술은 너무나도 광범위한 내용이므로 각각의 포맷의 특징과 페인트샵 프로로 간단한 이미지를 변경하는 것을 살펴보기로 하겠다.
①GIF
웹 브라우저에서 볼 수 있는 그래픽 파일은 gif와 jpg뿐이다. 그 중에서도 GIF(Graphics Interchange Format)은 말 뜻 그대로 다른 컴퓨터 사이에 그래픽 이미지를 주고받기 위한 목적으로 고안되어서 컴퓨서브 사에서 개발되었다. 8비트 이하의 컬러 이미지만 저장할 수 있는 다소 오래된 기술이다. 따라서 24비트 컬러 이미지를 Gif로 저장하기 위해서는 팔레트를 만들고 컬러의 수를 줄이는 디더링(Dithering)이라는 과정을 거쳐야한다. 이 과정에서 이미지의 손상은 불가피하다. 그러나 GIF가 단점만 있는 것은 아니다. 이런 단점을 모두 커버할 만한 장점이 있기 때문에 아직까지 쓰이는 것이다. 첫 번째 파일을 읽는 속도가 빠르다는 것이다. 두 번째 투명, 애니메이션은 웹에 절대적으로 필요한 새로운 기술을 가지고 있다.
②JPEG
JPEG는 Joint Photographic Experts Group의 약자이다. jpg의 압축 방식은 기존의 방식과는 차원이 다른 압축을 이용했다. 즉, 이미지의 일부가 손실되더라도 최대한 작은 파일을 만들어내며 이미지는 24비트 컬러 모드로 되어있어야 한다. 또한 압축 정도를 사용자가 지정할 수 있다는 장점이 있다.
2) 어떤 그래픽 파일을 이용해야 하는가?
설명하면 나무나 길어질 내용이므로 위의 말들을 바탕으로 다음의 원칙을 이해하고 항상 염두에 두다 두길 바란다.
① 페이지에 삽입되어 본문과 어울리는 이미지는 GIF를 사용한다.
② 날카로운 선을 가진 이미지는 GIF를 이용한다.
③ 스케닝한 이미지는 JPG를 이용한다.
④ 이미지의 크기가 크면 JPG를 이용한다.
즉 결론을 내자면 html문서에 포함될 이미지의 경우 GIF를 사용하고 이미지만을 브라우저에 보여줄 때는 JPEG를 이용하라는 것이다. 브라우저 전체에 보여줄 이미지는 크기도 클 뿐 아니라 많은 컬러를 필요로 하는 경우가 많으므로 JPG가 적당하고 페이지에 포함되는 이미지는 그리 크지 않으므로 GIF를 사용하면 된다.
♥ 웹에 쓰이는 그래픽은 위에서 언급했듯이 두 종류입니다. 그런데 두 파일의 차이와 특징을 모르고 사용하는 사람이 많습니다. 우리는 두 종류의 차이를 꼭 알아둡시다. 그러면 최적의 홈페이지를 만드는데 도움이 될 것입니다. ♥
[페인트 샵 프로]
1) 페인트 샵 프로
많은 사람들이 포토샵을 사용한다. 조그만 그래픽을 알면 마치 포토샵을 사용해야하는 것으로 착각(?)하는 사람도 있을 것 같다. 페인트 샵 프로는 포토샵의 기능을 전부를 커버할 수 없지만, 웹 디자인에 자주 사용하는 포맷, 그리고 디자인 등을 손쉽게 수정할 수 있는 장점이 있기 때문에 많은 사람들이 사용한다. 그리고 무엇보다도 쉐어웨어라는 장점이 있기 때문이다...
2) 장점과 구입(?)처
앞에서 장점을 열거했지만 정확히 어떤 포맷을 지원하는지 말을 안 했다. 대표적으로 투명 GIF, 인터레이스드 GIF, 프로그래시브 JPEG가 있고 이외에도 그래픽 이미지를 가지고 할 수 있는 거의 모든 작업을 페인트 샵에서 끝낼 수 있으며, 스크린 캡쳐나 벤치 컨버전과 같은 유용한 기능도 제공한다. 대부분의 통신망에서 구할 수 있으며 유니텔 공개자료실이나 웹플러스 자료실에서 구할 수 있다. 인터넷에서는 http://www.jasc.com 에 가면 따끈한 최근 버전을 구할 수 있을 것이다. 그러나 4.14일 때와 지금 5.X일 때에는 파일 크기의 엄청난(?) 차이가 있으니 참고해서 받길 바라고 지금은 4.X에 준해서 설명하겠다.
3) 페인트 샵 구성
① 툴바: 페인트 샵 프로의 가장 기본적인 작업들, 즉 파일을 읽고 저장하거나 작업 윈도우 요소들을 보이고 감추도록 하는 기능들을 포함한다.
② 툴박스: 페인트 샵 프로에서 그림을 그리는데 관련된 도구들을 포함한다. 즉, 이미지를 확대/축소하거나 이미지의 일부를 선택하고 텍스트를 넣거나, 사각형이나 원형 등을 그리는 도구를 포함한다.
③ 스타일바: 스타일 바는 툴박스에서 선택된 도구에 포함된 옵션들을 보여준다. 당연한 이야기지만 툴박스에 선택된 도구에 따라 다른 옵션들을 보여준다.
④ 히스토그램 윈도우: 현재 열려 있는 이미지의 세 원색의 비율과 밝기 변화를 히스토그램으로 보여준다. 이 윈도우는 일반적인 이미지 편집에는 잘 사용되지 않으며, 스캐닝한 이미지를 보정할 때만 사용된다.
⑤ 컬러팔레트: 선택할 수 있는 컬러들을 보여주고 원하는 컬러를 선택하도록 한다. 전경 컬러를 선택하려면 마우스 왼쪽 버튼으로 원하는 컬러를 클릭하고 배경 컬러를 선택하려면 마우스 오른쪽 버튼으로 클릭 한다.
⑥ 선택된 컬러: 컬러 팔레트에서 선택된 전경 컬러(왼쪽 상단)와 배경 컬러(오른쪽 하단)를 보여준다.
♥ 핫핫, 거뜬하죠? 이해가 안되면 멜주시던지 질문하세요. 페인트 샵 프로는 작고 매우 유용한 프로그램이니 없다면 꼭 다운 받아 사용해보세요. 그리고 크랙들도 인터넷에 많다고 하더군요. --; (이런 건 가르쳐주면 안 되는데...) ♥
4) 파일 변환 JPG->GIF
페인트 샵 프로를 이용해서 할 수 있는 작업 중에서 가장 많은 작업이고 또 가장 기본적인 작업이 파일 변환이라고 할 수 있다. 다음 순서대로 따라가면 쉽게 파일을 변환할 수 있다.
① 툴바의 open버튼이나, File/Open 메뉴 항목을 선택하여 Open대화 상자를 연다. 대화상자에서 원하는 파일을 선택하고 열기(O)버튼을 클릭 하여 파일을 열 수 있다.
② 파일이 열리면 그림이 작은 윈도우 안에 보인다.
③ JPEG파일을 GIF파일로 저장하기 위해서는 먼저 컬러모드를 24비트 컬러에서 8비트 컬러로 변환해야 한다. 메뉴의 Colors/Decrease Color Depth/256 Colors.. 을 선택해야 한다.
④ 그러면 Decrease Color Depth 대화 상자가 나타난다. 먼저 이 대화 상자의 옵션을 살펴보면 Palette 섹션의 두 옵션은 팔레트를 만드는 방법을 결정한다. Optimized옵션은 이미지에 사용된 컬러를 분석하여 가장 적당한 팔레트를 만들며, Standard옵션은 미리 정해져 있는 256 팔레트를 사용한다. 당연히 Optimized옵션을 선택했을 때 더 나은 결과를 볼 수 있다. 대부분의 경우 Optimized옵션과 Nearest Color옵션을 사용하는 것이 좋다. 원본 이미지의 손상도 크지 않으며, 만들어 내는 GIF 파일의 크기도 작다. 하지만, 컬러가 많이 포함되는 이미지의 경우에는 이미지가 손상되는 수가 있는데, 이때는 Optimized옵션과 Ordered Dither옵션을 사용한다. 대신 이 옵션으로 만드는 Gif파일은 크기가 커지는 단점이 있다.
⑤ 이미지의 컬러 모드를 변경했으면 파일을 GIF로 저장하는 일만 남았다. File/Save as 메뉴를 선택해서 저장한다.
⑥ 이때 파일 형식(T) 필드를 클릭하고 Gif Compurve항목을 선택한다.
⑦ 이젠 정말 이름을 짖고 저장한다.
5) 파일 변환 JPG->GIF
① 파일을 불러들인다. (위의 내용 참고)
② gif파일을 jpeg파일로 저장하기 위해서는 먼저 컬러모드를 8비트에서 24비트로 전환해야 한다. 메뉴의 Colors/Increase Color Depth/16 millions Colors(24bit) 항목을 선택한다.
③ 이젠 저장 대화상자를 열고 파일형식에 Jpg-Jpeg-JFIF Compliant 항목을 선택한다. 그리고 저장하면 끝이다.
6) 파일 최적화
웹에 사용될 이미지를 최적화 한다는 것은 파일 크기를 줄이면서 이미지의 손상을 최소화하는 것을 말한다. 웹에서 이미지의 크기를 줄이는 것은 전송속도와 관련되는 것이므로 매우 중요하다.
① Resize와 Resample
위 두 가지는 이미지 파일을 손쉽게 줄일 수 있는 방법으로 많이 쓰인다. 비슷하면서도 약간 다른 방법이므로 비교하면서 설명하도록 하겠다. 먼저 Resize는 크기를 조절하므로 써 파일의 크기를 줄이는 것이라 하겠다. 당연히 크기가 작으면 파일 크기 역시 작아진다. Resample은 파일 크기도 조절하지만 이미지의 크기를 수학적인 방법으로 변경한다고 한다. 리사이즈에 비해 1~2초 더 걸리지만 만들어낸 이미지는 훨씬 깨끗하다.
♣ Tip : Maintain aspect ratio 옵션
이 옵션은 크기를 줄일 때 가로 세로의 비율을 일정하게 유지시켜주는 옵션으로 만약 크기를 마음대로 조절 할 생각이라면 옵션 선택을 풀어줘야 한다. 그러나 대부분 가로/세로 비율을 유지하므로 체크하고 사용한다.
리사이즈나 리셈플로 크기를 조절후 보면 파일의 크기가 상당히 줄었음을 알 수 있다. 만약 60K가 줄었다면 방문객의 30초 정도를 절약한 샘이다. 그러므로 굳이 크고 자세히 보여줘야 하는 이미지가 아니면 적당하게 줄여주는 것만으로 최적화 시킬 수 있다고 말할 수 있다.
② Crop을 이용한 최적화
Crop은 포토샵을 써본 사람이면 다 알 것이다. 이미지중 필요한 부분만 사용하고자 할 때 사용하는 것으로 만약 어떤 모델의 전신 사진 중 얼굴만 사용하고자 할 때 툴바의 □(점선이다..)를 클릭해서 이미지에 범위를 정해준다. 그 다음에 Crop을 선택하면 선택된 이미지 범위만 남게되고 그 이외의 부분은 삭제된다.
그러나 거창하게 삭제하는 것이 아니고 작은 여백을 없애주는데도 효과적이다. 별로 눈에 띄지 않는 여백을 Crop을 이용해서 잘라주면 파일의 크기가 효과적으로 줄어듬을 알 수 있다.
♣ Tip : 만약 필요한 부분까지 잘랐다면?
걱정할 필요 없이 Edit/Undo 을 누르면 원상태로 회복된다.
③ 컬러 줄이기 최적화
당연히 상식적으로 생각해 보아도 색상수가 많으면 파일 크기가 커질 것이다라는 것은 자명하다. 그러므로 적당한 색상 수를 정해주는 것이 중요하다. 만약 흑백사진을 256색상으로 정한다면 불필요한 군살이 느는 것이다. 이미지의 색상 수는 Color/Decrease Color Depth.../16 Colors 메뉴를 선택해 적당한 옵션을 선택해주면 컬러를 정할 수 있다.
④ JPEG의 압축 율을 이용한 최적화
JPEG 파일의 경우에는 파일 크기를 줄이는 방법이 한정되어 있다. JPG 파일 역시 위에서 설명한 방법으로 크기를 줄일 수 있다. 그러나 GIF파일처럼 획기적으로 줄어드는 것은 아니다. 또 컬러 수를 줄이는 것은 24비트만 파일 저장이 되는 JPG에서는 통하지 않는 방법이다. 그러나 JPG에서는 더 확실한 방법을 가지고 있다. File/Preferences/File Format Preferences.. 메뉴 항목을 선택하여 Jpg를 선택한다. 여기서 Compression옵션에서 1~99까지 수를 선택하여 압축비율을 결정하면 된다. 값이 커질수록 파일은 작아지고 이미지의 질은 떨어진다.
♣ Tip: 작다고 무조건 좋은 것은 아니다. 이미지의 질도 중요하다. 파일의 크기도 중요하지만 이미지의 질을 생각할 때 1~15정도의 압축 율을 권하고 싶습니다. :)
♥ 요기가 하이라이트입니다!! 무조건 암기~ 읽어보시면 잊으려야 잊을 수 없을 것입니다. 이해가 되더라도 꼭 한번씩 따라 해보세요. 이해가 안되시면 일단 따라하시고, 결과를 보시면 확실히 이해가 갑니다. ♥
7) 특수한 그래픽 파일들
웹에서 흔히 볼 수 있는 것 중에 점차적으로 뚜렷해지는 그림이 있다. 또 눈치 채지 못했지만 배경이 투명인 그림들도 웹에서 많이 사용된다. 각 파일의 특징과 언제 써야할지 알아보자.
① 투명 GIF
투명 Gif란 배경이 투명한 그림이다. 즉 어떤 아이콘이 있다고 해보자. 이 아이콘의 배경을 특정 색으로 지정할 수도 있지만, 만약 투명으로 지정해놓으면 여러 배경 색에도 잘 어울릴 것이다. 또한 웹에서 배경이미지를 사용할 경우에는 더욱 필요하다. 배경그림이 이미지 테두리에서 잘리는 것은 비슷한 색조라고 해도 보기에 좋지 않다. 그렇다면 어떻게 투명GIF를 만드는지 보자.
방법은 비교적 간단해서 앞에서 이미 언급했던 방법을 통해 이미지를 불러들인다. 그리고 GIF-Compuserve 항복을 선택한 후 옵션에서 Set the transparency value to the background를 선택하고 세이브 하면 끝이다.
♣ Tip : 그 외의 옵션으로 Maintain Original...은 원래 파일에 있던 투명 정보를 그대로 저장한다는 뜻이고 Do not save... 는 투명 정보를 저장하지 않는 것이다.
② 인터레이스드 GIF
앞에서 언급했듯이 점차 뚜렷해지는 그림이다. Interaced GIF의 장점은 사용자가 이미지를 조금이라도 빨리 알아보도록 할 수 있는 것이다. 한 라인씩 보여주는 것보다는 전체적으로 이미지가 뚜렷해져 간다면 자신에게 유용한 정보인지 아닌지 조금더 빨리 판단할 수 있으므로 방문객에게 좀더 편리할 수 있다.
파일형식(T)필드를 클릭하고 GIF-Conserve항목을 선택한다. 그리고 하단의 Sub type옵션을 클릭하고 version 87a-interaced또는 version 89a-interaced를 선택한 후 확인 버튼을 누르고 세이브 하면 끝이다.
③ 프로그래시브 JPEG
앞에서 본 인터레이스드 GIF와 유사한 JPEG옵션으로 단지 점차적으로 뚜렷해질 때 모자이크 영상이 점차 뚜렷해지는 방식으로 이미지를 보여준다. 인터래이스보다 좀더 앞선 기능이라고 말할 수 있다.
방법은 눈치 빠른 초보라면 이미 알 것이다. 앞에서 했던 대로 파일형식(T)에서 JPG-JPEG-JIFF Compliant항목을 선택해 준다. 그리고 Sub type 옵션에서 Progressive Encoding항목을 선택한다.
☞ 숙제 : 강좌가 일단 제작부분에 있어서는 끝나가네요. Gif-Construction set만 끝나면 제작부분은 일단락 짖겠습니다. 이젠 어떤 홈페이지가 좋고 나쁘고, 왜 좋고, 왜 나쁜지 가릴 줄 아는 판단력을 길러야 할 때입니다.
숙제는 다름 아닌 두 홈페이지를 방문해보시고, 장&단점을 찾아서 멜로 보내시면 제가 일일히 답변해드리겠습니다. 어떤 기준을 가지고 평가하는지는 자유입니다. 단점을 많이 찾으면 그만큼 실력이 뛰어난 것입니다. 혹 제가 만들어서 단점을 말 안하신다든지, 또는 실망하시지 마시길.. 사실 제 홈페이지는 3일만에 뚝딱 만든 연습용이고 아버지 회사 홈페이지 역시 html처음 배울 때 경험 삼아 만든 것입니다. (그런데 아직도 그 실력입니다. --;) 암튼 숙제 꼭해서 멜보내주세요.
V. 애니메이션 만들기
[GIF-Construction set 32]
지금까지 페인트 샵 프로를 이용해 웹에 이미지를 어떻게 알맞게 바꾸는지 배웠다. 나모에 어느정도 익숙하고 이미지 속성을 바꾸는 것에 익숙한 초보자는 이미 초보가 아니라고 해도 과언은 아니다. 간단한 홈페이지는 얼마든지 만들 수 있다. 때문에 정말 빨리 홈페이지를 만들고 싶은 분들은 이 장을 넘어가서 파일 업로드 편을 보는 것이 더 좋을 것 같다.
하지만 우리의 목표는 초보 탈피가 아니므로(?) 더 세련된 시각 효과를 공부해보자. 이 장은 GIF이미지를 이용해서 만드는 애니메이션이다. 요즘 만들어지는 홈페이지에 애니메이션이 없는 곳이 없을 정도이다. 애니메이션은 선택과목이 아닌 필수과목인 셈이다.
1) 애니메이션 GIF 원리
GIF파일은 하나의 그래픽 파일에 여러 개의 이미지를 담을 수 있는 기능이 있다. 이 기능을 이용해 한 개의 GIF 파일에 애니메이션을 이루는 여러 개의 이미지를 담고 애니메이션에 필요한 부가적인 정보를 담으면 하나의 멋진 애니메이션이 만들어 지는 것이다. 파일명은 XXX.GIF이고 페인트 샵에서는 애니메이션을 볼 수 없다. 애니메이션을 보려면 ACDSee를 이용하던지 브라우저를 이용한다.
2) 애니메이션을 HTML문서에 넣기
너무나 쉬워서 한번 들으면 잊지 않을 것으로 믿는다. 한 마디로 보통 이미지 삽입과 동일하다. 나모에서 그림삽입을 이용하면 쉽게 삽입되며 태그로 <img>를 이용해도 된다.
3) 애니메이션 만드는 프로그램들
여러 프로그램이 있으나 Ulead GIF Animator, Animagic, GIF-Construction이 대표적이다. 그 중에서도 가장 유명한 GIF-Construction을 이용해서 애니메이션을 이용하겠다. 이 프로그램은 유니텔 홈페이지 제작 동아리 웹플러스(w3p)의 자료실이나 공개자료실에 있으며, 인터넷 http://www,mindworkshop.com/ 에 가보면 구할 수 있다.
4) GIF Construction Set 특징
① 텔레타입 배너 (Teletype Banner), 텍스처 배너(Texture Banner)
② 트렌지션 (Transition) : 한 이미지를 다양한 옵션으로 애니메이션으로 만들어주는 기능이다. 가장 좋은 기능이라고 말할 수 있다.
③ AVI 파일과 GIF파일간 쌍방 변환 가능
④ 회전 애니메이션기능
⑤ 컬러와 밸런스 조정
위의 특징 중에서 여러분들이 앞으로 쉽고 편하게 사용할 기능을 트렌지션 기능으로 하나의 이미지를 다양하게 애니메이션으로 만들어준다. 즉 텍스트를 삽입한 이미지를 위의 트렌지션 기능을 이용하여 모래알처럼 점점 뚜렷해지는 이미지효과를 볼 수도 있고, 아래에서 올라오는 글처럼 만들 수도 있는 것이다.
5) 만들어진 애니메이션들
자료실에서 쉽게 구할 수 있을 것이다. 하지만 너무 식상한(?) 것들이 많다. 때문에 좀더 이쁘고 개성이 강한(남들이 모르는) 애니메이션을 원한다면 만드는 방법만큼 효과적인 것이 인터넷에서 직접 쇼핑하는 것이다.
♥ 홈페이지 만든다는 것이 여간 인내력 가지고는 안돼는 것 같죠? ^^; 하지만 가속이 붙으면 중반 이후에는 좀 빨리 진척되는 것 같기도 하고... 어찌 되었든 간에, 구상이 가장 중요하죠. 제가 팁하나 가르쳐 드리죠. 어떻게 만들지 감이 안 잡히면 자신과 유사한 카테고리를 야후 등의 서치엔진에서 찾아보세요. 그리고 방문해서 어떤 디자인인지 참고하면 방향 설정이 더욱 쉽습니다. -광모 생각- ♥
6) GIF-Construction 사용 - 애니메이션 위저드(Animation Wizard)
위저드란 말은 마법사란 뜻으로 우리가 윈95를 쓰면서 보편화 된 말 중하나이다. 편리하게 애니메이션을 만들어주는 방법이다. 아직 생소하리라 생각하고 차근차근 설명하겠다.
① GIF-Construction을 실행시킨 후 File/Animation Wizard를 선택한다. 첫 화면이 나오면 next를 클릭 한다.
② 두 번째 화면에서 웹에서 쓸 것인지 아니면 다른 용도인지 물어본다. 여기서 웹에서 쓴다(YES, For use with a Web page)를 선택한다. 그리고 next누른다.
③ 세 번째 화면에서는 계속해서 반복되는 애니메이션인지 아니면 한번 실행되는 애니메이션인지 선택하라고 나온다. 반복을 원하면 Loop indefinitely를 선택하고 한번 실행되는 애니메이션이면 Animate once and stop을 선택하고 next를 누른다.
④ 네 번째 화면이 나오면 GIF 파일의 프레임에 사용될 이미지들이 어떤 형식의 팔레트를 가지고 있는지 결정한다. 선택 후 Next를 누른다. 사실 이 옵션의 큰 차이는 없는 것 같다. 때문에 디폴트(Default)로 놔두는 것도 괜찮다. 하지만 좀 더 알고 싶어하시는 초보자 분들을 위해 설명하면 다음과 같다. (거의 영어 풀이를 하면 된다.)
▶ Matched to Super palette : Superpalette는 가장 자주 사용되는 컬러들을 모아놓은 팔레트를 말한다. 이 옵션은 Superpalette를 애니메이션의 디폴트 팔레트로 사용한다.
▶ Matched to first palette : 애니메이션의 첫 번째 프레임 이미지에서 사용된 팔레트를 이용한다.
▶ Photorelastic : 말에서 느끼듯이 사진 같은 이미지, 즉 스캔 이미지일 경우 쓰이는 옵션이다.
▶ Drawn : 이미지가 페인팅 프로그램으로 그렸을 경우에 쓴다.
▶ Drawn in sixteen colours : 16칼라 이하의 이미지를 그렸을 경우에 쓴다.
⑤ 다섯 번째 페이지로 넘어가면 각 프레임 사이에 지연 시간을 지정한다. 대화 상자에서 100은 1초를 의미하므로 만약 1초 간격을 두고 싶다면 100을 0.5초 간격을 두고 싶다면 50을 설정하면 된다. 설정 후 next!!!
⑥ 여섯 번째 화면에선 이미지를 선택하는 것이다. Select를 누르고 Open을 누른 다음에 애니메이션을 만들 이미지를 차례로 선택한다. 선택 후 next 버튼을 누른다. 예를 들어서 고양이 이미지와 쥐 이미지를 번갈아 가면서 나오는 애니메이션을 원한다면 고양이 이미지와 쥐 이미지를 모두 선택한다.
⑦ 일곱 번째 화면이 나오면 Done을 누른다.
⑧ 메인 메뉴의 File에서 save as를 선택해서 저장한다.
일단 애니메이션이 완성되었다. 만약 애니메이션의 세부 옵션을 변경하고자 하면 메인 화면의 툴바와 메뉴를 이용하면 된다. 완성된 애니메이션을 보고 싶으면 메인 메뉴 좌측 위에 있는 View를 이용한다.
다음은 하나의 이미지를 이용하여 애니메이션을 만드는 트렌지션을 공부하겠다.
7) GIF-construction Set 사용하기 - 트렌지션 기능
트렌지션 기능을 이용하면 한 이미지로 여러 애니메이션으로 만들 수 있는 강력한 기능이다. 때문에 많이 사용하고 쉽게 사용하고 또 필수적인 기능이라고 말할 수 있다.
① 메인 메뉴의 Edit를 선택한 후 Transition을 선택한다.
② 여러 옵션 메뉴가 나올 것이다. 원하는 옵션을 선택한 후 Select를 누른다. 각 옵션의 내용을 소개하면 다음과 같다.
▶ Appear, Disappear : 무조건 선택한다. 이미지가 나타나는 효과를 사용할 것인가 묻는 당연한 옵션이다.
▶ Loop : 말 그대로 계속해서 반복할 것인가 하는 옵션이다.
▶ Transparent background : 거의 필수이다. 애니메이션 배경이 투명한 것이 대부분이므로 배경을 웹 문서의 배경과 달리 지정하고 싶다면 선택하지 않지만 만약 웹문서의 배경과 동일하길 원한다면 투명을 선택하는 것이 바람직하겠다.
▶ Remap to current default palette : 애니메이션이 팔레트를 setup상자에서 선택한 디폴트 팔레트로 맞추어 변형한다는 옵션이다. 이미지가 디더링된 적이 있으면 이미지의 질이 조금 떨어질 수도 있다. 이미지의 질을 위해서 선택하지 않는 것이 좋겠다.
▶ Pause after cycle : 애니메이션이 한 사이클을 반복 후 약간의 정지시간을 가질 것인지 정하는 것으로 만약 연속되는 동작이면 선택하지 않아야겠으나 Transition으로 만드는 애니메이션은 필수적이라고 생각된다. 개인적으로 트렌지션 기능으로 텍스트 이미지를 애니메이션으로 많이 만들어 쓰는데 글이 올라갔다가 잠시 쉬지 않는다면 읽기도 전에 눈앞에서 사라지는 꼴이 된다.
▶ Compress Palette : 애니메이션에 사용된 컬러의 수를 검사해서 가장 작은 팔레트 크기를 만들어 애니메이션 파일의 크기를 줄여준다. 때문에 필수 적이라고 할 수 있다.
▶ Cells, Delay, Pause, Background : cells는 전체 애니메이션의 프레임 수를 결정한다. 프레임이 많으면 움직임은 자연스럽지만 애니메이션을 구성하는 Gif 이미지 수는 늘어나는 셈이므로 당연히 파일 크기는 커진다. Delay는 앞에서 말한 pause와 같은 개념으로 트렌지션 효과가 끝난 후에 지연 시간을 지정한다. 백그라운드는 투명을 선택했으므로 별로 신경 쓰지 않아도 좋다.
③ Select를 누르고 나면 open대화 상자가 나온다. 원하는 이미지의 위치를 찾아 지정해준다. 그리고 열기를 누른다.
④ 트렌지션 리스트 버튼에서 원하는 옵션을 누른다. 각각의 옵션은 설명하는 것보다 직접 선택해보고 Test버튼을 눌러 보는 것이 더욱 이해가 빠를 것이다. 예를 들어 Wipe in from Bottom은 아래부터 이미지가 올라왔다 다시 내려가는 것이다. 그 외에 raster는 뛰는 효과 등등 많은 옵션이 있으니 직접 해보고 선택한다.
⑤ 원하는 애니메이션이 완성되었으면 OK버튼을 누른다.
⑥ 메인 메뉴의 File에서 save as를 선택해서 저장한다.
♣ Tip : 애니메이션은 완성되었으나 움직임이 부자연스럽다? 전에 이런 경험이 있었다. 텍스트 이미지를 트렌지션 기능을 이용해서 아래에서 위로 올라가는 Wipe in from bottom을 선택했는데 delay옵션의 적용이 글이 올라갔을 때와 내려가 사라졌을 때 시간이 같아 맘에 들지 않았었다. 이럴 때는 수동적으로 바꾸어 주는 것이 효과적이다. 트렌지션에서 완성된 이미지를 메인 메뉴에서 각각 이미지를 볼 수가 있을 것이다. (bar를 내리면서 본다.) 이때 글자가 사라졌을 때 빠르게 나오도록 하려면 첫 Control에 있는 delay속도를 메인 바에 있는 Edit를 눌러 속도를 조절해준다. (메인 메뉴의 Edit가 아니다.!!!)
8) 그 외의 기능
① Banner : 배너를 만들어주는 기능으로 미리 만들어 놓은 이미지는 필요 없다. 선택 후 원하는 글을 치고 옵션을 선택하면 배너의 글이 지정한 속도에 맞추어 움직인다.
② LED sign : 이는 껌뻑거리는 전등으로 만든 간판을 의미하는 것으로 이것 역시 배너와 마찬가지로 이미지는 필요 없다. 옵션 선택 후 원하는 글을 넣어준다.
③ Spin : 영어 의미 그대로 회전하는 이미지를 만들어준다. 기존의 이미지를 선택 후 Test해보고 마음에 들면 OK를 선택한다.
9) 슈퍼 컴프레스 (Super Compress)
GIF 애니메이션을 만들어보았다. 생각보다 쉬웠을 것으로 믿는다. 쉽지 않았으면 내 책임이니 자신의 머리를 원망하지 마시길... 그런데 애니메이션은 커다란 단점이 있으니 바로 파일의 크기이다. 이건 파일 하나가 html문서 하나만큼이나 크다. 때문에 전송시간이 길어지게 된다. 다시 말해 보는 사람이 짜증날 것이란 이야기다.
다행히 GIF-construction에는 압축을 지원한다. 이 기능은 프레임에서 반복되는 불필요한 부분을 생략해주는 것으로 파일의 크기를 줄이는데 좋다. 하지만 일단 이 기능으로 크기를 줄이고 나면 편집이 불편하다는 것을 유념하기 바란다. 항상 백업정신을 가지길..
① 원하는 애니메이션 파일을 읽어들인다. (앞에서 File/을 이용한다고 설명했다.)
② 메인 메뉴의 File로 들어가면 Supercompress가 보일 것이다. 클릭 한다.
③ 대화상자에서 옵션을 선택한다. Palette Compression은 이미지의 팔레트 정보를 수정하여 사용되지 않는 컬러에 대한 정보를 삭제한다. Prune Overlapping frames는 프레임을 이루는 이미지중 중복되는 것을 삭제한다. 그 외 Strip all... 두개의 옵션은 불필요한 텍스트 블록을 삭제하는 옵션이라고 한다. 이중에서 가장 압축에 기여하는 옵션은 불필요한 옵션을 삭제해주는 Prune...이다.
④ Start를 눌러 압축을 시작한다. 그리고 압축이 끝나면 Save as/를 이용해서 저장한다.
이상으로 GIF-Construction 강좌를 마친다. 강좌의 순서가 중요도와 또 난이도 그리고 실제 홈페이지 제작 순서와 맞추려다 보니 어떻게 보면 두서가 없을 수 도 있을 것이다. 하지만 전체를 놓고 이해하려 노력한다면 어느새 늘은 자신의 실력을 확인할 수도(?) 있을 것이라 믿는다.
나모를 이용한 html문서 작성을 어느 정도 할 줄 알고 이미지를 응용하여 사용할 줄 안다고 생각하고 다음 강좌는 홈페이지 제작의 마무리인 파일 업로드에 대하여 강의하겠다.
VI. 홈페이지에 카운터와 방명록 달자
[카운터, 방명록 달기]
매우 중요한 것을 지나칠 뻔했다. 카운터는 홈페이지에 얼마나 많은 방문객이 오는지 알려주는 매우 중요한 기능을 한다. 또 방명록은 온 손님의 감상(?)과 격려 등을 들을 수 있는 대화 창이기 때문에 없어서는 안될 홈페이지의 중요 요소이다.
1) 어떻게 카운터와 방명록을 만들까?
아쉽게도 나 역시 카운터와 방명록을 만드는 재주는 없다. T_T 하지만 만들어 놓은 것을 쓰는 것은 별 것 아니다. 가장 많이 쓰는 것 중에 하나로 우키의 게시판과 방명록이 있다. 앞에서 말했듯이 키텔의 계정을 이용하면 CGI를 이용할 수 있다. 이 게시판, 방명록, 카운터들은 CGI라는 프로그램을 이용한 것이다.
그렇다면 키텔에 가입해야만 하는가? 그 것은 아니다. 절대로 아니다. 키텔에서 우키 게시판과 방명록을 사용해 본적이 있으나 키텔이 느린 관계로 그다지 효과를 보지 못했다. 또 설치가 초보에겐 쉽지 않을 수 있다. (서버의 Unix 버전 탓인지 잘은 모르겠으나 cgi쓰기가 키텔에서는 함수를 좀 변경해야 한다.)
그러므로 가장 추천하고 싶은 것은 무료로 카운터와 방명록을 제공하는 사이트를 찾아가서 신청하는 것이다. 가장 많이 쓰는 카운터는 linko의 카운터다. 방명록과 게시판도 제공한다. 그 외 korcgi(?)란 사이트도 방명록과 게시판을 제공한다. 정확한 위치를 찾으려면 서치엔진을 이용하길 바란다. 아니면 웹뿔 추천 사이트에 위치가 있으니 확인해보시라~.
2) 업체에서 제공하는 카운터와 방명록 이용하기
http://www.linko.co.kr/에 가면 카운터와 방명록 신청 받는 곳이 있다. 신청하면 메일로 특정 Tag를 입력하라고 나온다. 카운터는 홈페이지 첫 장 아래에 삽입하면 된다. 나모에서 html버튼을 누르면 Tag가 나오므로 이를 이용해서 삽입하거나 메모장으로 불러서 넣어도 좋다. 일단 아무 데나 넣고 나서 나모로 부르면 작은 직사각형에 물음표모양으로 표시되므로 이 사각형을 나모에서 원하는 위치로 옮기는 것도 쉽게 위치를 정하는 요령이다.
카운터는 해결되었고 방명록은 더욱 쉽다. 앞에서 설명한 하이퍼링크를 아직 기억하고 있는지? 기억하길 바란다. 업체에서 온 이 메일에 하이퍼링크를 걸어줄 주소가 있을 것이다. 우리 두 번째 홈페이지는 프레임 나누는 html문서였다. 그중 좌측은 메뉴판이고 우측은 메뉴를 선택 시 해당 페이지를 보여주는 창이다. 우선 좌측에 방명록이란 버튼에 링크를 이메일에 적혀있는 위치로 링크 해준다. 이때 여러분이 선택할 사항은 이 링크 된 방명록이 우측 프레임(_good)에 뜨게 할 것인지 아니면 새로운 창(_parent)에 뜨게 할 것인지, 아니면 지금 창에 프레임을 없애고 띄울 것인지(_top)를 잘 생각해서 결정한다. 게시판도 마찬가지이다.
♣ Tip : 우측 창에 띄우면 업체에서 제공하는 방명록이나 게시판이 커서 스크롤 바가 생기고 보기가 힘들 수 있다. 때문에 새로운 창으로 방명록을 불러오는 것이 가장 현명하다고 할 수 있겠다.
VII. 무료 계정을 얻자
어느덧 홈페이지 작성에 익숙해졌다. 이미지도 직접 제작 수정할 실력이 된다. 또한 애니메이션도 나름대로 만들 줄 알게 되었다. 고급 기술들은 아니라고 해도 남들 하는 만큼은 할 줄 아는 실력을 가지게 된 것이다.
그런데 여러분은 계정이 무엇인지 아는지? 또 계정을 모른다고 해도 가지고는 있는지? 아마 진정한 왕초보라면 계정은 없을 것이다. 그렇다고 걱정할 것은 없다. 만들면 되니까.
무료계정 자료를 문서 자료실에 올려놓았다. 그 곳에 보면 10정도의 추천 계정이 있다. 하지만 그 곳에 없는 계정을 하나 소개하면서 그 계정을 대상으로 파일 업로드와 계정 다루기를 소개하겠다.
[계정 받기]
인터넷에 접속한다. 물론 Unitel을 사용하고 있는 여러분들에게는 별 문제가 없이 인터넷에 접속할 줄 믿는다. 그러나 유니텔을 사용하면서도 인터넷을 쓸 줄 몰라 애태우는 왕초보들이 go internet하면 있다. 여러분이 나에게 도움을 받았다고 생각되면 가서 한마디씩 거들어주었으면 좋겠다. 그 왕초보들이 여러분께 진심으로 감사할 것이다. 왜냐면 똑같은 질문을 여러 번 하는 초보들에게 일일이 답하는 고수들이 드물기 때문에 우리의 도움이 더 필요한 것 같다. 너무 착하다고?? 사실 알고 보면 그런 인간은 아닌데.. ^^;
각설하고 http://www.easyspace.com/으로 가본다. 이곳은 영국의 웹호스팅 업체이다. 웹호스팅이 무엇인지 모른다고 걱정할 필요 없다. 어찌 되었든 이 업체는 자신의 회사를 홍보하기 위해 무료로 25M 계정을 나누어주고 있다. 단 회사의 배너를 각 페이지에 삽입해야만 한다. 삽입하지 않으면 작은 창으로 홍보물이 뜨게 된다. 배너의 크기는 눈짐작으로 100X500정도로 좀 큰 편. 하지만 첫 경험으로 만드는 홈페이지인데다가 일단 25M계정을 가지고 나중에 다른 계정을 만들더라고 25M을 유용하게 쓸 수도 있으므로 이곳에 우리의 처녀작을 띄워 보기로 하자.
접속후 좌측 아래에 보면 무료 25M 계정(Free 25M shell)이란 버튼이 있을 것이다. 누르고 온라인 상에서 서류를 작성한다. 대충 적어서 입력시킨다. 그리고 ID를 결정하면 그 쪽 서버에서 여러분의 이메일로 메일을 보내 줄 것이다. 그 번호를 입력하면 계정이 만들어진다. 그런데 여러분이 서류를 작성한 후 그쪽에서 메일이 오는 시간은 수십 분이 걸리므로 꼭 켜놓고 기다릴 필요는 없다. 다음달 그 페이지를 가봐도 되니 해당 페이지를 책깔피에 꽂아 놓든지 URL을 적어 놓든지 하시길.. 계정 위치는 http://members.easyspace.com/ID 이다. 메일은 한글이 깨지므로 나는 쓰지 않는다.
만약 이 업체가 마음에 들지 않는다면 다른 무료계정을 이용해도 좋다. http://www.netian.com/에 가보면 한글과 컴퓨터에서 제공하는 무료 계정이 있다. 용량은 5M지만 첫 페이지에 광고만 띄우면 양질(?)서비스를 제공하므로 추천할 만 하다. 그 곳에서 추천인은 yangkm이라고 써주길 바라며 ^^; (강좌 때문에 제 홈페이지는 새로 만들지 못했습니다. T_T)
또다른 계정 서비스를 추천하라고 하면 키텔의 계정도 추천할 만 하다. 사실 인터넷에서 로딩 속도로 평가하면 넷티앙을 중상의 속도이고 안정적이라고 평할 수 있고, easyspace의 계정은 속도 면에서는 상급의 점수를 주고 싶으나 가끔 아무리 불러도 대답 없는 그대가 될 때가 있어 좀 불안하다. 키텔은 속도도 느리고 안정성 역시 최악이라고 평하고 싶으나 장점이 있다. 키텔의 장점은 역시 cgi-bin 디렉토리를 이용해서 자신만의 프로그램을 돌릴 수 있다는 것이다. 그리고 20M의 크기로 충분한 계정 용량을 자랑한다. 키텔은 파일 업로드를 전화 접속방법으로 하므로 대부분의 무료 계정과는 좀 다르다. 때문에 키텔에서 업로드 하는 것은 유닉스 명령어를 참고하시면 되겠다. (이는 초보강좌에서 제함)
[웹 호스팅 VS 웹 하우징]
웹 호스팅이란 무엇인가? 아마 웹 호스팅 광고 메일에서 수도 없이 보았을 것이다. 웹 호스팅은 Unix 서버를 이용해서 당신의 계정 도메인을 XXXX.com또는 XXXX.co.kr등으로 등록하는 것이다. 물론 도메인 등록비는 개인 부담이고 업체는 서버에 세팅해주고 유지비를 받는다.
☞ co.kr은 무료인 반면, com, net등은 유료다. 웹 호스팅 가격은 대부분 월 3~4만 원대이고 세팅 비를 처음 한 달은 대부분 받는다. 안정성과 속도를 보는 것이 가장 중요하겠다. 개인의 경우에는 별 필요가 없으나 기업이라면 회사 신용을 위해서 웹 호스팅을 많이 사용한다.
웹 하우징이란 http://계정공급업체/ID 식으로 계정을 받는 것이다. 한 서버에서 일정 용량의 디렉토리(ID)를 받는 것이라 하겠다.
♥ IMF란 생각하기도 싫은 재난(?)을 만나 여러분이나 저나 누구나 할 것 없이 힘없는 98년 여름입니다. 예년보다 피서객도 줄고....경제가 얼어붙는 것 같습니다. 이럴 때일수록 마음만은 따뜻했으면 좋겠습니다. 얼마 전에 책한 권을 읽었는데 추천하고 싶습니다. 제목은 좀 그렇지만, '한국이 미국에게 당할 수밖에 없는 이유' -오연호 지음- 이구요, 해냄 출판사에서 출판하였습니다. 객관적인 입장에서 한국을 다시 볼 수 있는 기회일 겁니다. ♥
VIII. 키텔을 이용한 무료 인터넷 접속
▶ 내용이 변경되었으므로 이전의 갈무리 하신 분도 다시 갈무리하셔야 합니다. 키텔에 접속방법이 변경되었습니다. 꼭 변경후 접속하시길.... 그리고 이전에 접속 안되신 분 죄송합니다.
▶ 이 설명을 듣기 전에 키텔에 가입하셔야 키텔 인터넷을 이용할 수 있습니다. 하루정도 여유를 두시고 미리 가입신청을 하십시오. 제 키텔 아이디는 jirreh입니다.(아버지 아이디지만, 제가 씁니다.)
[홈페이지 업로드 준비]
이젠 정말 만발의 준비가 다 되었다. 이젠 자축할 일만 남았다. (그 동안 난해한(?) 강좌를 공부하느라 여러분 수고가 많았다고 격려하고 싶습니다.^^;)
그런데 미안한 말이지만 파일 업로드가 만만치 않은 작업이다. 적어도 내 경우엔 그랬다. 초보에게 업로드가 문제가 되는 원인을 나름대로 분석해 보았다.
① ftp 업로드 방법을 모른다.
② ftp 프로그램을 사용할 줄 모른다.
③ 대소문자를 구별하지 않아서 이미지가 뜨지 않는다.
④ 대소문자를 구별하지 않아서 분명히 있는 페이지인데 없다고 나온다.
⑤ 첫 페이지를 index.html로 하지 않아 아예 처음부터 나오지 않는다.
⑥ 컴에서 브라우저로 볼 때는 이미지가 보이는데 웹상에서는 보이지 않는다. 이는 이미지저장 경로가 하드드라이브로 지정되어 있기 때문에 나오는 현상이다.
위의 사항을 유념하고 하나하나 풀어 나가보자. 첫 페이지는 index.htm도 안되며 반드시 index.html이어야 한다. (때로는 default.html 각 업체마다 다르다.) 대소문자를 구별하고 이미지 경로 등의 문제를 해결하기 위해 자신의 컴퓨터에 계정처럼 ID로 디렉토리를 만들고 그 안에서 image와 pic 그리고 자료가 있다면 down등의 디렉토리를 만들라고 했던 것이다. 지금 와서 후회한다면 고생좀 해야 할 것이다.
1) Kitel 이용해서 인터넷 이용하기
ftp 프로그램을 이용하여 파일들을 업로드하려면 Unitel을 이용한 인터넷으로는 할 수 없다. (이는 매우 불행한 일이다. T_T) 때문에 여러분은 kitel이나 다른 ISP(인터넷 제공 업체)를 이용해야 한다. kitel을 추천하는데 이는 무료이기 때문이기도 하고 양적으로는 다양한 서비스를 제공하기 때문이다. 하지만 다소 속도가 느린 것이 불만이다. 때문에 서울 접속번호 02-651-6200(33.6kb)이나 강릉 0391-652-8800(28.8Kbps)를 이용하라고 권하고 싶다.
키텔로 인터넷 접속하려면 윈95의 전화 접속 네트워킹을 이용해야 한다. 우선 네트워크 환경을 설정해주어야 한다. 이 설정으로 인해 유니텔로 이용하는 인터넷 서비스에 아무 영향이 없으니 마음놓고 따라 하기 바란다. 아마도 윈도우 95시디가 필요할 것 같으니 준비하시고 따라하길 바란다.
우선 시작->설정->제어판->네트워크를 선택한다. Microsoft 네트워크 클라이언트, 전화접속 어댑터, IPX/SPX 호환 프로토콜, NetBEUI가 등록되어 있을 것이다. 만약 그렇지 않다면 "추가"를 누르고 클라이언트, 어댑터, 프로토콜, 서비스 항목을 입력해준다. 우선 클라이언트를 선택하고 추가를 선택한다. 좌측에 [제조업체]에서 Microsoft를 선택한다. 그리고 우측에서 'Microsoft 네트워크 클라이언트'를 선택하고 "확인"을 누른다.
다시 "추가"를 선택한다. 프로토콜을 선택하고 "추가"를 눌러준다. 중앙 좌측에 [제조업체]에서 "Microsoft"를 선택하고 우측에서 TCP/IP를 선택하고 "확인"을 누른다. 네트워크 구성요소에 추가된다.
[설치된 네트워크 구성요소]에서 'TCP/IP'를 선택한다. 중앙에서 삭제와 등록정보 버튼이 활성화된다. 이때 "등록정보"를 선택하고 [TCP/IP 등록정보] 창이 나타나는데, 그 곳에서 "바인딩, 고급, DNS구성, 게이트웨이, WINS 구성, IP주소'를 각각 선택할 수 있다.
"바인딩" -> "Microsoft 네트워크 클라이언트"를 골라준다.
"고급" -> 그냥 넘어간다.
"DNS 구성" -> "DNS 사용"을 선택하고 다음과 같이 항목들을 입력한다.
호스트 : ns
도메인 : ns.kitel.co.kr
찾을 DNS 서버 주소 : 210.102.35.1
찾을 도메인 주소 : kitel.co.kr 을 입력후 "추가"누른다. (안 써도 무방)
모든 과정을 마치면 "확인"을 선택한다. 이때 윈도우 95시디가 필요할 수 있다. 다시 "확인"을 누르면 재부팅을 한다. 재부팅을 해야 네트워크 설정이 다시 적용되므로 재부팅 시켜야 한다.
[전화접속 네트워킹]
재부팅 했으면 전화 접속 네트워킹을 이용해서 키텔접속을 만든다. 이는 유니텔에서 했던 것과 마찬가지다. (만약 유니텔을 전화접속 네트워킹을 이용하지 못했다면 이번 기회에 배워 써보면 더 안정적인 접속이 될 것이다.)
① 내 컴퓨터 안에 있는 전화 접속 네트워킹을 더블 클릭 한다. 여기서 "Make New Connection"을 더블 클릭 한다.
② 그러면 접속할 ISP의 이름을 넣으라고 나온다. 아무 이름이나 넣어도 상관없으나 나중에 알아보기 쉬우려면 키텔이라고 적는다. "다음"누른다.
③ 전화번호를 입력한다. 아까 이야기했듯이 026516200을 적는다. 지역번호는 입력하지 말고 전화번호에 지역번호를 함께 입력해놓는다.(편하기 때문) "다음" 누른다.
④ 마침을 누른다.
⑤ 새로 생긴 접속 아이콘을 오른쪽 버튼을 눌러 등록정보를 확인한다.
⑥ 첫 화면에서 Use area code...에서 체크 표를 없앤다.
⑦ "server type"에서 'Enable Compresstion...' 그리고 아래에 'TCP/IP'만 체크한다. 나머지는 체크를 없앤다.
⑧ 다시 "General (일반)"으로 가서 Connecting use...란에 있는 모뎀 'Configure..'를 누른다.
⑨ 첫 화면에서 최대속도를 자신의 모뎀속도보다 한 단계 위로 정해준다.
⑩ '옵션'에서 연결제어란에 있는 '전화 건 후 터미널 창 표시'에만 체크해준다. "확인" 을 눌러 완전히 나온다.
이로써 또 하나의 전화 접속이 완성된 것이다.
♣ Tip : 기존의 유니텔 전화접속은? 변경할 필요 없다. (이것도 tip인가?)
[키텔로 인터넷여행]
이제 준비는 끝났다. 키텔 전화 접속 아이콘을 더블클릭한다. 대화 창에서 연결을 누르면 전화가 걸릴 것이다. 전화 접속 후 대화 창이 열린다. (이걸 옵션에서 선택했었는데 기억나시는지..) 여기서 VT모드를 사용해본 사람은 알 것이다. 약간 글자가 깨지긴 했지만, 예전에 이야기라든지 새롬을 이용해 접속한 것과 같은 것이다.
서울로 접속했다면 키텔 접속(아마 1번일 것임)을 선택하고 01411로 접속하신 분은 kitel이라고 친다. (kitels는 키텔 주주들이 이용하는 것이고, skitel는 사용시간만큼 돈이 약간 붙는데 속도는 빠르다고 한다. 정 느리면 업로드 때만 skitel을 이용해도 좋다. --; 돈은 얼마가 나올지 모른다.)
키텔에 아이디와 비밀번호를 입력하고 엔터를 누르면 초기메뉴가 나올 것이다. 여기서 'go internet'을 치면 키텔 인터넷에 어쩌고저쩌고 나온다. 다시 엔터. 인터넷 메뉴에서 21번에 인터넷 PPP접속이다. 21번을 누르면 영어로 글이 나온다. 마지막까지 글이 다 나오면 (아마 sleep.... 이런 글이다.) 창 아래에 있는 계속 버튼을 누른다.
그러면 전화접속 창이 없어지고 verif... user name...등의 말이 보이다가 log on... 나오면서 전화접속 1.2를 사용하는 사람은 아이콘이 트레이로 들어간다. (윈도 아래 오른쪽 시계 있는 옆을 트레이라고 하는 것 맞나?)
그러면 자신의 브라우저를 작동시킨다. 프록시를 설정해주어야 한다. 그런데, 키텔은 인터넷 직접 접속을 지원하므로 유니텔 프록시를 굳이 지울 필요 없이 옵션만 바꾸어 주면 된다.
♣ Tip : 키텔의 프록시는 참고적으로 kitel1.kitel.co.kr (포트: 8080)이다.
설정 후 브라우저를 작동시켜보자. 만약 안되면 설정 후 브라우저를 종료시킨 다음 다시 작동시킨다. (그래야 설정이 인식되기도 한다. 브라우저마다 좀 다름)
이제 인터넷을 키텔로 사용할 수 있게 되었다. 키텔의 인터넷은 유니텔과는 달리 제한이 없다. 즉, 국가가 막아놓은 사이트란 것이 없다. 북한의 사이트든지....
어찌 되었든 간에, 다음에는 Cute-FTP를 이용해서 업로드를 배우도록 하겠다. 참, 전화를 끊으면 자동으로 접속이 끊기는 것이다. 전화 어떻게 끊냐고 묻는 초보님이 계시다고 믿고 설명하면.
트레이 옆에 전화접속 아이콘에 마우스를 가져가서 오른쪽 버튼을 누르면 disconnecting이란 말이 나온다. 이걸 누르면 전화가 끊어지게 되있다. (모뎀에서 끊기는 소리가 딱하고 날 것이다.)
VIII. 파일 업로드
[파일 업로드]
파일 업로드는 어떻게 할 것인가? 크게 두 가지 방법이 있다. FTP를 이용한 업로드와 전화 접속을 지원하는 계정에서 업로드이다. 아마 자신의 계정을 신청하여 유료로 사용하고 있다면 ISP에 전화접속해서 각 파일을 업로드할 수 있을 것이다.
하지만 이 강좌는 말 그대로 초보강좌. 때문에 대부분 계정이 없고 또 무료계정을 이용한다는 가정 하에 ftp업로드만 설명하도록 하겠다. 왜? 광모마음~♥
바로 전 강좌에 키텔 접속에 대해 설명하였다. 만약 그 부분을 보지 않은 분들 중 ftp를 이용하여 파일 업로드를 하고 싶다면 꼭 보시길 바란다. 만약 유니텔에 계정이 있다면 보지 않아도 상관없다.
이 부분을 공부하기 전에 꼭 필요한 것은 Cute-FTP다. 자료실에 있으니 다운해서 깔아 놓는다. 이는 FTP 프로그램이다. 업로드와 계정 관리를 쉽게 해준다.
1) Cute-FTP
강좌가 5~6일 정도 쉬었는데 그 동안 키텔로 인터넷을 해보신 분 계실는지 궁금하다. 아마도 없을 것 같다. --;
키텔에 접속한다. (모르는 분은 초보강좌중 키텔 부분을 참고하시라.) 전화접속 네트워킹이 1.2버전이라면 아이콘이 트레이로 떨어지면서 접속이 된다. 이젠 전화접속은 되었다. 여기서 브라우저를 작동시키면 인터넷을 여행할 수 있다. (물론 프록시 설정을 해줘야한다. 아니면 인터넷 직접연결로 설정하든지.)
Cute-FTP를 깔아놓았을 것으로 믿는다. 작동시키면 귀여운 날라가는 파일이 보인다. 후후.. 이게 바로 큐트 에프티피이다.
♣ Tip : FTP가 뭔지 아시나요?
Ftp는 파일전송 프로토콜의 약자로 더 이상은 나도 잘 모른다. 하지만 이것만 알면 되는 것 같다. ^^ 어찌 되었든 웹 이외에도 여러 인터넷 서비스가 있다는 사실을 알고 있어야한다.
우선 인터페이스를 확인해보자. 첫 화면이 저절로 지나가고 나면 나오는 것이 사이트 매니저이다. 여기서 환경설정을 해주어야 한다.
처음 FTP메뉴에 보면 Setting이 있다. 이곳에 Option으로 들어가 보자. 이곳에서 특별히 정해주어야 하는 것은 없다. 즉 꼭 환경설정을 해주어야 작동하는 것은 아니다. 하지만, 우리가 유니윈 다운로드 경로를 지정해주듯이 다운로드 경로와 접속시 소리, 폰트, 색깔 등을 설정할 수 있다.
원하는 옵션을 설정했다면 다시 싸이트메니저로 돌아온다. 여기서 오른쪽 중간에 있는 [Add Site]를 누른다. General에 보면 Ftp주소를 적고 (Host Address) 자신의 ID와 비번을 적게 되었다. 호스트 타입은 서버의 OS종류를 설정해주는 것인데 오토로 해놓으면 된다. 사이트 레벨은 말 그대로 레벨이다. 때문에 사이트의 이름을 적어준다.
♣ Tip : 만약 다운로드를 받기 위한 접속이라면?
원하는 Ftp주소를 적어주고 ID 비번은 뛰어넘어 (왜냐면 자신의 ID가 그 사이트에 없을 테니까... 있다면 적어주고) 로긴 타입(Login Type)을 Anonymous로 해준다.
이 정도 설정이면 이용에 문제가 없다. 이전에 이야기했듯이 easyspace에 계정을 가지고 있다면 서버 주소를 members.easyspace.com으로 해주고 자신의 아뒤와 비번을 적으면 된다.
접속이 되었으면 이제 업로드를 해야한다. 좌측에 있는 자신의 디렉토리 내용에서 업로드할 파일을 선택한다. 그후 위쪽 커멘드(Command)메뉴에서 업로드(Upload)를 선택하면 업로드가 된다. 단축키는 Ctrl과 Page UP를 동시에 누른다.
만약 업로드할 파일이 여러 개면 옆에서 블록 설정을 여러 파일 해주면 된다. 우리는 우리의 홈페이지 디렉토리를 따로 만들어 놓았으므로 전부 올리면 될 것이다. 해당 디렉토리로 이동하여 index.html을 포함한 전부 그 이하 디렉토리까지 포함하여 블록설정을 해서 업로드한다.
♣ Tip : 블록 설정은?
전에도 언급했지만, Shift와 방향키이다. 윈도에서 통용되는 방법이니 꼭 알아두자.
업로드가 끝났으면 이젠 브라우저를 작동시키고 자신의 홈페이지 예를 들어 http:members.easyspace/ID로 들어가 본다. 자신의 홈페이지가 보이는가? 만약 보이지 않고 디렉토리와 파일들만 보인다면 index.html을 htm확장자로 해 놓은 것이다. Cute FTP에서 파일을 선택하고 (index.htm 파일) 마우스의 우측버튼을 누르면 Rename이 있다. 이를 선택하면 된다.
성공했다면 축하할 일이다. 이제 여러분의 홈페이지가 수만~ 수십만의 네티즌에게 소개될 것이다. 하지만 이 글을 읽고 나서 따라 했음에도 잘 안 된다면, 또는 이 외의 방법을 찾는다면 다음장의 나모의 출판기능을 이용해보자.
[나모 출판기능]
나모의 출판기능이란 나모에서 작성한 html문서를 나모를 이용해서 ftp를 이용해 업로드하는 것이다. Frontpage 98에도 같은 기능이 있다.
즉, 나모로 만든 문서 중 각각 파일 업로드했을 때 종종 문제되는 대소문자 문제가 이 기능을 이용해면 깨끗하게 해결된다. 단 한번 설정으로 해당 파일을 송두리째 올려준다. ^^
나모를 작동시킨다. F4를 누르시면 출판기능 대화상자가 나온다. 두개의 탭이 있는데 하나는 파일단위로 하나씩 올리는 "파일"메뉴고 다른 하나는 디렉토리 통째로 올리는 "디렉토리"메뉴 이다.
우리는 html문서들을 한 디렉토리에 잘 정리해 두었으니 업로드는 더욱 쉽다. 자 "디렉토리"에서 찾아보기를 누르자. 우리 디렉토리에 가서 마우스를 누른 후 확인을 누른다.
다음을 누르면 호스트와 디렉토리 사용자이름 비밀번호등을 넣게 되어있다. 만약 easyspace에 계정이라면 members.easyspace.com 으로 ftp주소를 써주고, 자신의 아이디를 사용자에 넣고 비밀번호를 그 아래 적는다.
디렉토리와 http위치는 적지 않아도 무방한 것으로 알고 있는데, 만약 안 된다면 디렉토리에는 자신의 'ftp주소/ID'를 적어준다. 또 http는 자신의 홈페이지에 접속할 때의 주소를 적는 것이다.
이제 '다음' 버튼만 누르면 업로드는 모든 파일이 다 전송될 때까지 자동으로 실행된다.
♣ Tip : index.htm으로 저장되어 있다면 미리 index.html로 변경해놓는다.
당연한 말이겠으나 유니텔 이외의 ISP로 인터넷에 접속해 있어야 한다. (eg. Kitel) 이로써 파일 업로드가 완성되었다. 홈페이지를 가지게 된 것을 축하한다. 만일 이 강좌가 홈페이지 만드는데 도움이 되었다면 다른 사람에게도 알려주면 더욱 감사하겠다.
IX. 검색 엔진에 홈페이지를 등록하자
[서치엔진에 등록]
예를 들어 야후에 등록을 원한다고 치자. (대부분 서치엔진이 유사하다.) 자신의 홈페이지가 어떤 카테고리인지 생각해보자. 야후에 검색을 위한 창 아래에 보면 카테고리가 여러 개 나열되어 있다. 예를 들어 개인홈페이지, 비즈니스, 음악 영화 등등....
개인 홈페이지라면, 개인 홈페이지에 들어가면 된다. 들어가면 다시 작은 카테고리로 나누어진다. 개인 홈페이지 중 동물에 관한 홈페이지, 영화에 관한 홈페이지 등등... 자신의 카테고리를 찾아서 들어간다.
이런 식으로 자꾸 하위 카테고리를 들어가 마지막까지 가면 위쪽에 있는 야후 글자 옆에 URL을 누른다.
그러면 신청 메뉴 Step 1이 나올 것이다. 질문에 대답해 나가면 Step 3에서 모든 과정을 마치게 된다. 1주일 후에 야후에 자신의 홈페이지를 카테고리 안에서 찾을 수 있을 뿐더러 검색어로도 찾을 수 있다.
만약 자신의 홈페이지에 맞는 카테고리가 없다면 야후 관리자에게 메일을 보내면 새로운 카테고리를 만들어준다.
[능동적인 홍보-배너]
배너란 작은 홍보 창이다. 지겹게 보는 유니윈 아래 광고들 같은 것이다. 자신의 홈페이지 홍보를 배너를 교환하므로 써 능동적으로 네티즌을 불러올 수 있는 것이다.
배너 교환해주는 사이트로는 링크가 있으며 그 외에도 몇몇 사이트가 있다. 배너의 규격은 각 사이트에서 정보를 얻을 수 있다. (www.linko.co.kr)
얼마전 강좌한 페인트샵 프로를 이용해도 배너를 만들 수 있다. 또는 배너를 무료로 만들어주는 사이트도 있으니 방문하길 바란다.
강좌를 마치면서....
☆.... 무사히 강좌가 끝나서 다행입니다. 20개가 넘는 글들을 쓰는 것이 사실 쉬운 일은 아니었습니다. 하지만 꾸준히 봐주시는 몇 분이 계셨기에 포기하지 않고 끝을 맺을 수 있었습니다.
그리고 열심히 한다고 격려해주신 많은 분들 성희님, 남희님, 현주님, 그 외 현석님 또 유미님 등.... (그 외 생각 안 나서 못 적은 모든 분들) 모두에게 감사드립니다.
시간이 지나면 또 더 좋은 강좌도 생길 것이고, 지금의 유틸들은 버전이 업되겠지요. 하지만 처음이 힘들지 그 다음은 훨씬 수월할 것을 경험을 비추어 굳게 믿습니다. 모두들 힘내서 끝을 보시길 바랍니다. ^-^
그리고 아쉬운 것은 제가 직접 태그 및 처음에 말씀드렸던 몇 개의 유틸을 더 강의하려 했으나 시간도 부족한데다 꼭 필요한 부분은 아니었기에 과감히 포기했습니다.
Html문서는 웹에디터로 작성하는데 한계가 있음을 사용해보시면서 느끼실 겁니다. 하지만, 편리함은 결코 무시할 수 없습니다. 그렇기 때문에 웹에디터를 이용해서 홈페이지에 좀 익숙해지시고 그 다음에 태그등 여러 기술 및 프로그램을 배우시는데 도움이 되고자 했었습니다.