현기증난단 말이예요

 요즘 유튜브엔 방구석 프로듀서부터 프로들까지 꽤 고퀄로 비트 비디오를 만들어 올리곤 하는데 거기 보면 꼭 파형 같은게 요동치던가 이미지들이 음원에 맞춰 커지고 작아지는 걸 볼 수가있습니다. 그런 영상을 보자면 듣는 입장에서 비트만 듣는거보단 눈이 즐거운게 사실이죠.

 솔직히 까놓고 말해서 내가 혼자 만드는 비트가 노오력을 안해서 안뜬거지 프로모션을 안해서라고는 생각 안하지만 이런 동영상 하나쯤 올리면 클릭수라도 하나 올릴 수 있지 않을까 하는 아주 작고 얄팍한 생각으로 검색을 해봤더니 생각보다 어렵지 않더이다. 컴알못의 입장에서 컴알못, 영알못 친구들도 알아듣기 쉽도록 정리하고자하니 방구석 프로듀서 친구들이 프로모션하는데 요긴하게 사용하길 바랍니다.

유의사항

1. 이 강좌는 After Effect CS6을 기준으로 작성되었습니다. 

영상알못이므로 그 외의 버전에서는

본 강좌 내용과 살짝다를 수도 있습니다. 

사실 달라도 난 이 버전밖에 안써봐서 대답을 못해줘요

2. 어떻게 영상을 사용하실지 모르겠지만 되도록 이미지와 폰트는

상업적 사용이 가능한 이미지와 폰트를 사용하도록 합시다.

3. 이미지는 클릭하면 크게 보입니다.

결과물

1.  파일 불러오기

처음 A.E를 켜면 요런 화면이 나옵니다. 이 화면에 대해서 간단히 설명하자면

1. 푸티지 목록 :  현재 A.E.프로젝트에서 쓰일 리소스들의 목록입니다.

큐베이스 한번씩 써보신 분들은 프로젝트의 Audio 폴더라고 생각하면 되겠네요. 

2. 미리보기 화면 : 지금 프로젝트가 만들고 있는 화면이 나타납니다. 진행바에 따라 바뀌죠

3. 소스목록 : 지금 프로젝트에서 실제로 사용할 음원 , 단색 소스 , 이미지 등등이 보여질 영역입니다. 

포토샵 하신분들은 레이어 목록, 큐베이스하신 분들은 트랙창이라고 생각하면 될거같네요.

4. 진행바 : 영상의 길이와 소스들이 사용될 구간을 정하는 화면입니다.

5. 재생 구간 : 되감기 빨리감기 렌더링 + 재생 등 여러 재생 컨트롤이 있는 부분입니다.

열심히 만들었으니 실제로 재생을 해봐야할 것인데 "SPACE"버튼으로 

재생이 가능하지만 AE는 바로 음원까지 렌더링하여 재생되지 않습니다.

저 곳에서 미리 부분 렌더링 후 음원과 함께 재생할 수 있습니다.

뭔말인지 모르겠다면 일단 건너뛰시고 진행해보시라.

이제 화면의 푸티지 목록 영역에서 오른쪽 클릭 후 필요한 파일들을 불러옵니다.

여기서 필요한 파일들은 배경으로 사용할 이미지 , 음원 정도가 되겠네요

그 후에는 다시 푸티지 목록 영역을 오른클릭 후 '새 컴포지션'을 클릭해 컴포지션을 만들어줍시다.

실제로 영상이 될 작업 파일인데, 큐베이스라면 cpr 파일, 포토샵이라면 psd파일 쯤으로 생각합시다.

이제 컴포지션의 설정을 해줘야합니다. 컴포지션 이름은 본인들이 편하신대로 지으시고

해상도도 1920 * 1080 정도면 유튭에 1080p영상 올릴 정도는 되니 무시하셔도 됩니다.

포인트는 하단의 '지속 시간'인데, 실제 영상의 길이가 될 예정이니 

음원의 길이에 맞춰서 설정해주시면 되겠습니다. 

제 음원은 3:39지만 음원이 끝나자마자 영상이 끝나면 정없으니 3:40로 합니다.

이제 컴포지션을 만들었으니, 푸티지 목록에 준비해둔 이미지와 음원을

소스 목록 영역으로 옮겨 줍시다. 

