현재 CJ 미디어에서 방영 중에 있는 XTM 네트웍 디자인 작업 과정에 대해 이병현 25 프레임 실장의 설명으로 알아보겠다 . 일반적으로 네트웍 디자인 , 채널 디자인으로 불리는 이 작업은 기업으로 따지면 Corporate Identity 즉 CI 개념과 Brand Identity 즉 BI 작업을 동시에 하는 것이라고 생각하면 된다 . 물론 , 채널마다 틀리겠지만 이번에 작업한 XTM 같은 경우 여러 가지의 콘텐츠가 하나의 채널을 이루는 조금은 개념을 잡는 것이 쉽지 않는 작업이다 .
이병현 25FRAME 실장

1. Image Campaign
2. 각종 Sub ID 및 Title
3. 영상 출력 기법

이전 네트웍에서 브랜드 네임만을 강조한 것에서 벗어나 XTM 만의 특별한 이미지가 만들어져야 할 때라고 여겨졌다 . 강렬하면서도 자극적이고 XTM 성격에 맞는 로고 이외의 구체적인 이미지로 우리는 XTM 채널의 New HERO 를 탄생시키고자 했다 . 네트웍의 기본 엘리먼트는 HERO 가 순간적으로 남기고 간 흔적으로 구성하는 쪽으로 초점을 맞췄다 .

처음으로 제시했던 것은 파편 (Broken Piece) 이였다 심플하고 고급스러운 빛의 배경에서 빠른 히어로의 움직임 뒤에 부드럽게 날아 오는 파편들을 엘리먼트로 사용해 파워감을 강조하고자 했다 .

두 번째는 빛의 잔상으로 표현하고자 하였고 그 뒤로 나온 것이 순간적인 Rush&Painting 이었다 . 그 중 클라이언트쪽에서 만족해 하던 rush painting 을 메인으로 새로운 구상 안을 마련했다 .

기획 초반에 나왔던 여러 가지 시안 작업들

1. Image Campaign
이미지 캠페인 영상은 말 그대로 채널이 가지고 있는 이미지를 홍보하는 것이다 . B-BOY 들의 역동적이면서 자유로운 움직임을 XTM 이 가지고 있는 강렬하면서도 자극적인 이미지에 맞는다고 생각해 채널의 새로운 모티브를 Speed&Painting 으로 정했다 .

이미지 캠페인을 위한 스토리보드 초안

1) XTM Image Campaign A
기획이 진행 되는 단계에서 보다 HERO 의 모습을 은유적으로 감추는 방향으로 점차 바뀌어 갔고 차후엔 HERO 가 점점 약화되어 오히려 액션에 더 중점을 두게 되면서 HERO 라는 기본 컨셉은 버려 지고 스피디한 Painting Trace 가 메인 주제로 변하게 되었다 . 회의가 계속 진행되면서 디자인의 기본 스타일 컨셉은 Reality+Extreme 으로 점차 자리잡아 갔으며 보다 사실적이고 익스트림한 느낌을 표현 하기 위해 실사 촬영이 기반이 되어야 한다는 것과 정형화된 디자인에서 벗어난 디자인을 만들어야 한다는 판단을 하게 됐다 .

2) XTM Image Campaign B
이미지 캠페인 중 하나는 실사 촬영 보다는 3D 로 제작된 자동차를 이용하여 좀 더 스피디하고 스케일이 큰 작업을 하기로 결정하였다 . 초반에는 두 대의 자동차 경주를 컨셉으로 잡았지만 작업 도중 너무 자동차를 부각시키지 않는 방향에서 Xtm 의 성격을 표현하는 방법을 다시 찾았다 .

3) XTM 촬영 스케치
역동적인 움직임을 B-BOY 의 춤에서 찾아내기 위해 우리나라 B-BOY 들을 모조리 섭외했다 . 그 중에서 ‘ 라스트 포 원 ' 이라는 팀을 선택하였다 . 그 이유 중 하나는 이 친구들이 이미 이 바닥에서는 춤으로 입증이 되었기 때문이다 ( 메가패스 등 여러 가지 광고에서도 일반인들에게 선보인 바 있으며 현재 MBC 에서 방영 중인 미니시리즈 ‘ 오버 더 레인보우 ' 에서 이 팀원 중 한 명이 나오고 있다 ). 프로라는 것이 무엇인지 보여 주는 그들의 몸동작 , 열정 등에 감동했다 . 이번 작업이 잘 되었던 것도 그들의 땀방울이 한 몫을 했다 .

