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

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

2. 10.1 멀티미디어와 웹 페이지 • 멀티미디어란? • Multimedia = multiple(다수) + media(매체)의 합성어 • 미디어 : 인간 상호간의 지식과 감정이나 의사를 전달하는 수단.숫자, 문자, 소리, 음악, 그래픽, 애니메이션, 비디오 등이 포함 • 문자로 정보를 전달하거나 소리만으로 정보를 전달하는 것과 같이 한 가지 매체를 통해 정보를 전달하는 것이 아니라 두 가지 이상의 매체를 이용하는 것 • 즉, 과거 숫자와 문자 위주의 컴퓨터 데이터를 벗어나 소리, 음악, 정지화상(image, graphic), 동화상(animation, video)과 같은 여러 형태의 정보를 컴퓨터를 이용하여 획득, 처리, 통합, 조정 및 표현하는 개념을 담고 있다. • 상호작용이 중요한 요소 2

3. WWW에서 멀티미디어의 중요성 • 멀티미디어 소프트웨어의 발전방향 • 네트워크형 소프트웨어의 개발 요구 증가 • 정보통신망상에서의 멀티미디어 서비스 지원 기술에 대한 개발 요구 증가 • 앞으로 정보통신과 멀티미디어 기술의 발전을 통해 사용자가 인터넷을 통한 새로운 가상의 정보공간에서 다양한 서비스를 제공받을 수 있을 것임. • WWW은 멀티미디어 문서를 하이퍼텍스트 개념을 이용하여 편리한 방법으로 전송하고 검색할 수 있게 해줌. • 멀티미디어 데이터의 종류 • 문자 • 이미지/그래픽 • 사운드 • 애니메이션 • 비디오 3

4. 멀티미디어의 활용 효과 • 인간이 정보를 취득함에 있어 보는 것의 10%, 듣는 것의 20%, 보고 듣는 것의 50%, 보고 듣고 실습하는 것(상호작용형 멀티미디어)의 80%를 기억 • 다양하고 방대한 지식, 정보, 사실 등을 효과적으로 제공 • 멀티미디어를 활용함으로써 흥미 유발 • 멀티미디어를 바탕으로 하는 대표적인 인터넷 활용 분야 • 인터넷신문, 인터넷잡지(Webzine) • 인터넷 쇼핑, 광고, 홍보 • 인터넷 방송, VOD • 인터넷 폰, 채팅, 게임 4

5. 멀티미디어 사용의 문제점 • 파일의 크기가 크다 => 전송 속도, 저장 공간의 문제 • 멀티미디어 데이터 생성에 많은 시간과 노력 필요 • 멀티미디어 데이터의 크기 비교 • 멀티미디어 활용의 원칙 • 현재의 네트워크 환경을 고려하여 너무 많은 멀티미디어 데이터를 웹 페이지에 사용하지 않도록 하고, 가능하면 압축된 파일 형식 사용 5

6. 10.2 이미지와 그래픽의 활용 10.2.1 이미지와 그래픽의 정의와 생성 • 그래픽과 이미지의 예 그래픽 이미지 그래픽과 이미지의 합성 6

7. 그래픽 • 소프트웨어를 사용하여 사람이 컴퓨터상에서 직접 그려 내는 것 • 점, 직선, 곡선, 원, 다각형 등과 같은 기하학적 형태를 조합하여 생성 • 이미지 • 디지털 카메라(Digital Camera)등을 이용하여 현실세계의 이미지를 사진으로 촬영한 것 • 사진이나 그림을 스캐너를 이용하여 컴퓨터가 디지털 형태로 받아들인 것 7

8. 스캐너를 이용한 이미지의 생성 • 문서나 그림, 필름 등을 컴퓨터가 인식할 수 있는 디지털 데이터로 변환하는 입력 장치 • 스캐닝할 이미지에 빛을 비춘 다음 반사되어 돌아오는 빛의 강도를 디지털 신호로 바꾸어 컴퓨터에 전달 • 스캐너를 이용한 이미지의 생성 과정 8

