10 장 멀티미디어 기술을 활용한 웹 페이지

10 장 멀티미디어 기술을활용한 웹 페이지

2

1010 장 멀티미디어 기술을 활용한 웹 페이지장 멀티미디어 기술을 활용한 웹 페이지

10.1 멀티미디어와 웹 페이지 멀티미디어란 ?

• Multimedia = multiple( 다수 ) + media( 매체 ) 의 합성어 • 미디어 : 인간 상호간의 지식과 감정이나 의사를 전달하는 수단 .

숫자 , 문자 , 소리 , 음악 , 그래픽 , 애니메이션 , 비디오 등이 포함 • 문자로 정보를 전달하거나 소리만으로 정보를 전달하는 것과 같이 한 가지 매체를 통해 정보를 전달하는 것이 아니라 두 가지 이상의 매체를 이용하는 것 • 즉 , 과거 숫자와 문자 위주의 컴퓨터 데이터를 벗어나 소리 , 음악 , 정지화상

(image, graphic), 동화상 (animation, video) 과 같은 여러 형태의 정보를 컴퓨터를 이용하여 획득 , 처리 , 통합 , 조정 및 표현하는 개념을 담고 있다 . • 상호작용이 중요한 요소

3


WWW 에서 멀티미디어의 중요성• 멀티미디어 소프트웨어의 발전방향

• 네트워크형 소프트웨어의 개발 요구 증가 • 정보통신망상에서의 멀티미디어 서비스 지원 기술에 대한 개발 요구

증가 • 앞으로 정보통신과 멀티미디어 기술의 발전을 통해 사용자가 인터넷을

통한 새로운 가상의 정보공간에서 다양한 서비스를 제공받을 수 있을 것임 . • WWW 은 멀티미디어 문서를 하이퍼텍스트 개념을 이용하여 편리한

방법으로 전송하고 검색할 수 있게 해줌 . 멀티미디어 데이터의 종류

• 문자 • 이미지 / 그래픽 사운드 •• 애니메이션 비디오 •

4


멀티미디어의 활용 효과• 인간이 정보를 취득함에 있어 보는 것의 10%, 듣는 것의 20%,

보고 듣는 것의 50%, 보고 듣고 실습하는 것 ( 상호작용형 멀티미디어 ) 의 80% 를 기억

• 다양하고 방대한 지식 , 정보 , 사실 등을 효과적으로 제공 • 멀티미디어를 활용함으로써 흥미 유발

멀티미디어를 바탕으로 하는 대표적인 인터넷 활용 분야 • 인터넷신문 , 인터넷잡지 (Webzine) • 인터넷 쇼핑 , 광고 , 홍보 • 인터넷 방송 , VOD • 인터넷 폰 , 채팅 , 게임

5


멀티미디어 사용의 문제점• 파일의 크기가 크다 => 전송 속도 , 저장 공간의 문제 • 멀티미디어 데이터 생성에 많은 시간과 노력 필요

멀티미디어 데이터의 크기 비교

멀티미디어 활용의 원칙• 현재의 네트워크 환경을 고려하여 너무 많은 멀티미디어 데이터를 웹

페이지에 사용하지 않도록 하고 , 가능하면 압축된 파일 형식 사용

멀티미디어 데이터의 종류 크기700 페이지 분량의 문자 1MB셰익스피어의 작품 전체 5MB

3~4 일 정도의 신문 5MB압축되지 않은 GIF 이미지 하나 0.5MB

압축된 GIF 이미지 하나 0.1MB13 초 영화 4MB 이상

6


10.2 이미지와 그래픽의 활용10.2.1 이미지와 그래픽의 정의와 생성

그래픽과 이미지의 예

그래픽 이미지 그래픽과 이미지의 합성

7


그래픽• 소프트웨어를 사용하여 사람이 컴퓨터상에서 직접 그려 내는 것 • 점 , 직선 , 곡선 , 원 , 다각형 등과 같은 기하학적 형태를 조합하여

생성 이미지

• 디지털 카메라 (Digital Camera) 등을 이용하여 현실세계의 이미지를 사진으로 촬영한 것

