공개SW 기반 멀티미디어 학습 유 승 욱.

공개SW 기반 멀티미디어 학습 유 승 욱

새로운 교육과정에서 멀티미디어 수업은 어떻게 이루어질까?
새로운 교육과정에서 멀티미디어 수업은 어떻게 이루어질까?

정보 과목 교육과정 해설 다. 내용 멀티미디어 정보의 가공(3단계) 유의사항
애니메이션의 제작과 동영상의 가공 등은 2,3단계 ‘멀티미디어 정보의 표현’ 단원에 제시된 내용에 대한 이해를 바탕으로 간단한 애니메이션 제작과 동영상 가공 실습을 수행하는 것이 바람직하다. SVG(Scalable vector graphics)와 같은 인터넷 표준 XML 그래픽 언어를 이용하면 간단한 텍스트 에디터만으로 애니메이션 제작이 가능하다. 상용 소프트웨어를 이용한 세부 기능 중심의 이해를 지양하고, 애니메이션 제작용 프리웨어를 이용하여 원리 중심으로 실습할 것을 권장한다. 동영상의 가공은 프리웨어를 이용하여 동영상 오리기 , 이어 붙이기 등의 내용을 간단한 원리 위주로 실습할 것을 권장한다.

정보 과목 교육과정 해설 라. 교수·학습 방법 과목의 특성
둘째, 소프트웨어 사양의 이질성을 들 수 있다. 소프트웨어는 사용 목적, 과제 특성, 개발자 등에 따라 매우 다양한 종류가 있으며, 같은 명칭의 소프트웨어라 할지라도 버전에 따라 그 종류가 다양하다. 이와 같은 특성 때문에 소프트웨어의 활용과 관련한 정보 과목의 교육 내용을 국가가 제시하는 표준화에 기초한 획일화를 지향하지 않을 수 없는 요인으로 작용한다. 또한 도구적 소프트웨어뿐만 아니라 개발이나 지식 모델링을 할 수 있는 소프트웨어의 경우 공개용 소프트웨어를 적극적으로 발굴하여 활용하는 것이 바람직할 것이다. 요컨데 실질적인 학습 경험 구성을 위해 소프트웨어를 사용할 경우 특정한 상용 소프트웨어의 사용을 지양하고 소프트웨어를 활용하여 문제를 해결하거나 정보 과목 내용의 원리를 익히는 데 주력할 수 있도록 한다.

정보 과목 교육과정 해설 라. 교수·학습 방법 과목 운영의 중점
정보 과목 수업에서 다루어지는 교육 내용은 정보 교과서에 충실하도록 한다. 다만, 실습을 위한 소프트웨어 혹은 하드웨어는 단위 학교의 실정과 교과를 운영하는 지도 교사의 재량에 따라 자유롭게 선정·조직될 수 있도록 한다. (6)실기 지도 실기 지도를 할 때는 상업용 소프트웨어를 사용하거나 활용하는 예제를 교과서에 명시하지 않아야 한다.

공개 소프트웨어 사용의 장점 저작권 사용료 부담이 없어진다. 다양한 프로그램 사용 기회를 가질 수 있다.
공개적으로 배포되므로 어디에서나 사용 가능하다. 다양한 운영체제에서 사용할 수 있다. 멀티미디어 자료의 제작에서 프로그램보다 콘텐츠 자체가 중요하다는 인식의 변화가 생긴다. 다양한 필터 기능이나 플러그인 프로그램을 설치하거나 불러와서 사용할 수 있다.

새로운 교육과정에서 멀티미디어 정보의 표현 멀티미디어의 이해
멀티미디어의 개념 멀티미디어의 구성 요소 문자 소리 그림 및 그래픽 애니메이션과 동영상 멀티미디어의 압축 손실 압축 비손실 압축

멀티미디어의 압축 손실 압축과 비손실 압축 손실 압축-색상수 감소, 작은 부분 삭제. Jpg, mpg에 사용 비손실 압축-반복되는 프로그램, 문자 파일을 간략하게 표현. Zip 파일 형식 손실압축에서 공간적 압축과 시간적 압축 공간적 압축-이미지에서 비슷한 색상으로 묶여진 하나의 블록내에서 평균적인 색상을 계산해 내어 새로운 색상을 산출하는 방식. 따라서 블록이 클수록 압축 효율이 높고 용량이 작아짐. 주로 비디오 편집 시 많이 쓰이는 MJPEG(Motion-JPEG)이나 DV(Digital Video) 코덱에서 사용 시간적 압축-비디오 전체에서 일정한 간격 또는 일정한 장면에 키프레임을 넣고 키프레임의 사이에는 장면에서 바뀌어진 부분만을 압축하는 방식 예)고정된 배경화면에서 자동차만 움직이는 장면 실습을 할 수 있다.

