시네마그래프와 GIF로 생생한 브랜드 이미지 창출

비주얼이 대세인 디지털 세상에서 디자인에 흥미로운 요소를 가미하는 일은 무척 중요합니다. 시네마그래프와 GIF는 브랜드가 고객과 교감할 수 있는 재미있는 수단이자, 디자이너가 브랜드, 소셜 미디어 게시물 또는 웹 사이트의 히어로 이미지에 생기와 역동성을 불어넣기에 이상적입니다.

코딩이 필요하고 모든 플랫폼에 간편하게 통합할 수 없는 SVG 애니메이션과 달리, GIF와 시네마그래프는 작은 용량의 반복 모션 시퀀스로 제공되는 압축 파일입니다. 이 압축 파일을 사용하면 쉽게 공유할 수 있을 뿐만 아니라 끊임없이 반복 재생할 수 있어 애니메이션을 시작하기 위해 재생 버튼을 누르지 않아도 됩니다.

시네마그래프와 GIF 때문에 겁먹지 마십시오. 디자이너 헤이든 데이비스(Hayden Davis)와 시네마그래프 공동 창안자인 케빈 버그(Kevin Burg)가 제공하는 몇 가지 손쉬운 단계와 힌트를 통해 시네마그래프와 GIF를 만드는 과정은 재미있을 뿐만 아니라 작업의 수준을 한 단계 높이는 데에도 유용한 툴이라는 사실을 배우게 될 것입니다. 시선을 사로잡는 애니메이션을 웹 사이트의 히어로 이미지나 배경으로 사용하면 자칫 정적인 경험으로 그칠 사이트에 흥미를 더할 수 있습니다.

작업에 GIF 적용

멀티미디어 아티스트와 디자이너인 헤이든 데이비스는 GIF를 사용하여 작품에 작은 모션을 손쉽게 추가합니다. 그는 “로딩하는 데 엄청난 시간이 소요되는 비디오 파일을 따로 만들지 않고도 이미지를 GIF로 만들어 모션을 추가할 수 있다”고 말하면서 “작은 모션을 추가하는 것만으로도 사실적인 흥미를 유발할 뿐만 아니라 타이포그래피에 생기를 불어넣거나 주안점을 부각시킬 수 있다”고 덧붙입니다.

데이비스는 특히 타이포그래피와 일러스트레이션에 생기를 불어넣기 위해 GIF를 자주 이용합니다. 그는 세 개의 유사한 버전을 만든 다음 GIF로 변환하여 독창적인 느낌을 더합니다.

헤이든 데이비스는 3개 버전의 타이포그래피 기반 일러스트레이션을 GIF로 가미함으 로써 자칫 심플한 디자인으로 느껴질 수 있는 작품에 흥미와 입체감을 불어넣습니다. 헤이든이 만든 GIF를 더 보려면 여기를 참조하십시오.

현재 태틀리 템포러리 태투스(Tattly Temporary Tattoos)에서 디자이너로 일하고 있는 헤이든은 자사 브랜드의 제품 판촉에 기여하는 것은 물론이고 시청자들을 위한 오락거리로 사용할 GIF를 제작하는 소규모 크리에이티브 팀을 이끌고 있습니다. 데이비스는 “우리는 GIF가 사람들에게 많은 재미와 영감을 줄 뿐만 아니라 스토리 전달 측면에서도 강력하다는 것을 깨달았다”면서 “8개의 이미지를 합성하여 하나의 경험으로 만드는 것인데 정적인 이미지보다 8배나 더 효과적”이라고 말합니다.

GIF가 웹 사이트 히어로 이미지와 배경으로 적합한 이유는 바로 스토리텔링의 힘과 자연스러운 모션 때문입니다. 데이비스는 “미세한 움직임의 GIF 애니메이션은 파격적인 이미지를 매력적인 이미지로 만들어주므로, 일반 고객이 브랜드 경험을 파악하는 데 도움을 준다”면서 “또한 예고편 같은 매력도 간과해서 안 된다. GIF는 내용에 대한 호기심을 불러일으킬 수 있는 완벽한 방법이다. 출시를 앞두고 있는 제품에 대한 작은 예고편은 수많은 방문자를 웹 사이트로 유도할 수 있다”고 말합니다.

GIF 만들기