9. 디지털 카메라를 이용한 이미지의 생성 • 필름에 화상을 담는 기존의 카메라와는 달리 저장 메모리(flash RAM)라는 매체에 이미지를 저장. 즉, 컴퓨터의 하드 디스크와 같은 메모리에 이미지 파일로 저장 • 촬영직후 컴퓨터 등을 통해 바로 이미지를 볼 수 있다. • 필름이 필요 없다. • 디지털 카메라를 이용한 이미지의 생성 과정 9

10. 10.2.2 이미지와 그래픽 파일의 형식 - GIF와 JPEG • GIF 형식 • Graphics Interchange Format의 약자 • 컴퓨서브사에서 자체적인 온라인 서비스를 하기 위해 개발한 파일 형식 • 256가지 이하의 색만을 사용 • JPEG 형식 • Joint Photographer Expert Group(사진가 전문 그룹)의 약자 • 사진을 효과적으로 압축하기 위해 만들어 낸 파일 형식 • 자연에서 색이 급격히 변하는 경우는 드물다는 사실에 착안하여 파일 크기를 압축하면서도 최대 1600만 색을 표현 10

11. 그림의 종류에 따른 파일 크기 비교 단색 위주의 그림과 색의 변화가 많은 그림 그림의 종류에 따른 파일 크기 (단위 KB) 11

12. 이미지 또는 그래픽 파일 형식의 선택 • 수평선을 따라서 동일한 색이 반복될 때는 GIF 파일의 압축률이 높으므로 일러스트레이션으로 제작된 그래픽 파일의 경우에는 GIF 파일을 사용 • 미묘한 색의 변화가 많은 이미지의 경우에는 JPEG 파일을 사용 • 실제 그래픽과 이미지를 GIF, JPEG으로 저장해 본 결과 파일 크기 12

13. GIF와 JPEG의 화질(quality) 비교 (a) GIF로 저장 (b) JPEG으로 저장 13

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

15. 인터레이스드 GIF(Interlaced GIF) • 대략적인 모습을 먼저 보여 주고점차 자세한 모습을 보여주는 것 • 이미지의 크기가 너무 커 다운로드에 시간이 걸릴 경우 사용 • 인터레이스드 GIF의 예 15

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

17. 10.2.3 이미지의 처리 기법 • 이미지 잘라내기(Cropping) • 그래픽 파일이 너무 큰 경우, 또는 불필요한 영역이 많은 경우 • 영역 선택 툴을 이용해 필요한 영역만을 남기고 나머지를 잘라냄. • 한번에 잘라 내기 보다는 일단 불필요한 부분을 제거한 후 그래픽의 크기와 모양을 고려하여 남길 영역을 선택 17

18. 이미지의 필터링 • 이미지 에디터가 제공하는 기능으로 특정한 효과를 낼 수 있도록 이미지를 변형하는 기능 • 필터링의 대표적인 예 18

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

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

21. 일반 문자와 그래픽 문자 • 일반 문자 • 일반적으로 사용하는 문자열 텍스트 • 제목에는 <H1>,<H2>,...<H6> 등의 태그 사용 • <FONT> 태그를 이용해 글자의 크기와 색 지정 • 그래픽 문자 • 이미지로 만들어진 텍스트 • Paint Shop Pro, PhotoShop 등의 프로그램에서 만들어 GIF나 JPEG 파일로 저장 • 어디에서나 동일하게 보이므로 특이한 글자체를 자유롭게 사용 가능 • 다른 문자에 비해 두드러져 보임 • 전송에 시간이 걸리는 것이 단점 21

22. 일반 문자와 그래픽 문자의 비교 (a) 글자체를 가지고 있는 경우 (b) 글자체를 가지고 있지 않은 경우 22