• 사진이나 그림을 스캐너를 이용하여 컴퓨터가 디지털 형태로 받아들인 것

8


스캐너를 이용한 이미지의 생성• 문서나 그림 , 필름 등을 컴퓨터가 인식할 수 있는 디지털 데이터로

변환하는 입력 장치 • 스캐닝할 이미지에 빛을 비춘 다음 반사되어 돌아오는 빛의 강도를

디지털 신호로 바꾸어 컴퓨터에 전달 • 스캐너를 이용한 이미지의 생성 과정

9


디지털 카메라를 이용한 이미지의 생성• 필름에 화상을 담는 기존의 카메라와는 달리 저장 메모리 (flash RA

M) 라는 매체에 이미지를 저장 . 즉 , 컴퓨터의 하드 디스크와 같은 메모리에 이미지 파일로 저장

• 촬영직후 컴퓨터 등을 통해 바로 이미지를 볼 수 있다 . • 필름이 필요 없다 .

디지털 카메라를 이용한 이미지의 생성 과정

10


10.2.2 이미지와 그래픽 파일의 형식 - GIF 와 JPEG GIF 형식

• Graphics Interchange Format 의 약자 • 컴퓨서브사에서 자체적인 온라인 서비스를 하기 위해 개발한 파일

형식 • 256 가지 이하의 색만을 사용

JPEG 형식 • Joint Photographer Expert Group( 사진가 전문 그룹 ) 의 약자 • 사진을 효과적으로 압축하기 위해 만들어 낸 파일 형식 • 자연에서 색이 급격히 변하는 경우는 드물다는 사실에 착안하여

파일 크기를 압축하면서도 최대 1600 만 색을 표현

11


그림의 종류에 따른 파일 크기 비교

단색 위주의 그림과 색의 변화가 많은 그림

그림의 종류에 따른 파일 크기 ( 단위 KB)

12


이미지 또는 그래픽 파일 형식의 선택• 수평선을 따라서 동일한 색이 반복될 때는 GIF 파일의 압축률이

높으므로 일러스트레이션으로 제작된 그래픽 파일의 경우에는 GIF 파일을 사용

• 미묘한 색의 변화가 많은 이미지의 경우에는 JPEG 파일을 사용 실제 그래픽과 이미지를 GIF, JPEG 으로 저장해 본 결과 파일

크기 GIF JPEG

그래픽의 경우

9 KB 16 KB

이미지의 경우

54 KB 19 KB

13


GIF 와 JPEG 의 화질 (quality) 비교

(a) GIF 로 저장 (b) JPEG 으로 저장

14


투명 GIF (Transparent GIF) • GIF 파일에서 256 색 중 하나를 투명색으로 지정할 수 있음 • 투명하지 않은 그림과 투명한 그림 비교

15


인터레이스드 GIF(Interlaced GIF) • 대략적인 모습을 먼저 보여 주고

점차 자세한 모습을 보여주는 것 • 이미지의 크기가 너무 커

다운로드에 시간이 걸릴 경우 사용 • 인터레이스드 GIF 의 예

16


디더링• GIF 파일의 256 가지 색에 포함되지 않은 색을 표현하기 위해 256 색에 포함된 두 개 이상의 색을 이웃하여 배치함으로써 멀리에서 보았을 때 원래의 색처럼 보이도록 하는 기법

• 디더링의 예

(a) 원본 이미지 (b) 디더링하지 않은 이미지 (c) 디더링한 이미지

17


10.2.3 이미지의 처리 기법 이미지 잘라내기 (Cropping)

• 그래픽 파일이 너무 큰 경우 , 또는 불필요한 영역이 많은 경우 • 영역 선택 툴을 이용해 필요한 영역만을 남기고 나머지를 잘라냄 . • 한번에 잘라 내기 보다는 일단 불필요한 부분을 제거한 후 그래픽의

크기와 모양을 고려하여 남길 영역을 선택

18


이미지의 필터링 • 이미지 에디터가 제공하는 기능으로 특정한 효과를 낼 수 있도록

이미지를 변형하는 기능• 필터링의 대표적인 예