압축 개념 학습 활동 Unplugged Computer Science 예)문자 압축 활동지 실습을 할 수 있다.

새로운 교육과정에서 멀티미디어 정보의 표현 그림 및 사진 정보의 표현(핵심 내용)
‘그림 및 사진의 표현’은 그림 및 사진과 같은 영상 정보의 표현 방식인 비트맵 방식과 벡터 방식의 특성과 장단점, 활용 분야, 차이점을 파악하기 위한 내용으로 구성된다. 픽셀의 개념과 해상도의 개념을 이해하도록 하고, 해상도가 높을수록 선명한 화질의 그림 및 사진 표현이 가능하나 파일의 용량이 커지게 된다는 것을 이해하도록 하기 위한 내용을 포함한다. 일본 교과서의 예를 들어줌-2진수, 파일 용량 계산 방법 학습자가 이해를 잘 못함

새로운 교육과정에서 멀티미디어 정보의 표현 그림 및 사진 정보의 표현
그림 정보의 품질을 결정하는 요소 픽셀-그림을 구성하는 최소 단위 그림 해상도 1인치당 표현되는 픽셀이나 점의 개수 또는 그림 전체의 픽셀 수 화면 그림(ppi), 인쇄된 그림(dpi) 웹에서는 72ppi 가 적당 색상 한 픽셀에 몇 비트의 정보를 할당하는가에 따라 결정 비트가 많아지면 표현 가능한 색상의 수 증가 선명한 그림-픽셀이 많고, 해상도가 높으며, 표현할 수 있는 색상의 수가 많을 경우. 단 용량이 커짐 일본 교과서의 예를 들어줌-2진수, 파일 용량 계산 방법 학습자가 이해를 잘 못함

새로운 교육과정에서 멀티미디어 정보의 표현 그림 및 사진 정보의 표현 이미지 표현 학습 활동 Unplugged Computer Science 예)숫자로 표현한 색깔-이미지 표현 참조: 수행 평가 자료 실습을 할 수 있다.

픽셀의 개념과 해상도의 개념 해상도와 그림, 사진의 품질 관계 해상도와 그림, 사진의 용량 관계

영상 정보의 표현 방식인 비트맵 방식과 벡터 방식 비트맵 방식 픽셀로 그림을 구성하는 방식 사실적이며 자연스러운 질감을 표현할 수 있음 확대 또는 축소할 경우 픽셀의 수가 변화되어 그림이 손상. Bmp, jpg, gif

영상 정보의 표현 방식인 비트맵 방식과 벡터 방식 벡터 방식 평면 또는 공간상에 명령어와 좌표값 등의 수식으로 그림 표현 점, 선을 이용하기 때문에 확대 또는 축소해도 품질에 영향 없음 간단한 그림의 경우 같은 크기의 비트맵 파일보다 적은 용량 상품 광고, 로고 타이틀, 캐릭터 디자인에 사용 Ai, wmf, eps, svg 등

새로운 교육과정에서 멀티미디어 정보의 표현 소리의 표현(핵심 내용)
‘소리의 표현’은 진폭, 주파수와 같은 소리의 구성 요소를 알아보고, 아날로그 형태의 소리 자료와 디지털 형태의 소리 자료의 차이점을 이해하기 위한 내용으로 구성된다. 아날로그 형태의 소리를 디지털 형태로 표현하기 위한 표준화 및 양자화의 개념과 디지털 소리 정보 표현을 위한 파일 형식(예, WAV 등) 및 소리 압축 기술(예, MP3 등)의 특성을 파악하기 위한 내용을 포함한다.

새로운 교육과정에서 멀티미디어 정보의 표현 소리의 표현
소리의 구성 요소 진폭-소리의 세기 주파수-소리의 높낮이 음색-소리의 특징

