모션그래픽이란?


모션그래픽이란 오디오와 결합하여 움직임이나 시각적 효과를 만들어 내는 디지털 영상 기법입니다. 혹자는 모션그래픽이 애니메이션의 한 종류라고도 하는데요, 포괄적인 의미로 보면 맞는 말입니다. 다만 실질적으로 사람들이 인식하는 용어의 의미는 약간 다릅니다. 우리가 흔히 알고 있는 지브리의 영화나, 토이 스토리 등의 3D 영화와 같이 스토리의 서사가 더 강조된 것을 애니메이션이라고 통상적으로 지칭하고 있고, 모션그래픽은 광고나 뮤직비디오 등의 좀 더 상업적인 장르에 많이 쓰입니다. 또한 컴퓨터 그래픽이라는 것은 동일하지만, 영화나 드라마 등 의 특수 효과는 CG라고 불리고 있습니다.


애니메이션 'Alma' (출처: Rodrigo Blaas on Vimeo.)



모션그래픽 Google Wallet (출처: Buck on Vimeo.)




한편 요즘엔 이러한 영상 기법에 따른 장르 간의 경계가 많이 없어지고 있습니다. 모션그래픽 또한 홀로그램, VR 등 기술과 결합해 새로운 도약에 접어들었습니다. 디지털 기술이 발전하면서, 모션그래픽 기법도 날로 다양해지고 있습니다. 단편적으로 기술의 발전이 디자인과 무슨 관련이 있을까 의문을 품을 수도 있지만, 이미 둘의 관계는 떼려야 뗄 수 없게 되었습니다.



홀로그램 인스톨레이션 Sprite Symphony (Hologram Installation with Fairies) 

(출처: Davy and Kristin McGuire on Vimeo.)



목적을 명확히


모션그래픽 프로젝트를 시작하기에 앞서 가장 먼저 고려할 점은 ‘어디에’ ‘어떻게’ 영상을 활용할 것인가에 대한 것입니다. 아래의 이미지는 각 매체에 맞는 해상도를 보여주고 있습니다. 어떤 영상을 만들 것인가에 따라 사이즈가 달라지기 때문에 충분히 심사숙고해서 결정해야 합니다. 그림을 그리기 전, 어떤 크기의 도화지를 선택할지 결정하는 것과 비슷합니다.





현재는 Full HD(High Definition)이라고 불리는 1920X1080 픽셀 사이즈가 가장 많이 활용되고 있습니다. Ultra 라는 수식어가 붙은 HD, 혹은 4K는 영화관같이 아주 큰 스크린에 사용됩니다. 해상도가 높다고 무조건 좋은 것도 아닙니다. 스마트폰 UX를 UHD로 만든다면, 기능 지원 자체가 안 될 가능성이 높습니다. 본인이 만들고자 하는 영상의 목적을 생각하여 합리적으로 결정하거나, 전문가의 조언을 받는 것이 좋습니다.


스마트폰 사이즈 영상 Snapchat Supacut (출처: Joel Plosz on Vimeo.)



프로세스 이해하기


모션그래픽뿐만 아니라, 디자인 작업은 굉장히 복합적이고 상황에 따라 달라집니다. 하지만 기본적인 프로세스를 인지하고 디자이너들과 소통하게 되면 불필요하고 소모적인 오류들은 피해 갈 수 있습니다. 첫 단계는 기획입니다. 이 단계에서 어떤 내용을 영상으로 표현하고자 하는지 디자이너에게 전달하고, 표현을 극대화하기 위해 실사 촬영에 그래픽을 덧붙이거나 온전히 그래픽(2D, 3D, 혹은 2D와 3D의 혼합)만으로 표현하는 등의 기법에 대한 전체적인 콘셉트를 정하게 됩니다. 디자이너는 이에 따라 스토리보드를 제작합니다. 스토리보드 작업과 콘셉트 작업은 긴밀한 관계에 있어 동시에 이루어지는 경우가 많습니다.


스타일에 대한 합의가 이루어지면 사운드와 함께 애니메틱을 제작합니다. 이 과정은 종종 생략되기도 하는데, 전반적인 영상의 흐름과 분위기, 타이밍 등을 이해하기에 좋은 밑 작업입니다. 이러한 사전 준비 과정이 끝나면 실제 디자인과 애니메이션 작업에 들어갑니다. 이 과정에서 프리뷰 영상 등을 주고받으며 디자이너와 클라이언트가 소통하게 됩니다. 프리뷰는 저화질의 확인용 영상으로 주고받는 것이 통상적입니다. 바로 렌더링 시간과 용량 때문입니다.


IGA Aide Gourmet 의 2D 애니메틱, 3D 애니메틱, 애니메이션 프리뷰, 렌더링 영상

(출처: SHED on Vimeo.)