원본 이미지 파스텔 효과 텍스쳐 효과

렌즈 플레어 효과 모션 블러 효과 왜곡 효과

19


10.2.4 이미지와 그래픽의 활용 이미지와 그래픽의 활용

• 내용과 관련된 이미지나 그래픽을 넣음으로써 웹 페이지의 디자인을 돋보이게 할 수 있다 . • 웹 페이지의 내용을 반영한 로고

20


아이콘 • 별도의 설명 없이 모양 자체로 의미를 전달 • 의미가 잘 전달 될 수 있는 이미지나 그래픽을 선택 • 예 : 돋보기 => 검색 , 편지봉투 => E-mail, 물음표 => 도움말

내용을 잘 나타내는 이미지를 사용한 아이콘 의미가 명확하지 못한 아이콘

21


일반 문자와 그래픽 문자• 일반 문자

• 일반적으로 사용하는 문자열 텍스트 • 제목에는 <H1>,<H2>,...<H6> 등의 태그 사용 • <FONT> 태그를 이용해 글자의 크기와 색 지정

• 그래픽 문자• 이미지로 만들어진 텍스트 • Paint Shop Pro, PhotoShop 등의 프로그램에서 만들어 GIF 나 JPEG 파일로 저장 • 어디에서나 동일하게 보이므로 특이한 글자체를 자유롭게 사용 가능 • 다른 문자에 비해 두드러져 보임 • 전송에 시간이 걸리는 것이 단점

22


일반 문자와 그래픽 문자의 비교

(a) 글자체를 가지고 있는 경우 (b) 글자체를 가지고 있지 않은 경우

23


10.3 사운드의 활용10.3.1 사운드의 개요 사운드의 종류

• 디지털 오디오 (Digital Audio) • 실세계의 소리를 컴퓨터에서 저장할 수 있는 형태로 바꾸는

디지털화 작업을 거친 것 • 미디 (MIDI)

• 전자 악기와 다른 기계 ( 컴퓨터등 ) 간에 정보를 주고 받기위해 만든 통신 규약

• 실제 소리는 갖지 않고 악기의 연주 방법에 대한 정보를 가짐 • 디지털 오디오 파일에 비해 크기가 작음 . • 사운드 카드가 좋지 못하면 좋은 음질을 얻을 수 없다 . • 사람의 목소리는 표현할 수 없다 .

24


디지털 오디오의 파일 형식• Wave 파일

• 확장자 wav • 별도의 플러그인 없이 사용 가능 • 파일 크기가 커 길이가 짧은 음악이나 짧은 음성 , 음향 효과에

주로 사용 • MP3 파일

• 확장자 mp3 • 비디오 압축에 사용되는 MPEG 압축 방식에서 사운드와 관련된 부분인 Layer 3 의 압축 방식을 사용한 것

• Wave 파일을 1/10 정도로 압축하면서도 음질의 저하를 거의 느낄 수 없을 정도로 훌륭한 음질을 제공

• 저작권 문제 때문에 WWW 에서 공개적으로 사용하기 어려움

25


• Real Audio 파일• 확장자 ra 또는 ram • 인터넷상에서 사운드의 실시간 전송을 목적으로 만들어진 것 • Real Audio 플러그인을 설치하면 들을 수 있다 . • 파일 크기가 Wave 파일의 1/10 정도 • WWW 에서 실시간 뉴스 , 온라인 음악 사이트 등에 널리 사용

미디 파일 형식• 미디 파일

• 확장자 mid • 3~4 분 정도의 노래 한 곡이 1~2MB 정도 • QuickTime 플러그인이나 미디어 플레이어 플러그인을 설치하면 들을 수 있다 .

26


10.3.2 사운드의 생성 및 처리(1) 사운드의 생성 - CD 로부터 음악 녹음하기 사운드의 생성

• 컴퓨터에 오디오를 연결해 CD 나 테이프 , 라디오의 소리를 컴퓨터에 녹음하거나 , 마이크를 컴퓨터에 연결해 목소리를 녹음해 사운드를 생성 • 컴퓨터 자체에서 나는 소리는 별도의 기기를 연결하지 않고서도 녹음 가능