아날로그와 디지털 형태의 소리 표본화(샘플링) 아날로그 신호의 파형을 디지털 형태로 변환하기 위해 표본을 취하는 것 샘플링 비율: 1초당 샘플을 추출하는 빈도수로, CD음질의 샘플링 비율은 44.1KHz(초당 샘플을 44,100번 채취)

아날로그와 디지털 형태의 소리 양자화 표본화 단계에서 추출한 측정값과 가장 가까운 정수를 구하는 것 진폭의 간격이 짧을 수록 원래의 아날로그 파형에 가깝다.

아날로그와 디지털 형태의 소리 부호화 표본화와 양자화에 의해 얻어진 수치를 2진수로 변환하는 것 양자화 단계에서 진폭을 8단계로 나누었기 때문에 2진수 3비트로 표현한다. 이 정도 단계까지 오면 학생들은 무엇을 했는지 잘 모름..

새로운 교육과정에서 멀티미디어 정보의 표현 동영상의 표현(핵심 내용)
‘동영상의 표현’은 동영상 정보를 디지털 형태로 표현하기 위한 방법을 이해하도록 하고, 동영상 정보의 품질을 결정하는 요소와 각 요소들 간의 상관 관계를 이해하도록 하기 위한 내용으로 구성된다. 또한 동영상 자료의 표현 원리와 특성을 이해하고 동영상의 품질을 결정하는 요소를 설명함으로써 이들과 파일 크기의 관계를 이해하도록 하기 위한 내용으로 구성한다. 아울러, 다양한 동영상 파일 형식들의 특성과 차이점을 아는 것뿐만 아니라 실생활에서 사용 목적에 따라 적절한 품질의 동영상 정보를 선택하여 사용할 수 있도록 하기 위해 다양한 형식과 품질의 동영상을 직접 경험해 보도록 권장한다.

새로운 교육과정에서 멀티미디어 정보의 표현 동영상의 표현
동영상 표현 원리와 특성 이해 동영상은 뇌에 남아있는 잔상을 이용하지만 실제로는 한 장 한 장의 그림을 보여주는 것 프레임비율 1초당 보여 주는 프레임의 개수. 단위는 fps 자연스러운 영상은 30fps(frame per second) 영상이 아날로그일 경우 디지털로 변환해야 함 변환 과정의 기능은 영상 처리 카드(비디오 보드)가 담당 영상 처리 카드는 AD 변환 기능, 동영상 자료 압축 및 복원 기능, 화면 재상 기능이 있음 AD 변환기-아날로그 신호를 디지털 신호로 변환하는 장치

동영상 정보의 품질을 결정하는 요소 원본 동영상 자체의 품질 초당 프레임 수(fps)-프레임 비율 픽셀의 수(프레임 크기) 비트 레이트(색상 비트 깊이) 초 단위마다 처리되는 비트의 개수. 초당 비트 수(bps)를 사용하여 계산. 예) 16 킬로 비트/초: 화상 전화 품질, 5 메가 비트/초: DVD 품질 동영상 정보의 용량 계산 24비트 컬러 그림의 용량은 1024*1024 해상도일 경우 3MB 동영상은 1초에 30장의 그림이 필요 동영상 1초는 90MB

동영상 파일 저장 고화질 동영상의 용량이 크고 재생 시간이 많이 걸림 다양한 압축 기술이 발달 코덱의 역할 Compression과 Decompression의 합성어 사용된 코덱의 종류에 따른 동영상 파일의 종류 MPEG(Moving Picture Experts Group) AVI(Audio Video Interleave) DIVX(Digital Video Express)-MPEG4를 발전시킨 것 H.264 WMV(Windows Media Video) ASF(Advanced Streaming Format)

애니메이션 프로그램:SVG (Scalable vector graphics)
개념 2차원 그래픽을 표현 XML 기반 W3C(World Wide Web Consortium)이 제안한 XML 그래픽 표준 SMIL, GML, MathML 등 다른 XML 언어와 결합 가능 전자상거래 지리정보, 교육, 광고 등에 적용 특징 웹 브라우저에서 쉽게 실행 이미지에 하이퍼링크를 걸어 사용 가능 벡터 이미지

Animation 구현 무엇을(attribute) 얼마만큼(from/to) 언제(begin/dur) 방법 SVG 애니메이션 요소 사용 예)Animate, animateMotion, … SVG DOM과 스크립트 이용 SMIL 문서 내에서 SVG 객체를 애니메이션 예제 Circle.svg Circle2.svg SVG DOM(Document Object Model) SMIL(Synchronized Multimedia Integration Language-동기식 멀티미디어 통합 언어)

