동영상 제작을 위한  동영상녹화 캡처 프로그램 소개

요즈음 동영상 녹화 캡처하는 분들이 많은데 오늘은 제가 사용하는 동영상 캡처 프로그램을 소개합니다.
강의 녹화용으로 추천할만한 프로그램 반디캠입니다 비슷한 프로그램으로는 Camtasia나 Fraps와 같은 외국산 프로그램이 있지만 그 중에서 국산 프로그램인 반디캠이 제일 안정적인 것 같습니다.
반디캠은 화면의 일부분이나 또는 전체를 동영상으로 녹화를 하는 프로그램입니다. 그런데 녹화를 하면서 음성도 같이 녹음을 할 수가 있기 때문에 컴퓨터로 강의를 만든다거나 또는 게임 동영상을 만들 때 좋습니다. 무엇보다 좋은 것은 반디캠은 영상과 소리의 싱크가 밀리는 일이 없으며 예전에 캠타시아로 비슷한 시도를 해본적이 있었는데 그때는 영상이 소리에 비해 계속 늘어져서 싱크가 잘 맞지 않았던 경험이 있었습니다.
  

 일단 반디캠을 실행한 첫 화면은 이렇게 생겼습니다..

 여기에서는 녹화대상과 밑에 있는 녹화 자동 완료의 설정 부분을 눈여겨 보시고 천천히 따라하시면 됩니다.
 

 녹화 대상을 클릭하면 다음과 같이 DirectX/OpenGL 창을 녹화하는 메뉴와 화면의 사각형 영역을 잡는 메뉴.. 이렇게 두 가지고
