스톱모션 애니메이션 - The hardest button to button

예전에 미대 학부생 시절 수업에서 교수님이 영상 메소드와 미장센에 대해 강의하기 위해 보여줬던 인상깊은 뮤비가 있다. 그건 바로 미쉘 공드리가 감독한

https://www.youtube.com/watch?v=K4dx42YzQCE

미쉘 공드리의 이 the hardest button to button 비디오를 처음 유튜브에서 봤을 때 (심지어 그때 유튜브라는 서비스가 갓 론칭하던 시점이다) 그 참신함과 키치함에 놀라 내 평생 창작 미감에 영감이 된 것은 이루 말할 것 없다.

그 뒤 미대 학사를 따고 컴퓨터 공학사를 추가로 따며 개발자로 좆뱅이 치던 나의 지난 2-30대…이제 숨을 틔우며 미디어 작가로서 다시 활동을 하고 싶어지는 욕구가 강해졌다.

그런데 막상 작업을 다시 하려니까…뭘 하지? 개발자로서 머물기엔 나는 너무나 다양하게 하고 싶은게 많았으나 이걸 어디서부터 시작해서 뭐부터 만들며 확장해갈지에 대한 방향이 너무 중구난방이며 하나로 응집되지 않아 아이디어로 가득찬 머리는 복잡해지기만 하지만 정작 이걸 어떤 식으로 시각화해야할지 전혀 구현화 계획이 잡혀지지 않아 그저 밀린 대학원 코스를 따라가느라 급급한 하루를 보내고 있었다. 그렇게 하루하루 충실하게 살아갔는데…아뿔사, 벌써 이렇게 1년이 후딱 지났다고? 믿을 수가 없었다. 하고 싶은 작업의 5-60프로도 이루지 못한 것 같은데 말이다. 그간 뭘 했냐고 한다면 공부공부 리서치리서치 그리고 뭐에 씌였는지 카발리와 remotion으로 리액트와 webgl, svg를 확장한 나만의 영상작업 스타일 정립과 작업 패턴 구축하기…라고 말하지만 ai가 꼬아버린 코드를 내가 결국은 다시 뜯어보며 디버깅하는 작업의 반복에 뭔가 눈에 확 들어오게 이룬 건 없는 거 같은데 인지 번아웃은 엄청나게 겪고 있다.

그러다 새로 발견한 NCT의 BTTF mv를 보았다.

번외: 이 영상을 내 맘대로 그간 쉐이더 토이와 여러 특수 이펙트 자체 쉐이더를 마구 섞어 리믹스 영상을 만들어보았다. 히히

https://youtu.be/KwpGx7AxN6I

잡설은 여기서 끊고, 여튼 이 영상에서 NCT의 멤버들이 서로 겹쳐 있다가 다른 타이밍으로 staggering하게 움직이며 마치 내가 예전에 봤던 The White Stripes의 The hardest button to button 뮤직비디오를 상기시켰다. 다시 한번 영감과 의욕이 샘솟으며 힘이 솟는다. 그래 내가 이런거 만들고 싶어서 멀쩡히 잘 지내던 직장 때려치고 대학원에서 미디어 분석 프로젝트를 리서치하며 이것저것 개발했던거였지?!

다시 의욕이 샘솟은 김에 나에게 영감을 준 리퍼런스를 몇 개 짚고 넘어간다.

₩

[이미지 설명: NCT Wish의 BTTF The Choom 프로젝트에서 시연한 멤버들이 서로 교차적으로 코레오를 움직이며 마치 스탑모션 애니메이션의 각 프레임을 잔상처럼 펼친 것 처럼 연출한 퍼포먼스의 스냅샷 모음]

[이미지 설명: 주술회전 사멸회유 시즌에서 새로 등장한 캐릭터, 젠인 나오야가 초소와 마주했을 때 시연한 투사주법의 잔상들]

[이미지 설명: 1초에 24프레임을 움직이며 각 모션 스냅샷의 무브먼트를 시연하는 나오야의 술식을 잘 표현한 애니메이션 스틸샷]

저 리퍼런스들을 모으며 구체적으로 이걸 나는 어떤 방식으로 구현하고 싶은가 이제 실현에 대한 고민을 해볼 때였다.

처음엔 카발리로 이걸 시연해보고자 했다. 왜냐면 카발리엔 duplicator와 shader shape로 stagger offset을 넣을 수 있으니 까.

다만 카발리에서 묘사한 영상은 여러 다채로운 효과를 다채롭게 stagger offset으로 넣을 수가 없었다. 예를 들면 내가 video stagger를 구현해 각 비디오가 5초씩 느리게 시작하여 재생하게 만들었다치자. 그럼 이 비디오 구간에 맞춰 마스킹을 대입하거나 다른 추가 쉐이더를 넣거나 다른 엘레먼트를 접목해서 따라 넣어본다면? 물론 방법이야 있겠지만 카발리에서 그런 꼼수를 어떻게 구현해낼지 영 아이디어가 떠오르질 않았다. 차라리 코드로 관련 webGl을 뒤져서 어떻게 react hook cycle안에서 three.js와 processing library를 통해 텍스쳐를 입히면서 비디오 staggering을 어떻게 구현할까 고민하는 아이디어만 주르륵 떠올랐다. 분명 카발리에 더 익숙해지면 카발리로 이런 꼼수 아이디어들이 떠오르겠짐나 도저히 떠오르지 않아 또 다시 디버깅의 지옥이 눈앞에 선한 코드로 모션 그래픽스를 구현하는 길을 택하게 되었다.

