영상은 당신이 직접 바꿀 수 있는 세계의 시작점이 될 수 있습니다. 코딩 에이전트에게 참고 영상을 주고, 프레임들을 분석하게 한 뒤, 그 장면을 절차적(procedural) 코드로 재구성해 달라고 요청하세요. 그런 다음 카메라, 조명, 재질, 움직임을 바꿔서 다시 렌더링하면 됩니다.
이것이 바로 shader-skills 를 중심으로 제가 개발해 온 레퍼런스 기반 셰이더 워크플로우, Video 2 GLSL 의 핵심 아이디어입니다. 흥미로운 점은 이 과정 중 얼마나 많은 부분이 다음 영상 작업에도 그대로 이어질 수 있느냐는 것입니다.
https://x.com/gokayfem/status/2111907592129671505
함께 작동하는 두 가지 요소
shader-skills 는 코딩 에이전트에게 그래픽 기법 라이브러리, 실제 작동하는 예제, 그리고 절차적 셰이더를 만들고 검증하는 프로세스를 제공합니다. Video 2 GLSL 은 여기에 레퍼런스 기반 작업을 더합니다. 클립을 분석하고, 명세를 도출하고, 장면을 구성한 뒤, 결과물을 원본 클립과 비교하는 방식입니다.
이 스킬은 Claude Code, Codex, Cursor, Gemini 등 다양한 코딩 에이전트를 지원합니다. 재사용 가능한 구성 요소들은 도형, 노이즈, 재질, 지형, 건물, 물, 구름, 조명, 색상을 아우릅니다. 이를 활용해 완전히 새로운 장면을 만들거나, 인터랙티브 실험을 하거나, 영상을 재현할 수 있습니다.
독립적인 Video 2 GLSL 타겟의 경우, 최종 결과물은 Shadertoy 와 호환되는 단일 프래그먼트 셰이더 하나입니다. 형상은 수학적으로 정의되고, 표면은 절차적으로 생성되며, 애니메이션은 시간을 기반으로 구동됩니다. 참고 영상이 시각적 명세 역할을 하며, 영상의 프레임들이 셰이더 내부에서 직접 재생되는 것은 아닙니다.
영상을 명세로 바꾸는 것부터 시작하기
첫 번째 단계는 안정적인 프레임 추출입니다. 영상 URL 이나 파일명만으로는 에이전트가 할 수 있는 일이 거의 없습니다. 화면에 실제로 무엇이 등장하고 시간이 흐름에 따라 어떻게 변하는지 직접 살펴봐야 합니다.
재사용 가능한 프롬프트는 장면 코드 작성 전에 REFERENCE.md 를 먼저 요구합니다. 클립에 대한 사실 관계, 컷 타임라인, 객체 목록, 피사체 비율, 움직임, 카메라 프레이밍, 조명, 샘플링된 색상 팔레트 등이 포함됩니다. 또한 에이전트가 정확히 재현할 수 없는 요소를 스스로 파악하고, 승인받을 대체안을 제안하도록 요청합니다.
관찰 내용은 클립에 따라 달라집니다. 캐릭터 컷이라면 접지면, 보폭, 부차적인 움직임이 필요합니다. 건축물 컷이라면 비율, 원근감, 카메라 이동이 중요하죠. 물이 나오는 컷이라면 표면의 움직임, 반사, 깊이에 집중해야 합니다. 동일한 분석 프로세스가 각기 다른 상황에 구체적인 출발점을 제공해 줍니다.
검증된 그래픽 빌딩 블록을 에이전트에게 제공하기
얼핏 그럴듯해 보이는 수식이라도 안전하지 않은 거리장(distance field), 불안정한 노이즈, 틀린 색상을 만들어낼 수 있습니다. 이런 오류들은 거대한 장면 안에 묻혀버리면 찾아내기가 훨씬 어려워집니다.
shader-skills 에는 현재 20 개의 GLSL 모듈에 걸쳐 186 개의 함수가 포함되어 있습니다. 에이전트는 필요한 기법을 검색하고, 라이브러리 함수를 이름으로 호출한 뒤, 번들러를 사용해 의존성을 하나의 독립된 셰이더로 묶어낼 수 있습니다.
라이브러리에는 도형을 위한 부호 거리 함수(SDF), 이를 결합하는 연산자, 절차적 노이즈와 패턴, 레이마칭(raymarching) 헬퍼, 셰이딩, 대기 효과, 색상 변환이 들어 있습니다. 템플릿은 이 조각들이 완전한 장면 안에서 어떻게 함께 작동하는지 보여줍니다.
검증 과정은 WebGL2 컴파일과 GPU 상에서의 수치적 특성을 다룹니다. 거리장의 부호와 범위, 노이즈 미분값, 색상 왕복(round trip) 테스트 등 확인 가능한 동작을 점검합니다. 렌더링된 예제는 시각적 검증을 더해줍니다. 이러한 검사 덕분에 각 부품의 신뢰도가 높아지지만, 최종 장면은 여전히 직접 확인해야 합니다.
렌더러를 중심으로 피드백 루프 구축하기
워크플로우는 블럭아웃 및 타이밍, 움직임, 피사체 디테일, 환경 디테일, 빛과 색, 레퍼런스 매칭, 성능 순으로 진행됩니다. 각 마일스톤마다 판단할 수 있는 시각적 결과물이 나옵니다.
참고 영상과 렌더링 결과는 동일한 시간대와 프레이밍에서 비교해야 합니다. 전체 프레임은 구도를, 잘라낸 영역은 객체의 형태와 재질을, 연속된 프레임은 움직임을 확인할 때 사용합니다. 매력적인 정지 이미지 한 장이 미끄러지는 발, 튀는 카메라, 너무 일찍 일어나는 상호작용을 가릴 수 있습니다.
프롬프트는 반복적인 비평을 요구합니다. 가장 큰 차이점 다섯 가지를 찾고, 수정한 뒤, 다시 렌더링하는 식입니다. 측정은 이 검토 과정을 뒷받침합니다. 피사체 크기와 수평선 위치는 카메라 오류 진단에, 샘플링된 색상은 색보정 진단에, 움직임 프로브는 불연속 지점을 찾는 데 도움을 줍니다.
여기서는 빠른 반복이 중요합니다. 저해상도 미리보기와 개별 객체 뷰를 활용하면 무거운 렌더링에 들어가기 전에 비율을 맞출 수 있습니다. 재질과 조명을 다듬기 전에 실루엣과 객체 비율부터 확인하세요.
복잡한 장면은 역할별로 나누기
큰 장면은 여러 에이전트가 피사체, 환경, 소품, 움직임, 조명 등 각자의 파트를 나눠 맡을 때 유리합니다. 분할 기준은 장면의 필요에 따라야 합니다.
공유 인터페이스는 각 작업의 호환성을 유지해 줍니다. 스케일, 좌표계, 타이밍, 재질 식별자를 미리 합의하고, 각 에이전트에게 자기 파일의 소유권을 주며, 실제 렌더링 결과로 증거를 요구하세요. 오케스트레이터가 부품들을 통합하고, 합쳐진 이미지를 레퍼런스와 비교해 평가할 수 있습니다.
재사용할 수 있는 교훈은 리뷰 구조 자체입니다. 누군가는 반드시 전체 컷을 평가해야 합니다. 아무리 정교한 건물이나 설득력 있는 캐릭터라도 구도 안에서는 틀린 선택일 수 있습니다.
실험을 통해 확인된 것들
지금까지의 작업에는 행동이 계속 바뀌는 떠 있는 섬 시퀀스, 상호작용이 포함된 마을 시퀀스, 끝없이 이어지는 거리 루프가 있습니다. 각각 요구사항이 다릅니다. 이벤트 타이밍, 고정된 접점, 카메라 전환, 정확한 반복 등은 모두 서로 다른 장면 로직을 필요로 합니다. 완성도와 시각적 품질 역시 제각각입니다.
하지만 이 모든 작업에 동일한 프로세스가 유용하게 쓰였습니다. 추출하고, 측정하고, 조립하고, 렌더링하고, 비교하고, 수정하는 과정입니다. 저장소에는 절차적 도시, 지형, 물 예제도 있으며, 별도의 인터랙티브 실험에서는 유기적 형태와 블랙홀 이미지를 탐구했습니다.
편집 가능해지는 것과 여전히 불확실한 것
장면이 코드로 존재하게 되면, 카메라 위치, 조명 방향, 팔레트, 타이밍, 절차적 디테일을 조절할 수 있는 컨트롤을 노출시킬 수 있습니다. 거리 실험에서는 동일하게 구성된 세트에서 다른 카메라 앵글을 보여주는 데 성공했습니다.
하지만 새로운 앵글은 재구성의 한계를 드러내기도 합니다. 참고 영상은 세계의 일부만 보여줄 뿐입니다. 보이지 않는 면은 추론해야 하고, AI 가 생성한 영상은 형상이 변하거나 움직임이 일관되지 않을 수 있습니다. 한 각도에서 설득력 있게 일치한다고 해서 완전하고 정확한 장면이 증명되는 것은 아닙니다.
성능 역시 장면에 따라 결과가 달라집니다. 디테일한 레이마칭 지오메트리, 식물, 그림자, 반사는 비용이 많이 들 수 있습니다. 타겟 머신에서 프레임 시간을 측정하고, 컷의 여러 순간을 확인하며, 목표를 달성하지 못한 부분은 남은 시각적 차이점과 함께 보고하세요.
Video 2 GLSL 은 재사용 가능한 제작 워크플로우입니다. 임의의 영상에서도 안정적으로 작동하는지는 더 폭넓은 평가가 필요합니다. 현재까지의 작업은 몇 가지 구체적인 실험과, 이를 개선해 나갈 공유된 방법론을 우리에게 남겨주었습니다.
당신의 참고 영상으로 직접 시도해 보기
Claude Code 의 경우, 마켓플레이스를 추가하고 플러그인을 설치합니다:
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
지원되는 다른 에이전트의 경우:
npx skills add gokayfem/shader-skills
prompts/video-to-shader-prompt.md 를 사용하고, 참고 클립, 출력 이름, 타겟 머신을 제공한 뒤, 무엇을 반드시 유지하고 무엇을 생략해도 되는지 지정하세요. 구현을 시작하기 전에 분석 내용을 먼저 검토하세요.
저는 시각적 참고 자료를 편집 가능한 절차적 장면으로 바꾸는 이 방식을 더욱 신뢰할 수 있도록 계속 발전시키고 싶습니다. 매번의 재구성 작업이 더 나은 도구, 더 나은 테스트, 그리고 다음 작업에서 재사용할 수 있는 기법을 남겨주기를 바랍니다.