23. 10.3 사운드의 활용 10.3.1 사운드의 개요 • 사운드의 종류 • 디지털 오디오(Digital Audio) • 실세계의 소리를 컴퓨터에서 저장할 수 있는 형태로 바꾸는 디지털화 작업을 거친 것 • 미디(MIDI) • 전자 악기와 다른 기계(컴퓨터등)간에 정보를 주고 받기위해 만든 통신 규약 • 실제 소리는 갖지 않고 악기의 연주 방법에 대한 정보를 가짐 • 디지털 오디오 파일에 비해 크기가 작음. • 사운드 카드가 좋지 못하면 좋은 음질을 얻을 수 없다. • 사람의 목소리는 표현할 수 없다. 23

24. 디지털 오디오의 파일 형식 • Wave 파일 • 확장자 wav • 별도의 플러그인 없이 사용 가능 • 파일 크기가 커 길이가 짧은 음악이나 짧은 음성, 음향 효과에 주로 사용 • MP3 파일 • 확장자 mp3 • 비디오 압축에 사용되는 MPEG 압축 방식에서 사운드와 관련된 부분인 Layer 3의 압축 방식을 사용한 것 • Wave 파일을 1/10정도로 압축하면서도 음질의 저하를 거의 느낄 수 없을 정도로 훌륭한 음질을 제공 • 저작권 문제 때문에 WWW에서 공개적으로 사용하기 어려움 24

25. Real Audio 파일 • 확장자 ra 또는 ram • 인터넷상에서 사운드의 실시간 전송을 목적으로 만들어진 것 • Real Audio 플러그인을 설치하면 들을 수 있다. • 파일 크기가 Wave 파일의 1/10 정도 • WWW에서 실시간 뉴스, 온라인 음악 사이트 등에 널리 사용 • 미디 파일 형식 • 미디 파일 • 확장자 mid • 3~4분 정도의 노래 한 곡이 1~2MB 정도 • QuickTime 플러그인이나 미디어 플레이어 플러그인을 설치하면 들을 수 있다. 25

26. 10.3.2 사운드의 생성 및 처리 (1) 사운드의 생성 - CD로부터 음악 녹음하기 • 사운드의 생성 • 컴퓨터에 오디오를 연결해 CD나 테이프, 라디오의 소리를 컴퓨터에 녹음하거나, 마이크를 컴퓨터에 연결해 목소리를 녹음해 사운드를 생성 • 컴퓨터 자체에서 나는 소리는 별도의 기기를 연결하지 않고서도 녹음 가능 26

27. [실습] 윈도우의 녹음기를 이용해 CD로부터 음악 녹음하기 1. [시작]=> [프로그램]=> [보조 프로그램]=> [엔터테인먼트]=> [녹음기] 순서로 선택하여 녹음기 실행. 2. 컴퓨터의 CD-ROM에 음악 CD를 넣고 음악을 실행시킬 준비를 한다. 3. 녹음기의 버튼을 눌러 녹음 시작 4. 녹음할 음악 CD를 재생. 5. 음악이 끝나면 버튼을 눌러 녹음을 종료 6. [파일]=> [저장]을 선택하여 song1.wav로 저장 27

28. (2) 사운드의 처리 - 사운드의 앞부분과 뒷부분 잘라내기 • 사운드의 처리 • 녹음한 사운드를 그냥 사용하지 않고 사운드를 잘라 내거나 두 개의 사운드 붙이기 같은 편집, 또는 잡음을 제거하거나 목소리를 변조 하는 등의 처리 과정을 거친다. • 사운드의 처리에 가장 널리 쓰이는 프로그램은 CoolEdit Pro • Shareware CoolEdit96 다운로드 http://www.syntrillium.com/cooledit/index.html • 윈도우의 녹음기에서도 간단한 편집 기능 제공 28