27


[ 실습 ] 윈도우의 녹음기를 이용해 CD 로부터 음악 녹음하기 1. [ 시작 ]=> [ 프로그램 ]=> [ 보조 프로그램 ]=> [엔터테인먼트 ]=> [녹음기 ] 순서로 선택하여 녹음기 실행 .

2. 컴퓨터의 CD-ROM 에 음악 CD 를 넣고 음악을 실행시킬 준비를 한다 . 3. 녹음기의 버튼을 눌러 녹음 시작 4. 녹음할 음악 CD 를 재생 .5. 음악이 끝나면 버튼을 눌러 녹음을 종료6. [ 파일 ]=> [ 저장 ] 을 선택하여 song1.wav 로 저장

28


(2) 사운드의 처리 - 사운드의 앞부분과 뒷부분 잘라내기

사운드의 처리 • 녹음한 사운드를 그냥 사용하지 않고 사운드를 잘라 내거나 두 개의

사운드 붙이기 같은 편집 , 또는 잡음을 제거하거나 목소리를 변조 하는 등의 처리 과정을 거친다 .

• 사운드의 처리에 가장 널리 쓰이는 프로그램은 CoolEdit Pro • Shareware CoolEdit96 다운로드 http://www.syntrillium.com/cool

edit/index.html • 윈도우의 녹음기에서도 간단한 편집 기능 제공

29


[ 실습 ] 윈도우의 녹음기에서 사운드 파일의 앞부분과 뒷부분 잘라 내기1. [ 시작 ]=> [ 프로그램 ]=> [ 보조 프로그램 ]=> [엔터테인먼트 ]=> [녹음기 ] 순서로 선택하여 녹음기 실행

2. [ 파일 ] => [열기 ] 메뉴를 선택하여 song1.wav 파일을 불러온다 3. 불러온 음악을 재생해 본다 . 4. 끝부분 잘라내기

녹음기의 슬라이드 콘트롤을 26 초 정도에 위치시키고 [ 편집 ] => [ 현재 위치 뒷부분 삭제 ] 선택 그 다음으로 나타나는 대화상자에서 '확인 ' 선택

30


5. 앞부분 잘라내기

녹음기의 슬라이드 콘트롤을 2.5 초 정도에 위치시키고 [ 편집 ] => [ 현재 위치 앞부분 삭제 ] 를 선택하고

다음으로 나타나는 대화상자에서 '확인 ' 선택 6. [ 파일 ] => [ 다른 이름으로 저장 ] 을 선택해 song2.wav 로 저장

31


10.4 애니메이션과 비디오10.4.1 애니메이션과 비디오의 개요 애니메이션

• 사람이 컴퓨터를 이용해 만든 움직이는 그림 • 카메라를 사용하지 않고 사람이 일일이 그린 그림을 연속적으로 보여 줌으로써 영화와 같은 효과를 줌 . • 1 초에 25~30 장 정도의 그림을 연속해 보여 주면 부드럽게 움직이는 것처럼 느껴짐

비디오 • 사람이 실세계를 찍은 것 • 디지털 비디오로 직접 찍거나 TV, 비디오 테이프로부터 녹화

32


비디오 파일의 종류• AVI 파일 (확장자 avi)

• 윈도우에서 기본적으로 지원하는 형식 • 별도의 플러그인 없이 사용 가능

• MOV 파일 (확장자 mov)• 본래 매킨토시 운영체제에서 기본적으로 지원하는 형식 • 윈도우에서도 QuickTime 플러그인을 설치하면 볼 수 있다 .

• MPEG 파일 (확장자 mpg)• MPEG 압축 기술을 이용해 동영상을 압축시킨 파일 • QuickTime 플러그인이나 미디어 플레이어 플러그인을 설치

• Real Video (확장자 ra, ram, 또는 rm)• 사운드만을 지원하던 Real Audio 에 비디오 기능을 추가한 것 • 파일 크기가 작고 전송 속도는 빨라 실시간 전송이 가능

33


애니메이션 파일의 종류 • Animated GIF