나타납니다 첫 번째 DirectX/OpenGL은 게임을 플레이 하면서 게임의 화면을 영상으로 캡쳐를 하고 싶을 때 사용을 하면 됩니다
그 밑에 있는 화면의 사각형 영역은 화면의 특정 부분만을 캡쳐를 하는 기능입니다. 이 기능은 동영상 강의를 만들 때 참 유용할 것입니다. 아니면 인터넷의 웹 브라우저를 통해 보여지는 동영상을 녹화 할 때도 유용하겠고요
  

 
그 밑에 녹화 자동 완료 설정 부분을 클릭 하면 다음과 같은 팝업 메뉴가 뜹니다.  녹화 자동 완료 조건은 시간 제한, 또는 용량
제한으로 특정 조건이 되면 녹화를 자동으로 종료하게 할 수 있습니다. 그 밑의 메뉴는 녹화를 자동으로 완료한 후에 어떤 명령을
실행을 할 지를 정하는 것이고요
 
 
저는 녹화는 14분이 되면 자동으로 종료하도록 설정을 해 놓았고, 녹화가 종료되면 새로 녹화를 시작 하도록 설정을 해 놓았습
니다.. 이렇게 설정을 한 이유는 유튜브에 영상을 올리기 위해서인데요.. 유튜브는 일반 사용자의 경우 15분 이상 되는 영상은
올릴 수가 없습니다. 강의 같은 것을 올릴 때 유튜브를 이용을 하는데.. 유튜브에 영상을 올리기 위해서는 15분을 넘으면 안 되거
든요 위와 같이 모든 영상을 14분 단위로 잘라버리면 유튜브에 영상을 올리기가 편하겠지요.. 그리고 영상을 종료 한 후에는
바로 녹화를 시작을 해서 영상이 중간에 끊기지 않도록 해야 할테고요
 
 

 
FPS 표시 보이기는 캡쳐하고자 하는 대상의 화면에 현재의 프레임 수를 보여주는 기능입니다.. 반디캠을 띄운 상태에서 게임을
한다든지 또는 동영상을 본다던지 하면 화면에 30, 29.97 이런 식으로 숫자를 찍어내게 되는데 그것이 현재의 프레임 수를 보여
주는 것입니다 특별한 기능은 없고 그냥 단순히 현재의 프레임 수만을 표시하는 단순 정보입니다.. 이 프레임 수는 캡쳐된 결과
물에는 나타나지 않습니다. 그 밑에 있는 라디오 버튼들은 FPS가 화면의 어디에 나타나게 할 지를 설정합니다.. 현재는 화면의
왼쪽 위 귀퉁이에 FPS가 표시되도록 설정이 되어 있습니다.
다음 프레임 부분에서는 오른쪽 밑의 FPS 제한하기 부분을 잘 설정을 해야 합니다.. 일반적으로 영상이 30 프레임을 넘어가지
않으니 되도록이면 30 프레임으로 제한을 하도록 하는 것이 좋을 듯 합니다.. 이 프레임이 많아지면 반디캠으로 녹화 한 영상과
음성의 싱크가 서로 맞지 않는 현상이 발생합니다.. 이 프레임을 적당히 조절해주어야 영상과 음성의 싱크가 맞습니다.
  

 
다음은 비디오 부분입니다.. 이 메뉴에서는 세 가지를 설정을 해 주어야 하는데요.. 먼저 녹화 단축키를 설정을 해 주어야 겠지요..
단축키는 자신이 사용하지 않는 키로 설정을 해 주면 됩니다.
가운데 있는 "커서 표시 안함" 메뉴는 아마도 게임 동영상 등을 만들 때 유용하게 사용이 될 것 같군요.. 이 메뉴의 경우 왼쪽의
체크박스를 체크했을 경우 캡쳐된 영상에는 사용자의 커서가 표시되지 않습니다.
그 다음에 왼쪽의 설정 메뉴는 녹음을 할 때 사용을 할 음성 장치를 선택하는 메뉴이고 오른쪽의 설정 메뉴는 녹화 할 때 사용할
코덱과 관련된 내용을 세팅하는 부분입니다.
  

 
먼저 왼쪽의 설정을 클릭을 하면 위와 같은 화면이 나옵니다.. 위의 기본 오디오 장치에는 자신의 컴퓨터의 기본 사운드 출력
장치를 잡습니다.. 게임 동영상을 녹화를 하고 싶은 분들의 경우 게임에서 나오는 음악 및 효과음을 같이 녹음을 하고 싶다면
반드시 컴퓨터의 기본 사운드 출력 장치를 설정을 해야 되겠지요..
그리고 그 밑에 추가 오디오 장치에는 마이크 장치를 설정을 합니다.강의를 하고 싶다면 자신의 목소리를 녹음을 해야 되겠
지요.. 목소리를 녹음하려면 마이크 장치가 있어야 할 테고 말이지요. 여기에서는 그 마이크 장치를 설정을 합니다..
만약 강의만을 주 목적으로 한다면 구지 컴퓨터의 소리를 녹음을 할 필요가 없을 수도 있겠네요.. 그런 경우에는 기본 오디오
장치에 마이크 장치를 잡아주고 추가 오디오 장치는 사용하지 않음으로 설정을 하면 될겁니다.
 
 

 
오른쪽의 코덱 관련 설정을 누르면 위와 같이 코덱과 관련된 설정이 나옵니다.. 흠.. 이것 저것 해 보았는데... 위와 같이 세팅을
하는 것이 최선인 듯 합니다.. 여기는 위와 동일하게 세팅을 해 주세요.
먼저 비디오 크기는 임의의 고정된 크기를 선택을 할 수도 있고 전체 크기를 선택을 할 수도 있는데 그냥 전체 크기로 둬도 되지
싶습니다.. FPS는 29.97이나 30으로 설정을 하는 것이 화질이 깨끗하게 나올겁니다. 압축 형식은 반디캠 MPEG-1, XviD, Motion
JPEG, YV14, RGB24등이 있는데요 뒤에 있는 YV14와 RGB24는 뭔지 잘 모르겠고 MPEG-1, XviD, Motion JPEG 이렇게 세 가지
중에서 한 가지를 선택을 하게 될텐데 XviD는 화질이 깨끗하게 안 나오더군요.. Motion JPEG는 깨끗하게는 나오는데 동영상의
파일 크기가 너무 커지게 되고요.. 유튜브에 올릴 정도의 화질을 원한다면 반디캠 MPEG-1이 제일 괜찮은 것 같습니다.
혹시 프리미어나 베가스 같은 프로그램을 사용을 하셔서 편집할 전문적 동영상 소스를 만들기를 원하신다면 Motion JPEG을
사용을 하시면 됩니다.
품질은 반디캠 MPEG-1 기준으로 80으로 설정을 하는 것이 좋아 보입니다. 화질도 깨끗하면서 영상 크기도 적당하게 나옵니다.
이 이하로 낮아지면 화질이 아쉬워지고 이 이상이 되면 동영상 파일의 크기가 너무 커집니다.
기타 더욱 자세한 사항은 반디캠의 홈페이지에 어느 정도 설명이 되어 있군요
 