29. [실습] 윈도우의 녹음기에서 사운드 파일의 앞부분과 뒷부분 잘라 내기 1. [시작]=> [프로그램]=> [보조 프로그램]=> [엔터테인먼트]=> [녹음기] 순서로 선택하여 녹음기 실행 2. [파일] => [열기] 메뉴를 선택하여 song1.wav 파일을 불러온다 3. 불러온 음악을 재생해 본다. 4. 끝부분 잘라내기 녹음기의 슬라이드 콘트롤을 26초 정도에 위치시키고 [편집] => [현재 위치 뒷부분 삭제] 선택 그 다음으로 나타나는 대화상자에서 '확인' 선택 29

30. 5. 앞부분 잘라내기 녹음기의 슬라이드 콘트롤을 2.5초 정도에 위치시키고 [편집] => [현재 위치 앞부분 삭제]를 선택하고다음으로 나타나는 대화상자에서 '확인' 선택 6. [파일] => [다른 이름으로 저장]을 선택해 song2.wav 로 저장 30

31. 10.4 애니메이션과 비디오 10.4.1 애니메이션과 비디오의 개요 • 애니메이션 • 사람이 컴퓨터를 이용해 만든 움직이는 그림 • 카메라를 사용하지 않고 사람이 일일이 그린 그림을 연속적으로 보여 줌으로써 영화와 같은 효과를 줌. • 1초에 25~30장 정도의 그림을 연속해 보여 주면 부드럽게 움직이는 것처럼 느껴짐 • 비디오 • 사람이 실세계를 찍은 것 • 디지털 비디오로 직접 찍거나 TV, 비디오 테이프로부터 녹화 31

32. 비디오 파일의 종류 • AVI 파일 (확장자 avi) • 윈도우에서 기본적으로 지원하는 형식 • 별도의 플러그인 없이 사용 가능 • MOV 파일 (확장자 mov) • 본래 매킨토시 운영체제에서 기본적으로 지원하는 형식 • 윈도우에서도 QuickTime 플러그인을 설치하면 볼 수 있다. • MPEG 파일 (확장자 mpg) • MPEG 압축 기술을 이용해 동영상을 압축시킨 파일 • QuickTime 플러그인이나 미디어 플레이어 플러그인을 설치 • Real Video (확장자 ra, ram, 또는 rm) • 사운드만을 지원하던 Real Audio에 비디오 기능을 추가한 것 • 파일 크기가 작고 전송 속도는 빨라 실시간 전송이 가능 32

33. 애니메이션 파일의 종류 • Animated GIF • 확장자 gif • 여러 장의 GIF파일을 반복해 보여 주는 방법 이용 => 사람이 달려가는 모양 • 별도의 플러그인 없이 사용이 가능하므로 널리 이용 • Shockwave 파일 • 확장자 swf • Macromedia 사의 Flash로 만든 파일 • 복잡한 애니메이션을 구현하는 데에 적합 • Shockwave 플러그 인 필요 33

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 34

35. [실습] 여러 장의 이미지로부터 하나의 Animated GIF 만들기 1. 애니메이션으로 만들 이미지 준비 ( 그림 네 장이 모두 비슷해 보이지만 자세히 살펴 보면 눈, 입, 지느러미의 모양이 조금씩 바뀌고 물방울의 위치도 바뀌어 그림 네 장을 빠른 속도로 차례로 보여 주면 물고기가 지느러미를 흔들며 물방울을 내뿜는 것처럼 보인다. ) 35

36. 2. Ulead GIF Animator를 실행. 프로그램을 실행하면 Ulead GIF Animator에 대한 소개와 함께 프로그램 구입 방법을 소개하는 대화상자가 뜬다. 3. 대화상자의 [OK] 버튼을 클릭 4. 'Startup Wizard' 대화상자에서 [Blank animation]을 선택 36

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