그럼 우측의 진행 바 부분에도 컴포지션의 길이만큼 혹은 음원의 길이만큼

막대가 추가된걸 볼 수 있습니다.

이미지에도 왜 막대가 생기냐 궁금 할 수 도있는데, 

저 막대가 존재하는 구간만큼 영상에 노출되기 때문에 막대가 생깁니다.

구간 별로 다른 이미지들을 띄우고 싶다면 참고하시길 바랍니다.

이미지를 불러온 후에는 작거나 큰 경우 이미지 크기를 화면 크기에 맞춰 조정해주세요

미리보기 화면을 다 덮어버릴 정도로 큰화면이라면 

침착하고 ctrl + 휠 위아래 하시면 컴포지션 보기 사이즈가 변하니

적당히 원하는 크기로 맞춰주시면 되겠습니다

2. Audio Spectrum 만들기 

이제 사실 사진과 음원이 들어간 동영상 만들기 정도는 끝났습니다. 하지만 목표는

오디오에 맞춰서 뿜붐하는 그래프 같은 것이니 먼저 그걸 만들어봅시다

소스 목록에서 오른쪽 클릭 후 '새로만들기' - '단색'을 클릭해줍니다.

무슨 색이든 사이즈가 뭐든 쓸모가 한개도 없으니 일단 만들어 줍시다

소스 목록에 생긴 단색 레이어를 오른클릭한후 '효과 컨트롤 열기'를 클릭해주면

위와 같은 화면이 나옵니다.

그럼 이제 효과 컨트롤이 있는 좌측 창에서 오른쪽 클릭 후

'생성' - '오디오 스펙트럼'을 클릭해줍니다. 

그럼 이제 미리보기 화면 부분에 보라색 점들이 촘촘히 박혀 있는게 보일 겁니다.

아직 스페이스 눌러봤자 아무일도 없을 것인데, 음원이랑 저 파형이 연결되지 않아서 그렇습니다.

침착하고 스크린샷 처럼 '오디오 레이어' 부분에서 우리가 가져온 음원파일을 선택해줍시다.

그 후 스페이스를 눌러 재생해보면 음원은 렌더링 되서 나오지는 않겠지만

파형이 움직이는걸 확인할 수 있습니다. 

하지만 저 못생긴 보라색을 그대로 쓰느니 안쓰고말지

저걸 이제 수정해봅니다.

주로 건들일 것들은 색칠 해둔 부분입니다. 

1. 주파수 대역 : 얼마나 스펙트럼을 촘촘하게 만들지 결정합니다 작을 수록 촘촘 해지겠죠

2. 최대 높이 : 파형의 최대 높이 입니다.

3. 내부/외부 색상 : 파형의 막대들을 아-주 노오력해서 보면 

내부 색조와 외부 색조가 다른걸 알 수 있습니다. 

그 색을 바꿔줍니다.

4. 디스플레이 옵션 : 파형을 막대로 표현할지 , 점으로 표현할지 , 선으로 표현할지 결정합니다.

여기선 디지털을 기준으로 합니다

5. 표시 위치 옵션 : 파형은 위/아래 영역으로 나뉘는데 

여기서는 '아래에 표시'옵션을 기준으로 합니다.

3. 오디오 진폭이용하기 

파형은 어느정도 만들어놨으니 이제 배경이미지를 음원에 맞춰서

뿜뿜! 커지고 작아지게 만들어봅시다

소스 목록의 음원을 오른쪽 클릭한 후 

'키프레임 도우미' - '오디오를 키프레임으로 변환'을 클릭해줍니다.

그럼 소스 목록에 '오디오 진폭'이 생성됩니다.

다음 내용을 진행하기 전에 

불러온 이미지를 오른쪽클릭해 

'변형' - '비율'의 퍼센티지를 적어두기를 당부합니다.

이 다음 부분이 강좌 중에 제일 복잡합니다. 염통 붙잡으시라

이제 스크린샷 초록색 부분인 

오디오 진폭의 왼쪽편의 작은 화살표를 눌러서 

'효과'와 '변형'영역을 보이도록 바꿔줍시다.

스크린샷 노란색 영역의 '그래프 편집기'클릭 후 

이제 붉은 영역의 초시계 모양을 ctrl + 왼쪽클릭

그리고 마지막으로 파란 부분을 왼쪽 클릭해준후