• 확장자 gif • 여러 장의 GIF 파일을 반복해 보여 주는 방법 이용

=> 사람이 달려가는 모양

• 별도의 플러그인 없이 사용이 가능하므로 널리 이용• Shockwave 파일

• 확장자 swf • Macromedia 사의 Flash 로 만든 파일 • 복잡한 애니메이션을 구현하는 데에 적합 • Shockwave 플러그 인 필요

34


10.4.2 애니메이션과 비디오의 생성 및 처리 비디오의 생성 및 처리

• TV 나 비디오 테이프로부터 녹화하거나 디지털 비디오 카메라 이용 • 비디오 편집에는 Adobe 사의 'Premiere' 라는 소프트웨어를 가장 널리

사용 • Premiere 는 정지 이미지로부터 동화상을 만들거나 , 동화상을 정지

이미지로 만드는 기초적인 기능에서부터 필터를 활용하여 다양한 효과를 내는 등의 기능을 가지고 있다 .

애니메이션의 생성• Shockwave 애니메이션은 Macromedia 사의 Flash 이용 • Animated GIF : 다양한 종류의 GIF Animator 프로그램이 있음 .

• Ulead 사의 GIF Animator 가 대표적쉐어웨어 다운로드 http://www.webutilities.com/gale/gale_main.htm

35


[ 실습 ] 여러 장의 이미지로부터 하나의 Animated GIF 만들기 1. 애니메이션으로 만들 이미지 준비

( 그림 네 장이 모두 비슷해 보이지만 자세히 살펴 보면 눈 , 입 , 지느러미의 모양이 조금씩 바뀌고 물방울의 위치도 바뀌어 그림 네 장을 빠른 속도로 차례로 보여 주면 물고기가 지느러미를 흔들며 물방울을 내뿜는 것처럼 보인다 . )

36


2. Ulead GIF Animator 를 실행 . 프로그램을 실행하면 Ulead GIF Animator에 대한 소개와 함께 프로그램 구입 방법을 소개하는 대화상자가 뜬다 .

3. 대화상자의 [OK] 버튼을 클릭4. 'Startup Wizard' 대화상자에서 [Blank animation] 을 선택

37


5. [Blank Animation] 을 선택하면 다음과 같은 화면이 나온다 .이제 [Layer] 메뉴에서 [Add Images] 선택

38


6. ' 위치 ' 항목에서 GIF 이미지들이 들어 있는 디렉토리로 이동하고 ' 파일 이름 ' 에 '*.gif' 라고 입력한 후 '열기 ' 버튼을 누른다 .

7. GIF 파일의 리스트가 나타나면 여기에서 fish1.gif 를 선택하고'열기 ' 버튼을 누른다 .

8. 'Delay' 를 25 로 지정한다 .

39


9. 5~8 의 과정을 반복하여 같은 방법으로 fish2.gif, fish3.gif, fish4.gif 를삽입한다 . 삽입된 파일의 리스트는 왼쪽 아래 창에 나타난다 .

10. 'Start Preview' 버튼을 눌러 만들어진 애니메이션을 실제로 본다 . 11. [File] 메뉴의 [Save] 를 선택해 파일 이름을 'ani_fish.gif' 라고 붙이고

' 저장 ' 버튼을 누른다 .

40


10.5 멀티미디어를 활용한 웹 페이지 저작의 실제 10.5.1 웹 페이지에 멀티미디어 데이터 삽입하기

<EMBED> 태그• 웹 페이지 내에 사운드 또는 비디오를 추가하기 위한 태그 • 기본 형식

• <EMBED SRC=" 사운드 또는 비디오 파일의 URL"> • 사운드나 비디오 파일의 종류에 관계없이 사용 가능 • <EMBED> 태그의 속성

• WIDTH = 숫자 , HEIGHT = 숫자 : 콘트롤의 크기 조절 • AUTOSTART = TRUE 또는 FALSE : 자동 시작 • LOOP = TRUE 또는 FALSE : 반복 재생

41


[ 시연 ] 사운드의 삽입 <html><head> <title> Wave 파일의 삽입 </title> </head><body><p> 인사 <br><embed src=" data/hello.wav"> </p>