자승자박 오진다 진짜ㅋㅋㅋㅋ

여튼 그렇게 엔시티 퍼포먼스 비디오 스크린샷 일일이 따서 한번 나열해봄. 우선 첫번째 스틸샷이 등장하면 스르르륵 살그머니 차례대로 선명해지는 식으로 구현하고 싶은 이미지를 러프 스토리보드로 짜봄

근데 이런 식으로 뭔가 차례대로 도미노처럼 등장하게 하고 싶다면 이미지 뿐 아니라 쉐이프나 어떤 div 블록도 가능할 거 아님? 그래서 이리저리 응용버젼을 한번 생각해봄

아니면 텍스트 애니메이션이라던가. 결국은 키네틱 타이포 그라피로 나갈테니까

여러 변화구를 줘보자. 이번엔 차례대로 움직이는 텍스트가 아닌 텍스트 블락을 다양하게 접목시켜보았다.

자 이제 피그마로 아이디어를 정리해보는 건 이만하면 되었다. 구성한다고 뭐 결과가 나오냐. 바로 진입해보자.

예전에 크로마 드리프트 lyrics m/v에서 보강 버젼 및 biiip/bttf lyrics m/v에 대해 여러 보강 버젼을 구현해보고 싶었는데 말이야. 일단 그거에 대한 아이디어는 다른 작업으로 이루기로 하고,

기존의 워크플로우에서 좀 더 다양한 디버깅 옵션을 넣어보았다. 상단에는 현재 프레임에 해당된 씬 넘버, 씬에 배정된 컷 레이블과 그리고 불러들여진 컴포넌트, midi를 읽는 경우는 midi 트리거의 타이밍과 넘버링(현재는 드럼만 처리 중), 그리고 reaper로 일일이 오디오 구간을 마킹해서 지정해 출력한 csv인 경우 해당 타이밍을 30fps 기준으로 배정한 전환 값을 출력하게 만들었다. 각 컷구간마다 프레임을 정확히 계산해서 칼같이 박자를 맞춰 연출할 때 디버깅을 좀 더 원활하게 하기 위해서다.

[이미지 설명: 디버거 불렀을 때의 화면]

자 그럼 우선 이미지를 먼저 불러 임베딩한 블록을 차례대로 움직이게 하는 걸 시연했다.

[이미지 설명: 차례대로 플립해서 등장하는 이미지카드 ]

[이미지 설명: 이번에는 이미지를 2열로 넣고 번갈이 다른 방향으로 플립하게 만들어 나비 날개의 퍼덕거림처럼 연출]

자 이미지 블락은 얼추 차례대로 등장하는 게 얼추 되었다. 근데 내가 애니메이션 1초를 일일이 만들기 위해 하나하나 컷마다 그릴것도 아니고 말이지. 영상에서 각 스틸샷을 추려내서 이룰 수 있을까? 스틸샷이 아닌 다른 비디오를 일일이 불러들이는 건?

우선 첫번째로 시도한 것은 알파채널 투명 처리를 한 비디오를 여러 블락에 duplicate하게 등장시키는 게 가능한가이다. 알파 비디오만 불러들여 투병 배경으로 크로마키 처리를 하는 건 glsl 어법과 css3 및 div 배열로 처리 가능했다. 그렇다면 이제 이 비디오를 마스크로 먹여 다른 효과를 입히거나 비디오가 배정된 블락을 다이나믹하게 바꾸는 건?

[이미지 설명: 비디오가 배정된 블락에 다양한 배경색을 넣고 알파채널이 들어간 비디오를 마스크 값으로 설정해 안에 쉐이더를 입힌 샘플값]

가능은 했다.

그러나 프리뷰에서 일일이 확인하며 디버깅하고 코드로 편집하는게 드럽게 느렸다. tool을 차라리 쓰라고?

나도 그러고 싶다. cavalry와 after effect가 작업하다가 갑자기 꺼지지만 않았더라면. 애초에 remotion 기반의 코드베이스로 영상 작업을 전환하게 된 이유도 그거였다. 내가 하는 작업은 리소스를 기학적 패턴의 반복으로 빠른 템포에서 잦은 트랜지션을 교차하며 바꾸는 것인데 이게 에디터를 쓰면 디버깅하느라 머리를 쥐어 뜯을 필요도 없지만 이런 작업의 분량이 2분을 넘어가는 순간 무지막지하게 늘어나는 레이어와 프리뷰 렌더링에서 에디터에서 임베딩 처리를 하다가 툴이 전부 꺼지고 내 맥 미니가 멈추는 일이 너무 비일비재했기 때문이다. 하드웨어를 업그레이드하라고?