노란 점들이 다다닥다닥 모여있는 아래쪽에 

'effect("양쪽채널")(1)'이라고 적혀있는 부분을 클릭해 

수정해줄겁니다.

이제 여기서 'linear'라는 함수를 쓸겁니다 

엑셀에서 쓰는 함수정도 느낌으로 생각하시면 되겠습니다만

갑자기 이런게 튀어나와 당황하셨을 수 도 있을텐데

그닥 어려운 개념이 아니므로 스크린샷을 참고하면서 설정해주세요

실제 사용된 함수

linear(value , 15, 60 , 37.9 38.5)

함수 값들의 의미

linear( 의미없는글자 , 반응할 최소 값 , 반응할 최대 값 , 비율의 최소값 , 비율의 최대값)

뒤의 두 변수는 사실 약간 의미가 다르지만 여기서는 비율만 다루므로

위와 같이 이해하시면 편합니다.

제 음원의 음파는 10 ~ 70정도 까지 뻗어있고 

저는 15 ~ 60사이에서 반응 하도록 했습니다. 

플레이타임 두루두루 점이 많이 분포해 있는 구간으로 설정하면 편합니다.

제 이미지는 굉장히 큰 해상도에서 줄였으므로 비율이 제법 작습니다

본인이 가진 이미지에 맞춰서 설정하도록 합시다.

설정을 마치면 아까 소스 목록 오른쪽 위의 '그래프 편집기'를 다시 클릭해주고 

진행바가 막대들이 보여지도록 다시 변환해줍시다

4. 정리 및 텍스트 삽입 하기 

텍스트 배치와 요소들 정리가 끝난 모습입니다.

정렬 시에는 스크린샷의 초록 색 영역에 있는

'맞춤' 영역을 사용하면 수월하게 진행 할 수 있습니다. 

4. 렌더링 하기

이제 영상을 만들었으니 실제 영상파일로 렌더링을 해봅시다.

위의 메뉴에서 

'컴포지션' - '미리 렌더링'을 클릭해줍니다.

이제 렌더링 화면으로 하단의 화면이 변경되는데 여기서 

조작할 것은 크게 두가지 입니다.

초록색 부분은 영상의 설정을 담당하고 

보라색 부분은 파일의 위치와 이름을 결정해줍니다.

보라색 영역을 클릭해 렌더링한 결과물의 위치와 이름을 대충 정해준 후 

초록색 영역을 클릭합시다

이제 출력 모듈을 설정해줍시다.

보라색 부분의 '형식'을 'h.264'로 바꿔줍시다

그리고 파란색 영역의 오디오 출력 영역도 잊지말고 체크해주세요

그 후에는 '확인' 버튼을 클릭 해줍시다.

이제 대망의 렌더링 버튼을 눌러줍시다

렌더링 버튼을 눌러주면 노란색 진행바가 차면서 렌더링을 시작합니다

컴퓨터 성능에 따라 시간이 천차만별이니 

렌더링에는 얌전히 컴퓨터가 열심히 일하도록 내버려 둡시다

시간이 지나면 맑고 고운소리로 렌더링이 완료되었음을 알려줍니다.

여기까지가 오디오 스펙트럼과 오디오 파형을 이용한 Audio React 비디오 만들기 과정이 었습니다. 이 강좌에 사용된 프로젝트와 푸티지들은 아래에 링크로 달아두겠습니다. 저는 노오력이 부족해서 주목 받지 못하고 있지만 실력이 있으나 프로모션에 어려움을 겪고 있는 분들에게 도움되기 바랍니다.

프로젝트 파일 링크 : https://drive.google.com/drive/folders/0B_Q4bjnvOwPWUHMxeVVONlpaUWM?usp=sharing

폰트 링크 : http://hangeul.naver.com/

만약을 위해 다들 저작권에 저촉되지않은 폰트와 이미지를 사용하시길 바랍니다. 빠이 

Heroku X NodeJS

1. Heroku App 만들기 

이 글은 Heroku사의 Getting Started with Node.js on heroku 문서를 참고해 만들어졌습니다.