<p>벨소리 <br><embed width="150" height="30" autostart="false" loop="true" src="data/ding.wav"> </p></body> </html>

42


[ 시연 ] 비디오의 삽입 <html><head><title> avi 파일의 삽입 </title></head><body><p>마이클 조던의 덩크슛 장면 <br><embed width="200" height="150" autostart="true" src="data/sports.avi"></p></body></html>

43


10.5.2 멀티미디어를 활용한 웹 페이지 저작하기 멀티미디어 웹 페이지의 실 예

44


[ 실습 ] PhotoShop 을 이용한 이미지와 그래픽의 편집 (1) 외곽선 문자 만들기

1. [File]=>[New] 를 선택해 가로 200 pixel, 세로 30 pixel 크기의 새로운 캔버스를 만든다 .

2. Type Tool 을 왼쪽 마우스 버튼으로 누르고 있으면 숨겨져 있던 도구가 나타난다 . 여기에서 을 선택한다 .

3. 마우스를 캔버스에 클릭하면 대화상자가 뜬다 . 여기에 From 'The Little Mermaid' 라고 쓰고 'OK' 버튼을 누른다 .

45


4. 3.까지 작업하면 다음과 같이 점선으로 글씨가 써진다 .

5. 전경을 남색 , 배경을 흰색으로 선택하고 [Edit] => [Fill] 메뉴를 선택하여 대화상자에서 Foreground Color 를

선택하고 'OK' 버튼을 누른다 . [Edit] => [Stroke] 을 선택하여 대화상자에서 Width 를 2 pixels 로

지정하고 Location 항목으로 Outside 를 선택한다 .

6. GIF 로 저장하기 위해서 [Image] => [Mode] => [Indexed Color] 로 전환하고 [File] => [Save As...] => title1.gif 로 저장한다 .

46


(2) 글자에 그림자 넣기와 디더링하여 투명 GIF 로 저장하기 1. [File]=>[New] 를 선택해 가로 200 pixel, 세로 30 pixel 크기의

새로운 캔버스를 생성 2. Type Tool 을 선택하고 캔버스에 마우스를 클릭 다음으로 나타나는 대화상자에서 Size 를 40 으로 지정하고 Under The Sea 라고 쓴 후 'OK' 버튼을 클릭

47


3. 그림자 넣기 [Layer]=>[Effect]=>[DropShadow] 를 선택 => 대화상자에서

그림자의 각도 , 진하기 등을 적당히 조절하고 'OK' 버튼을 누르면 그림자 생성

4. [Image] => [Mode] => [Indexed Color] 를 선택 대화상자에서 Dither 를

Diffusion 으로 선택하고'OK' 버튼을 누른다 .

48


[File]=>[Export]=>[GIF89a Export] 를 선택 대화상자가 나타나고 , 커서의 모양이 스포이드 모양 으로 바뀐다 . 스포이드로 배경에 해당하는 색을 클릭하면 배경색이 사라진다 .

6. 'OK' 버튼을 누르면 파일 저장 대화상자가 나타난다 . 여기에서 파일 이름을 title2.gif 로 지정하여 저장

49


(3) 색깔이 서서히 변하도록 그림 잘라내기 1. [File] => [Open] 을 선택해 looking.gif 파일을 불러 들인다 . 2. Select 툴 을 선택하여 그림의 가운데 부분을 선택한다 . 3. [Select]=>[Inverse] 를 선택하면 선택된 영역이 반전된다 .

1. 2. 3.

50


(3) 색깔이 서서히 변하도록 그림 잘라내기 ( 계속 )4. [Select]=>[Feather] 를 선택하여 나타나는 대화상자에서 'Feather Ra

dius' 를 10 pixel 로 지정하고 'OK' 버튼을 누르면 그림의 선택된 영역의 모서리가 둥글게 나타난다 .

5. [Edit]=>[Cut] 을 선택 6. [File]=>[Save] 를 선택해 완성된 그림을 저장

4. 5.

Documents

10 장 멀티미디어 기술을 활용한 웹 페이지