W21001

	여러분 안녕하세요 ? 이번 주는 웹 프로그래밍에 대해서 알아보고자 합니다. 사실 본 강좌를 시작할 때 프로그래밍에 대해서는 다룰 생각이 없었습니다만 본 수업을 통해 웹 페이지 프로그래밍에 대하여 배우고 싶어하는 학생들도 많이 있다는 판단 하에 이번 주에는 이에 대한 이해를 도울 수 있는 얘기들을 할까 합니다. 오랫동안 컴퓨터 프로그래밍은 커뮤니케이션 디자인과 는 다른 별개의 전문분야로 인식되어 왔습니다. 그림을 그린다거나 디자인 작업을 해온 사람의 입장에서 컴퓨터 프로그래밍은 가능한 한 피하고 싶은 영역이기도 합니다. 띄어쓰기나 점 하나라도 다르면 인식하지 못하는 컴퓨터의 언어체계는 소위 창의력을 중요시하는 일을 하는 사람에게는 너무나 엄격한 규율이며 체질적으로 맞지 않는 불편함이기도 합니다. 그러므로 컴퓨터를 이용한 디자인 작업이란 대게 쉬운 그래픽 유저인터페이스의 개념이 적용된 응용프로그램을 사용하는 것이 대부분이라고 볼 수 있습니다. 그러나 이런 경우 응용프로그램에서 해결해 주는 표현 방법 안에서 머물 수밖에 없는 약점을 갖게 되며 무척 수동적 자세에 놓이게 되기도 합니다. 최근 디지털 미디어 관련 디자이너들은 컴퓨터 언어를 쓴다라고 하는 일에 관심을 많이 가지고 있습니다. 응용프로그램 중에서도 저작용 툴(Authioring ware)이라는 형태로 일반인들의 간단한 컴퓨터 언어 스크립팅을 할 수 있도록 도와주는 프로그램들도 있으며 웹 페이지 제작 언어인 HTML등은 이러한 경향을 앞당겨 주고 있습니다. 유학 중에 컴퓨터 아트 학과에서 공부를 했었습니다. 첫 학기는 저에게 고된 기간이었는데 그것은 50% 가량되는 강좌들이 마치 컴퓨터 관련학과의 수업과 같이 시스탬 이론과 프로그래밍을 전문적으로 다루었기 때문이었습니다. 공대와 같이 딱딱한 강의 내용에 다른 학교로의 전과를 생각하기도 했었습니다만 2년간 프로그래밍과의 만남은 지금은 다행스러운 일이라고 생각하고 있습니다. 다른 나라를 이해하기 위한 가장 좋은 방법으로 그 나라의 언어를 공부하듯이 컴퓨터라는 도구를 진정 이해하기 위해서는 컴퓨터의 언어를 알 필요가 있다는 생각이 듭니다. 그런 생각에 작년에는 컴퓨터 그래픽 관련 수업 중에 웹 페이지 디자인 시간을 통해 HTML 스크립팅 기법을 하나하나 실습하며 학습한 적이 있습니다. 그러나 학기말에 학생들이 제출한 과제의 대부분에서 웹 에디터를 사용한 흔적을 보면서 괜한 일을 한 것은 아닌가 하는 생각도 들었습니다. 좋은 도구가 개발되고 그것이 나에게 있다면 사용하지 않을 이유가 없습니다. 그리고 웹 에디터의 사용은 작업 시간을 단축해 주고 능률을 올려줍니다. 그러나 목수가 나무를 다룰 때 그 재료의 근본적인 성질을 이해하고 만들고자 하는 건물이나 가구의 목적에 올바르게 사용한다면 공장의 대량생산 제품과는 다른 감동을 우리에게 주는 것처럼 프로그램 코드에 대한 근본적인 이해는 여러분들이 만들고자 하는 디자인, 즉 웹 디자인에도 또 다른 차이를 만들 수 있다는 것을 이해하기 바랍니다. 본 강좌에서는 HTML의 특징과 기본 기능에 대해 알아보고 그 밖의 웹에 관련된 몇 가지 스크립팅 언어와 관련 응용 프로그램에 대해 소개 하고자 합니다. HTML 공식언어로서 4개의 언어를 사용하고 있는 스위스에서 월드 와이드 웹 (World Wide Web)언어가 개발 되었다는 것은 어떻게 보면 당연한 것일지도 모릅니다. 공통언어를 사용하지 않는 사람들도 쉽게 의사소통 할 수 있도록, CERN(Switzerland's European Laboratory for Particle Physics: 유럽입자 물리연구소) 개발팀의 프로그래머들이 HTML(Hyper Text Markup Language)이라는 컴퓨터용 국제 공용어 를 만든 것입니다. HTML은 텍스트, 선, 그래픽이미지, 소리, 비디오를 모든 컴퓨터가 인식할 수 있는 텍스트 파일에 저장할 수 있습니다. HTML에서 중심이 되는 것은 태그( "<">" 사이에 위치하는 명령어 ) 입니다. 이것은 문서의 내용 중간 중간에 삽입되어 브로우져에서 보이게 될 문서의 특성을 지정하게 됩니다. HTML파일은 택스트 파일을 만들 수 있는 어떠한 프로그램에서도 쓸 수 있습니다. 이를 일반 워드프로세서 상에서는 태그 표시와 문자가 가득한 일반 텍스트 파일로 보이게 됩니다. 그러나 넷스케이프나 익스플로어와 같은 브로우져를 통해서 HTML 파일을 열면 비로소 브로우져는 태그안의 명령어들을 해석하게 되어 화면상에 포맷된 문서의 형태로 보여주는 역할을 하게 됩니다. 즉 HTML 페이지는 태그와 일반문서와 브로우져의 합동작품이라고 할 수 있으며 HTML 스크립팅도 이 세 가지의 틀을 오가며 작업하게 됩니다. HTML은 단순히 문서를 보기 좋게 구성하는 역할만을 하는 것은 아닙니다. 이것의 주요 기능은 HTML 이니셜의 첫 번째 부분 Hyper Text 기능에 있습니다. 즉 HTML 문서들간에는 특정 문자나 이미지에 하이퍼 링크(Hyper Link : 시공을 초월한 연결고리)를 만들어 클릭을 하면 다른 페이지로 이동이 가능하도록 해 줍니다. 즉 이 말은 네트웍으로 연결되어 있는 전세계의 HTML 페이지들 간에는 서로 원하는 곳으로 자유롭게 옮겨 다닐 수 있다는 뜻이 됩니다. 그리고 이러한 고리의 연결상태가 마치 거미줄 같아 (사실 거미줄 처럼 규칙이 있는 것이 아닌 훨씬 무작위 적이고 항시 변화하고 있는) Web 이라고 합니다. 원례의 HTML표준은 CERN에서 만들어 졌지만 이는 공계된 언어로서 많은 계발자 들에 의해 새로운 버전들이 마구 만들어지고 있습니다. CERN 과 공동으로 매사추세츠 공대(MIT)와 프랑스 테크놀로지 그룹인 INRIA의 W3 컨소시움에서 그것들을 분석하여 그 사용여부를 결정하며 이에 따라 HTML의 버전도 현재는 HTML 3 까지 발표되었습니다. 또 한가지 주목할 것은 HTML의 확장 기능들이 주로 브로우져 회사들 (특히 넷스케이프사)에 의해 주도 되어 왔다는 것입니다. 브로우져의 확장 기능들은 프로그래머들에게는 더 강력한 표현의 영역을 넓혀 주지만 사용자 입장에서는 확장기능들은 지원하지 않는 브로우져에서 볼 경우 그 추가된 포맷을 볼 수 없게 되므로 일반성은 떨어지게 됩니다. 이러한 확장기능과 이의 표준화의 문제 등은 소프트웨어 회사간의 이해관계와 맞물려 하루가 다르게 변화하고 있습니다. HTML을 배우기 위한 가장 좋은 교과서는 웹에 있습니다. 다음은 국내의 HTML을 배울 수 있는 몇 개의 사이트이며 프린트하여 혼자서도 따라해 보면 금방 익힐 수 가 있습니다. 제일씨앤시 정보기술교육센터에서 강의용 자료 http://myhome.thrunet.com/~freddy/homepageFrame.htm 한림대 영문과에서 만든 초보자를 위한 HTML 가이드 http://sun.hallym.ac.kr/~english/htmlguid.html 강상진씨가 개인적으로 만든 웹 스크립팅 전반에 관한 안내 http://cs.ajou.ac.kr/~sangjin/ 메모장에서 테그와 함께 작성한 HTML문서 HTML문서를 브로우저에서 보면 본문 내용만이 윈도우에 보이게 됩니다. 간단한 기본 코드를 사용한 문자만의 HTML 페이지를 만드는 것은 간단한 일입니다. 그리고 이미지를 포함한 구성적인 화면을 만들기 위해서는 역시 이미지 맵이나 테이블 기능을 사용하지 않을 수 없습니다. 이미지 맵은 그래픽이미지 위의 특정 부분을 하이퍼 링크가 가능한 영역으로 지정할 수 있는 기능으로 이미지의 픽셀좌표를 써주는 방법으로 클릭하는 영역을 지정해 주며 가장 쉽게 그래픽 인터페이스를 만들 수 있는 방법입니다. 또한 테이블 기능은 표식을 자동으로 만들어 주는 기능입니다만 테이블의 테두리선을 없애고 조각난 이미지를 붙여 사용하는 방법으로 그래픽에 하이퍼 링크영역을 만들어 주기도 합니다. 이들 기능은 직접 스크립팅으로 하는 데에 혼돈 스러울 수도 있으므로 이를 위한 유틸리티나 웹 에디터를 사용하는 것도 한가지 방법입니다. Java, Java script, CGI, Lingo Shockwave 네트웍 속도가 빨라지고 웹 브로우저에 확장기능이 생기면서 이의 사용자들은 더욱 다이나믹한 인터랙션을 요구하게 됩니다. 이와 함께 HTML 뿐만이 아닌 웹 전용 프로그래밍 언어가 생겨나기 시작하였으며 본 절에는 이에 대한 간단한 소개를 하고자 합니다. - Java, Java Script 자바와 자바 스크립트를 혼동되어 사용하는 경우가 있으마 근본적으로 다른 언어입니다. 자바는 C 또는 C++언어 (어렵기로 소문난 그러나 가장 빠르고 호환성이 좋은...)의 문법체계를 넷스케이프나 익스플로어에서 플러그 인을 사용하여 읽을 수 있도록 선 마이크로시스템즈(Sun Microsystems)사에서 개발한 새로운 언어입니다. 자바 스크립트는 넷스케이프사에서 HTML보다 다양한 기능을 수행 할 수 있도록 만든 프로그램 언어로서 HTML문서 안에서 함께 사용되는 비교적 쉬운 언어입니다. 이는 별도의 플러그 인을 설치하지 않는 HTML의 확장언어로 이해하시면 됩니다. 이들은 체크박스나 라디오 버튼에 표시된 사용자의 선택을 인식하거나 하이라이트 되는 버튼 등에 주로 사용하며 자바의 경우 C언어에서 할 수 있는 일을 대부분 할 수 있습니다만 단지 브로우져에서 애플릿(인터넷에서 사용될 목적으로 개발된 프로그램을 지칭하는 말)이 해석되는 시간이 문제입니다. -CGI 멀티미디어를 구현하기 위해 웹 페이지를 디자인하고 인터랙션 기능을 구현하게 되면 어쩔 수 없이 사용자의 입력의사를 확인해야하는 경우가 생기며 이러한 기능은 위에서 설명한 C 기반의 자바, 자바 스크립트를 사용할 수 있습니다. 그러나 서버가 유닉스 시스탬을 사용하는 경우에는 사용자의 단어 검색이나 체크박스의 선택여부 등의 정보를 인식하기 위해 CGI (Common Gate Interface)를 사용해야 하며 검색사이트나 전자상거래에서 많이 사용됩니다. - Lingo Shockwave 링고는 매크로미디어사의 디렉터라는 저작도구(Authoring Tool)에서 사용되는 스크립트 언어로서 애니메이션 기능을 강화하기 위한 스프라이트 라는 개념을 도입하고 영어의 문법에 가장 비슷하도록 만든 5세대 언어라고 말할 수 있습니다. 링고는 프리젠테이션용 자료, 그래픽 애니메이션 그리고 인터페이스 디자인에 이르기까지 기존의 복잡한 언어체계로 해야 했던 일을 쉽게 구현할 수 있도록 도와줍니다. 쇽 웨이브(Shockwave)는 이러한 링고 스크립을 웹브로우져에서 인식할 수 있도록 하는 포맷으로서 디렉터 안에서 "Save as" 명령어로 간단하게 바꾸어 줍니다. 쇽 웨이브 무비를 보기 위해서는 브로우져안에 플러그인이 설치되어 있어야 하며 최근버전의 브로우저들의 경우에는 쇽웨이브 플러그인이 기본으로 장착되어 있습니다. 개인적으로 링고와 HTML을 씁니다만 지난겨울에는 C를 배워 보겠다고 서점에서 백과사전 처럼 두꺼운 책을 이리보고 저리보고 한 적이 있습니다. 외국대학에서 Java로 제작한 다이네믹한 사이트들을 보고 자극을 좀 받았던 것이죠. 그러나 그 두꺼운 책의 마지막 장에도 내가 필요로 하는 그래픽 애니메이션에 관한 부분은 시작조차 되지 않는 것을 보고 엄두를 낼 수 없었고 아직도 C는 저에게 큰 숙제로 남아있습니다. 디자이너 입장에서 프로그래밍 언어는 하품이 나오는 분야이지만 Java 나 CGI로 만든 웹 사이트가 훌륭하게 돌아가는 것을 보면 감탄이 절로 납니다. 특히 잘 아는 사람이 만든 사이트의 경우에는 더욱 그렇습니다. 이러한 바램들을 그나마 충족시킬 수 있는 방법은 웹 에디터의 사용입니다. 그 동안 학생들이 웹 에디터를 사용하는 것에 대해 마땅치 않게 생각했었습니다. 그것은 실지로 웹 에디터의 성능이 좋은 페이지를 만드는 데에 별로 도움이 되지 못한다는 믿음 때문이었습니다. 그러나 최근에 발표된 웹 에디터들을 확인해본 결과 쓸만하다는 생각이 들어 몇 가지를 소개하고자 합니다. 웹 에디터 얼마 전에 여러분들의 강의를 준비하면서 그 동안 미루어 오던 우리나라의 "나모"와 매크로 미디어사의 "드림웨버(Dream weaver)"를 다운받아 처음으로 사용해 보았습니다. 나모를 사용하면서 와 - 이거좋군 ! 하며 흥분했었는데 드림웨버는 한 술 더 떠서 완전히 그 동안 원시인이었던 기분이 들도록 만들어 주었습니다. 이제는 이미지 맵의 버튼 영역을 지정하느라 포토샵에서 픽셀번호를 계산하고 테이블을 만드느라 종이에 스케치하여 테그를 적는 일없이 이러한 것들을 간단히 해결 할 수 있다는 생각에 무척 행복했습니다. 2년 전 초창기의 웹 에디터인 어도브사의 페이지 밀(PageMill)이나 사이트 밀(SiteMill)때와는 무척 다르다는 생각이 듭니다. 현재는 $100 내외의 나모, Adobe PageMill, Claris Home Page, Visual Page 등이 간단하게 일반인들이 사용할 수 있는 웹 에디터로 사용되며 Java 나 Dynamic HTML의 좀더 인터랙티브 한 사이트 저작용 툴로는 $300내외하는 매크로미디어사의 드림웨버(Dream Weaver)와 얼마전에 어도브사에서 매입한 고 라이브 (Adobe Golive 4.0)등이 있습니다. 사용결과 나모와 드림웨버 모두 좋았습니다. 특히 드림웨버는 HTML 페이지와 브로우저 상에서 보여질 페이지상태를 동시에 띄워 놓고 작업할 수 있도록 해 주었는데 이는 HTML 스크립팅 상에서 세밀한 부분을 수정해 가며 작업할 수 있다는 장점이 있었습니다. 이는 기존의 에디터들이 작성을 완료한 후 브로우져 상에서 열어보았을 때 미세하게 틀려지는 부분을 고치려고 다시 HTML 코드의 해당부분을 번거롭게 찾았던 것에 비하면 무척 호감이 가는 기능이었습니다. 아마도 어도브사의 고 라이브(Adobe Golive 4.0)도 이에 못지 않을 거란 생각이 들었습니다. 이러한 웹 에디터들은 매크로미디어사(www.macromedia.com)나 어도브사 (www.adobe.com)의 사이트에 들어가면 시험판을 다운받을 수 있으며 이번 기회에 한번 사용해 보는 것도 좋은 기회가 될 것입니다. 그러나 한가지 HTML에 기본코드에 대한 이해가 있어야 에디터의 사용도 수월하며 간단한 HTML 수정을 할 수 있어야 한다는 것을 명심하기 바랍니다. 95년에 처음 인터넷을 시작했을 때 혹시나 하며 백남준 선생님의 웹 사이트를 찾아본 적이 있습니다. 검색 사이트를 통해 선생님의 사이트에 들어가 보고는 역시 새로운 매체에 빠르시구나.. 생각했었습니다. 그때 제가 본 백 선생님의 사이트는 문자는 하나도 없고 본인의 사진으로 가득 메운 배경 이미지 뿐 이었습니다. 그때는 웹에 특정인의 사이트가 있다는 것 자체가 경이로운 일 이였습니다. 웹 사이트의 수준을 결정하는 요소는 많이 있습니다. 우선 이미지, 택스트 등의 재료가 중요할 것이고 그 다음에 이들을 원활하고 오류 없이 보여줄 웹 스크립트 체계가 필요할 것입니다. 이들 요소 중에 어떤 부분을 더욱 치중할 것인가를 조정하는 일 또한 디자인 과정이라고 볼 수 있으며 그렇기 때문에 웹 디자이너는 이들 분야에 대한 폭넓은 이해가 필요합니다. 다음주에는 웹 뿐만이 아닌 인터랙티브 미디어 전반에 관한 논의를 하겠습니다. 감사합니다.

여러분 안녕하세요 ?

이번 주는 웹 프로그래밍에 대해서 알아보고자 합니다. 사실 본 강좌를 시작할 때 프로그래밍에 대해서는 다룰 생각이 없었습니다만 본 수업을 통해 웹 페이지 프로그래밍에 대하여 배우고 싶어하는 학생들도 많이 있다는 판단 하에 이번 주에는 이에 대한 이해를 도울 수 있는 얘기들을 할까 합니다.

오랫동안 컴퓨터 프로그래밍은 커뮤니케이션 디자인과 는 다른 별개의 전문분야로 인식되어 왔습니다. 그림을 그린다거나 디자인 작업을 해온 사람의 입장에서 컴퓨터 프로그래밍은 가능한 한 피하고 싶은 영역이기도 합니다. 띄어쓰기나 점 하나라도 다르면 인식하지 못하는 컴퓨터의 언어체계는 소위 창의력을 중요시하는 일을 하는 사람에게는 너무나 엄격한 규율이며 체질적으로 맞지 않는 불편함이기도 합니다. 그러므로 컴퓨터를 이용한 디자인 작업이란 대게 쉬운 그래픽 유저인터페이스의 개념이 적용된 응용프로그램을 사용하는 것이 대부분이라고 볼 수 있습니다. 그러나 이런 경우 응용프로그램에서 해결해 주는 표현 방법 안에서 머물 수밖에 없는 약점을 갖게 되며 무척 수동적 자세에 놓이게 되기도 합니다. 최근 디지털 미디어 관련 디자이너들은 컴퓨터 언어를 쓴다라고 하는 일에 관심을 많이 가지고 있습니다. 응용프로그램 중에서도 저작용 툴(Authioring ware)이라는 형태로 일반인들의 간단한 컴퓨터 언어 스크립팅을 할 수 있도록 도와주는 프로그램들도 있으며 웹 페이지 제작 언어인 HTML등은 이러한 경향을 앞당겨 주고 있습니다.
유학 중에 컴퓨터 아트 학과에서 공부를 했었습니다. 첫 학기는 저에게 고된 기간이었는데 그것은 50% 가량되는 강좌들이 마치 컴퓨터 관련학과의 수업과 같이 시스탬 이론과 프로그래밍을 전문적으로 다루었기 때문이었습니다. 공대와 같이 딱딱한 강의 내용에 다른 학교로의 전과를 생각하기도 했었습니다만 2년간 프로그래밍과의 만남은 지금은 다행스러운 일이라고 생각하고 있습니다. 다른 나라를 이해하기 위한 가장 좋은 방법으로 그 나라의 언어를 공부하듯이 컴퓨터라는 도구를 진정 이해하기 위해서는 컴퓨터의 언어를 알 필요가 있다는 생각이 듭니다. 그런 생각에 작년에는 컴퓨터 그래픽 관련 수업 중에 웹 페이지 디자인 시간을 통해 HTML 스크립팅 기법을 하나하나 실습하며 학습한 적이 있습니다. 그러나 학기말에 학생들이 제출한 과제의 대부분에서 웹 에디터를 사용한 흔적을 보면서 괜한 일을 한 것은 아닌가 하는 생각도 들었습니다. 좋은 도구가 개발되고 그것이 나에게 있다면 사용하지 않을 이유가 없습니다. 그리고 웹 에디터의 사용은 작업 시간을 단축해 주고 능률을 올려줍니다. 그러나 목수가 나무를 다룰 때 그 재료의 근본적인 성질을 이해하고 만들고자 하는 건물이나 가구의 목적에 올바르게 사용한다면 공장의 대량생산 제품과는 다른 감동을 우리에게 주는 것처럼 프로그램 코드에 대한 근본적인 이해는 여러분들이 만들고자 하는 디자인, 즉 웹 디자인에도 또 다른 차이를 만들 수 있다는 것을 이해하기 바랍니다.
본 강좌에서는 HTML의 특징과 기본 기능에 대해 알아보고 그 밖의 웹에 관련된 몇 가지 스크립팅 언어와 관련 응용 프로그램에 대해 소개 하고자 합니다.

HTML

공식언어로서 4개의 언어를 사용하고 있는 스위스에서 월드 와이드 웹 (World Wide Web)언어가 개발 되었다는 것은 어떻게 보면 당연한 것일지도 모릅니다. 공통언어를 사용하지 않는 사람들도 쉽게 의사소통 할 수 있도록, CERN(Switzerland's European Laboratory for Particle Physics: 유럽입자 물리연구소) 개발팀의 프로그래머들이 HTML(Hyper Text Markup Language)이라는 컴퓨터용 국제 공용어 를 만든 것입니다. HTML은 텍스트, 선, 그래픽이미지, 소리, 비디오를 모든 컴퓨터가 인식할 수 있는 텍스트 파일에 저장할 수 있습니다.

HTML에서 중심이 되는 것은 태그( "<">" 사이에 위치하는 명령어 ) 입니다. 이것은 문서의 내용 중간 중간에 삽입되어 브로우져에서 보이게 될 문서의 특성을 지정하게 됩니다. HTML파일은 택스트 파일을 만들 수 있는 어떠한 프로그램에서도 쓸 수 있습니다. 이를 일반 워드프로세서 상에서는 태그 표시와 문자가 가득한 일반 텍스트 파일로 보이게 됩니다. 그러나 넷스케이프나 익스플로어와 같은 브로우져를 통해서 HTML 파일을 열면 비로소 브로우져는 태그안의 명령어들을 해석하게 되어 화면상에 포맷된 문서의 형태로 보여주는 역할을 하게 됩니다. 즉 HTML 페이지는 태그와 일반문서와 브로우져의 합동작품이라고 할 수 있으며 HTML 스크립팅도 이 세 가지의 틀을 오가며 작업하게 됩니다.

HTML은 단순히 문서를 보기 좋게 구성하는 역할만을 하는 것은 아닙니다. 이것의 주요 기능은 HTML 이니셜의 첫 번째 부분 Hyper Text 기능에 있습니다. 즉 HTML 문서들간에는 특정 문자나 이미지에 하이퍼 링크(Hyper Link : 시공을 초월한 연결고리)를 만들어 클릭을 하면 다른 페이지로 이동이 가능하도록 해 줍니다. 즉 이 말은 네트웍으로 연결되어 있는 전세계의 HTML 페이지들 간에는 서로 원하는 곳으로 자유롭게 옮겨 다닐 수 있다는 뜻이 됩니다. 그리고 이러한 고리의 연결상태가 마치 거미줄 같아 (사실 거미줄 처럼 규칙이 있는 것이 아닌 훨씬 무작위 적이고 항시 변화하고 있는) Web 이라고 합니다.

원례의 HTML표준은 CERN에서 만들어 졌지만 이는 공계된 언어로서 많은 계발자 들에 의해 새로운 버전들이 마구 만들어지고 있습니다. CERN 과 공동으로 매사추세츠 공대(MIT)와 프랑스 테크놀로지 그룹인 INRIA의 W3 컨소시움에서 그것들을 분석하여 그 사용여부를 결정하며 이에 따라 HTML의 버전도 현재는 HTML 3 까지 발표되었습니다. 또 한가지 주목할 것은 HTML의 확장 기능들이 주로 브로우져 회사들 (특히 넷스케이프사)에 의해 주도 되어 왔다는 것입니다. 브로우져의 확장 기능들은 프로그래머들에게는 더 강력한 표현의 영역을 넓혀 주지만 사용자 입장에서는 확장기능들은 지원하지 않는 브로우져에서 볼 경우 그 추가된 포맷을 볼 수 없게 되므로 일반성은 떨어지게 됩니다. 이러한 확장기능과 이의 표준화의 문제 등은 소프트웨어 회사간의 이해관계와 맞물려 하루가 다르게 변화하고 있습니다.

HTML을 배우기 위한 가장 좋은 교과서는 웹에 있습니다. 다음은 국내의 HTML을 배울 수 있는 몇 개의 사이트이며 프린트하여 혼자서도 따라해 보면 금방 익힐 수 가 있습니다.

제일씨앤시 정보기술교육센터에서 강의용 자료
http://myhome.thrunet.com/~freddy/homepageFrame.htm

한림대 영문과에서 만든 초보자를 위한 HTML 가이드
http://sun.hallym.ac.kr/~english/htmlguid.html

강상진씨가 개인적으로 만든 웹 스크립팅 전반에 관한 안내
http://cs.ajou.ac.kr/~sangjin/

메모장에서 테그와 함께 작성한 HTML문서

HTML문서를 브로우저에서 보면 본문 내용만이 윈도우에 보이게 됩니다.

간단한 기본 코드를 사용한 문자만의 HTML 페이지를 만드는 것은 간단한 일입니다. 그리고 이미지를 포함한 구성적인 화면을 만들기 위해서는 역시 이미지 맵이나 테이블 기능을 사용하지 않을 수 없습니다.
이미지 맵은 그래픽이미지 위의 특정 부분을 하이퍼 링크가 가능한 영역으로 지정할 수 있는 기능으로 이미지의 픽셀좌표를 써주는 방법으로 클릭하는 영역을 지정해 주며 가장 쉽게 그래픽 인터페이스를 만들 수 있는 방법입니다. 또한 테이블 기능은 표식을 자동으로 만들어 주는 기능입니다만 테이블의 테두리선을 없애고 조각난 이미지를 붙여 사용하는 방법으로 그래픽에 하이퍼 링크영역을 만들어 주기도 합니다. 이들 기능은 직접 스크립팅으로 하는 데에 혼돈 스러울 수도 있으므로 이를 위한 유틸리티나 웹 에디터를 사용하는 것도 한가지 방법입니다.

Java, Java script, CGI, Lingo Shockwave

네트웍 속도가 빨라지고 웹 브로우저에 확장기능이 생기면서 이의 사용자들은 더욱 다이나믹한 인터랙션을 요구하게 됩니다. 이와 함께 HTML 뿐만이 아닌 웹 전용 프로그래밍 언어가 생겨나기 시작하였으며 본 절에는 이에 대한 간단한 소개를 하고자 합니다.

- Java, Java Script
자바와 자바 스크립트를 혼동되어 사용하는 경우가 있으마 근본적으로 다른 언어입니다. 자바는 C 또는 C++언어 (어렵기로 소문난 그러나 가장 빠르고 호환성이 좋은...)의 문법체계를 넷스케이프나 익스플로어에서 플러그 인을 사용하여 읽을 수 있도록 선 마이크로시스템즈(Sun Microsystems)사에서 개발한 새로운 언어입니다. 자바 스크립트는 넷스케이프사에서 HTML보다 다양한 기능을 수행 할 수 있도록 만든 프로그램 언어로서 HTML문서 안에서 함께 사용되는 비교적 쉬운 언어입니다. 이는 별도의 플러그 인을 설치하지 않는 HTML의 확장언어로 이해하시면 됩니다. 이들은 체크박스나 라디오 버튼에 표시된 사용자의 선택을 인식하거나 하이라이트 되는 버튼 등에 주로 사용하며 자바의 경우 C언어에서 할 수 있는 일을 대부분 할 수 있습니다만 단지 브로우져에서 애플릿(인터넷에서 사용될 목적으로 개발된 프로그램을 지칭하는 말)이 해석되는 시간이 문제입니다.

-CGI
멀티미디어를 구현하기 위해 웹 페이지를 디자인하고 인터랙션 기능을 구현하게 되면 어쩔 수 없이 사용자의 입력의사를 확인해야하는 경우가 생기며 이러한 기능은 위에서 설명한 C 기반의 자바, 자바 스크립트를 사용할 수 있습니다. 그러나 서버가 유닉스 시스탬을 사용하는 경우에는 사용자의 단어 검색이나 체크박스의 선택여부 등의 정보를 인식하기 위해 CGI (Common Gate Interface)를 사용해야 하며 검색사이트나 전자상거래에서 많이 사용됩니다.

- Lingo Shockwave
링고는 매크로미디어사의 디렉터라는 저작도구(Authoring Tool)에서 사용되는 스크립트 언어로서 애니메이션 기능을 강화하기 위한 스프라이트 라는 개념을 도입하고 영어의 문법에 가장 비슷하도록 만든 5세대 언어라고 말할 수 있습니다. 링고는 프리젠테이션용 자료, 그래픽 애니메이션 그리고 인터페이스 디자인에 이르기까지 기존의 복잡한 언어체계로 해야 했던 일을 쉽게 구현할 수 있도록 도와줍니다. 쇽 웨이브(Shockwave)는 이러한 링고 스크립을 웹브로우져에서 인식할 수 있도록 하는 포맷으로서 디렉터 안에서 "Save as" 명령어로 간단하게 바꾸어 줍니다. 쇽 웨이브 무비를 보기 위해서는 브로우져안에 플러그인이 설치되어 있어야 하며 최근버전의 브로우저들의 경우에는 쇽웨이브 플러그인이 기본으로 장착되어 있습니다.

개인적으로 링고와 HTML을 씁니다만 지난겨울에는 C를 배워 보겠다고 서점에서 백과사전 처럼 두꺼운 책을 이리보고 저리보고 한 적이 있습니다. 외국대학에서 Java로 제작한 다이네믹한 사이트들을 보고 자극을 좀 받았던 것이죠. 그러나 그 두꺼운 책의 마지막 장에도 내가 필요로 하는 그래픽 애니메이션에 관한 부분은 시작조차 되지 않는 것을 보고 엄두를 낼 수 없었고 아직도 C는 저에게 큰 숙제로 남아있습니다. 디자이너 입장에서 프로그래밍 언어는 하품이 나오는 분야이지만 Java 나 CGI로 만든 웹 사이트가 훌륭하게 돌아가는 것을 보면 감탄이 절로 납니다. 특히 잘 아는 사람이 만든 사이트의 경우에는 더욱 그렇습니다. 이러한 바램들을 그나마 충족시킬 수 있는 방법은 웹 에디터의 사용입니다. 그 동안 학생들이 웹 에디터를 사용하는 것에 대해 마땅치 않게 생각했었습니다. 그것은 실지로 웹 에디터의 성능이 좋은 페이지를 만드는 데에 별로 도움이 되지 못한다는 믿음 때문이었습니다. 그러나 최근에 발표된 웹 에디터들을 확인해본 결과 쓸만하다는 생각이 들어 몇 가지를 소개하고자 합니다.

웹 에디터

얼마 전에 여러분들의 강의를 준비하면서 그 동안 미루어 오던 우리나라의 "나모"와 매크로 미디어사의 "드림웨버(Dream weaver)"를 다운받아 처음으로 사용해 보았습니다. 나모를 사용하면서 와 - 이거좋군 ! 하며 흥분했었는데 드림웨버는 한 술 더 떠서 완전히 그 동안 원시인이었던 기분이 들도록 만들어 주었습니다. 이제는 이미지 맵의 버튼 영역을 지정하느라 포토샵에서 픽셀번호를 계산하고 테이블을 만드느라 종이에 스케치하여 테그를 적는 일없이 이러한 것들을 간단히 해결 할 수 있다는 생각에 무척 행복했습니다. 2년 전 초창기의 웹 에디터인 어도브사의 페이지 밀(PageMill)이나 사이트 밀(SiteMill)때와는 무척 다르다는 생각이 듭니다. 현재는 $100 내외의 나모, Adobe PageMill, Claris Home Page, Visual Page 등이 간단하게 일반인들이 사용할 수 있는 웹 에디터로 사용되며 Java 나 Dynamic HTML의 좀더 인터랙티브 한 사이트 저작용 툴로는 $300내외하는 매크로미디어사의 드림웨버(Dream Weaver)와 얼마전에 어도브사에서 매입한 고 라이브 (Adobe Golive 4.0)등이 있습니다. 사용결과 나모와 드림웨버 모두 좋았습니다. 특히 드림웨버는 HTML 페이지와 브로우저 상에서 보여질 페이지상태를 동시에 띄워 놓고 작업할 수 있도록 해 주었는데 이는 HTML 스크립팅 상에서 세밀한 부분을 수정해 가며 작업할 수 있다는 장점이 있었습니다. 이는 기존의 에디터들이 작성을 완료한 후 브로우져 상에서 열어보았을 때 미세하게 틀려지는 부분을 고치려고 다시 HTML 코드의 해당부분을 번거롭게 찾았던 것에 비하면 무척 호감이 가는 기능이었습니다. 아마도 어도브사의 고 라이브(Adobe Golive 4.0)도 이에 못지 않을 거란 생각이 들었습니다. 이러한 웹 에디터들은 매크로미디어사(www.macromedia.com)나 어도브사 (www.adobe.com)의 사이트에 들어가면 시험판을 다운받을 수 있으며 이번 기회에 한번 사용해 보는 것도 좋은 기회가 될 것입니다. 그러나 한가지 HTML에 기본코드에 대한 이해가 있어야 에디터의 사용도 수월하며 간단한 HTML 수정을 할 수 있어야 한다는 것을 명심하기 바랍니다.

95년에 처음 인터넷을 시작했을 때 혹시나 하며 백남준 선생님의 웹 사이트를 찾아본 적이 있습니다. 검색 사이트를 통해 선생님의 사이트에 들어가 보고는 역시 새로운 매체에 빠르시구나.. 생각했었습니다. 그때 제가 본 백 선생님의 사이트는 문자는 하나도 없고 본인의 사진으로 가득 메운 배경 이미지 뿐 이었습니다. 그때는 웹에 특정인의 사이트가 있다는 것 자체가 경이로운 일 이였습니다. 웹 사이트의 수준을 결정하는 요소는 많이 있습니다. 우선 이미지, 택스트 등의 재료가 중요할 것이고 그 다음에 이들을 원활하고 오류 없이 보여줄 웹 스크립트 체계가 필요할 것입니다. 이들 요소 중에 어떤 부분을 더욱 치중할 것인가를 조정하는 일 또한 디자인 과정이라고 볼 수 있으며 그렇기 때문에 웹 디자이너는 이들 분야에 대한 폭넓은 이해가 필요합니다.

다음주에는 웹 뿐만이 아닌 인터랙티브 미디어 전반에 관한 논의를 하겠습니다.

감사합니다.