1. Heroku 로그인 

 개요 글에서 남긴 간단한 개발 요건들을 설치한 후 Heroku의 회원가입을 마치고나면 개발을 시작할 준비가 끝나게 된다. 글을 읽기전에 혹시나 NodeJS 혹은 Heroku Toolbelt가 설치되지 않았다면 먼저 설치해주길 바란다.  설치가 모두 끝난 뒤에는 먼저 Heroku Toolbelt에 계정을 로그인해두어야한다. 먼저 CMD를 실행해보자. 

 
  heroku login

 위의 명령어를 실행한 후 이메일과 패스워드를 입력해주면 이제 어플리케이션을 생성하고 관리할 수 있게된다. 

2. Heroku Application 만들기

 heroku측에서 제공하는 소스를 그대로 사용할 수 있겠으나 이 글에서는 바닥에서부터 웹을 만드는 과정을 기록하는게 목적이기때문에 어플리케이션을 생성하고 직접 업로드하고 올려보도록하겠다. 먼저 Application을 생성하려면 cmd에서 아래의 커맨드를 입력한다. 

heroku create YOUR-APP-NAME

 위의 커맨드를 입력하면 (heroku의 앱 이름 유효성의 벗어나지않는 경우) 간단하게 heroku application이 생성된다. "git@heroku.com:YOUR-APP-NAME"형식의 git 주소를 기억해두도록하자.

생성된 어플리케이션은 http://heroku.com에서 로그인한 후 대쉬보드에서 확인 할 수 있다.

3. git 

 Heroku앱을 만들고 나면 Heroku앱을 작업할 공간을 로컬에 만들어두어야한다. 먼저 cmd로 소스를 저장할 폴더로 이동한 후 아래와 같이 입력해주자 

// 해당 폴더에 git 초기화
git init
git clone https://git.heroku.com:YOUR-APP-NAME.git

 heroku의 git주소는 보통 git@heroku.com:YOUR-APP-NAME.git 형식으로 설정된다. 위와 같이 입력하면 현재 폴더로 heroku에 저장된 APP의 git을 가져오게된다. 물론 현재는 앱을 만든 후 아무것도 업데이트하지 않았기때문에 클론된 폴더안에 .git폴더 외에는 아무것도 들어있지 않다.

# 혹시 git clone이 정상적으로 작동되지 않는다면 heroku명령어로 소스를 가져올 수 도 있다.

heroku git:clone --app YOUR-APP-NAME

4. Heroku에서 실행할 Node 소스 코딩 

 이제 git을 초기화하고 git 폴더를 가져왔으니 Heroku에서 사용할 간단한 NodeJS소스를 로컬에서 먼저 작업해야한다. 간단히 콘솔에서 앱이 실행되는 상황을 확인하고 화면에 "Hello World"를 찍어주는 정도까지만 진행해보도록 하자.

// index.js
 
var express = require("express"),
 app = express();

// Heroku의 환경 변수 PORT가 존재하면 환경변수를 사용하고 , 없다면 5000포트를 사용하도록한다.
// 로컬에서 실행하기 위해 설정한다.
app.set("port" , (process.env.PORT || 5000));
app.listen(app.get("port") , 
  function(){ 
   console.log("APP IS RUNNING ON ["+ app.get("port") +"]");
 });

app.get("/" , function(req , res){
  res.send("Hello World!");
});

위 소스를 "index.js"라는 이름의 파일에 저장한 뒤에  npm으로 express를 설치 해주고 node로 index.js 파일을 실행하면 http://localhost:5000에서 HelloWorld라는 문구를 확인해 볼 수 있다. 이 정도면 동작을 확인 할 수 있는 간단한 nodeJS앱이 만들어진 것 같다. 

 하지만 Heroku에서 해당 앱을 실행하기 위해서는 추가적으로 package.json파일을 작성해주어야 한다. heroku의 git에 생성된 프로젝트가 어떤 엔진에서 돌아가는지 , 어떤 소스를 메인으로 실행할지, heroku앱이 스타트 되면 어떤 스크립트를 실행할지에 대한 설정이 되어있지 않기때문이다. package.json은 간단히 아래와 같이 작성 할 수 있다. 

{
    "name": "demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start" : "node index.js"
    },
    "dependencies" : {
        "express" : "~4.9.x"
    },
    "engines" : {
        "node" : "0.12.2"
    },
    "author": "GOMJA",
    "license": "MIT"
}

앱에서 기본적으로 express를 사용하니 dependencies에 express를 추가해주고 , main파일은 index.js로 사용하며 앱의 엔진은 node 0.12.2버전을 사용한다고 명시해 두었다.

