46초짜리 시연 영상을 녹화했더니 1.3초짜리 파일이 나왔다.
화면을 재생하던 방식 그대로 녹화한 탓이었다. 원인과 해결은 8.5절에 적는다. 고급편 7편 끝에서 이번 주제를 영상과 도판 자동화로 예고했다. 이 글은 설명용 그림, 기구의 동작 영상, 프로그램 시연 영상을 만들어야 하는 비개발자를 위해 쓴다. 나도 개발자가 아니다. 그래도 이번 달에 기구 동작 도면과 애니메이션, 한 교육 과정에 들어갈 시연 영상 12편, 책과 연재의 도판을 Aside에게 코드로 만들게 했다. 무엇이 됐고 무엇에 걸렸는지 차례로 적는다. 고급편의 여덟 번째 글이다.
8.1 정확해야 하는 그림과 동작은 무엇으로 만들까?
AI 생성보다 Aside에게 코드로 그리게 하는 편이 정확하고 싸다. 브라우저만으로 PNG와 MP4까지 된다.
여기서 코드로 그린다는 말은, 붓질 대신 숫자로 그림을 정한다는 뜻이다. 선의 시작점과 끝점, 회전축의 위치, 부품의 색을 값으로 적어 두고 그 값대로 그리게 한다. 코드는 내가 쓰지 않는다. 무엇을 어디에 둘지 내가 말로 정하고, Aside가 그것을 코드로 옮긴다. AI 이미지·영상 생성은 그럴듯한 모습을 빠르게 내놓지만, 무엇이 고정이고 무엇이 도는지는 지켜 주지 않을 때가 있다. 나는 쇼핑카트 등받이의 경첩 동작을 AI 영상 생성 도구에서 9번 연속 잘못 받은 뒤 코드로 옮겼다. 코드 쪽은 정확했고 추가 비용이 들지 않았다. 대신 확인할 것이 생긴다. 영상의 길이, 빠진 프레임, 파일 형식, 소재의 권리, 재현 화면이라는 표시다.
그림 8-1은 이번에 쓴 흐름이다. 첫 칸은 SVG 도면이다. SVG는 선과 글자를 좌표로 적는 그림 형식이다. 이것을 브라우저에서 PNG 이미지로 바꾸면 도판이 된다. 움직임이 필요하면 시각마다 다른 자세의 그림을 캔버스에 차례로 그린다. 캔버스는 브라우저 안에서 그림을 그리는 판이다. 그 판을 브라우저의 녹화 기능으로 찍어 MP4 파일로 받는다. 마지막 칸은 길이 검증이다. 파일이 스스로 적어 둔 길이를 믿지 않고, 실제 재생 길이와 크기를 다시 읽는다. 처음부터 끝까지 브라우저 안에서 끝나는 흐름이다.
8.2 언제 생성하고 언제 코드로 그리나?
무엇이 고정이고 무엇이 도는지가 핵심이면 코드로 그린다. 겉모습이 핵심일 때만 생성을 검토한다.
내 기준은 틀리면 설명 전체가 무너지는 부분이 어디냐다. 기구 동작에서는 고정점과 회전축이 그렇다. 한글 라벨도 그렇다. AI 영상 모델은 한글을 뭉개서, 라벨이 들어간 그림을 생성으로 얻을 수는 없었다. 반대로 실물 같은 질감은 선과 면으로 그린 도면이 약한 부분이다. 그래서 둘을 잇는 길을 하나 열어 두었다. 코드로 정확한 동작을 먼저 만들고, 그 영상을 동작 참고로 올려 겉모습만 바꾸는 방식이다. 이 방식의 결과가 기구 동작을 지키는지는 아직 판정하지 않았다. 표 8-1은 이번에 부딪힌 경우를 나눈 것이다.
| 무엇 | AI 생성 | 코드로 그리기 | 내 선택과 근거 |
|---|---|---|---|
| 경첩을 축으로 도는 기구 동작 | 9번 연속 경첩 동작을 잘못 그렸다 | 경첩 점을 축으로 도는 변환으로 적어 회전축을 코드가 강제한다 | 코드. 정확했고 추가 비용이 없었다 |
| 부품이 닿는 중간 자세 | 자세를 모델이 정한다 | 접촉 조건에서 각도를 계산한다 | 코드. 눈대중 자세는 자세히 보는 사람에게 드러난다 |
| 한글 라벨과 지시선 | 한글을 뭉갠다 | 글자를 좌표에 그대로 놓는다 | 코드 도면에 넣거나, 생성 뒤 편집으로 얹는다 |
| 실물 같은 겉모습 | 업로드한 영상을 동작 참고로 삼아 겉모습만 바꾸는 모드가 있다. 원본 길이 상한 10초 | 선과 면으로 된 도면에 머문다 | 입력은 라벨 없는 코드 버전으로 준다. 결과는 아직 판정 전 |
| 프로그램 시연 화면 | 실시간 결과처럼 보일 위험이 있다 | HTML 시뮬레이터로 재현해 녹화한다 | 코드. 교육용 재현 화면이라고 표시한다 |
| 연재의 설명용 도식 | 쓰지 않았다 | SVG로 그려 브라우저에서 PNG로 바꾼다 | 코드. 이모지 대신 도형으로 그린다 |
8.3 카트 겹침 동작을 코드로 그린 과정
쇼핑카트를 포갤 때 등받이가 경첩을 축으로 위로 들린다. 이 동작을 숫자로 적어 도면으로 옮겼다.
AI 영상 생성으로 9번 실패하고 방법을 바꾼 판정 흐름은 1권 13장에 적었다. 여기서는 그다음, 코드로 어떻게 만들었는지를 적는다. 도면은 SVG를 만들어 내는 함수로 짰다. 함수는 값만 바꿔 같은 일을 되풀이할 수 있게 묶어 둔 코드 조각이다. 이 함수에는 좌표 상수 6개가 있다. 뒤쪽 기둥과 앞쪽 기둥의 위치와 높이다. 이 여섯 값만 바꾸면 다른 기구에도 같은 함수를 쓸 수 있게 했다. 회전은 경첩 점을 축으로 도는 변환으로 적었다. 이렇게 적으면 등받이가 어느 각도에 있든 경첩 점은 제자리에 남는다. 고정점과 회전축을 내가 매 장면 확인하는 대신 코드가 강제하는 셈이다.
중간 자세는 눈대중으로 찍지 않았다. 뒤 카트가 등받이에 닿는 접촉 조건을 세우고, 그 조건이 성립하는 각도를 계산해 구했다. 그런데 이 계산만으로는 완전히 포갰을 때도 등받이가 90도에 이르지 못했다. 70도대에서 멈췄다. 나는 마지막 구간을 90도까지 이어 붙였다. 자세히 보는 사람에게는 어긋난 자세가 드러나기 때문이다. 도면이 정확하다는 것은 선이 깔끔하다는 말과 다르다. 부품끼리 닿는 자리와 멈추는 각도가 맞아야 한다.
색에는 규칙을 두었다. 배경은 흰색, 움직이는 부품은 주황(앰버), 고정점과 회전 궤적은 빨강, 주체는 남색, 상대나 배경 물체는 회색이다. 글을 읽지 않아도 무엇이 움직이는지 보이게 하려는 것이다. 비율도 다시 잡았다. 제품 사진에서 실제 비율을 재어 보니 바구니 뒤쪽이 앞쪽보다 높고 깊었다. 그 값을 좌표 상수에 반영해 도면을 고쳤다. 그림 8-2가 그렇게 만든 시작, 중간, 마무리 3단계 도면이다. 중간 자세의 각도가 앞 문단의 접촉 조건에서 나온 값이다.
결과물은 세 가지다. 3단계 도면 각각과 그것을 한 장에 모은 합본, 그리고 1200×930 크기로 포갰다 풀었다를 되풀이하는 왕복 애니메이션(약 8초)이다. 크레딧은 쓰지 않았다. 놓칠 뻔한 일도 하나 있었다. 다시 쓸 가치가 있는 생성 함수가 대화 도구의 메모리에만 있다가 사라진 것이다. 그 뒤로는 만든 즉시 파일로 저장하게 했고, 도면 생성기도 파일로 남겼다. 이 과정은 스킬 하나로도 정리했다.
8.4 브라우저만으로 영상이 만들어질까?
된다. 캔버스에 그린 화면을 브라우저의 녹화 기능으로 찍으면 MP4 파일이 나온다.
순서는 이렇다. SVG 도면을 이미지로 바꾸고, 그 이미지를 캔버스에 그린다. 캔버스 화면은 MediaRecorder로 녹화한다. MediaRecorder는 화면이나 소리의 흐름을 파일로 기록하는 브라우저 기능이다. 녹화가 끝나면 파일로 받는다. 여기서 먼저 확인할 것은 이 브라우저가 어떤 형식으로 녹화할 수 있느냐다. 브라우저 녹화는 webm이라는 다른 영상 형식만 된다고 가정하기 쉽다. 내 환경의 브라우저는 H.264 MP4 녹화를 지원했다. H.264는 영상을 압축하는 방식, 곧 코덱의 이름이다. 지원 여부는 특정 코덱 표기를 넣어 브라우저에 물어보는 방식으로 확인했다.
같은 방법으로 한 교육 과정의 시연 영상 12편을 만들었다. 차시마다 들어갈 시연 장면을 브라우저에서 재생되는 HTML 시뮬레이터로 먼저 만들었다. 시뮬레이터는 실제 프로그램을 흉내 내어 정해진 순서대로 움직이는 화면이다. 그 화면을 캔버스로 그려 MP4로 녹화했다. 첫 파일럿은 1920×1080 크기에 약 47초 길이의 H.264 MP4였다. 파일이 나왔다고 끝내지 않고, 실제 브라우저에서 길이와 크기, 원하는 구간으로 옮겨 가는 동작을 다시 읽어 검증했다. 마지막에는 시뮬레이터 HTML 12개와 MP4 12개를 전달 폴더 하나에 모았다. 중간본은 빼고 목록 파일을 넣었다.
8.5 시간 축에서 걸린 것들
영상은 그림에 시간이 붙은 것이다. 이번에 걸린 것도 대부분 시간에서 나왔다.
첫머리의 1.3초 파일부터 적는다. 시뮬레이터에는 화면에서 재생하기 위한 함수가 있었다. 그 함수를 그대로 녹화에 썼더니 46초짜리 내용이 1.3초로 압축된 파일이 나왔다. 녹화할 때는 방식을 바꿨다. 경과 시간을 직접 한 칸씩 올리고, 그 시각에 맞는 화면을 그리게 했다. 그러자 정상 길이가 나왔다. 5초짜리 시험은 5.13초, 본편은 46.83초였다. 재생용 화면은 사람이 보는 속도에 맞춰 움직이지만, 녹화할 때는 몇 초 시점의 화면인지를 내가 정해 주는 쪽이 안전했다.
다음은 기다리는 시간이다. 긴 영상을 실시간으로 녹화하면 20분 넘게 기다려야 했다. 그래서 프레임을 하나씩 직접 요청하며 가상 시간을 0.1초씩 올렸다. 프레임은 영상을 이루는 낱장 그림 한 장이다. 요청 간격이 너무 짧으면 프레임이 빠졌다. 8ms 간격으로 100장을 요청하자 65장만 기록됐다. 25ms 간격에서는 50장 중 50장이 남아 이 값을 안전값으로 삼았다. 그래도 일부가 빠질 수 있어 한 단계를 더 두었다. 실제로 기록된 프레임 수를 센 뒤, 목표 길이를 그 수에 고르게 나눠 파일의 시간 정보를 다시 썼다. 빠진 장이 있어도 전체 길이는 목표대로 맞게 된다.
기구 동작 영상에서는 올리는 쪽에서 걸렸다. 그 영상 도구는 webm 파일을 오류 없이 무시하고 직전에 올린 미디어를 잡았다. MP4로 올려야 했다. 브라우저가 녹화한 MP4는 길이 정보도 부정확했다. 실제로 4.6초인 영상을 도구가 8초로, 또 14초로 읽었다. 길이 제한이 있는 곳에서는 내용을 앞쪽에 모으고 쓸 구간을 지정해 대응했다. 업로드한 영상을 동작 참고로 삼는 모드는 원본 길이 상한이 10초였다. 그 밖에 두 가지가 더 있었다. 전역 함수 이름을 top으로 지었다가 브라우저가 이미 쓰는 이름과 부딪혀 화면이 통째로 그려지지 않았다. 긴 녹화를 한 번의 명령으로 끝까지 기다리게 했더니 연결 시간 초과가 났다. 표 8-2에 모아 두었다.
| 증상 | 원인 | 해결 | 이후 확인 |
|---|---|---|---|
| 46초 내용이 1.3초 파일로 압축됨 | 화면 재생용 함수를 그대로 녹화함 | 경과 시간을 직접 올리며 그 시각의 화면을 그림 | 5초 시험 5.13초, 본편 46.83초 |
| 프레임이 빠짐(8ms 간격 100장 중 65장) | 프레임 요청 간격이 너무 짧음 | 25ms 간격을 안전값으로 삼음 | 50장 중 50장. 기록된 프레임 수를 세어 시간 정보를 다시 씀 |
| 화면이 통째로 그려지지 않음 | 전역 함수 이름 top이 브라우저의 기존 이름과 부딪힘 | 이름을 바꿈 | top, name, status 같은 흔한 이름은 피함 |
| 긴 녹화 중 연결 시간 초과 | 한 번의 명령으로 끝까지 기다림 | 녹화는 시작만 시키고 결과를 따로 확인함 | – |
| 영상 도구가 올린 파일 대신 직전 미디어를 잡음 | webm 파일을 오류 없이 무시함 | MP4로 올림 | 1권 13장 |
| 4.6초 영상을 도구가 8초, 14초로 읽음 | 브라우저가 녹화한 MP4의 길이 정보가 부정확함 | 내용을 앞쪽에 모으고 구간을 지정함 | – |
| 영상을 동작 참고로 쓰는 모드에 올릴 수 있는 길이가 짧음 | 원본 길이 상한 10초 | 상한을 확인하고 올림 | 결과가 기구 동작을 지키는지는 미판정 |
| 부분 캡처가 좌표 일부를 무시함 | 이 환경의 부분 캡처 기능 | 요소 위치를 모아 두고 전체 화면을 찍은 뒤 이미지 도구로 자름 | 도판 10장 약 7분 |
| 설명용 그림의 이모지가 네모로 깨짐 | 이 환경의 이모지 표시 | 도형으로 그림 | 고급편 5편 |
8.6 정직 표시와 권리는 어디까지 챙기나?
재현 화면은 재현이라고 적고, 남의 영상은 AI 변환 입력으로 쓰지 않는다. 라벨은 생성 뒤에 얹는다.
시연 영상은 실제 AI의 답을 찍은 화면이 아니다. 시뮬레이터가 정해진 순서대로 보여 주는 재현이다. 그래서 화면 시작과 아래쪽에 ‘교육용 재현 화면’이라고 표시했다. 실제 결과는 모델과 버전, 입력 자료에 따라 달라진다는 고지도 넣었다. 실시간 AI 결과인 것처럼 편집하지 않았고, 특정 AI 서비스의 로고도 넣지 않았다. 보는 사람이 이것을 실제 결과로 믿으면, 자기 화면에서 다른 답이 나왔을 때 자기가 틀렸다고 생각할 수 있다. 재현이라는 표시는 그 오해를 막는 장치다.
기구 동작 쪽에서는 소재의 권리를 따졌다. 소재로 받은 제품 소개 영상 클립이 있었는데, 자막이 화면에 박혀 있고 워터마크가 있었다. 워터마크는 영상의 출처를 밝히려고 화면에 얹어 둔 표시다. 이 클립은 AI 변환 입력으로 쓰지 않았다. 남의 영상을 AI로 바꿔 쓰면 그 결과는 남의 영상에서 나온 파생물이 된다. 대신 치수와 비율을 재는 참고 자료로만 썼다. 뜻밖의 쓸모도 있었다. 그 영상 자막에서 ‘등받이’, ‘겹침’이라는 현장 용어와, 등받이는 겹침 시 위로 올라가는 구조라는 설명을 확인했다. 내 기구 해석이 맞았다는 것을 밖에서 확인한 셈이다.
AI 영상 도구에 넣을 입력은 따로 만들었다. 글자와 지시선, 라벨을 모두 뺀 버전을 한 번 더 렌더했다. 렌더는 적어 둔 좌표와 색을 실제 그림으로 뽑아내는 일이다. AI 영상 모델은 한글을 뭉개기 때문에, 라벨이 들어간 도면을 넣으면 뭉개진 글자가 결과에 섞인다. 라벨은 생성이 끝난 뒤 편집으로 얹는다. 도면을 함수로 만들어 둔 덕에 라벨 있는 판과 없는 판을 같은 좌표로 뽑을 수 있었다.
8.7 책과 연재 도판은 어떻게 자동화했나?
무엇을 찍을지는 내가 정하고, 캡처·자르기·가리기·썸네일은 정해진 스크립트로 돌린다.
이 원칙에는 계기가 있다. 예전에 다른 에이전트로 블로그를 자동화할 때 캡처 단계를 AI 판단에 맡겼다가 전체 화면이 그대로 올라간 사고가 있었다(1권 14장). 그 뒤로 나눴다. 캡처, 자르기, 가리기, 썸네일은 판단이 필요 없는 결정적 작업이다. 같은 입력이면 언제나 같은 결과가 나와야 하는 일이라서 정해진 스크립트로 돌린다. 모델을 부르지 않으니 모델 비용도 0이다. 무엇을 찍을지는 사람이 정한다. 가리기 영역은 화면 비율(0에서 1 사이의 값)로 저장했다. 해상도가 바뀌어도 같은 자리를 다시 가릴 수 있다.
다른 책의 화면 도판을 자동으로 찍을 때도 걸린 것이 있었다. 이 환경의 부분 캡처 기능이 좌표 일부를 무시했다. 그래서 순서를 바꿨다. 찍을 요소의 위치를 먼저 모아 두고, 전체 화면을 찍은 뒤, 이미지 도구로 잘랐다. 잘라 낼 영역은 제목 글자에서 출발해 크기 조건이 맞는 상자까지만 거슬러 올라가 찾았다. 이 방식으로 도판 10장을 약 7분에 뽑았다. 겪은 시행착오는 프로젝트의 캡처 노트 파일에 적어 두었다.
이 연재의 도식은 SVG로 그려 브라우저에서 PNG로 바꿨다(고급편 6편). 이미지에 한글을 넣을 때 시스템 글꼴은 막혀 있어서 프로젝트 폴더의 글꼴 파일을 썼다. 설명용 그림에 이모지를 쓰면 네모로 깨져서 도형으로 그렸다(고급편 5편). 실제 화면은 캡처 직전에 개인정보 글자만 가상 값으로 바꿨다. 비밀값을 출력에 찍지 않는다는 원칙은 고급편 1편에 적었다. 파일 이름도 바꿨다. 웹에 올리는 도판은 번호식 이름으로 두지 않고 내용을 설명하는 이름으로 바꿔야 이미지 검색에서 찾힌다고 판단했다. 그래서 책용 이름과 웹용 이름을 매핑표에서 나눠 두기로 했다.
8.8 결과는 사람이 재생해서 판정한다
동작은 정지 화면으로 판정하지 않는다. 내가 재생해 보고 정한다.
도면 한 장이 맞아도 움직임은 틀릴 수 있다. 그래서 동작 판정은 정지 화면으로 하지 않고 내가 재생해서 했다. 판정 흐름은 1권 13장에 적었다. Aside는 재생할 때 볼 것 두 가지를 짚었다. 회전이 경첩을 축으로 일어나는지, 그리고 배경이 정지해 있는지다. 정지 화면을 볼 때는 영상 파일을 브라우저의 영상 재생 기능에 넣고 원하는 시각으로 옮겨 가며 프레임을 캡처했다. 휴대폰으로 찍은 MOV 파일은 형식 표기를 MP4로 넣어야 열렸다. 그림 8-3도 애니메이션 파일에서 이 방식으로 0.2초, 2.6초, 3.3초, 4.0초의 네 프레임을 뽑은 것이다. 판정은 끝까지 재생해 본 내 눈이 한다.
8.9 도판과 영상을 맡기는 요청 예시
아래는 설명을 위해 만든 가상의 요청이다. 담을 것은 좌표 상수, 색 규칙, 라벨 없는 버전, 길이 검증, 판정은 내가 한다는 조건이다.
[가상 설정] 접이식 의자가 접히는 동작을 설명하는 도식과 짧은 MP4 영상을 코드로 만들어 줘. AI 이미지·영상 생성은 쓰지 마. 1. 도면은 SVG를 만드는 함수로 짜. 고정 부품의 위치와 높이는 좌표 상수로 맨 위에 모아 두고, 회전은 경첩 점을 축으로 도는 변환으로 적어. 2. 중간 자세는 눈대중으로 정하지 말고 부품이 닿는 조건에서 각도를 계산해. 계산이 끝 자세에 못 미치면 어디서 이어 붙였는지 적어. 3. 색 규칙: 흰 배경, 움직이는 부품 주황, 고정점과 회전 궤적 빨강, 나머지 회색. 4. 라벨 있는 판과 글자·지시선·라벨을 모두 뺀 판을 같은 좌표로 따로 렌더해. 5. 영상은 브라우저에서 MP4로 녹화해. 먼저 이 브라우저가 MP4 녹화를 지원하는지 확인하고, 경과 시간은 직접 올리면서 그 시각의 화면을 그려. 6. 다 만든 뒤 실제 재생 길이와 가로·세로 크기를 다시 읽어서 표로 줘. 파일이 적어 둔 길이는 믿지 마. 7. 함수와 결과 파일은 만든 즉시 파일로 저장해. 8. 동작이 맞는지는 내가 재생해서 판정할게. 재생할 때 내가 볼 점을 두세 개 적어 줘.
1번과 2번이 이 요청의 중심이다. 좌표 상수를 맨 위에 모아 두면 비율을 고칠 때 여섯 값 남짓만 바꾸면 된다. 회전을 경첩 점 기준으로 적게 하면 고정점을 코드가 지킨다. 2번의 뒷줄은 내가 카트 도면에서 70도대에서 멈춘 계산을 이어 붙인 경험에서 왔다. 4번은 AI 영상 도구에 넣을 입력을 미리 만들어 두는 줄이다. 5번과 6번은 8.5절에서 걸린 것들을 요청 단계에서 막으려는 줄이다. 8번은 판정을 누가 하는지 적어 둔 것이다. Aside는 볼 점을 짚고, 재생해서 정하는 것은 나다.
8.10 다음 편: 실험편
다음 편은 실험편이다. 아직 해 보지 않은 기능들을 직접 해 보고 그 결과를 쓴다.
이 글의 확인 범위
기준일은 2026년 9월 27일이다. 브라우저의 녹화 지원 범위와 영상 도구의 동작은 바뀔 수 있다.
- 본문의 녹화 형식 지원, 프레임 누락 수치(8ms 간격 100장 중 65장, 25ms 간격 50장 중 50장), 부분 캡처 동작, 글꼴 제한은 내 환경에서 관찰한 것이다. 다른 브라우저나 기기에서는 다를 수 있다.
- 업로드한 영상을 동작 참고로 삼아 겉모습만 바꾸는 모드는 원본 길이 상한만 확인했다. 결과가 기구 동작을 지키는지는 판정하지 않았다.
- 시연 영상을 만든 교육 과정의 이름과 화면 내용은 공개하지 않는다. 이 글에는 만든 방식과 검증 방법만 적었다.
- 제품 소개 영상 클립은 치수·비율 참고와 용어 확인에만 썼으며, 이 글에 그 영상의 화면은 싣지 않았다.
- 그림 8-1은 설명용 도식이고, 그림 8-2와 8-3은 코드로 만든 도면과 애니메이션에서 뽑은 것이다. 8.9절의 요청은 가상이다.
참고한 자료
2026년 9월 27일 확인. MediaRecorder (MDN) · SVG (MDN)
이전 글: 고급 활용 7 · SNS는 허용된 길로
1권: 『Aside 브라우저 사용설명서』 연재 목록
『Aside 고급 활용』 연재 목록
저자의 실제 사용 경험과 Aside 도움말을 바탕으로 AI의 도움을 받아 작성·편집했습니다. 초판 선공개 원고 v1.0.