예제(Circle.svg) <svg> <circle id="MyCircle" cx="0" cy="110" r="30" style="fill:yellow"> <set attributeName="visibility" to="visible" fill="freeze"/> <animateMotion path="M L L " begin="0s" dur="2s" fill="freeze"/> </circle> </svg> 실행이 안될 때는

예제(Circle2.svg) <svg width="5cm" height="4cm" viewBox=" "> <rect x="1" y="1" width="498" height="398" fill="none" stroke="blue" stroke-width="2"/> <circle id="c1" cx="70" cy="100" r="40" fill="red"> <animate attributeName="cx" atrrituteType="XML" begin="click" dur="5s" fill="freeze" to="400"/> </circle> <circle id="c2" cx="70" cy="200" r="40" fill="green"> <animate attributeName="cx" atrrituteType="XML" begin="click" dur="5s" fill="freeze" to="400" by="50"/> <circle id="c3" cx="70" cy="300" r="40" fill="blue"> <animate attributeName="cx" atrrituteType="XML" begin="click" dur="5s" fill="freeze" values="70; 150; 100; 300; 290; 400"/> </svg> 실행이 안될 때는

그래픽 프로그램 김프(GIMP) 김프 GNU Image Manipulation Program의 약자 간단한 페인트 프로그램
사진 편집 프로그램 온라인 배치 프로세싱 대량의 이미지 렌더링 이미지 포맷 변환기 등의 용도로 사용 김프의 장점 확장성이 뛰어나며 유연하다. 플러그인과 확장기능의 추가 발전된 스크립팅 인터페이스 다양한 운영체제 지원 특징과 성능

그래픽 프로그램 김프(GIMP) 김프 다운로드 http://www.gimp.org 김프 설치하기 김프 설치 화면
에서 download 버튼 클릭, show other downloads 클릭, GIMP for Windows 에서 Download GIMP 선택, source forge에서 direct link 선택 20분 소요

그래픽 프로그램 김프(GIMP) 김프 실행화면 김프 실행 화면

그래픽 프로그램 김프(GIMP) 김프 주요 기능 화면 캡쳐 레이어 필터

그래픽 프로그램 김프(GIMP) 간단한 예제 직선 그리기 기본 도형 그리기 선택 페더링

사운드 편집 프로그램 Audacity 김프 GNU Image Manipulation Program의 약자
간단한 페인트 프로그램 사진 편집 프로그램 온라인 배치 프로세싱 대량의 이미지 렌더링 이미지 포맷 변환기 등의 용도로 사용 김프의 장점 확장성이 뛰어나며 유연하다. 플러그인과 확장기능의 추가 발전된 스크립팅 인터페이스 다양한 운영체제 지원 특징과 성능

공개용 그래픽 SW 1. 종류 2. 특징 3. 김프란?

김프의 특징

무료로 쓸 수 있는 소프트웨어 정리 사이트 http://www.rainlethe.com/223

수업 설계 단원 소개 수업 진행 방식 설명 공개 소프트웨어의 필요성 언급 그래픽 편집 프로그램(김프) 설치 및 간략 소개
그래픽 프로그램 실습(선택) 사운드 편집 프로그램(Audacity) 설치 및 간략 소개 사운드 편집 프로그램 실습(선택) 동영상 편집 프로그램 설치(VirtualDub) 및 간략 소개 동영상 편집 프로그램 실습(선택) SVG 소개 및 실습

수업 자료 공개SW 설치 프로그램 및 설명 자료 공개SW 소개 자료(교재 이외에 레이아웃을 보여줄 것)
각 프로그램으로 작성할 과제(도구표를 완성하기 위한 정도로 간단할 것) 프로그램의 비교표(특징, 감상, 교수도구로서의 이용 가능성 등) SVG 소개 자료 및 프로그램 2개 사 동

공개SW 기반 멀티미디어 학습 유 승 욱.

Similar presentations

Presentation on theme: "공개SW 기반 멀티미디어 학습 유 승 욱."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

공개SW 기반 멀티미디어 학습 유 승 욱.

Similar presentations

Presentation on theme: "공개SW 기반 멀티미디어 학습 유 승 욱."— Presentation transcript:

Similar presentations

About project

지원