헤이든의 GIF 제작 제1의 법칙은 반복 재생 시 GIF가 자연스러워 보여야 한다는 것입니다. “가장자리를 맞추고 다시 올라와 원으로 연결되도록 만든다”고 설명합니다. 그런 다음 디테일에 집중합니다. 서체에 약간의 움직임이나 특정 요소에 광택 효과만 추가해도 디자인의 입체감과 흥미도가 높아집니다. 움직임을 실제처럼 만들어 사실감을 부여하는 방법에 대해 데이비스는 “타이밍이 핵심이며, 각 모션이 정확한 속도로 움직이도록 해야 한다”고 말합니다.

어도비 포토샵(Adobe Photoshop)에서 이를 정교하게 조정할 수 있습니다. 데이비스는 “시퀀스의 각 단계마다 이미지를 만들어 다채로움을 위해 동일한 이미지의 다른 버전을 그리기도 한다”면서 타임라인에서 각 레이어를 자르고 숨겨서 속도를 조정하는 방식을 선호한다”고 덧붙입니다.

GIF 만드는 방법을 다룬 단계별 튜토리얼을 통해 이 방법을 사용하려면 여기를 클릭하십시오.

시네마그래프 기술

시네마그래프는 GIF와 유사하지만 차원이 다른 개념입니다. 2010년 케빈 버그와 그의 파트너인 제이미 벡(Jamie Beck)은 GIF의 부활을 기회로 여겼습니다. 버그는 “시네마그래프는 하나의 프레임을 통해 스토리를 전달하려는 욕망과 결합된 실험에서 출발했다”면서 “더 많은 모션을 하나의 이미지에 담기 위해 특정 영역을 멈추게 하고 중요한 부분만을 움직이게 만든다. 시네마그래프가 하나의 매개체로 자리를 잡아가기 시작하면서 매일 새로운 소재를 발견했고, 지구상의 모든 것을 완전히 새로운 방식으로 표현할 수 있을 것 같은 기분이었다”고 밝힙니다.

텀블러(Tumblr)에서 아주 작은 용량인 512K GIF부터 시작한 시네마그래프는 이제 소셜 미디어, 웹 사이트 디자인, 심지어 4K의 대규모 인터랙티브 디지털 광고판에까지 등장했습니다. “시네마그래프를 게시한 후 우리가 들은 첫 반응 중 하나는 눈을 뗄 수가 없다는 것이었다”면서 이어서 케빈은 “우리는 시네마그래프가 광고를 비롯해 사람들의 이목을 집중시키고자 하는 곳이면 어디에서나 적용할 수 있다는 것을 깨달았다”고 말합니다.

다수의 패션 디자이너는 대규모 광고와 인스타그램과 같은 소셜 플랫폼에 시네마그래프를 게시하여 고객의 참여 를 유도하고 있습니다. 시네마그래프의 미묘한 움직임에는 특정 프레임에 시선을 고정시키고 스튜어트 와이츠먼 (Stuart Weitzman) 부츠와 같은 의상 디테일 자체에 시선을 집중시키는 효과가 있습니다. 케빈 버그와 제이미 벡이 제작한 스튜어트 와이츠먼 광고입니다.

이 광고로 인해 시네마그래프가 웹 사이트 히어로 이미지로 사용될 때 효과적이라는 점이 입증되었습니다. 실제로 웹 사이트 히어로 이미지로서 상업적으로 처음 사용된 시기가 바로 2011년이었습니다. 버그는 “시네마그래프가 히어로 이미지 또는 배경으로 효과적인 이유는 바로 큰 이미지가 표시될 때 모션이 시선을 사로잡기 때문”이라며 “이큰 정지 공간에서 작은 움직임을 볼 때 우리의 모션 감지 능력이 향상되기 때문에 이 시네마그래프는 관객들의 주의를 사로잡는 데 효과적이다. 디자이너는 사람들이 시네마그래프를 볼 때 집중하게 되는 영역을 정확히 알고 있다. 그리고 잘 만들어진 시네마그래프는 스틸 사진보다 더 오랫동안 사람들의 시선을 집중시킬 수 있다”고 역설합니다.

시네마그래프 만들기