모션그래픽을 비롯한 여타 영상물들은 반드시 렌더링 과정을 거쳐야 합니다. 렌더링이란 설정된 이미지를 연산처리하여 최종적인 화면으로 만들어 내는 것을 뜻합니다. .avi .mov .wmv 같은 확장자명을 가진 영상 파일이 이 렌더링 작업을 거쳐 나오게 된 결과물입니다. 렌더링을 거치지 않으면 영상은 그저 프로그램 안에서 돌아가는 하나의 파일에 지나지 않습니다. 영상 그 자체의 러닝타임보다 렌더링의 시간이 더 걸리는 경우가 대부분이며 특히 해상도가 높을수록, 다양한 3D 기법이 사용될수록 시간은 더 늘어납니다. 영화 아바타의 경우 한 프레임(1초에 24프레임)을 렌더링 할 때 수 시간이 소요되었습니다. 따라서 모션그래픽 작업 시에는 충분한 렌더링 시간을 미리 확보해야 합니다.




다른 디자인 작업과 마찬가지로 모션그래픽 작업 역시 한 가지로 정의되거나, 정해진 법칙이 있는 것이 아닙니다. 하지만 프로젝트에 대한 이해는 진행을 원활하게 하는 밑거름입니다. 모션그래픽 프로젝트를 의뢰하기 전, 기본적인 지식을 숙지하고 반영해 미리 계획해보세요.




by 돼지발자국





Posted by slowalk

가상현실(VR)은 존재하지는 않지만, 실제와 유사하게 만들어진 특정 환경 속에서, 사용자가 실제와 같은 외부의 자극과 반응을 통해 진짜와도 같은 경험을 할 수 있는 공간, 기술을 의미합니다. 가상현실의 몰입감을 위해 기술의 발전도 중요하지만, 가상현실의 경험에 대한 생각도 함께 발전하고 있을까요?

개인적으로 웹이나 모바일과는 또 다른 가상현실의 사용자 경험에 관심이 있는데요. 몰입형 가상현실 디자인에 대한 이해를 도와주는 미디엄 백채널(Backchannel) 블로그 글을 소개합니다.




1995년 미국, 3D게임기인 닌텐도의 ‘버추얼 보이’가 공개되었습니다. 불행히도, 게임 후 지속되는 붉은 잔상과 눈을 못 뜰 정도로 아픈 두통 때문에 1년만인 1996년 발매가 중단됩니다. 




버추얼 보이는 두 개의 선형 배열 각각이 진동하는 거울을 통해 플레이어의 눈에 전달되며 3D효과를 내는데, 이 거울이 게임기에서 웅웅거리는 소리를 나게 했습니다. 이 3D효과는 안구에 외상을 일으킬 수 있어서, 닌텐도는 15분 혹은 30분마다 게임이 멈추도록 옵션을 넣었습니다. 버추얼 보이는 진정한 몰입형 현실이라기보다 좌우 화면의 시차로 만들어진 3D효과였으며, 결과적으로 '버추얼'은 이름뿐인 2차원 게임이었습니다. 


15년이 흐르고, Oculus, 삼성의 Gear VR, 구글의 Cardboard, HTC Vibe, OSVR, 그 외 다른 많은 프로젝트와 함께 대대적으로 가상현실의 시대가 돌아왔습니다. 





지난 20년 동안 가상현실 기술은 굉장한 발전을 했지만, 가상현실의 경험에 대한 생각은 그렇지 않았습니다. 평면 스크린에 대한 디자인과 몰입 환경에 대한 디자인은 근본적으로 차이가 있습니다. Instrument사에서 가상현실을 시험할 때의 주요 포인트에 대해 알아보겠습니다.






1. 사람처럼 생각하세요.

사람은 전통적이고 본능적인 위험과 보상 신호를 이해하기 쉽습니다. 예를 들어, 가상현실 속 한 편에는 큰 구덩이가 있고 다른 편에 평탄한 길이 있다면, 실제로 위험하지는 않지만 여러분은 길을 택할 것입니다. 그 구덩이와 도로에 표지판이 있다고 생각해봅시다. 그 표지를 읽고 이해하는데 시간이 걸리게 됩니다.(인지 부하) 게다가 사람들은 많이 읽지 않으려는 경향이 있습니다. 따라서 사람들의 절반은 구덩이로, 나머지는 길가로 향할 것입니다. 





2. 관점을 이용하세요.

디자이너는 계층구조를 표현할 때, 크기와 대조, 색상을 사용합니다. 이런 도구들은 가상현실에서도 사용할 수 있지만, 약간의 차이가 있습니다. 크기는 사용자와 컨텐츠 사이의 거리를 기준으로 정할 수 있습니다.




컨텐츠는 일정 거리에 떨어져 고정되어있는 Heads-up 디스플레이와 같습니다. 