4) 작업 소스 제작
스타일리쉬한 액션에 의해 스피디하게 뿌려 지는 페인팅을 표현 하기 위해 액션 촬영 컨셉과 페인팅의 디자인 표현 방식을 고민해 보았다 . 그리고 페인팅의 디자인적인 표현을 위해 여러 가지의 표현적인 레퍼런스와 재료에 따른 움직임을 조사한 후 여러 번 촬영을 통해 페인팅 촬영 소스들이 만들어 졌다 ( 실제 페인팅이 되는 듯한 느낌의 소스를 얻기 위해 다양한 방법을 통해 실제 소스를 HD 로 촬영하였다 , 초당 60 프레임 ) 그러한 소스들을 차후에 다양한 소스로 활용하기 위해 일러스트로도 변형했다 .

5) Key 작업
각각의 네트웍 디자인에 사용될 소스들을 촬영하기 위해 한쪽에서는 이미지 캠페인에 관련된 촬영을 다른 한편에서는 B-BOY 들의 움직임을 그린 스크린으로 촬영하였다 . 이것들은 차후에 간단한 벡터 이미지나 라인들로만 사용하기 위해 촬영이 되었으며 생각보다 다양한 움직임들이 나와 네트웍 작업을 수월하게 만들어 주었다 .

6) Network Design
촬영 소스들을 기반으로 본격적인 네트웍 디자인 작업이 진행 되었다 . 처음 아웃풋 작업들은 좀더 완성도 있는 표현을 위해 구체적인 메인 오브젝트들을 넣어 각 컨텐츠 마다 의미 부여를 많이 해보려 했으나 오히려 역효과가 생겼다 . 그래서 처음 컨셉에 비해 직관적이다는 의견 제시가 많아 재 작업에 들어가야 했다 . 처음으로 돌아가 우리는 다시 촬영물을 이용한 액션 + 페인팅을 위주로 네트웍을 재구성하게 되었고 익사이팅한 움직임과 강렬하게 남는 페인팅 흔적이 현재 네트웍의 전체를 이루게 되었다 .

2. 각종 Sub ID 및 Title

1) Sub ID A
프랑스에서 불 쇼를 하는 친구들을 섭외하여 서브 아이디 중 하나를 제작하였다 . 남자와 여자 모두 촬영을 하였지만 너무 남성 위주의 네트웍 디자인이 될 것을 우려하여 부드럽지만 남성적인 불 쇼를 하는 여자를 선택하게 되었으며 , 배우들이 움직이는 불을 따라서 애프터 이펙트의 Particular 를 이용해 그 잔상을 표현했다 .

2) Sub ID B
그 외의 서브 아이디 작업들과 네트웍 작업들은 촬영 기반의 실사들에 페인팅 소스와 디자인들을 적절히 배합해 최대한 Xtm 의 Extreme 한 느낌을 살리려고 노력했다 .

3) Sub ID C

4) BlockOpen

5) In this Month

06) MovieTitle

7) NEXT

8) Tomorrow

9) Tonight

10) Weekend

11) Sign ON

12) 연령고지

3. 영상 출력 기법
완성된 영상을 출력하는 방법에는 프로그램에 따라 여러 가지 방법이 있는데 온라인에서 가장 인터랙티브하게 보여 줄 수 있는 Flash 로 출력하는 방법에 대해 알아 보겠다 .
글 . 최석영 한캐릭터연구소 대표

렌더링 세팅


소렌스 코덱 적용

3) 알파채널 출력 기법
합성의 기준이 되는 알파채널을 조율하면 배경 뿐만 아니라 원하는 레이어를 선택적으로 쉽게 합성할 수 있다 . 특히 웹 디자인 작업에서는 배경을 투명하게 가져가서 작업할 때가 많은데 이럴 때는 알파채널을 저장할 수 있는 확장자를 이용해 저장하면 쉽게 저장할 수 있다 . 특히 PNG 는 용량도 작으며 알파채널을 저장할 수 있어 많이 사용된다 .

4) 사례 분석
* After Effect 에서 SWF 로 출력하기
작업이 끝나고 램프 리뷰를 클릭해 확인한다 .

메뉴에서 File > Export > Macromedia Flash (SWF) 를 선택한다 ( 여기에서 SWF 출력이 가능하다 ).