38. 6. '위치' 항목에서 GIF 이미지들이 들어 있는 디렉토리로 이동하고 '파일 이름'에 '*.gif'라고 입력한 후 '열기' 버튼을 누른다. 7. GIF 파일의 리스트가 나타나면 여기에서 fish1.gif를 선택하고'열기' 버튼을 누른다. 8. 'Delay'를 25로 지정한다. 38

39. 9. 5~8의 과정을 반복하여 같은 방법으로 fish2.gif, fish3.gif, fish4.gif를삽입한다. 삽입된 파일의 리스트는 왼쪽 아래 창에 나타난다. 10. 'Start Preview' 버튼을 눌러 만들어진 애니메이션을 실제로 본다. 11. [File] 메뉴의 [Save]를 선택해 파일 이름을 'ani_fish.gif'라고 붙이고'저장' 버튼을 누른다. 39

40. 10.5 멀티미디어를 활용한 웹 페이지 저작의 실제 10.5.1 웹 페이지에 멀티미디어 데이터 삽입하기 • <EMBED> 태그 • 웹 페이지 내에 사운드 또는 비디오를 추가하기 위한 태그 • 기본 형식 • <EMBED SRC="사운드 또는 비디오 파일의 URL"> • 사운드나 비디오 파일의 종류에 관계없이 사용 가능 • <EMBED>태그의 속성 • WIDTH = 숫자, HEIGHT = 숫자 : 콘트롤의 크기 조절 • AUTOSTART = TRUE 또는 FALSE : 자동 시작 • LOOP = TRUE 또는 FALSE : 반복 재생 40

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> 41

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

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

44. [실습] PhotoShop을 이용한 이미지와 그래픽의 편집 (1) 외곽선 문자 만들기 1. [File]=>[New]를 선택해 가로 200 pixel, 세로 30 pixel 크기의 새로운 캔버스를 만든다. 2. Type Tool 을 왼쪽 마우스 버튼으로 누르고 있으면 숨겨져 있던 도구가 나타난다. 여기에서 을 선택한다. 3. 마우스를 캔버스에 클릭하면 대화상자가 뜬다. 여기에 From 'The Little Mermaid'라고 쓰고 'OK' 버튼을 누른다. 44

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로 저장한다. 45

46. (2) 글자에 그림자 넣기와 디더링하여 투명 GIF로 저장하기 1. [File]=>[New]를 선택해 가로 200 pixel, 세로 30 pixel 크기의 새로운 캔버스를 생성 2. Type Tool 을 선택하고 캔버스에 마우스를 클릭 다음으로 나타나는 대화상자에서 Size를 40으로 지정하고 Under The Sea라고 쓴 후 'OK' 버튼을 클릭 46

47. 3. 그림자 넣기 [Layer]=>[Effect]=>[DropShadow]를 선택 => 대화상자에서 그림자의 각도, 진하기 등을 적당히 조절하고 'OK' 버튼을 누르면 그림자 생성 4. [Image] => [Mode] => [Indexed Color]를 선택 대화상자에서 Dither를 Diffusion으로 선택하고'OK' 버튼을 누른다. 47

48. [File]=>[Export]=>[GIF89a Export]를 선택 대화상자가 나타나고, 커서의 모양이 스포이드 모양 으로 바뀐다. 스포이드로 배경에 해당하는 색을 클릭하면 배경색이 사라진다. 6. 'OK' 버튼을 누르면 파일 저장 대화상자가 나타난다. 여기에서 파일 이름을 title2.gif로 지정하여 저장 48

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

50. 4. 5. (3) 색깔이 서서히 변하도록 그림 잘라내기 (계속) 4. [Select]=>[Feather]를 선택하여 나타나는 대화상자에서 'Feather Radius'를 10 pixel로 지정하고 'OK' 버튼을 누르면 그림의 선택된 영역의 모서리가 둥글게 나타난다. 5. [Edit]=>[Cut]을 선택 6. [File]=>[Save]를 선택해 완성된 그림을 저장 50