컨텐츠는 주위 환경에 고정될 수 있고, 사용자가 움직이면 그 컨텐츠에 대한 사용자의 관점도 변합니다. 



가상현실 세계 안에서, 컨텐츠는 자유롭게 떠다닐 수 있습니다.




3. 둘러보세요.

요즘은 도처에 즐길 거리가 많고, 사람은 자신의 몸과 머리를 돌려 움직이는 것에 익숙합니다. 그럼에도 불구하고, 디자이너들은 버추얼보이처럼 3D공간에 2D 방식을 적용하려 합니다. 





Cardboard나 Gear VR와 같은 가상현실 세트에서는 실제로 어떤 일이 벌어지고 있을까요? 
하나의 화면을  해상도가 반으로 나뉜 두 개의 화면으로 나눠 양쪽 눈에 각각 보여줍니다. 여러분의 눈은 이 영역의 가운데에 초점을 맞추기 때문에, 크기가 작고 낮은 해상도 영역으로도 문제가 없습니다.

이 작은 초점 영역을 일반적인 타일 메뉴를 사용한 몇 가지 옵션으로 해결할 수 있습니다.





1) Flat : 공간의 느낌이 없는 벽의 형태로, 일반적인 방식입니다. 원근법에 따라 글자나 이미지를 읽기가 어렵습니다.

2) Curved : 컨텐츠는 사용자를 휘어 둘러싸게 되며, 타일은 항상 사용자를 마주합니다. 글자와 이미지를 인식하기가 보다 쉽습니다. 

3) Less Content : 컨텐츠를 움직이게 하는 방식이 필요하지만, 컨텐츠의 양을 줄이는 것은 좋을 해결책이 될 수 있습니다.

4) Surrounded : 최선의 방법입니다. 초점의 중심에 가까운 정도로 계층구조를 나타낼 수 있습니다. 부수적인 컨텐츠는 화면에서 바로 밀려나지만 계속해서 접근이 가능합니다.


4. 사용 환경에 맞는 행동 유도성

일반적으로 UX디자인에서 사용되는 용어인 행동유도성(어포던스, Affordance)은, 기존에 알고 있는 사실이나 사물의 특성이 인간의 행동에 영향력을 미치는 현상을 의미합니다.  



웹을 예로 들면, 글자 링크에 마우스를 올리면 커서가 손모양 아이콘으로 변하는 것을 볼 수 있습니다. 이것은 사용자가 클릭 하면 페이지가 이동하거나 새 창이 열릴 것이라는 어떤 상황을 암시합니다. 마우스 뿐 아니라 트랙패드나 스타일러스로 해도 동일하게 손모양 아이콘으로 변하며, 그 어포던스가 바뀌지 않습니다. 사용자들도 같은 동작을 기대하는 것에 익숙합니다.

가상현실에도 무엇과 상호작용을 할 수 있고, 언제 그 상호작용이 일어날지를 나타내기 위한 어포던스가 필요하며, 그 어포던스의 감각적 표현은 스크린 어포던스와 같은 기술로 확장되어야 합니다.




5. 경험에 집중하세요.
가상현실은 몰입이 중요하며, 가상현실 환경의 디자인으로 사용자가 느끼는 실재감을 향상시키고 뒷받침할 수 있습니다.

- 빠른 움직임을 피하세요. 사용자를 피곤하게 만듭니다. 
- 수평선은 안정적으로 유지하세요. 가상현실에서 회전하는 수평선은 배 안에 있는 것과 같습니다.
- 빠르고 급격한 공간의 변환을 피하세요. 사용자가 방향 감각을 잃을 수 있습니다.
- 사용자의 머리나 몸을 너무 움직이게 하지 마세요. 사용자가 방향을 잃을 수 있을 뿐 아니라 헤드셋을 착용하고 있을 수 있기 때문에 몸을 돌리지 못할 수도 있습니다.
- 2D GUI를 3D와 혼용을 유의하세요. 조화로워 보이지 않을 수 있습니다.
- 현실에서와 같은 단서를 적절히 사용하세요.
- 밝은 화면은 사용자를 지치게 합니다.
- 의심스럽다면, 계속해서 테스트하세요.


우리가 세계를 경험하는 방식은 변화하고 있으며 앞으로도 큰 변화가 계속될 것입니다. 지난 20년을 돌아보면, AR/VR의 움직임은 인터넷을 포함한 20세기의 주요 패러다임의 변화와 같은 영향력이라 볼 수 있습니다. 경험을 디자인하는 것은 흥미롭습니다. 과거의 상호작용 모델에 얽매이지 않는다면 모든 것이 새롭다는 것이 문제이지만요. 시도도 실패도 할 수 있지만, 성공한다면 우리가 세계를 경험하는 방식이 바뀔 것입니다.




출처 : Backchannel


by 비숑 발자국


Posted by slowalk