Transcript 슬라이드 제목 없음
9장 멀티미디어를 활용한 웹 페이지의 저작 9장 멀티미디어를 활용한 웹 페이지의 저작 9.1 HTML과 웹 페이지 최근 WWW의 보급으로 많은 컴퓨터 사용자들이 WWW을 이용하 게 되어 멀티미디어 정보를 웹 페이지를 통해 전달하는 경향이 크 다. 멀티미디어 CD-ROM 타이틀과 비교해 볼 때 웹 페이지는 모든 사 람에게 공개되어 있으며, 언제라도 내용을 갱신할 수 있으므로 최 신의 정보를 제공할 수 있다는 것이 장점이다. 2 9장 멀티미디어를 활용한 웹 페이지의 저작 9.1.1 HTML이란? HyperText Markup Language의 약자로 Web Page를 만들기 위한 기본 언어 또는 약속이라 할 수 있다. Markup Language ? • 문자열의 앞뒤에 태그(tag, 문서의 형식을 지정하는 일종의 해석 기호) 를 붙여 그 문자열의 특성을 나타내 주는 언어 HTML은 SGML(Standard Generalized Markup Language, 문서 의 논리적 구조를 기술하기 위한 Markup Language의 정의를 위한 언어) 표준에 따라 구현한 문서 형식 3 9장 멀티미디어를 활용한 웹 페이지의 저작 태그의 종류와 형식 • 태그에는 문자열을 시작을 나타내는 시작 태그와 끝을 나타내는 끝 태 그가 있다. • 시작 태그의 형식 : <"태그이름"> • 끝 태그의 형식 : </"태그이름"> 시작 태그 안에 ' 속성 이름="속성값" '의 쌍으로 태그의 속성을 지 정하기도 한다. 4 9장 멀티미디어를 활용한 웹 페이지의 저작 9.1.2 HTML 문서 HTML문서의 구성 <HTML> <HEAD> <TITLE> 간단한 HTML문서 </TITLE> </HEAD> <BODY> Body태그 안의 내용이 브라우저에 나타납니다.<BR> 줄을 건너 뛰었습니다.<BR> <H1>Heading 1</H1> <H3>Heading 3 / 제목: 간단한 웹 페이지</H3><BR> <FONT size=2>Font 크기 2</FONT><BR> <FONT size=6>Font 크기 6</FONT><BR> </BODY> 5 </HTML> 9장 멀티미디어를 활용한 웹 페이지의 저작 9.1.3 하이퍼링크 (Hyperlink) 하이퍼텍스트 상에서 원하는 곳으로 이동할 수 있도록 만들어진 링 크. 웹에서의 하이퍼링크는 <A>태그에 의해 만들어진다. • <A href="가고자 하는 곳의 주소">링크가 될 부분</A> 다른 웹 사이트로의 링크 • <A href="http://www.snoopy.com">Snoopy.com으로의 링크</A> 자기 계정 내에서의 링크 • 하위 폴더: <A href="example/travel.htm"> • 상위 폴더: <A href="../게시판/게시판.html"> 한 페이지 내에서의 링크 • 링크: <A href="문서명#문서내 위치명">링크가 될 부분</A> • 위치 정의: <A name="문서내 위치명"></A> 6 9장 멀티미디어를 활용한 웹 페이지의 저작 9.2 웹 페이지의 디자인 다른 매체와 마찬가지로 뚜렷한 주제와 충실한 내용이 중요 시각적인 디자인과 탐색 구조, 인터페이스도 중요 네트워크상에서의 통신 효율도 고려 7 9장 멀티미디어를 활용한 웹 페이지의 저작 9.2.1 웹 페이지의 개발 과정 8 9장 멀티미디어를 활용한 웹 페이지의 저작 주제와 대상의 결정 • 명확한 주제와 그에 관한 정보를 중심으로 제작 • 웹 페이지를 접하는 대상을 고려 (연령층 등) 아이디어 도출 (Brainstorming) • 정한 주제와 관련된 것들을 자유롭게 생각해 보고 생각나는 것들을 모 두 적는 단계 내용의 구성 • 아이디어를 의미있게 구성하여 사이트 맵을 제작 • 사이트 맵: 웹 페이지의 구조를 파악할 수 있도록 페이지간의 계층 구 조를 그림으로 나타낸 것 9 9장 멀티미디어를 활용한 웹 페이지의 저작 웹 페이지 작성의 준비 • 자료 수집: 저작권에 유의 • 스토리보드(Storyboard)의 작성 • 스토리보드: 만들어야 할 각각의 웹 페이지를 종이 위에 그려 보 는것 • 각 구성요소들의 위치와 크기(레이아웃) 그리고 색 등을 지정 웹 페이지의 작성 • 수집한 문서, 이미지 등을 편집 • 스토리보드를 따라 웹 페이지를 작성 10 9장 멀티미디어를 활용한 웹 페이지의 저작 9.2.2 웹 페이지의 구성 (1) 페이지의 분할 • 스크롤을 여러 번 해야 할 정도로 긴 페이지는 사용자에게 부담을 줌 • 프레임을 너무 많이 나누면 혼란스러움(2~3개가 적당) (2) 웹 페이지의 탐색 구조 • 선형구조: 정해진 순서대로 앞/뒤만 이동 가능(강의 노트 등) • 계층구조: 전체적인 내용을 구조화하여 내용을 분류(상위메뉴/하위메 뉴) • 선형+계층구조: 실제적으로 가장 많이 사용 • 망 구조: 별다른 구조 없이 관련된 페이지들끼리 연결 11 9장 멀티미디어를 활용한 웹 페이지의 저작 탐색 구조의 표현 • 텍스트 또는 이미지를 통하여 링크 12 9장 멀티미디어를 활용한 웹 페이지의 저작 이미지 맵 • 그림에서 영역을 지정해 그 부분을 링크로 만드는 것 13 9장 멀티미디어를 활용한 웹 페이지의 저작 (3) 테이블을 이용한 페이지 레이아웃 • 기본적인 HTML문서는 구성요소를 왼쪽 위로부터 차례로 표시 • 테이블을 이용하면 어느 정도 원하는 위치에 구성요소를 배치할 수 있 음 (4) 열거목록(리스트) • 웹 페이지의 글은 서술형으로 길게 늘여 쓰는 것 보다는 간결하고 짧게 하는 것이 내용 전달에 효과적 • HTML문서의 열거 목록의 종류: 무순서목록, 순서목록, 정의목록 14 9장 멀티미디어를 활용한 웹 페이지의 저작 열거목록을 사용한 경우 15 9장 멀티미디어를 활용한 웹 페이지의 저작 (5) 프레임의 이용 • 웹 브라우저의 화면을 분할해 주는 기능 • 일반적으로 메뉴 등 바뀌지 않는 부분과, 선택에 따라 바뀌는 내용 부 분을 나누는 일에 사용 • 너무 많은 프레임은 사용자에게 혼란을 가져옴 (2~3개가 적당) 16 9장 멀티미디어를 활용한 웹 페이지의 저작 9.2.3 웹 페이지의 시각적 요소 (1) 일관성 있는 디자인 • 배경과 레이아웃의 통일 • 공통된 마크, 아이콘, 헤더 등 특정한 그래픽스의 사용 • 통일된 색채 계획 17 9장 멀티미디어를 활용한 웹 페이지의 저작 (2) 텍스트의 사용 • 내용에 어울리는 폰트와 스타일 선택: 내용의 강조, 예시 등을 효과적 으로 나타낼 수 있다. • 모니터의 해상도와 사이즈를 고려하여 전체 문장량과 문장 길이를 정 한다. • 여백의 적절한 사용: 페이지의 인상을 높여 주목도를 높인다. (3) 색상 • 융합, 대조, 조화를 얻기 위해 사용 • 색이 주는 느낌을 고려 • 웹 페이지의 분위기를 결정 18 9장 멀티미디어를 활용한 웹 페이지의 저작 여러가지 색이 지닌 뜻 19 9장 멀티미디어를 활용한 웹 페이지의 저작 (4) 메타포 • 사용자의 연상이나 경험과 관련된 시각기호와 청각기호로 조작성과 이해도를 높인다. • Icon: 인터페이스 향상, 조작성, 사용자의 속성, 내비게이션 구조를 고 려하여 디자인한다. • Symbol: 사용자, 목적, 조작성, 사용자의 속성을 고려 20 9장 멀티미디어를 활용한 웹 페이지의 저작 9.2.4 웹 페이지 디자인의 원칙 • • • • • • • • • • 웹 페이지를 만들기 전에 철저한 기획 단계를 거친다. 웹 페이지 로드 시간이 10초 이상이 되어서는 안된다. 길게 스크롤되는 문서를 만들지 않는다. 방문객이 웹 사이트의 구조를 쉽게 파악할 수 있도록 구성하고 웹 페이 지간의 이동이 용이하게 만든다. 웹 페이지에 의미있는 제목을 붙인다. 브라우저의 종류나 크기를 제한해서는 안된다. 지나치게 많은 애니메이션을 사용하지 않는다. 첫 화면에 플러그인을 적용하지 않는다. 프레임을 너무 많이 사용하지 않는다. 내용을 수시로 업데이트한다. 21 9장 멀티미디어를 활용한 웹 페이지의 저작 9.3 이미지의 활용 9.3.1 웹 페이지의 이미지 <IMG src="이미지 파일 이름 또는 URL"> 웹 페이지에 사용할 수 있는 이미지 형식은 GIF 또는 JPEG의 두 가지 일반적으로 크기가 작은 그림이나 버튼, 메뉴 등에 사용하는 이미 지는 GIF 형식을, 미묘한 색의 변화가 많은 사진에는 JPEG 형식을 사용한다. Animated GIF: 여러장의 GIF를 하나의 파일로 합치고 순서대로 보여주어 애니메이션 효과를 내는 GIF 파일 형식 Interlaced GIF: 이미지의 대략적인 모습을 먼저 보여주고 차츰 세 부적인 모습을 보여주는 GIF파일 형식 22 9장 멀티미디어를 활용한 웹 페이지의 저작 9.3.2 배경 이미지와 투명 GIF 배경 이미지 넣기 • 형식 : <BODY>태그 안에 background="파일 이름"으로 배경 이미지 속성 지정. • 배경 이미지로 사용한 이미지가 반복해서 타일 형식으로 나타난다. 그 러므로 이미지가 반복되어도 어색하지 않은 이미지를 사용해야 한다. • 배경 이미지가 너무 복잡하거나 두드러져 보여도 안된다. 투명 GIF(Transparent GIF)의 사용 • 웹 페이지에 배경 색이나 배경 이미지를 넣으면 웹 페이지에 사용된 그 림과 배경이 달라 어색해 보이는 경우가 있다. • 투명색을 설정하여 배경을 투명하게 한 투명 GIF를 이용하면 이러한 문제점을 해결할 수 있다. 23 9장 멀티미디어를 활용한 웹 페이지의 저작 9.3.3 이미지에 링크 달기 이미지에 다른 페이지로 이동할 수 있는 링크를 넣을 수 있다. <IMG> 태그의 바깥쪽에 <A>태그를 이용해 링크를 넣는다. 그림에 링크를 넣으면 자동으로 파란색 테두리가 생긴다. 이 테두 리를 없애기 위해서는 <IMG> 태그의 border 속성을 0으로 한다. 이미지 맵의 활용 • 하나의 이미지를 메뉴처럼 사용하는 것 • 이미지상의 특정지역을 링크시킴으로써 마우스를 대면 포인터가 손모 양으로 바뀌고 클릭하면 해당 페이지로 가게 만든 것. 24 9장 멀티미디어를 활용한 웹 페이지의 저작 이미지 맵의 형식 <MAP name="이미지맵의 이름"> <AREA shape="rect, circle 또는 poly" coords="모양에 맞는 좌표"> </MAP> <IMG usemap="#앞에서 정의한 이미지맵 이름" src="이미지맵으로 사용할 그림의 URL"> 25 9장 멀티미디어를 활용한 웹 페이지의 저작 이미지 맵의 모양과 좌표 지정 • 이미지맵의 좌표 계산은 그래픽 툴에서 하거나, 이미지맵을 만들 어 주는 프로그램을 이용한다 26 9장 멀티미디어를 활용한 웹 페이지의 저작 9.4 애니메이션의 활용 (1) Animated GIF • 여러장의 GIF를 모아 시간 간격을 두고 차례로 보여주어 애니메이션 효과를 내는 방법 • 보통 이미지와 마찬가지로 <IMG>태그를 이용 • Animated GIF를 만들기 위한 프로그램 • GIF Animator • GIF Construction Set 27 9장 멀티미디어를 활용한 웹 페이지의 저작 (2) Shockwave Flash • 매크로미디어사에 개발한 파일 형식, 확장자는 swf • 벡터 방식의 애니메이션으로 사이즈가 작으며 사용자 상호작용까지 지원 • Flash 애니메이션을 만들기 위한 프로그램: Macromedia Flash • 웹 브라우저에서 Flash 애니메이션을 보기 위해서는 Flash 플러그인을 설치해야함 • <EMBED>태그를 써서 HTML문서에 삽입 28 9장 멀티미디어를 활용한 웹 페이지의 저작 (3) Dynamic HTML과 JavaScript Dynamic HTML • 기존의 정적인 HTML에 동적인 요소를 추가하기 위하여 개발된 것 • 문서의 각 요소를 객체로 정의하여 위치, 스타일, 상호작용 지정 가능 • 자바스크립트를 기반으로 하여 빠르고 편리함 Dynamic HTML을 이용한 애니메이션의 예 • Dynamic HTML의 Layer을 적용하여 바다 속 풍경 내의 객체들을 레 이어로 정의하고 그 레이어의 속성을 제어하여 바다속에서 움직이는 물고기를 표현할 수 있다. 29 9장 멀티미디어를 활용한 웹 페이지의 저작 (4) Java Applet • 웹에서 사용되는 자바 어플리케이션 • JavaScript나 Dynamic HTML에 비해 느리고 어려우나 높은 수준의 상호작용성과 인터페이스 제공 • 필요한 HTML 태그 • <APPLET>: 자바 애플릿을 삽입할 때 쓰임 • <PARAM>: 삽입된 애플릿에 정보를 전달할 때 쓰임 30 9장 멀티미디어를 활용한 웹 페이지의 저작 9.5 사운드와 비디오의 활용 9.5.1 웹에서 지원하는 사운드와 비디오 파일 (1) 사운드 파일의 종류 Wave 파일 • 윈도우에서 기본적으로 지원하는 파일 형식이므로 별도의 플러그인 없이 사용할 수 있다. • 파일이 크기 때문에 길이가 짧은 음악이나 음향 효과에 주로 사용한다. 31 9장 멀티미디어를 활용한 웹 페이지의 저작 Real Audio 파일 • Real Audio 플러그인을 설치하면 들을 수 있다. • 실시간 전송이 가능하다. 즉 다운로드와 동시에 음악을 들을 수 있다. • 파일 크기가 Wave 파일의 1/10 정도로 작기 때문에 대부분의 온라인 음악 사이트에서 이 파일 형식을 사용하지만 음질이 별로 좋지 못하다. MIDI 파일 • 퀵 타임 플러그인이나 미디어 플레이어 플러그인을 설치하면 들을 수 있다. 32 9장 멀티미디어를 활용한 웹 페이지의 저작 (2) 비디오 AVI 파일 • Wave 파일과 마찬가지로 윈도우에서 기본적으로 지원하는 형식이므 로 별도의 플러그인 없이 사용할 수 있다. Real Video • 사운드만 지원하던 Real Audio에 비디오 기능을 추가한 것. • Real Audio와 마찬가지로 실시간 전송이 가능하며, 음악 사이트의 뮤 직 비디오나 실시간 방송에 사용한다. MOV 파일 • 매킨토시 전용인 퀵타임이라는 동영상 프로그램의 파일 형식 • 현재는 윈도우에서도 사용 가능 MPEG 파일 • MPEG 압축 기술을 이용해 동영상을 압축시킨 파일 • 퀵 타임 플러그인이나 미디어 플레이어 플러그인을 설치하면 들을 수 있다. 33 9장 멀티미디어를 활용한 웹 페이지의 저작 9.5.2 사운드와 비디오를 활용한 웹 사이트 (1) 사운드를 제공하는 웹 사이트 • 팝 가수의 홈페이지: 여러 앨범의 가사와 함께 노래를 Wave, Real Audio, MIDI로 제공 (2) 비디오를 제공하는 웹 사이트 • TV 프로그램의 예고편을 보여주는 사이트 34 9장 멀티미디어를 활용한 웹 페이지의 저작 9.5.3 사운드와 비디오의 삽입 웹 페이지에 사운드와 비디오를 추가하는 방법에는 크게 두가지가 있다. <EMBED> 태그를 사용하여 문서 내에 포함시키는 방법 • <EMBED>태그의 기본 형식 • <EMBED src="사운드 또는 비디오 파일의 URL" > • <EMBED>태그는 파일의 종류에 관계없이 사용한다. 35 9장 멀티미디어를 활용한 웹 페이지의 저작 • <EMBED>태그 안에 사운드 또는 비디오의 콘트롤의 크기 등의 속성 을 추가할 수 있다. • 콘트롤의 크기 : width=픽셀 수, height=픽셀 수 • 반복 재생하기 : loop = true 또는 false • 자동 시작 : autostart = true 또는 false • 콘트롤 숨기기 : hidden = true 또는 false 비디오, 사운드 파일을 하이퍼링크로 연결해 클릭하여 보거나 듣는 방법 • <A> 태그를 사용 (일반적인 하이퍼링크와 동일) • <A href=“사운드 또는 비디오 파일의 URL”> … </A> 36 9장 멀티미디어를 활용한 웹 페이지의 저작 9.6 고급 웹 기술의 활용 9.6.1 CGI의 활용 사용자로부터 입력받은 정보를 서버의 데이터베이스에 저장하거 나 더 나아가 사용자가 원하는 정보만을 보여 줄 수도 있다. CGI의 작동 과정 • 사용자가 클라이언트의 웹 브라우저를 통해 정보를 입력 • 서버는 입력된 정보를 CGI 응용 프로그램에 전달 • 프로그램은 파일 시스템이나 데이터베이스에 접근하여 이 정보를 처 리하고 그 결과를 서버를 통해 사용자의 브라우저로 전달 • 사용자의 웹 브라우저는 전송받은 결과를 사용자에게 HTML 문서로 보여줌 37 9장 멀티미디어를 활용한 웹 페이지의 저작 CGI의 작동 원리 <FORM>: HTML에서 CGI 프로그램으로 데이터를 전달하는 데 에 쓰이는 태그 <INPUT>: <FORM>태그 안에서 입력 양식을 지정하기 위해 쓰이 는 태그 38 9장 멀티미디어를 활용한 웹 페이지의 저작 최근 CGI 프로그램을 무료 로 제공하는 사이트가 증가 카운터, 방명록 등 무료 CGI 프로그램을 제공하는 사이트 • Korea Famous CGI Server: http://www.cgiserver.net • 링코: http://www.linko.com • 넷토픽: http://anu.andong.ac.kr/~k aen/bbs • 프리보드: http://www.bbs4u.com FORM등 입력 태그를 사용한 예 39 9장 멀티미디어를 활용한 웹 페이지의 저작 9.6.2 JavaScript와 Dynamic HTML 동적 HTML • 기존 HTML의 단점을 개선해 동적인 웹 페이지를 만들수 있도록 하기 위한 기술 • 브라우저에서 실행되어 서버의 부담이 적고, CGI나 Java에 비해 간단하면서도 비슷한 수준의 기능 제공 • CSS(Cascading Style Sheet)를 통해 웹 페이지의 구성요소를 자유롭게 배치 • 브라우저 간에 표준이 정립되지 않은것 이 문제점 40 9장 멀티미디어를 활용한 웹 페이지의 저작 (1) 자바스크립트 • 동적인 웹 페이지와 상호작용을 지원하기 위하여 개발됨 • 동적 HTML의 객체들을 제어하는 데에 필수적으로 사용됨 (2) 스타일 시트의 활용 • 스타일 시트의 삽입 • <HEAD>와 </HEAD>사이에 <STYLE>태그와 </STYLE>을 넣고 그 안에 스타일 정보를 넣음 • 외부 스타일 시트 파일(.css)을 링크 (3) 레이어의 활용 • 레이어 : 동적 HTML의 핵심 • 문서 내 여러곳에 자유롭게 배치가 가능한 웹 페이지의 구성요소 • 애니메이션에서 쓰이는 투명 셀룰로이드(셀)와 같은 원리 • 구성 요소의 자유로운 위치 지정 • 자바스크립트를 이용하여 레이어의 속성 수정 가능 41 9장 멀티미디어를 활용한 웹 페이지의 저작 9.6.3 자바의 활용 (1) 자바의 역사 • 1991년 Sun Microsystems사의 제임스 고슬링이 가전제품에서 사용될 수 있는 단순하고 버그 없는 언어 제작을 목적으로 프로젝트 시작 • 이를 위해 특정한 컴퓨터 칩에 의존하지 않는 언어인 '자바'를 구상 • 1993년 월드와이드 웹 발표 후 인터넷과 같은 분산환경에서는 자바와 같이 하드웨어 독립적인 언어가 이상적인 프로그래밍 수단임을 많은 사람들이 인식 • Netscape 2.0에 자바 기술이 포함된 이후 인터넷 환경에서 가장 각광받 는 프로그래밍 언어로 부상 (2) 자바의 활용 분야 • • • • 웹, 네트워크, 멀티미디어 분야 인트라넷 분야 주식, 증권 분야 42 인터넷 제어(Control) 9장 멀티미디어를 활용한 웹 페이지의 저작 (3) 자바의 컴파일과 실행 환경 • 자바 프로그램 개발 환경은 컴파일과 실행환경으로 구성 • 자바 소스 코드(.java)를 만들고, 이를 바이트코드(.class)로 컴파일 • 생성된 바이트코드는 자신의 컴퓨터에서 자체적으로 이용되거나 네트 워크를 통해 다른 곳으로 전송 • 자바 가상 기계가 바이트코드의 명령을 해석하여 실행 43 9장 멀티미디어를 활용한 웹 페이지의 저작 (4) 자바 애플릿 • 인터넷 브라우저 상에서 실행되는 자바 어플리케이션 • HTML로만 구성된 정적 웹페이지에 동적 효과와 여러가지 특수효과 를 지원 • 미리 만들어져 있는 자바 애플릿 클래스 화일을 다운로드받아 쉽게 사 용 가능 • 자바 애플릿을 다운로드받을 수 있는 웹사이트 • http://java.sun.com : 자바를 개발한 Sun사의 홈페이지 • http://www.gamelan.com : 자바 어플리케이션 개발자를 위한 웹 사 이트 • http://www.javaboutique.com : 다양한 자바 애플릿이 종류별로 잘 정리되어 있는 곳 44 9장 멀티미디어를 활용한 웹 페이지의 저작 (5) 자바 애플릿과 JavaScript의 차이점 (6) 자바 애플릿을 사용하는 이유 • 자바 애플릿은 브라우저에 대해서 독립적 • 프로그래밍에 대한 지식 없이도 쉽게 미리 만들어진 애플릿을 가져와 이용할 수 있음 • JavaScript와 Dynamic HTML 보다 높은 수준의 상호작용성을 지원 45 9장 멀티미디어를 활용한 웹 페이지의 저작 9.7 멀티미디어 문서의 표준 9.7.1 기존 전자문서의 문제점과 표준 기존 전자 문서의 문제점 • 특정 응용 프로그램으로 작성되어 있어 서로 다른 프로그램에서 작성 된 문서와 호환이 되지 않음 • 문서를 작성한 응용 프로그램의 새로운 버전이 나오면, 기존의 문서도 새로운 버전에 맞게 변환되어야 함 • 파일 형식이 시스템에 의존적이므로 서로 다른 기종의 컴퓨터 간에 파 일을 주고 받을 수 없음 • 응용 프로그램과 시스템으로부터 독립적인 문서의 필요성이 대두되었 고, 이러한 요구에 따 라 ISO(International Standard Organization:국 제 표준화 기구)에서 문서의 논리적 구조에 관한 표준인 SGML(Standard Generalized Markup Language, ISO 8879, 1986년) 표준을 제정 46 9장 멀티미디어를 활용한 웹 페이지의 저작 마크업 언어 • 절차적 마크업 (Procedural Markup) • 일반적으로 문서의 외형을 지정해 주는 데 사용 • 예 : 이 글자의 크기는 12 포인트로 하고, 글자체는 명조체를 사용 하라는 식으로 설명을 덧붙이는 것 • Word Processor나 Unix에서 사용하는 마크업 언어인 nroff, troff 등 에 이용되는데, 이 형식을 사용한 파일은 특정 프로그램에서만 사용할 수 있어 서로 다른 시스템간의 호환이 어려움 • 구조적 마크업 (Descriptive Markup) • 문서의 외형을 하나하나 지정해 주는 것이 아니라 문서의 논리적 인 구조만을 기술하는 것 • 예 : 책을 쓰고자 한다면 장(chapter)의 제목, 절(section)의 제목, 문 단, 꼬리말과 같이 문장의 속성만을 지정해 주는 형식 • 문서의 구조와 형식이 분리되며, 특정 프로그램에 종속적이지 않 으므로 다른 시스템 간에도 호환이 쉬움 47 9장 멀티미디어를 활용한 웹 페이지의 저작 절차적 마크업과 구조적 마크업 48 9장 멀티미디어를 활용한 웹 페이지의 저작 9.7.2 SGML (Standard Generalized Markup Language) SGML이란? • SGML은 문서의 논리적 구조를 기술하기 위한 마크업 언어를 정의하 기 위한 언어의 표준으로, 구조적 마크업을 생성하는 기법을 제공하 며, 문서의 내용이나 구조를 정의하기 위한 언어 • SGML은 그 자체가 마크업 언어가 아니라 마크업 언어를 정의하기 위한 메타 언어 • SGML은 처리 방법에 대한 표준이 아니라 논리적인 정보만을 제공하 므로 포맷 정보를 제공하지 않음 49 9장 멀티미디어를 활용한 웹 페이지의 저작 문서의 구조 50 9장 멀티미디어를 활용한 웹 페이지의 저작 SGML 문서의 구조 • SGML 문서는 마크업 된 데이터와 SGML 선언부, DTD(Document Type Definition)로 구성 • SGML 선언부 • 문서에서 사용하는 문자와 문서에 사용할 수 있는 SGML의 기능 의 범위 등을 선언. 일반적으로는 생략하여 기본값을 이용 • DTD(Document Type Definition) • 문서의 논리 구조를 정의 (사용할 태그의 종류, 태그간의 관계 및 속성을 정의) • 간단한 메모나 편지에서부터 논문, 책에 이르기까지 문서의 종류 에 따라서 무한히 많이 만들어 낼 수 있음 • DI(Document Instance) • 실질적인 문서의 내용과 마크업이 들어가는 부분 • 마크업은 DTD 부분에서 정의된 형식을 따르므로, DI는 DTD에 의해 만들어진 문서라 할 수 51 있음 9장 멀티미디어를 활용한 웹 페이지의 저작 DTD와 DI의 관계 52 9장 멀티미디어를 활용한 웹 페이지의 저작 9.7.3 SGML 문서의 활용 전자출판, 전자도서관 • 지금까지 만들어진 문서 즉, 인쇄물이나 출판물과 같은 정보나 비 SGML 형식의 전자적으로 저장된 정보를 SGML 정보로 자동 변환하 여 전자 도서관 또는 디지털 라이브러리 에서 새로운 정보 서비스를 위 해 활용 자동차 및 항공 분야 • 자동차나 항공기의 매뉴얼에 IETM(Interactive Electronic Technical Manual) 방식을 이용하여 매체의 종류나 저장된 장소에 관계없이 즉 각적으로 보거나 들을 수 있는 시스템을 구현 53 9장 멀티미디어를 활용한 웹 페이지의 저작 멀티미디어/하이퍼미디어 • SGML 표기법을 이용한 SGML의 한 응용으로 HyTime(Hypermedia Time-based Structuring Language)이 있는데 이는 멀티미디어/하이퍼 미디어 정보 교환이나 상호 운용성을 위해 활용 데이터베이스 • 정보를 SGML 문서로 하여 데이터베이스화 함에 따라 문서의 구조 정 보를 이용하여 검색함으로써 빠른 검색 등의 장점을 많이 가지므로 SGML은 데이터베이스 영역에서도 널리 활용 기타 • CALS(Commerce At Light Speed)에서 교환되는 문서 형식을 SGML 로 채용하여 사용 54 9장 멀티미디어를 활용한 웹 페이지의 저작 9.7.4 XML (Extensible Markup Language) XML이란? • XML은 의 WWW에서 SGML을 보다 간단하고, 효율적으로 사용하기 위해 고안된 것 • XML은 SGML의 기능 중 기본적인 것만을 제공하고, 불필요한 옵션 을 없애서 간단하게 만든 것 • 공식 XML 스펙 : "XML은 아주 쉽고 간단한 SGML의 방언(dialect)이 며, XML의 목적은 포괄적인 SGML을 현재의 HTML처럼 웹 상에서 서비스하고, 수용, 처리하는 것이다." • 현재는 HTML문서가 웹 문서의 주종을 이루고 있으나, 문서의 구조를 잘 나타내 주지 못한다는 한계점 때문에 다양한 문서의 구조를 나타낼 수 있는 XML이 등장 55 9장 멀티미디어를 활용한 웹 페이지의 저작 SGML, XML, HTML의 관계 • SGML • 장점 : 유연성이 크고 시스템이나 플랫폼에 독립적으로 운용 • 단점 : 복잡하여 시스템을 개발하기 어려움. • HTML • 장점 : 이식성이 뛰어나고 사용이 편리하며, 웹상에서 빠르게 정 보를 제공 • 단점 : 고정된 태그 집합만을 사용하고, SGML처럼 복잡한 구조 를 갖는 문서를 작성 할 수가 없다. 56 9장 멀티미디어를 활용한 웹 페이지의 저작 • XML • SGML에서의 복잡성을 제거하고, HTML의 고정된 태그를 벗어 나 사용자가 문서 구조를 정의하여 사용할 수 있는 언어 • SGML과 HTML의 단점들을 상호 보완하여 중간자적 입장에서 개발한 문서 기술 언어 • XML은 SGML의 복잡한 특성을 제한하지만 웹상에서의 정보를 제공 할 수 있으며 DTD를 사용자가 정의할 수 있고 다양한 링크 유형을 제공하는 장점을 가짐 • SGML, HTML, XML의 미래 • 각각의 특성과 주력하는 응용분야에 차이가 있음 • 한가지가 다른 것들을 대체하는 형태 보다는 상호보완적 관계에 서 발전해 나갈 것으로 예측 57