돈이나 나에게 좀 주고 그런 말을 해라 진짜…나 지금 거지다.

나중에 알게 된 사실인데 같은 알파채널 값 비디오라도 비디오가 특수 코덱의 압축으로 재컴프레션을 먹이지 않으면 화질이나 알파값이 같아도 어떤 비디오는 웹 브라우저 뷰에서 렌더링이 훨씬 느리다고 한다.

그걸 왜 이제야 알려줘 구글 검색…시ㅂㄹㅁ…

여튼

ffmpeg -c:v libvpx-vp9 -i Reels-Sync-Figure-Edit-1.webm -c:v libvpx-vp9 -auto-alt-ref 0 -g 1 -keyint_min 1 -pix_fmt yuva420p Reels-Sync-Figure-Edit.webm

이 커맨드를 넣으면서 재압축한 알파채널값 비디오로 프리뷰를 진행하였다. 완전히 쾌적해진 정도는 아니지만 프리뷰에서 아주 못 버틸 정도는 아니게 되었다.

자 그럼 이제 대망의 비디오 staggering offset을 시연해볼까.

이 컴포넌트를 구현하는데 정말 한달이 가깝게 걸릴 정도로 엄청난 디버깅과 아키텍쳐 재구성의 고비가 있었지만 그 이야기는 나중에 내 정신력이 회복되면 하겠다. 왜 디버깅에 한달이 걸렸냐고 묻지 말라.

꼬우면 니가 해보고 해결책을 알려주던가, 시발아…

잡설 그만하고 자, 보아라.

나의 5프레임 stagger offset이 반영된 비디오 블락의 재생 화면 스틸샷을!

[이미지 설명: 5프레임 stagger offset이 반영된 비디오 블락의 재생 화면 스틸샷에 쓰여주신 우리의 meme황, 젠인 나오야의 앞머리 쓸어 넘기기]

비디오를 5프레임 늦게 재생시키는 걸 차례대로 블락으로 구성하는 건 그렇다 치는데 저 위의 bttf에서 여러 멤버들이 정지화면처럼 움직여 한 영상의 모션프레임을 늘여뜨린 것처럼 하거나 한 동세의 모션을 각 스틸컷을 분리해 동작 프레임을 일일이 스틸샷처럼 연출한 the white stripes ‘the hardest button to button’ 처럼은 어떻게 구현하지?

아…머리가 아파온다. 이 문제는 7월 초-중순에 걸쳐 머리를 쥐뜯으며 결국 해결을 하게 된다. 비디오에서 일일이 스틸샷을 특정 프레임 별로 멈추게 해 나열해서 연출하기를…

참 고난하고 지랄맞다. 7월 중순 이후로는 대학원 여름학기도 수행하고 4-5월간 진행한 이런 과정 자산들을 구축하는 과정이 너무나 나를 피곤하고 좌절시켜 번아웃이 세게 왔는지 이후론 작업을 진행한 게 없다. 이제 곧 다시 회복하고 작업으로 돌아가야지

[이미지 설명: 가수 김완선의 신곡 Yellow 뮤비에 등장해 춤을 시연하는 댄서 윤지. 음악에 맞춰 춤으로 심플한 배경에 모션만으로 표현하는 영상이 너무 멋져서 배경을 없애서 시험작 자료로 써보았다. 완벽하군…]

자 이제 내가 해야할 것은…

그래 집구석 버젼 the hardest button to button을 찍어보기겠지?

근데 그러려면 일단 드럼도 고치고 베이스도 뚱겨봐야하나…? 아놔…미치긋네. 일단 난 잭화이트가 아니고 뭣보다 기타를 칠 줄 모르잖아? 아 몰라, 어찌되든 되겠지ㅋㅋㅋ ㅅㅂ

My Vocal Mix Cover - Niji 를 만들기까지 거쳐온 여정의 작업들

효과와 키네틱 타이포 구상을 미리 보기 위해 만들었던 자체 제작툴

KR-my-own-production-tool-bg-maker KR-my-own-production-tool-texture-mix

나만의 브랜딩 아이덴티티를 구축하기 위한 비쥬얼 미학의 발전 과정

KR-developing-my-own-aesthetics

이 작업 전과 후에 만들어지는 커버 mv 작업과정 기록

KR-the-second-version-trial-lyrics-visualiser-chroma-drift KR-KR-the-stopmotion-cut-trial-mv-the-hardest-button-to-button

lyrics mv로 작업이 도달하기까지 이 기반의 양분이 되어준 기반 작업들

KR-GameToAudioDesign KR-K-Pop-Live-Band-Rework KR-remotion-gsap-pros-and-cons KR-figma-to-jitter-and-remotion KR-remotion-and-shader-converting-glsl-to-webgl KR-making-first-time-youtube-vid-with-remotion KR-how-i-make-a-youtube-series-with-remotion-dynamic-srt-script-setup-exp-likejennie KR-how-i-made-podcast-interview-with-ai-virtual-idol KR-how-my-motion-graphics-workflow-has-been-evolved