세팅은 비교적 간단하다 . 자신이 원하는 퀼리티를 선택하고 사운드가 필요하면 오디오를 설정하면 된다 . After Effect 에서 SWF 로 출력해 작업이 가능하지만 그것보다 리타임 작업을 해서 PNG 로 출력하는 것을 추천하고 싶다 .

* After Effect 에서 PNG 로 출력하기
메뉴에서 Window > Render Queue [Ctrl + Alt +0] 를 선택한다 .

TIP : 상위 개념의 그래픽 프로그램은 이렇게 렌더링 부분을 따로 관리하는 윈도우가 존재한다 . 모든 렌더링 관련 부분이 이곳에서 이루어진다 . 맥스와 마야도 같은 구조이다

작업하고 있는 comp 아이콘을 레더큐 창에 드래그해 렌더링을 준비한다 .

랜더큐 창에서 아웃풋 모듈 세팅에서 PNG 시퀸스를 선택한다 . 시퀸스란 일련의 번호로 이어진 이미지 파일이다 . 영상 프로그램에서는 영상처럼 인식될 수 있으며 포토샵처럼 2D 프로그램에서 한 장씩 이미지 러터칭이 가능하다 . 그리고 렌더링시 프레임 단위로 렌더링을 걸기 때문에 렌더링 오류가 생길 때도 오류가 생긴 부분까지 다시 렌더링 걸 수 있다 .

채널에서 알파채널과 RGB 를 선택한다 . 배경을 투명하게 가져 갈 생각이다 .

PNG 시퀸스를 렌더링 걸기 때문에 꼭 폴더를 만들어 거기에 따로 저장하기 바란다 . 몇백 개 이상의 파일이 만들어질 수 있기 때문이다 .

렌더 세팅을 열어 프레임 수를 조율한다 . 플래시 작업은 용량을 생각해야 하기 때문에 꼭 프레임 수를 테스트해 보고 렌더 세팅을 정하기 바란다 . 여기서는 1 초당 12 프레임으로 정했다 .

플래시에 임포트해 사용한다 . 목적에 따라 배경을 투명하게 또는 배경색을 가지고 임포트 할 수 있다 .

TIP : 배경에 아무것도 그리지 않았을 때만 투명하게 가져올 수 있다 . 레이어로 가려지면 투명하게 가져 올 수가 없다 .

작업후기

고향 후배들이었던 ‘ 라스트 포원 ' 맴버들이 아침부터 다음 날 새벽까지 열심히 뛰어 준 덕분에 좋은 영상이 나왔던 것 같다 . 지면을 통해서 나마 고맙다는 애기를 전하고 싶다 . 프로젝트의 처음부터 끝까지 힘들게 모든 것을 이끌어 주신 이영용 감독님과 최윤정 팀장 . 바쁜 와중에도 옆에서 함께 힘들어 해준 임보현 팀장 . 그리고 김대성 대리와 이성진 대리 , 이경희 , 김혜진 모두들 너무 고생해서 완성한 작업이라 애착이 남다른 프로젝트 중 하나로 남을 것 같다 . 이번 작업을 통해 배운 것도 잃은 것도 많았던 것 같다 . 그래픽 위주의 작업보다 실사와 함께 모든 것을 구성하는 작업이 케이블쪽 작업에서는 그리 많지 않다 . 그래서 이번 작업에서 실수도 많이 했으며 작업 완료 후에도 아쉬움이 많이 남았었다 . 하지만 많은 것들을 배웠기 때문에 다음에 네트웍 디자인을 한다면 아마도 이번 작업보다 훨씬 더 쉽고 효과적으로 할 수 있을 것이다 .

애프터 이팩트을 이용해 영상을 제작하는 방법과 애프터 이팩트 7 을 이용해 플래시로 영상을 출력하는 방법에 대해 알아보았다 . 애프터 이팩트는 방송 , 영화 , 모바일 인트로 등의 영상을 만들 때 영상의 효과를 높여주는 프로그램으로 많이 사용되고 있다 . 더불어 현란한 효과로 완성된 영상물을 플래시는 온라인에서 사용자에게 부하 없이 보여주는데 최고의 역할을 하고 있다 . 애프터 이팩트와 플래시가 과연 다음 버전에서는 또 얼마나 놀라운 기능으로 우리 앞에 나타날지 기대된다

자료 제공 - 영상 멀티미디어 컨텐츠 전문지 비디오 아트 (www.videoarts.co.kr) 제공 .