시네마그래프를 한 번도 디자인해 본 적이 없다면 어렵게 느껴질 수 있습니다. 케빈 버그는 성공적인 시네마그래프를 손쉽게 만들 수 있는 몇 가지 팁을 소개합니다.

  1. 움직임을 절묘하게 활용합니다. 시네마그래프의 움직이는 부분을 핵심적인 흥미 요소로 만들거나 다른 프레임에 의미있는 동작을 부여합니다.
  2. 카메라를 고정시킨 상태에서 촬영합니다. 삼각대를 사용하면 편집 작업이 10배나 수월해집니다.
  3. 전통적인 포토그래피 측면에서 생각합니다. 시네마그래프는 개념적인 측면에서는 비디오가 아니라 모션이 추가된 사진이므로 특별하게 느껴집니다.
  4. 파일 압축에 주의합니다. 최종 파일이 GIF 또는 mp4이던 간에 GIF의 디더링을 줄이고 mp4의 경우 압축 결함을 최소화하여 시네마그래프가 스틸 이미지만큼 빠르게 읽히도록 하는 것이 가장 좋습니다. 핸드브레이크(Handbrake)와 같은 일부 비디오 인코더에는 압축 비디오에서 자주 나타나는 보기 싫은 블로킹 문제를 줄여주는 “스틸 이미지”를 위한 튜닝 설정이 있습니다.

최종 출력이 GIF라면 이미지의 색상 팔레트를 제한함으로써 미리 계획할 수 있습니다. 소수의 색상 범위만을 정의하기 위한 256 색상이 사용되면 GIF 품질은 보다 나아질 것입니다. (극단적인 예를 살펴보려면 양호한 품질을 유지하기 위해 회색 음영 GIF에서 색상 수를 얼마나 줄일 수 있는지 확인하십시오.)

  1. 자연스러운 반복 재생을 찾습니다. 시네마그래프만을 위해 수행되는 반복 동작이 아니라 실제처럼 자연스럽게 반복 재생되는 시네마그래프가 가장 효과적입니다.
  2. “불쾌한 골짜기” 이론에 유의합니다. 인물을 포함하는 시네마그래프는 괴이해지거나 너무 빨라질 수 있습니다. 예를 들면 다음과 같습니다. 정적인 사진 속 인물은 눈을 깜빡이지 않지만, 시네마그래프에서 인물이 다른 쪽으로 움직이는데 눈은 깜빡이지 않은 채 정면을 응시한다면 보는 사람이 부자연스러움을 느낄 수 있습니다. 저는 사람이 포함된 모션이 있는 경우 만일을 대비해 항상 많은 장면을 촬영합니다.

케빈은 어도비 애프터 이펙트(Adobe After Effects)를 사용해 시네마그래프를 만듭니다. 시네마그래프는 사진과 비디오가 만나는 영역이므로, 그는 애프터 이펙트를 타임라인이 있는 포토샵으로 생각하는데 이러한 발상이 시네마그래프의 완성도를 더해줍니다. 그런 다음 압축을 거치지 않은 .mov 파일로 내보내 Photoshop에서 최대한 깨끗한 품질의 최종 GIF 또는 mp4를 만듭니다.

케빈 버그와 제이미 벡이 가장 최근 공동으로 작업한 “무더운 여름(Summer Heat)” 은 2D 요소와 부채질 동작으로 인터랙션하는 시네마그래프 요소를 결합한 작품으로 탁월한 기량이 묻어납니다. 스틸 이미지와 시네마그래프의 모든 시리즈를 보려면 여기 를 참조하십시오.

포토샵에서도 시네마그래프를 만들 수 있습니다. 5단계로 구성된 이 튜토리얼을 활용하면 컨셉트를 만들어 포토샵에서 콘셉트, 이미지 및 스톡 푸티지를 테스트할 수 있습니다.

포토샵과 애프터 이펙트에서 몇 가지 추가적인 단계를 수행하여 만든 GIF 및 시네마그래프는 디자인에 참신한 아이디어를 제공하여 생동감 있는 브랜드를 창출하는 이상적인 방식이 될 수 있습니다.

원문보기

**
크리에이티브 클라우드(Creative Cloud) 팀**
디자이너, 포토그래퍼, 영화 제작자, 관련 직종 희망자 등 누구나 크리에이티브 클라우드를 통해 업계 선도적인 크리에이티브 앱을 사용하여 영감이 떠오르는 어디에서나 원하는 모든 것을 제작할 수 있습니다.