5. Heroku에 소스 업로드 

 package.json파일과 간단한 node 소스를 작성하였으니 heroku로 파일을 업로드해야하는데, heroku는 ftp등을 사용하지 않고 기본적으로 git을 사용하고 있기때문에 해당 앱의 git으로 push해주어야한다. heroku앱으로 푸시 하기 위해서는 cmd에서 다음과 같이 입력해주면된다. 

git add .
git commit -m "YOUR COMMIT MESSAGE"
git push heroku master

이제 앱의 git으로 소스가 푸시되고 앱을 실행할 수 있게되었다. 혹시 git push heroku master문을 실행할 때 정상적으로 실행되지 않는다면 

git remote heroku -v

로 git의 환경을 설정해주자. heroku에 push하기 위한 설정을 git에서 자동으로 작업해준다. 

6. Heroku앱 실행하기 

 Node소스를 작업하고 서버에 업로드하였다면 이제 업로드된 heroku앱을 직접 실행해볼 차례다. cmd에서 다음과 같이 타이핑하자

heroku ps:scale web=1
heroku open

현재 작업중인 어플리케이션을 배포하고 인스턴트를 생성해준 후 , heroku 어플리케이션을 실행하도록한다. 2번째 줄을 실행하면 잠시뒤 자동으로 브라우저에 http://APP-NAME.herokuapp.com이라는 도메인으로 접근하게된다. 

 소스가 제대로 올라갔다면 로컬에서 실행한 화면과 동일하게 화면에서 HelloWorld를 출력해줄 것이다.

1. Heroku ?

 여태 미루고 미뤄왔던 NodeJS 개발을 다시 붙잡게될 기회가 생겼는데, 정작 시작하고 나니 호스팅에 대한 고민을 여러번 하게 되었었다. Cafe24등의 한국 호스팅으로 빨리 빨리 처리하려던 차에 우연찮게 heroku라는 해외 호스팅을 알게되었다. ruby, php, java부터 node.js, python과 다소 생소한 clojure등도 취급하고 있다. 

 다소 생소한 포맷부터 주로 사용되는 포맷들까지 제법 넓은 범위를 아우르고 그 포맷들에 따른 Doc들도 상황별로 제법 상세하게 준비되어있기 때문에 , 취미 및 공부삼아 간단한 개발을 하기에는 더 할나위 없는 포맷이라고 할 수 있을 것 같다. 

 heroku를 사용하는데 있어 제일크게 다가온 장점은 아무래도 무료라는 점. 한개의 dyno(웹 어플리케이션 단위)까지 무료로 사용할 수 있으나 그 사양이 제한적이다. 자세한 사항은 여기를 참고하시길. 

 가격적인 측면뿐만 아니라 addon들도 선택하는데 제법 큰 역할을 했다. mongoDB부터 postgres등의 DB 운용부터 각종 포맷별로 유용하게 사용될 수 있는 기능들은 addons으로 무료 혹은 유료로 많은 개발자들이 배포하고 있는데, heroku사용자는 이 기능을 간단하게 가져와 사용할 수 있다. 각종 addon들의 설명도 제법 잘되어있어 개발하는데에도 큰 어려움없이 진행할 수 있어 여러모로 도움이 되었다. 

 요즘은 NodeJS를 취급하는 호스팅 업체가 제법 많아져서 선택의 폭이 넓어졌지만, 간단한 공부 목적으로 개발을 시작하는 단계라면 heroku를 사용해보는 것도 좋을 것 같다. 이 글은 몇 없는 heroku사용자 중에서도 몇 없는 node개발을 다룰 예정이니 heroku에 흥미가 있다면 계속 지켜봐주길 바란다.

2. 조건

•   개발 환경 
• OS : windows 10 pro k
• IDE : brackets io (변경)
• Editor : Microsoft Visual Studio Code
• 도구
• heroku toolbelt
• heroku의 어플리케이션들을 커맨드 상에서 다룰 수 있게 해준다. heroku의 git을 이용할 수도
• nodejs 
• nodejs를 개발하려고 하니 기본적으로 설치되어있어야 한다. 
• git 
• heroku toolbelt에서 가지고 있다. heroku로 소스를 보내고 내려받는데 사용하도록 한다.