밑에 오디오의 비트레이트는 160으로 설정을 해 놓았는데 128 정도로 낮춰도 되고 또 192 정도로 높여도 관계는 없습니다.. 
  

 
이미지 캡쳐 설정 부분입니다.. 저는 이미지 캡쳐는 Snagit을 사용을 하는 관계로 반디캠의 이미지 캡쳐기능은 사용하지 않습
니다. 해당 기능을 사용하고 싶으실 때는 단축키 왼쪽의 체크박스를 체크해 주시고 단축키를 설정하시면 되고 사용하고 싶지
않으시다면 단축키 오른쪽 체크박스를 해제하시면 됩니다.
만일 이미지 캡쳐 기능을 사용하고 싶으시다면.. 아마도 웹에 올릴 목적으로 캡쳐를 하시겠지요?? 포맷은 JPG-일반 으로 설정
하시는 것이 제일 무난합니다.
BMP는 그 자체가 파일 크기가 너무 크고 또 웹에 올려도 웹에서 이미지가 바로 보이지 않습니다.
PNG는 웹에서 바로 볼 수는 있는데 이미지가 작은 경우에는 상관이 없지만 이미지가 커지면 파일 크기도 기하급수적으로 커집니다.
JPG-일반의 경우 그냥 웹에 올릴 수 있을 정도의 무난한 화질에 크기가 나옵니다.
JPG-고품질의 경우는 깨끗한 이미지를 얻을 수 있을지는 모르겠는데 역시 파일의 크기가 커지게 됩니다.. 이 옵션은 혹시 인쇄물을 만들기 위한 용도로 사용을 하시면 좋을 것 같습니다.
 

 그냥 정보란입니다.. 이 프로그램의 버전이 현재 1.7.6.178 입니다.
반디캠은 무료 프로그램은 아닙니다. 물론 무료로도 사용은 할 수 있습니다만, 일부 기능 제한이 있습니다. 녹화된 화면에 반디캠 로고가 들어가고 녹화 시간이 12분이었습니다. 반디캠을 정식으로 등록을 하면 이러한 기능제한 없이 모든 기능을 다 사용을 할 수 있습니다.
단 반디캠은 무료사용해보시고 제품이 유용하다고 생각되시면 구매하시면 될 것입니다.
 

 
  오늘은 요즈음 컴퓨터 화면에 자주 등장하는 “ 보안콘텐츠만 표시됩니다 ” 를 안나오게 하는 법을 알아 보겠습니다.  
   

 
컴퓨터를 하다 보면 간혹 아래 사진과 같이 "보안콘텐츠만 표시됩니다"라는 메시지를 볼 수 있습니다. 물론 " 모든 콘텐츠 표시"를 클릭해
 
서 넘어갈 수 있지만 이렇게 넘어가게 되면 다시 동일한 사이트에 방문했을 때 또다시 보안 콘텐츠만 표시된다는 메시지가 계속 뜨게되는 불편함
 
이 있습니다.. 대부분 이런 메시지는 암호화된 콘텐츠로 구성이 된 가입 페이지에서 나타나게 되는데 이런 불편한 메시지가 뜨지 않도록 설정하
 
는 방법을  설정해보겠습니다. 
 
 
메시지를 뜨지 않게 설정하려면 인터넷 익스플로러를 실행시키신 후 아래 사진과 같이  <도구>를 클릭하신 후 2번 <인터넷 옵션>을 클릭
 
해서 인터넷 옵션 창을 열어줍니다. 상단에 <파일>, <보기>, <도구> 등의 글자가 보이지 않는 분들이 있다면 아래 방법으로
 
해결하시면 됩니다.
 
메뉴 모음이 보이지 않는다면 아래 빨간색으로 표시한 부분(빈 화면)에 마우스 오른쪽 버튼을 클릭하신 후
 
