Speaker A
지금 보시는 장면들은 영상 편집 프로그램에서 손으로 하나하나 움직여 만든게 아닙니다. 물론 카메라로 찍은 것도 아닙니다. 코딩 에이전트가 웹 기술로 코드를 짜고 브라우저가 그 코드를 그림으로 그려낸 겁니다.
코딩 에이전트와 웹 브라우저로 코드 기반 모션 영상을 만드는 원리와 방법을 소개. 시간 t를 받아 한 장면을 그리는 함수, 무작위값 규칙, 데모 스킬 활용법을 설명한다.
Key Takeaways
- 코드 영상의 본질은 시간을 입력받아 그림을 반환하는 결정론적 함수다.
- 에이전트와 데모 스킬을 활용하면 코드 지식 없이도 다양한 모션 그래픽을 만들 수 있다.
- 결과물은 영상 파일로 내보낼 수 있으며, 코드이므로 버전 관리와 수정이 용이하다.
What the video covers
- 영상은 편집이나 촬영이 아니라 코딩 에이전트가 짠 웹 코드를 브라우저가 그려 만든 결과물이다.
- 영상의 핵심은 시간 t를 넣으면 그 순간의 그림 한 장을 돌려주는 함수이며, 같은 t에는 항상 같은 그림이 나와야 한다.
- 무작위가 필요하면 고정된 시드의 난수를 쓰고, 구슬이나 천처럼 이전 상태에 의존하는 움직임은 미리 계산해 저장한다.
- 브라우저에는 HTML/CSS, SVG, 캔버스, WebGL 등 여러 붓이 있으며 원리는 동일하다.
- 다양한 효과(잉크 번짐, 젤리 물리, 3D 해파리, 사진 시차 2.5D 등)가 모두 코드로 구현되며 이미지 없이 만들어진다.
- 에이전트에게 장면을 말로 설명하면 HTML 파일 하나로 장면 코드를 작성하고, 피드백을 받아 수정한다.
- 타임라인과 대본 기반 음성 길이 측정으로 시간표를 잡으면 대본 수정에 따라 장면이 자동으로 맞춰진다.
- 프레임 단위로 한 장씩 렌더링해 이어붙이면 무거운 장면도 끊김 없이 영상 파일로 만들 수 있다.
- 데모 모음을 스킬로 묶어 GitHub에서 설치하고, 에이전트가 데모를 레퍼런스로 삼아 새 장면을 만들도록 할 수 있다.
- 장점은 선명한 해상도, 쉬운 수정, 재현성이며, 단점은 브라우저 실시간 성능 부담과 여러 번의 수정 왕복이 필요하다는 점이다.
Full Transcript — Download SRT & Markdown
Speaker A
이렇게 점들이 물결처럼 퍼지는 효과나 네모가 온몸으로 뛰어오르는 표현 그리고 이렇게 글자가 말랑하게 흔들리는 것도 모두 코드를 통해 구현된 표현들입니다. 앞선 코드 깎는 노인의 영상들도 코드를 통해서 구현된 영상이고요. 영상들의 댓글로 영상을 만드는 원리에 대해 물어봐 주시는 분들이 많이 계셔서이 부분에 대해서
Speaker A
방법과 제가 사용한 소스 코드들을 공유드리고자 영상들을 준비했습니다. 그중 첫 번째 영상인 이번 영상에서는 어떤 원리로 이런 영상들이 만들어질 수 있는지와 그런 영상을 만들어 보는 방법에 대해 소개드리고자 합니다.
Speaker A
주로 영상은 코드로 이루어지는만큼 코드가 핵심인데요. 물론 코드를 몰라도 괜찮습니다. 당연히 AI가 만들어 주기 때문이죠. 그보다는 어떤 정도의 영상들이 가능한지, 어떤 방식으로 만들어 볼 수 있을지를 아는게 훨씬 중요한만큼 이런 부분 위주로 소개드리겠습니다. 그럼 이게 어떻게 가능할까요? 먼저 코드로 그림을 그린다는게 무슨 뜻인지부터
Speaker A
보겠습니다. 브라우저는 웹페이지에 코드를 읽어서 화면에 그려 주는 프로그램입니다. 그래서 여기에 동그라미 하나를 그리라고 적으면 화면에 그대로 동그라미가 나오죠.
Speaker A
이번엔 동그라미의 가로 위치를 숫자 하나로 정해 두고 그 숫자를 바꿔 볼게요. 숫자를 조금씩 바꾸면서 매번 다시 그리면 동그라미가 움직이기 시작합니다. 바로 이게 코드로 만드는 영상의 출발점입니다.
Speaker A
영상은 사실 1초에 30장 많게는 예순장씩 넘어가는 그림입니다. 그러니까 영상을 만든다는 건이 그림을 한 장 한 장 그려내는 일이죠.
Speaker A
코드로 만들 때는이 2를 함수 하나에 맡깁니다. 시간 t를 넣으면 그 순간에 그림 한 장을 돌려주는 함수입니다. t에 0을 넣으면 첫 장면이 3.1을 넣으면 3.2 초의 장면이 나오는 거예요. 여기서 지켜야 할 규칙이 하나 있습니다. 같은 T를 넣으면 언제나 똑같은 그림이 나와야
Speaker A
합니다. 그래서이 코드에는 진짜 무작기 값이나 지금 시각 같은게 들어가지 않습니다. 무사기가 필요하면 시야값을 정해둔 난수를 써서 매번 같은 순서로 뽑습니다.이 규칙만 지키면 앞으로 감든 뒤로 감든 같은 장면이 나오고 몇 번을 녹화해도 결과가 같습니다. 그런데 쏟아지는 구슬이나 바람에 날리는 천처럼
Speaker A
앞순간이 다음 순간을 정하는 방식의 움직임도 있는데요. 이런 경우라면 그 진행의 모습이 실행할 때마다 달라질 수 있습니다. 그래서 이런 건 미리 끝까지 계산해서 구어둡니다. 그리고 재생할 때는 피에 맞는 결과를 꺼내 읽기만 합니다. 이런 그림을 그리는 붓도 브라우저 안에 여러 개 들어
Speaker A
있습니다. 글자와 상자를 다루는 HTML과 CSS, 선과 도형을 그리는 SVG, 점을 직접 찍는 캔버스, 그리고 그래픽 카드로 픽셀마다 계산하는 웹까지요. 어떤 붓을 쓰든 원리는 똑같습니다. T를 받아서 그 순간에 그림 한 장을 그리는 거죠. 에이전트에게 영상을 부탁한다는 건 결국이 함수를 대신 짜
Speaker A
달라는 거예요. 자, 그럼 코드로 어떤 영상들을 만들 수 있을지 궁금해지죠? 자, 한번 보면요. 이런 모습에 물에 잉크가 풀리는 거 같은 장면도 만들어 내고요. 막 이렇게 물에서 흐느적거리는 해파리의 움직임도 표현해 내고요. 이런 말로 설명하기 어려운 효과도 코드를 통해 정교한
Speaker A
수의 계산으로 만들어낸 결과물입니다. 글자가 젤리처럼 떨어져 출렁이기도 하고요. 이런 3D 효과도 내고 글자와 상호 작용하는 애니메이션도 그려내고요. 또 두껍게 바른 유하의 모습과 붓으로 쓴 글씨 칼로판 목파나 같은 손맛도 코드로 냅니다. 3D 섬 위를 나는 카메라 성냥불을 따라 움직이는 그늘 만화처럼 칠한 비 오는
Speaker A
정류장도 있고요. 광고에서 보던 로고 등장 앱 속의 영상, 방송 자막 같은 모션 그래픽도 마찬가지입니다.
Speaker A
이미지가 한 개도 사용되지 않았고요. 모든 것이 코드로 이루어져 있는 거죠. 제가 주로 영상 콘텐츠 만들기 위해서 필요한 표현들의 데모를 이렇게 만들어 둔 것입니다. 이게 어떤 원리로 이런 영상이 만들어질 수 있었던 건지 한 발 더 들어가 살펴보죠. 일단 먼저 처음에 보신
Speaker A
물속 잉크는 실제 유체 계산입니다. 화면을 작은 칸으로 나누고 칸마다 물의 속도를 담아두죠. 그리고마다 힘을 더하고 압력을 맞추고 흐름을 따라 잉크를 옮기는 세 단계를 되풀이합니다. 종이 인형극은 일부러 뚝뚝 끊기게 움직입니다. 스톱 모션처럼 시간을 1초에 12번만 바뀌게 잘라서 한 동작을 두 세
Speaker A
프레임 붙잡아 두는 거죠. 가장자리는 가위로 오린 것처럼 짧은 직선으로 끊고 동작마다 위치를 조금씩 어긋나게 해서 손으로 놓은 느낌을 냅니다.
Speaker A
새벽 호수가는 사진 한 장입니다. 여기에 깊이 지도를 한 장 더 두고 가까운 것은 많이 먼 것은 조금 움직이는 2.5D 사진 시차를 썼어요. 끝에는 카메라는 뒤로 물러나고 렌즈는 당기는 돌리므로 배는 그대로인데 뒤에 산이 다가오게 하죠.
Speaker A
속은 이렇게 복잡하지만이 원리를 다 알아야 만들 수 있는 건 아닙니다. 코드는 에이전트가 짜니까요. 그럼 직접 만들어 보려면 어떻게 할까요?
Speaker A
준비물은 생각보다 단순합니다. 클로드 코드 같은 코딩 에이전트 하나와 결과를 틀어 볼 웹 브라우저만 있으면 됩니다. 이제 에이전트에게 만들고 싶은 장면을 말로 설명해 보세요.
Speaker A
예를 들면 이렇게요. 그러면 에이전트가 장면 코드를 HTML 파일 하나에 써 줍니다.이 파일을 브라우저로 열면 바로 재생되죠.
Speaker A
마음에 안 드는 곳은 다시 말로 고쳐 달라고 하면 됩니다. 공을 파랗게 더 무겁게 이런 식으로요. 처음 부탁할 때도 고칠 때도 요령은 같아요.
Speaker A
무엇이 어떻게 움직이는지 몇 초짜리인지 어떤 느낌인지를 적어 주면 됩니다. 에이전트가 쓰는 장면 코드에는 정해진 뼈대가 있습니다.
Speaker A
모든 움직임을 타임라인이라는 시간표 하나에 올려 두는 거예요. 타임라인에는 몇 초에 무엇이 얼마 동안 움직일지가 적혀 있고 재생기는 지금 시각 t만 알려집니다. 그러면 그 시각의 모습이 바로 계산되니까 어디로 건너뛰어도 그 순간의 장면이 그대로 나오죠. 내리레이션을 넣고 싶다면 대본만 건네면 됩니다.
Speaker A
에이전트가 대본을 문장마다 나눠서 음성을 만들고 그 길이를 재요.이 길이가 그대로 영상의 시간표가 되고 움직임은 몇 초가 아니라 어느 문장에 맞출지로 정해둡니다. 그래서 대본을 고쳐 문장이 길어져도 뒤에 오는 장면들이 알아서 따라 밀려나죠.
Speaker A
단어가 몇 초에 나오는지까지 제두니까 파랗게라는 말이 나오는 순간에 맞춰 색을 바꿀 수도 있습니다. 에이전트는 직접 브라우저로 장면을 찍어 보면서 어긋난 곳을 고치기도 합니다. 다 됐으면 영상 파일로 만들 차례입니다.
Speaker A
그런데 화면을 그대로 녹화하면 컴퓨터가 버거운 장면에서 프레임이 빠지기도 해요. 그래서 시계를 1초씩 옮겨가며 한 장씩 그리고 다 그려지면 찍어서 차례로 이어붙입니다. 같은 티는 언제나 같은 그림이 나오니까 한 장에 몇 초가 걸려도 결과는 끊김없이 부드럽습니다. 지금까지 본 기법들로 이렇게 영상을 만들어 낼 수
Speaker A
있는데요. 사실 표현할 수 있는 기법은 보여 드린 것보다 훨씬 많아서 끝이 없다고 봐야겠죠. 저는 그중에서도 제가 영상 콘텐츠를 만들면서 자주 사용할 만한 효과를 정리해서 스킬화해 두었는데요.이 스킬입니다. 스킬 안에는 기법 하나마다 짧은 데모가 하나씩 들어 있고이 데모들은 설치 없이
Speaker A
웹페이지에서 바로 볼 수 있어요. 그림을 누르면 데모가 브라우저에서 그대로 재생되는데요. 영상 파일이 아니라 코드가 지금 그리고 있는 화면이죠. 제목을 누르면 구현 노트가 열리는데요. 몇 초에 무엇이 보이는지부터 어떤 원리로 만들었는지 그게 소스의 어느 줄인지까지 적혀 있습니다. 노트 옆에는 소스 코드
Speaker A
전체와 장면 그림까지 함께 들어 있어서 에이전트가 직접 읽고 원리를 이해한 다음 그 기법만 가져다 쓸 수 있죠. 쓰는 방법은 간단해요. 원하는 스타일의 데모를 지칭하는 것만으로 그걸 레퍼런스삼아 만들어 달라고 할 수 있습니다.이 작업을 할 에이전트가 사용하기 수월하도록 깃터브 저장소에
Speaker A
스킬 형태로 올려 두었으니 명령 두 줄로 설치해서 간편하게 사용하실 수 있죠. 사용하는 방법을 보자면 이렇습니다. 빈 폴더를 하나 만들고 그 안에서 클러드 코드를 실행합니다.
Speaker A
그리고 저장소 주소와 함께 물속에 잉크가 번지듯 나타나는 제목을 만들어 달라고 적습니다. 에이전트는 저장소를 내려받아 스킬 안내 문서부터 읽고 잉크와 유체를 다룬 데모를 찾습니다.
Speaker A
그리고 물속에 퍼지는 잉크 데모를 골라 그 노트와 소스 코드와 그림을 읽습니다. 기법을 이해한 뒤에는 GPU 유체 시뮬레이션으로이 제목만을 위한 장면을 새로 짭니다. 다 짠 다음에는 직접 프레임을 찍어 확인합니다. 처음에는 화면이 전부 까맣게 나왔는데 스스로 원인을 찾아 고쳤어요. 잉크가 너무 많아 제목이
Speaker A
묻히자 잉크의 양과 흐름을 여러 번 고쳐가며 다시 봅니다. 끝으로 같은 시각에는 그림이 나오는지까지 점검하고 HTML 파일 하나로 넘겨 줍니다.
Speaker A
여기에 잉크가 조금 더 천천히 퍼지게 해 달라고 한 마디 더 하면 그 부분을 고치고 다시 확인합니다.
Speaker A
이렇게 만들어진 제목이 바로 이것입니다. 잉크가 글자를 따라 번져 나가다가 마지막에는 제목이 또렷하게 자리를 잡죠. 이번에는 종이 인연극 데모를 참고해서 다른 장면을 하나 더 부탁해 보겠습니다. 오려 붙인 종이 꽃밭에서 꽃이 하나씩 피어나고 벌 한 마리가 날아드는 장면이요. 에이전트가 혼자 만들고 확인까지 마치면 이런
Speaker A
장면이 나옵니다. 오려붙인 꽃들이 인연극처럼 뚝뚝 끊기며 피어나고 벌은 해바라기에 내려앉죠. 마지막으로 사진 시차 데모를 참고해서 하나 더 만들어 보겠습니다. 사진 한 장처럼 그린 저녁 골목 안으로 카메라가 천천히 걸어 들어가는 장면이요. 이번에는 조금 더 오래 걸렸지만 결과는 이렇습니다. 그림은 한 장뿐인데
Speaker A
가까운 담장은 크게 지나가고 먼 계단은 천천히 다가와서 정말 골목 안을 걷는 것처럼 보이죠. 정리하면 스킬을 설치하고 만들고 싶은 장면을 말로 적으면서 참고할 데모를 짚어주고 결과를 보며 한 마디씩 고쳐 달라고 하면 됩니다. 사실 지금 보고 계신이 영상도 이렇게 만들었습니다.이 화면
Speaker A
전체가 웹페이지 하나예요. 저는 대본을 건네고 장면을 보면서 고칠 곳을 말로 알려줬고 코드를 짜고 고치고 확인하는 일은 에이전트가 있습니다. 정리해 보면 코드로 만든 영상은 글자가 진짜 글자라서 4K로 키워도 선명합니다. 대본이 바뀌면 시간표를 다시 뽑으면 되고 몇 번을 다시 만들어도 같은 결과가 나오죠.
Speaker A
코드라서 무엇을 고쳤는지 줄 단위로 비교하고 언제든 되돌릴 수도 있습니다. 영상을 문서처럼 다루는 거예요. 물론 한 개도 있습니다.
Speaker A
브라우저에서 바로 볼 때는 컴퓨터가 매 프레임을 실시간으로 그려내야 하거든요. 그래서 무거운 장면은 미리 구워두거나 해상도를 낮춰서 가볍게 만듭니다. 또 그래픽 카드를 많이 쓰는 데모는 한꺼번에 많이 띄울 수 없어서 나올 차례에 준비하고 지나가면 내려놓습니다. 그리고 에이전트도 처음부터 원하는 그림을 내지는 못해서
Speaker A
결과를 보고 말로 고쳐 달라는 왕복을 몇 번은 거쳐야 합니다. 이제 앞에서 스쳐간 나머지 작품들을 하나씩 열어 볼게요. 모두 스킬 안에 데모로 들어 있으니 마음에 드는 기법이 보이면 그 데모를 에이전트에게 에퍼런스로 짚어 주면 됩니다. 먼저 글자와 도형을 다루는 붓입니다. 먹 한 방울의
Speaker A
번짐은 SVG 필터로 만들었습니다. SVG 필터는 그림의 효과를 거는 작은 단계들을 차례로 이어붙인 파이프라인입니다. 포토샵 필터를 순서대로 쌓는 것과 비슷하죠. 여기 보시면 도형의 노이즈를 만들고 그 노이즈만큼 가장자리를 밀어낸 다음 흐리기에 번지게 합니다. 다만이 필터는 무거워서 번진 모양은 미리 한번 구워두죠. 재생할 때는 번짐이
Speaker A
도착하는 시간을 담은 지도를 조금씩 열어서 먹이 종이를 타고 번져 나가게 합니다. 젖은 종이의 먹이 스이듯 노이즈로 가장자리를 흔들고 문턱을 내려 번져갑니다. 자라나는 산호는 캔버스의 선을 그어서 그렸습니다.
Speaker A
자라나는 방식은 스페이스 콜로니제이션이라는 알고리즘입니다. 나뭇가지나 인맥이 자라나는 모양을 흉내내려고 만든 방법이에요. 먼저 산호가 차지할 자리에 점을 수천개 뿌려두고 각 점이 가장 가까운 가지를 끌어당기게 합니다. 끌려간 가지는 그 방향으로 한 걸음씩 자라고 이걸 반복하면 이런 그물 모양이 나오죠.
Speaker A
가지는 태어난 순서대로 저장해 두고 피에 맞춰 앞에서부터 그리기만 합니다. 햇빛 쪽으로 뻗는 나뭇가지처럼 가장 가까운 먹이점을 향해 한 걸음씩 자랍니다. 다음은 픽셀마다 계산하는 붓 쉐이더입니다.
Speaker A
흐르는 성운에는 그린 파일이 하나도 없습니다. 화면에 모든 픽셀을 쉐이더 하나가 계산해요.이 작은 프로그램을 프레그먼트 쉐이더라고 부릅니다.
Speaker A
화면에 점 하나의 좌표를 받아서 그 점의 색 하나를 돌려 주는 함수입니다. 사실 바탕은 노이즈입니다. 크기가 다른 노이즈를 여섯 겹치면 구름 같은 무늬가 나옵니다. 이렇게 겹친 노이즈를 프랙털 브라운 운동 줄여서 FBM이라고 합니다. 큰 덩어리와 작은 결이 함께 있어서 자연스러워
Speaker A
보이죠. 여기에 노이즈로 좌표 자체를 한 번 더 휘기하면 가스가 소용돌이치며 접힌 모양이 됩니다.이 기법은 도메인 워핑입니다. 무늬를 그리는 좌표 공간 자체를 비틀어서 같은 노이즈가 소용돌이처럼 보이게 하는 거예요. 마블링 물감을 젓가락으로 두 번 휘졌듯 노이즈로 노이즈를 휘어 소용돌이를 만들어요.
Speaker A
유리 해파리는 3D 라이브러리인 3JS로 만들었습니다. 3JS는 웹에서 3D를 그리는 웹 지혜를 쉽게 쓰게 해주는 라이브러리입니다.
Speaker A
카메라와 빛, 재질을 객체로 다룰 수 있죠. 갓은 빛이 통과하며 꺾이는 유리 재질이라서 안쪽에서 빛나는 기관이 일그러져 비춰 보입니다.이 재질은 물리기반 렌더링 PBR 재질입니다. 빛이 얼마나 통과하고 얼마나 꺾일지를 실제 유리처럼 숫자로 정해 주면 돼요. 촉수는 조금 전에 갓 움직임을 따라가게만 했어요.
Speaker A
끝으로 갈수록 더 오래전 움직임을 따라가니까 박동이 파도처럼 촉수를 타고 내려갑니다. 물컵 속 빨대가 꺾여 보이듯 갓 뒤에 빛을 휘어 보여 줘서 진짜 유리처럼 보여요. 이번에는 움직임과 연출입니다. 말랑한 글자는 글골의 외곽선에서 시작합니다. 쓰인 기술은 XPBD 확장 위치 기반 동력학입니다. 힘을 계산하는 대신
Speaker A
점들이 지켜야 할 규칙에 맞게 위치를 직접 고쳐 나가는 물리 계산이에요. 외곽선과 안쪽에 점을 촘촘히 찍고 삼각형으로이어서 그물을 만듭니다.
Speaker A
삼각형 넓이를 지키게 하니까 위에서 눌리면 옆으로 부풀죠. 이런 규칙을 제약 조건이라고 합니다. 변의 길이를 지키는 제약과 넓이를 지키는 제약이 함께 걸려서 젤리처럼 출렁입니다.이 물리 계산은 미리 끝까지 돌려서 점의 위치를 전부 저장해 두고 재생할 때는 티에 맞는 장면을 꺼내 그립니다.
Speaker A
구슬을 고무줄로 엮은 그물처럼 먼저 떨어뜨린 뒤 늘어난 줄만 제 길이로 되돌립니다. 마지막은 블리타임입니다. 물풍선이 터지는 순간 시간이 멈추고 카메라만 돌아갑니다. 비밀은 시계가 두 개라는 거예요. 카메라는 영상 시간을, 물과 풍선은 따로 흐르는 장면 시간을 따라갑니다.이 기법을 타임 리맵핑, 시간 재매핑이라고
Speaker A
합니다. 화면의 시간과 장면속 시간을 따로 두고 둘 사이를 곡선으로 이어 주는 거예요. 장면 시간에 빠르기를 곡선으로 정해 두면 카메라가 4.4초 도는 동안 장면은 0.0035초만 3 5초만 흐릅니다. 시계를 두 개 돌려서 세상의 시계는 거의 멈추고 카메라 시계만 계속하요. 다음은 붓과
Speaker A
종이, 물감처럼 손으로 만지는 재료의 질감입니다. 두껍게 바른 유는 붓질 9,300번을 하나하나 계산해서 그립니다.이 방식을 회화풍 렌더링이라고 합니다. 사진처럼 칠하는 대신 붓질 하나하나를 도형으로 만들어 쌓는 방법이에요. 여기 보시면 붓은 그림속 흐름을 따라 길게 이어지다가 색이 크게 바뀌는 곳에서 멈춥니다.
Speaker A
그리고 붙일마다 물감의 두께를 높이로 기록해 두니까 빛이 비면 물감 결이 도드러져 보이죠. 높이로 빛을 계산하는이 방법을 높이 맵 조명이라고 합니다. 높이가 급하게 바뀌는 곳일수록 빗쪽으로 기운면으로 보는 거죠. 물감 두께를 지도로 기록해 두고 옆에서 손전등을 비추듯 요철마다 빛과 그림자를 줍니다. 목판화는
Speaker A
나무를 깎는 일부터 코드로 합니다. 칼선의 바탕은 거리 변환입니다. 모양 안에 모든 점에 가장자리까지의 거리를 적어두는 계산입니다. 그러니까 모양의 가장자리까지 거리를 재서 그 등고선을 따라 칼선을 내고 어두운 곳일수록 선을 굵게 남깁니다. 종이를 본지르는 압력까지 계산해서 덜 눌린 자리는 얼룩으로 남게 하죠. 도장을 찍듯
Speaker A
볼록한 곳에만 잉크가 묶고 세게 문지른 곳일수록 진하게 찍혀요. 붓으로 쓴 한 글자는 두털 아흔 여섯 가닥을 따로따로 움직입니다. 이건 붓 물리 모델입니다. 붓을 털 하나하나로 나누고 털마다 먹양과 닿는 자리를 따로 계산하는 방식이죠. 털마다 먹음은 먹의 양이 정해져 있어서
Speaker A
빠르게 그은 획일수록 먹이 먼저 말라 갈라집니다. 먹이 모자라 획 사이가 하얗게 갈라지는 것을 서해에서는 비백이라고 부릅니다. 누르는 힘과 붓끝 각도를 횡마다 적어두고 그 값대로 부털이 펴지고 모이게 했어요.
Speaker A
털마다 작은 먹통이 달린 셈이라 움직임만큼 비워지고 세게 누를수록 다시 채워집니다. 이번에는 글자가 주인공인 작품들입니다. 점균이 쓴 글자는 작은 점 33만 개가 스스로 길을 찾아서 글자를 그립니다. 모델 이름은 피사룸 황색 점균의 항명에서 따온 에이전트 모델입니다. 수많은 단순한 개체가 규칙만으로 길을
Speaker A
만들어내는 방식이죠. 전마다 앞과 양옆에 냄새를 막고 진한 쪽으로 방향을 틀고 지나간 자리에 흔적을 남깁니다. 글자 모양의 먹이를 깔아두니까 흔적이 쌓이면서 점균의 길이 글자가 되죠. 개미가 냄새끼를 따라가듯 수십만 마리가 흔적을 남기고 또 그 흔적을 따라갑니다. 줄문이 넘어의 글자는 스캐니메이션이라는
Speaker A
오래된 착시입니다. 지술 이름은 바리어 그리드 애니메이션입니다. 틈이난 막을 겹쳐서 여러 장 가운데 한 장만 골라 보이게 하는 원리입니다. 여섯 장의 그림을 세로 줄로 잘라 한 장에 번갈아 섞어 두고 그 위에 틈이난 줄무늬 필름을 덮습니다. 그래서 필름을 밀면 틈
Speaker A
사이로 한 번에 한 장씩만 보여서 멈춘 그림이 움직이는 것처럼 보이죠. 그러니까이 착시의 시계는 시간이 아니라 필름의 위치입니다. 필름을 멈추면 그림도 멈추죠. 그림 여섯 장을 국수처럼 가늘게 썰어 번갈아 붙이고 줄무늬 필름을 밀면 한 장씩 보여요. 현광팬과 손 주석은 사람이
Speaker A
끊는 손의 속도를 흉내냅니다. 사람 손의 움직임 연구에서 나온 최소 저크 곡선을 썼습니다. 손이 가장 매끄럽게 움직일 때의 속도 변화예요. 그러니까 천천히 출발해서 가운데에서 빠르고 끝에서 느려지는 곡선을 쓰고 굽은 곳에서는 펜이 느려지게 했습니다.
Speaker A
느린 곳은 잉크가 더 묻어서 조금 굵어지고 형광패는 비스듬이 깎인 펜촉 모양 그대로 칠해지죠. 진짜 손처럼 천천히 출발해 빨라졌다 멈추고 누를 땐 굵게 뗄 땐 가늘게 긋습니다.
Speaker A
만화 의성어은 같은 글꼴을 소리마다 다르게 깎습니다. 글자 모양은 글골 파일에서 꺼낸 벡터 외곽선입니다. 점과 곡선으로 된 용각이라 점을 옮기고 가듬어서 모양을 바꿀 수 있어요. 여기 보시면 띵동은 모서리를 둥글게 쾅은 칼로 깎은 듯 각지게 부르르는 외곽선이 떨리게 바꿉니다.
Speaker A
그리고 바닥에 닿을 때마다 납작해졌다가 부피를 지키면서 옆으로 퍼지게 했어요. 같은 글꼴도 소리마다 테두리를 다르게 깎으니 글자에서 소리가 들리는 거 같죠? 고양이도 그린 파일 없이 코드로 그렸어요.
Speaker A
몸통과 머리는 타원, 다리는 둥근 막대, 꼬리는 끝으로 갈수록 가늘어지는 관이에요.이 도형들의 먹선을 먼저 긋고 종이색으로 속을 메운 다음 색판을 살짝 어긋나게 찍어서 만화 인쇄처럼 보이게 했습니다. 움직임은 웅크림, 달리기, 얼굴 내밀기 세 자세를 사이 동작 없이 갈아끼워요. 만화컷이 넘어가듯이요. 다음은 애니메이션
Speaker A
도구와 연출 기법입니다. 카메라 안무는 지삽 타임라인 하나로 3D 장면 전체를 움직입니다. 지삽은 시간에 따라 숫자를 부드럽게 바꿔 주는 애니메이션 라이브러리이고 이렇게 숫자를 바꾸는 것을 트윈이라고 부릅니다. 그러니까 카메라를 방향과 높이와 거리 숫자 몇 개로 정해 두고 그 숫자를 움직이면 섬을 돌거나
Speaker A
다가가는 촬영이 됩니다. 기차는 철길 위에 진행도 하나만 움직이고 뒤칸들은 그보다 조금씩 뒤에 자리를 읽어서 따라오죠. 카메라 감독에게 몇 초에 어디로 갈지 적힌 콘티 한 장을 건네는 셈입니다. 점들의 합창은 애니메의 스태어로 만들었습니다.
Speaker A
애니메는 지삽과 비슷한 자바스크립트 애니메이션 라이브러리이고 스태어는 여러 대상의 시작을 조금씩 엇갈리게 하는 기능입니다. 여기 보시면 격자의 각 점은 출발점에서 떨어진 거리만큼 늦게 움직여서 물결이 퍼지듯 차례로 반응하죠. 관중석 파도타기처럼 옆 사람이 조금씩 늦게 일어나며 물결이 번져가요. 레모 마스코트는 애니메이션의 오래된 원칙을 코드로
Speaker A
옮긴 작품입니다. 디즈니 애니메이터들이 정리한 12가지 원칙 가운데 스쿼시 앤드 스트레치와 예비 동작을 코드로 옮겼습니다. 그래서 뛰기 전에 웅크리고 날아갈 때는 속도 방향으로 늘어나고 착지할 때는 납작해집니다. 늘어날 때도 납작해질 때도 가로와 세로를 곱하면 늘 1이라서 부피가 그대로 보존되죠.
Speaker A
물풍선이 바닥에 닿으면 납작해진만큼 옆으로 퍼지죠. 그 규칙을 그대로 씁니다. 성향 하나의 방은 평면 그림에 빛을 다시 비춥니다.이 기법은 노멀 맵 조명입니다. 픽셀마다 면이 어느 쪽을 보는지 적은 지도를 만들고 그 지도로 빛을 계산하는 것입니다.
Speaker A
그림 속 도형마다 높이를 만들고 높이의 기울기로 면이 향하는 방향을 구하는 거예요. 그래서 성량불이 움직이면 평면 그림인데도 물건마다 그늘과 하이라이트가 따라 움직입니다.
Speaker A
벽의 한 점에서 성향불까지 걸어가다 무언가에 걸리면 그 점은 그늘이 됩니다. 숫자가 움직일 때라는 작품은 데이터 시각화 라이브러리 D3로 만든 데이터 애니메이션입니다. 핵심은 객체 항등성입니다. 막대가 흐름 도표가 되고지도 위에 원이 되어도 같은 항목은 끝까지 같은 물체로 이어지게 하는 거예요. 순위가 바뀔 때도
Speaker A
계단처럼 뛰지 않습니다. 순위를 시간 방향으로 부드럽게 흐려둬서 0.25초 2 5초 동안 미끄러지듯 자리를 바꾸죠. 막대 하나가 끝까지 같은 배우라서 옷만 갈아입고 다음 장면에 나오는 셈이에요. 태협 장치는 웹 브라우저에 원래 들어 있는 SVG 애니메이션 스마일로 움직입니다.
Speaker A
스마일은 그린 파일 안에 움직임을 적어 두는 방식인데 원하는 시각으로 바로 옮겨가는 셋 커런트 타임이라는 기능이 있습니다. 그래서 매 프레임 그 시각만 알려주면 톱니 바퀴 아홉 개가 톱니수에 맞춰 함께 째각이죠.
Speaker A
움직임 확보를 SVG 안에 적어 두고 매 장면 지금 몇 초인지만 짚어 주면 됩니다. 이번에는 영상과 광고에서 자주 쓰는 모션 그래픽입니다. 동틀력 러닝 클럽의 로고는 점들이 트랙을 돌며 고리를 그린 뒤에야 해가 떠오르게 짰습니다. 이런 장면을 로고 리빌이라고 하는데 여기서는 경로
Speaker A
애니메이션과 마스크 두 가지 기술이 핵심이에요. 점이 지나온 길은 꼬리로 남고 해와 글자는 서로를 가리는 마스크 뒤에서 나타나죠. 두 점이 육상 트랙을 돌다가 소용돌이처럼 빨려 들어가 로고 한 가운데서 만납니다.
Speaker A
점 격잡 화면은 점 하나하나의 크기로 모양과 글자를 그립니다. 거리를 재는 데는 부호 거리장 SDF를 씁니다.
Speaker A
모양 안쪽은 음수, 바깥은 양수로 가장자리까지의 거리를 돌려주는 함수입니다. 그러니까 모양의 가장 자리까지 거리를 재서 점 크기를 정하니까 가장자리에 걸친 점은 중간 크기가 되죠. 점이선이 되고 면이 되는 변화도 둥근 상자 하나의 크기와 모서리만 바꾼 겁니다. 정광판 전구를 켜고 끄는 대신 모양 안에든만큼 점을
Speaker A
크게 부풀려 그려요. 앱소기 영상의 휴대폰은 CSS 3D로 판 12장을 겹쳐 만든 입체입니다. 판을 깊이 방향으로 겹쳐 두면 브라우저가 원근을 계산하는데 이걸 3D 투형이라고 합니다. 깊이에 따라 크기를 줄여서 입체 속 한 점이 화면 어디에 보일지 구하는 거죠. 터치와 화면 전환도
Speaker A
모두 시각표 한 곳에서 읽어서 누르는 순간과 화면이 바뀌는 순간이 딱 맞죠. 눌림 카드가 그대로 부풀어 새 화면이 되니 눈이 길을 잃지 않아요.
Speaker A
방송 그래픽 패키지는 색과 글자 크기 8픽셀 단위를 먼저 정한 디자인 시스템에서 출발합니다. 이렇게 색과 크기 간격을 이름붙은 값으로 정해 두는 것을 디자인 토큰이라고 부릅니다. 여기 보시면 자막바은 라임색 판이 먼저 나가고 먹색 판이 그 뒤를 따라 열리는 두 겹이에요.
Speaker A
두 판은 같은 클리패스를 쓰는데 클립패스는 요소에서 보이는 영역만 잘라내는 CSS 기능입니다. 라임색 띠가 앞장서서 길을 내면 이른바가 바로 뒤따라 미끄러져 나옵니다.
Speaker A
메신저 대화는 말풍선 크기를 글자에서 계산합니다. 어절 단위로 줄을 바꿔 보며 너비를 재고 가장 긴 줄에 맞춰 말풍선이 줄어들죠. 새 메시지가 올 때마다 목록을 용수철로 한 칸씩 끌어올리는 거예요. 툰 쉐이딩은 빛의 양을 세 단계로 잘라서 만화처럼 칠합니다.이 기법을 툰 쉐이딩 또는
Speaker A
셀 쉐이딩이라고 합니다. 셀 애니메이션처럼 몇 가지 단색 띠로 명함을 칠하는 방식이죠. 그림자도 같은 계단으로 자르니까 그림자 경계가 깨끗한 선으로 나오죠. 물감을 섞지 않고 세 가지 색만 칠하듯 빛의 양을 계단으로 뚝뚝 자릅니다. 이번에는 촬영과 편집에서 쓰는 연출 기법들입니다. 세 번 찍는 도장은
Speaker A
같은 도장을 톡 탁, 쾅 점점 세게 찍습니다. 이걸 임팩트 키트라고 부릅니다. 흔들림과 섬광, 고리와 파편 같은 효과를 박자마다 세 겹, 여섯 겹, 열 겹으로 쌓는 방식이에요. 가장 센 순간에는 히트 스톱을 씁니다. 부딪히는 순간 시간을 두 프레임 멈춰서 충격이 손에
Speaker A
느껴지게 하죠. 이 멈춘도 따로 기억하는 상태가 아닙니다. 지금 시각에서 멈춘만큼을 빼주는 계산일 뿐입니다. 사진 플래시가 터지는 찰라처럼 닿는 순간 세상 시계를 세우고 그동안 섬광을 켜둡니다.
Speaker A
다같이 멈춰에서는 튀는 콩과 흔들리는 푸딩, 도는 동전이 정확히 같은 순간에 멈춥니다. 쓰인 기술은 다친식 물리입니다. 한 걸음씩 시뮬레이션 하지 않고 어느 순간이든 위치를 바로 계산하는 식을 쓰는 거예요. 칠 때마다 높이가 일정한 비율로 줄어드니까 언제 바닥에 닿을지 미리 다 알 수 있습니다. 그래서 끝나는
Speaker A
시각을 5.4초로 정해 두고 모든 움직임이 그 순간 0이 되도록 거꾸로 마쳤습니다. 멈출 시각을 먼저 정해 두고 지금 몇 초인지만 넣으면 동전 자세가 바로 나옵니다. 눈 위에 박자에서는 토끼가 깡충깡충, 닭이 뒤뚱뒤뚱 걸어갑니다. 보행 주기라는 기법입니다. 걸음을 기림과 들어올림이 되풀이되는 한 바퀴로 보고 시간마다
Speaker A
발의 자리를 정하는 거죠. 발은 0.3 점 초박자에만 땅에 닿고 디린 동안에는 그 자리에 딱 고정돼서 미끄러지지 않습니다. 발바닥을 땅의 앞정으로 꽂아두듯 고정하고 몸만 그 위를 지나가게 해요. 구름 위에 아침은 열기구가 오르는 높이를 숫자와 바늘과 줄자로 재어 보여 줍니다.
Speaker A
이렇게 재는 장치를 화면에 띄우는 연출을 HUD 계기판이라고 합니다. 숫자는 자동차 주행 거리개처럼 바퀴가 돌아가요. 아랫자리가 9에서 0으로 넘어가는 마지막 순간에만 윗자리가 함께 돌아서 진짜 기계처럼 보입니다.
Speaker A
빠르게 도는 바퀴가 사진에 번 찍히듯 셔터가 열린 동안 다섯 순간의 숫자를 겹쳐서 번짐까지 그려요. 숨은 고양이를 찾는 책방 장면에서는 빛이 책장을 더듬다가 고양이를 찾아 멈춥니다. 시선 유도라는 연출입니다.
Speaker A
보여주고 싶은 곳만 밝히고 나머지는 어둡고 흐리게 해서 보는 사람의 눈을 이끄는 거예요. 빛은 사람 눈처럼 짧게 뛰었다가 잠깐 머니다. 끝에는 초점이 차잔으로 갔다가 다시 고양이로 돌아오죠. 초점 효과는 피사의 심도입니다. 거리마다 얼마나 흐려질지 렌지 공식으로 계산해서 장면의 층마다 다르게 흐리게 합니다. 어두운 무대에
Speaker A
핀 조명처럼 보여 줄 것만 남기고 나머지는 색과 빛을 빼버리죠. 창밖에 하루는 18시간이 넘는 하루를 10초에 담습니다. 타임랩스라는 기법이고 핵심은 시간 압축과 장로출입니다. 셔터가 오래 열려 있던 것처럼 그동안 지나간 빛을 겹쳐 그리는 거예요. 그래서 차의 불빛은 빛의 강이 되고 잠깐 지나간 사람은
Speaker A
희미해져서 사라집니다. 시간이 빨리 흐를수록 셔터도 길어져서 밤에는 별이 그리는 원호까지 쌓입니다. 셔터를 오래 열어두면 지나간 사람은 사라지고 오래 기다린 사람만 유령처럼 남죠.
Speaker A
끝으로 글자로 만드는 모션 그래픽들입니다. 오늘은 그냥 한 번이라는 작품은 종이 한 장의 글자를 딱 한 번만 놓고 카메라만 날아다니며 읽어 줍니다. 키네틱 타이포그래피라는 장르입니다. 글자를 움직이는 대신 카메라를 움직이면 회전과 확대가 한 번에 이어져요. 카메라는 한 점을 중심으로 돌면서 다가가는 나선을
Speaker A
따라가서 돌고 커지는 움직임이 한 동작처럼 보입니다. 종이를 손가락으로 꾹 누른 채 돌리며 당기듯 화면이 한 점을 축으로 휘감겨요. 쌓으면 꿈이라는 작품에서는 블록이 떨어져 글자를 짓고 다시 날아올라 다른 글자가 됩니다. 아이소매트릭 복셀 글자입니다. 글자를 격자로 잘라서 칸의 절반 이상이 채워지면 그 칸을
Speaker A
블록 하나로 만드는 거죠. 블록이 어디로 날아갈지는 헝가리한 알고리즘으로 정합니다. 모든 블록이 움직이는 거리의 합이 가장 짧아지는 짝을 찾는 방법입니다. 오는 종이의 글씨를 쓰고 반 넘게 치려진 칸마다 장난감 블록을 하나씩 올립니다.
Speaker A
오늘의 빈칸은 문장 속 한 식으로 갈아끼웁니다. 단어 교체 키트입니다. 잘라서 바꾸고 굴려서 바꾸고 슬롯 머신처럼 돌려서 바꾸는 효과를 시각표 하나로 부르는 거예요.
Speaker A
에 폭이 바뀌면 문장 전체가 매 프레임 다시 가운데로 맞춰줘서 옆 글자들이 튀지 않고 미끄러집니다.
Speaker A
옆사람이 살짝 비켜 듯말폭이 바뀌면 문장이 스르륵 자리를 다시 맞춰요. 오늘이라는 터널에서는 글자로 된 터널 속을 3D로 질주합니다. 3D 라이브러리 3JS로 만들었고 글자마다 원통 좌표 그러니까 길 위에 거리와 각도 반지름을 줘서 벽에 붙이는 거죠. 카메라가 간 거리는 속도를 시간에 따라 더한 값이라 미리 표로
Speaker A
구워두고 T로 꺼냈습니다. 글자마다 몇 번째 고리에 몇 시 방향인지 주소만 적어 두면 터널 벽에 착 붙어요. 보내기 전에라는 작품은 메신저에 한글을 치고 지우는 과정을 그대로 보여 줍니다. 두 벌씩 입력기의 조합 규칙을 코드로 옮겼습니다. 자음과 모음이 들어올 때마다 글자가 모이고 받침이 다음
Speaker A
글자로 넘어가기도 하죠. 입력은 몇 초에 어떤 키를 눌렀는지 적은 목록 하나뿐입니다. 매 프레임 처음부터 그 시각까지의 키를 다시 쳐서 화면을 만듭니다. 레고 조각을 끼우듯 잠옷을 넣을 때마다 번호 계산으로 글자를 새로 조립합니다. 접힌 쪽지는 접선을 따라 종이가 열리며 글자가
Speaker A
드러납니다. 경첩이 이어진 사슬로 계산합니다. 앞에 경첩이 돌면 뒤에 달린 조각들이 통째로 따라는 순눈 동학이에요. 회전축을 종이 두께의 절반만큼 띄워 두니까 다 접으면 정확히 한 겹 위에 보개집니다.
Speaker A
기차칸을 이어붙인 것처럼 앞칸이 꺾이면 뒷칸이 모두 따라 움직여요. 취급주의 오늘의 주인공이라는 작품에서는 글자가 흐르는 테이프가 상자를 감수합니다. 무한히는 기법입니다. 글자 띠의 위치를 띠 길이로 나는 나머지로 정해서 끝없이 흘러가게 하는 거죠. 흐르는 거리는 속도를 더해서 구하니까 속도가 바뀌어도 글자가 툭 튀지 않습니다.
Speaker A
러닝 머신 벨트처럼 무늬가 한 바퀴 돌면 처음으로 돌아와 끝없이 흐르는 거예요. 라면 물 조절 실패는 예능 프로그램의 자막을 코드로 만든 작품입니다. 접 테두리와 튀어나오기가 핵심입니다. 두꺼운 테두리부터 차례로 겹쳐서 이웃한 글자의 테두리가 한 덩어리로 이어지게 하죠. 글자는 용수철처럼 튀어나와 23% 넘쳤다가
Speaker A
자리를 잡는데 이것도 용수철 공식을 시간에 넣어 계산한 값입니다. 케이크의 크림을 두르듯 두꺼운 테두리부터 얇은 테두리까지 차례로 터칠합니다. 이렇게 부슨 작품마다 달라도 원리는 모두 같습니다. 오늘 보신 데모는 전부 웹에서 직접 재생해 볼 수 있습니다. 주소와 스킬 설치 방법은 설명란에 남겨 둘게요. 결국
Speaker A
영상도 시간을 받아서 그림을 돌려주는 코드 한 줄에서 시작합니다. 이번 영상에서는 주로 영상의 표현 기법에 대한 레퍼런스를 제공해 주는 AI 모션 스킬에 대해서 살펴봤는데요.
Speaker A
다음 영상에서는 실제로 제가 영상 콘텐츠로 만드는데 유용한 기능들을 포함하는 도구를 소개드리겠습니다. 다음 영상도 많이 기대해 주시고요.
Speaker A
이번 영상도 도움이 되셨다면 구독과 좋아요, 알람 설정 부탁드립니다. 코드 깎는 노인이었습니다. 감사합니다.
Topics:모션그래픽코딩에이전트클로드코드웹애니메이션WebGLThree.js프레임렌더링절차적생성영상제작AI영상
