크리에이티브 코딩 밋업 인사이트 - 4. Transition 🎞️

 

Transition이라는 주제의 밋업이 열린 걸 보고 같이 작업했던 퍼블리셔 한 분이 떠올랐다. 초보 PM 때는 디자인만 화면에 구현되면 된다고 생각했었다. 그만큼 디자이너에게도 액션이나 트랜지션에 대한 요청을 하지 못했었는데, 이 분은 디자인 포인트를 보고 센스 있게 트랜지션을 적용해 주었다. 이 퍼블리셔 분과의 첫 프로젝트의 디자인 모티프는 우주였고, 브랜드 로고의 O를 배경에 크게 깔았었다. 그 O가 둥실둥실 움직이는 결과물을 받았을 때, 이 부분 말고도 차마 가이드 주지 못했던 여러 곳에서 센스를 발견했을 때 나는 이분과 계속 작업하고 싶다는 생각을 했고 퍼블리싱이 별도로 들어가는 프로젝트가 생기면 그분께 연락을 한다.

배경에 연하게 깔린 O 모양의 패턴을 움직이겠다는 센스..!

트랜지션이 웹 작업 결과물의 완성도와 감도를 높여주는 걸 몸소 느껴본 후로 디자이너, 퍼블리셔와 아이디어를 나눌 수 있게 되었다. 어떤 캠페인 사이트는 트랜지션이 포인트인 작업을 시도할 정도로 트랜지션에 진심이 되었다. 과연 이 밋업에서는 어떤 인사이트를 얻을 수 있을지 기대하며 참석했다.

트랜지션은 '다른 상태로의 변화, 이동'를 의미하는데 영상, 파워포인트 등에서 이런 개념을 볼 수 있다. 정효님은 트랜지션을 개체가 바뀌는 '변신'의 개념과 영상이나 PPT에서 볼 수 있는 화면의 '전환' 두 가지로 소개해주셨다.

 

1. 개체의 전환 (변신)

Morphing

컴퓨터 그래픽스로 화면을 차례로 변형시키는 특수 촬영 기술

고전 영화부터 게임, 타이포, AI까지 다양한 모핑 사례들을 보았다. 매번 느끼는 거지만 정효님은 레퍼런스의 폭이 매우 넓고, 아이디어 도출과 활용까지가 너무나 자연스럽다. 내 레퍼런스 폭은 웹이나 그래픽에 한정되어 있거나 기존의 텍스트에 기대는 경향이 컸는데, 정효님이 소개해주시는 사례를 보면서 조사를 더 폭넓게 하거나, 일상에서 만나는 콘텐츠들을 더 민감하게 볼 수 있게 되었다.

 

1) 영화

※ 약혐주의

 

 

2) 뮤직비디오

 

3) 게임

 

Charles Cox @charlescoxart

Instagram에서 이 게시물 보기

Charles Cox(@charlescoxart)님의 공유 게시물

 

4) 영상

 

5) 타이포

Instagram에서 이 게시물 보기

Mike van der Sanden(@mikevdsanden)님의 공유 게시물

Instagram에서 이 게시물 보기

Antonin Waterkeyn(@antonin.work)님의 공유 게시물

 

6) AI

Instagram에서 이 게시물 보기

80 Level(@eighty_level)님의 공유 게시물

 

착시

원통을 위에서 보면 원, 앞에서 보면 사각형이 되는 것처럼 개체를 보는 위치나 시각적인 착각을 통해 다른 개체로 변화하는 효과를 줄 수 있다. 트랜지션을 고민할 때 크기나 투명도, 색의 차이 정도를 생각했는데 이런 개념을 적용하면 재밌는 모션을 만들 수 있을 것 같다.

 

 

Motion Graphic

트랜지션의 개념을 가장 잘 활용할 수 있는 분야가 영상이지 않을까?  

 

2. 장면의 전환

다음은 장면의 전환이다. 화면과 화면 사이에 어떤 효과를 넣어서 전환시킬지 많은 고민을 해본 적이 없는 것 같다. 장면 전환을 그저 면과 면의 전환으로 생각했었는데 다양한 사례를 보면서 화면에 놓인 개체와 배경, 색, 효과 등을 세세하게 살펴보게 되었다.

 

Transition Theory

아래 링크로 접속해보면 애니메이션을 위한 트렌지션 15가지를 소개한다. 15가지의 트랜지션 방법이 각각 어떤 효과를 주는지와 적용된 영상도 포함되어 재밌게 읽어볼 수 있는 글이다.

15 Video Transitions For Animation (And Why They Matter)

Power Point Transtion

ppt를 만들다보면 발견할 수밖에 없는 전환 효과들. 파워포인트는 학교나 직장 등에서 발표를 하려면 쓸 수밖에 없는 툴인데, 내게 전환기능은 자료를 만들 때 집중력이 떨어지면 괜히 들어가 보곤 했던 곳이었다. 이번 기회에 다시 들어가 보니 툴이 업데이트되면서 이런 애니메이션을 ppt에 적용하기도 하나 싶은 높은 퀄리티의 전환효과도 있었다.

Glitch Transtion

글리치는 '작은 결함'을 의미한다. 뮤직비디오, 게임 등에서 일부러 멈추거나 지지직거리는 효과를 넣어 영상을 만드는 경우를 종종 볼 수 있다. 누군가는 게임 등에서 사소한 오류나 결함으로 인해 지지직 거리는 현상에서 영감을 받아 영상에 사용한 것이다. 

 

이번 밋업에서는 참고자료가 너무 많아서 아직 다 열어보지도 못했다. 웹사이트 제작을 하면서 애니메이션이나 트랜지션이 주는 임펙트에 대해 깊이 있게 생각해 본 적이 많지 않았는데 이번 기회를 통해 내가 고민해 볼 수 있는 요소가 한 층 확장된 것 같았다. 이 인사이트를 잊지 않고 적용할 프로젝트가 생기길 기대해 본다.