<메뉴 모음(E)>에 체크를 해주시면 됩니다.
 

 
해결이 되었다면 인터넷 옵션창이 열어주시고  <보안>을 클릭하신 후 

   아래 부분에 보이는 <사용자 지정 수준>을 클릭하세요. 이런 설정

변경을 망설이시는 분들이 있는데 여러 가지 설정을 변경했다고 
 하더라도 아래 사진 맨 아래 있는 <모든 영역을 기본 수준으로 다시 설정>
 
을 클릭하시면 설정을 변경하기 전 기본 상태로 되돌릴 수 있습니다. 
 
사용자 지정 수준을 클릭하시면 아래 사진과 같이 "보안 설정 창"이 뜨게 됩니다. 설정 부분에 표시된 글 중 "혼합된 콘텐츠 표시"라는 부분을 찾아주세요. 
  

 
 <사용>으로 설정을 변경해주시고 <확인>을 클릭해주세요. 이렇게 하시면 종종 보였던 "보안콘텐츠만 표시됩니다"라는 메시지가 화면에 뜨지
  않게 됩니다.
   

마지막으로 "예"를 클릭하면  지금 까지 귀찮게 했던 "콘텐츠만 표시됩니다"는 나타나지 않을 것입니다.

[홈페이지제작]을 위한 html5과 css3 예제

html과 css 에 대하여
현재의 웹 페이지 제작 기술들 중에서 가장 큰 화두는 HTML5입니다.
10여년간 꾸준히 사용 되어오던 XHTML+CSS2의 웹페이지 제작기술은 그래픽적인 요소를 표현하기 위해서 이미지를 사용하는 것 외에는 다른 대안이 없었으며 인터렉티브한 요소를 사용하기 위해서는 플래쉬나 다른 ActiveX와 같은 요소를 사용해야 했으며, 무엇보다 표준화 되지 않은 제작기술의 범람으로 크로스 브라우징이라는 당연히 적용되어야 하는 주제를 무척이나 까다로운 이슈로 남겨놓았습니다.
새롭게 등장한 HTML5는 이러한 웹 페이지 제작의 어려움들을 해소하기 위해서 고안되었습니다.
기존에 사용하던 XHTML + CSS2의 표준화된 요소들 위에 더욱 시맨틱해진 태그 요소들과, 그래픽적인 부분을 보완하기 위한 다양한 효과들, 멀티미디어를 HTML 자체에서 지원하기 위한 방법을 제공하는 등 HTML5로 제작된 웹 페이지는 기존의 XHTML 기반의 웹 페이지보다 더욱더 인터렉티브해 집니다.
특히 CSS3에서 추가된 “미디어 쿼리”기능은 한 번의 작업으로 다양한 해상도에 따라 각기 다른 UI 형태를 제공할 수 있도록 하여 PC + 테블릿 + 스마트 폰을 한번에 지원하는 “반응형 웹”이라는 새로운 제작 기법을 탄생 시켰습니다
html5의 간단한 예시블 보도록 하겠습니다.
<!doctype html>:Html을 알리는 태그
<html (lang="ko")>:시작과 끝
<head>:브라우저에게 정보를 주는 태그
<body>: 몸통과 같은 존재(내용)
<meta>: <meta charset="utf-8">
html5에서 한국어뿐만아니라 모든언어를 사용할수있는 문자세트
<div> 전체를 감싸는 요소
<title>
<br>:줄바꿈
<img>,<video>,<audio>
<header>: 머리말
/<nav>: 문서 +사이트 연결 내비게이션 역할
<ul>,<ol>,<li>: 목록 /
<p>:텍스트
<hn>:크기별 제목
<article>:콘텐츠
<aside>:사이드바
<footer>: 저작권표시
<table>,<tr>,<td>,<th>:표
◈<form>,<fieldset>,<legnd>,<label>,<button>,<input> 등: 폼만들기◈
css3의 간단한 예시블 보도록 하겠습니다.
 
<style>, .class , #id : 스타일 정의하고 적용!
font-size,wieght,align,shadow,height,style: 텍스트 꾸미기
color, background(배경)
margin(박스 바깥 여백)/ padding(박스안쪽 바깥 여백)
border(테두리) -radius(둥글게)
transform(웹요소변형)
transition(애니메이션효과),animation(애니메이션)
@media(반응형웹디자인)
 
 
웹문서의 기본적인 스타일을 미리 지정해둔 스타일시트. html로는 웹문서를 다양하게 설계하고 수식하는데 한계가 있기 때문에 이를 보완하기 위해 만들어진 것으로, 문서의 일관성을 유지하고 이용하기 편리하다는 특징이 있다.html이 웹문서의 뼈대를 잡기 위한 도구라면, CSS(스타일시트)는 그 뼈대를 더 예쁘게 꾸미는데 필요한 도구라고 설명할 수 있다.
 
◈ CSS(스타일시트)의 선택자
- 태그 : 선택한 태그가 사용된 모든 내용에 대해 스타일을 적용하는 것 / ex) a 태그의 기본 기능인 파란글씨/밑줄을 없애는 것
- 클래스 : 비슷한 계열의 내용에 같은 스타일을 적용하는 것 / 같은 이름의 클래스가 존재할 수 있음
- 아이디 : 한 '화면'에서 유일한 값으로 특정 범위에만 스타일을 적용하는 것 / 같은 이름의 아이디가 존재할 수 없음
 
 
◈ CSS(스타일시트)의 문법
태그명 { 속성명:값; 속성명2:값2; }
#아이디명 { 속성명:값; 속성명2:값2; } /* 설명을 써주세요 */
.클래스명 { 속성명:값; 속성명2:값2; }
CSS(스타일시트)는 html과 다르게 () 대신 {}중괄호를, = 대신 :(콜론)를 사용하며, 값 뒤에는 반드시;(세미콜론)을 붙여야 한다.
또한 스타일시트에서는 '/* */'를 주석으로 쓰며, /* 와 */ 사이에 내용을 입력하면 된다.
 
2. font 태그(글자)와 관련된 CSS 속성
1) color : 색상값 ; - 글자 색상
2) font-size : 사이즈값 ; - 글자 크기
3) font-family : 폰트명 ; - 글자 폰트(폰트명이 길어 띄어쓰기된 경우 작은따옴표로 묶어줘야 함 / ex) 'time new roman'
4) font-style : (italic/normal) ; - 글자 기울임꼴 지정 / 태그 자체에 글자 기울임꼴이 지정되어 있는 경우가 있어 바꾸기 위한 기능
5) font-weight : (bold/normal) ; - 굵은 글꼴 / 태그 자체에 굵은 글꼴이 지정되어 있는 경우 바꾸기 위한 기능 / ex) th 태그
6) text-align : (left/center/right) ; - 글자의 가로 정렬 / 컨트롤에서 많이 쓰임 / ex) 버튼 위 글씨라서 가운데 정렬이 필요할 때
7) test-decoration : (underline/none) ; - 글자의 밑줄 / ex) a 태그에서 밑줄 지울 때
 
+ 사이즈를 나타내는 단위
절대크기 - pt, mm, cm, inch
상대크기 - px(해상도에 따라 달라짐), %, em
 
CSS(스타일시트)를 적용해볼 예시
◈ 태그에 CSS(스타일시트) 적용하기
<p> 태그에 스타일시트로 속성을 변경한 경우
  
 

 
위의 예시에서 <body> 부분은 전혀 건드리지 않고, p 태그에 스타일시트를 이용해 오렌지색 / 10pt / 기울임꼴 / 가운데 정렬을 속성으로 설정한 결과 아래와 같이 내용의 스타일이 변경되었다.
+ 참고로 스타일시트는 <head><body> 사이에 작성하며 <style> ........ </style>의 형태로 내용을 쓴다
◈ 클래스에 CSS(스타일시트) 적용하기
 
 
클래스에 스타일시트를 적용하는 것이기 때문에 .(점)을 클래스명 앞에 붙인 후 중괄호로 속성을 적용한다.
빨간색 / 20pt / 글자 밑줄을 "testA"라는 클래스에 적용한 예시이며, "testA"클래스를 제외한 나머지 내용에는 직전에 적용한 p태그의 스타일시트가 그대로 남아있음을 알 수 있다.

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)