QUOKA MOTION LAB
모션 종. 눌러서 화면으로 보고,
프롬프트나 코드를 복사해 가세요.
세 번이면 내 웹앱에서 움직입니다
썸네일을 누르면 창이 열리고 큰 화면으로 움직임을 확인할 수 있어요.
창 오른쪽 ‘문구’에서 글자를, ‘설정’에서 비율·속도·이미지를 바꿉니다. 안 바꿔도 됩니다.
‘프롬프트 복사’를 눌러 AI에게 붙여 넣고 넣을 자리만 한 줄 적어 주세요. 영상이 필요하면 ‘영상으로 저장’을 누릅니다.
mp4로 뽑는 법, 투명 배경으로 뽑아 브루 같은 편집기에 얹는 법
AI가 영상을 직접 만들어 주는 것은 아닙니다. AI가 화면을 그리는 코드를 짜고, 브라우저가 그 화면을 1초에 30장씩 찍고, ffmpeg가 이어 붙여 mp4로 만듭니다. 여기 있는 모션은 전부 ‘t초일 때의 한 장면’을 그리는 코드라서 이 방식에 그대로 맞습니다.
‘숏폼 자막’처럼 영상 위에 얹을 조각은 투명 형식으로 저장합니다. 투명 형식을 고르면 미리보기 바탕이 체크무늬로 바뀌는데, 체크무늬 자리가 투명하게 저장되는 곳이에요. 숏폼 자막의 흐릿한 바탕은 영상 대신 깔아 둔 미리보기라 투명 저장 때는 빠지고, ‘내 이미지’에 내 영상 캡처를 넣으면 그 위에 얹어 볼 수 있습니다.
브루(Vrew)가 어떤 투명 형식을 읽는지는 공식 안내에서 확인하지 못했어요. WebM을 먼저 넣어 보고, 투명이 살지 않으면 MOV나 GIF를 넣어 보세요. 브루의 ‘투명 배경 자막 영상’ 내보내기는 MOV 형식입니다.
컴퓨터의 크롬·엣지에서 됩니다. 만드는 동안 창을 그대로 두세요. 장면 여러 개를 따로 저장해 인스타그램 캐러셀에 한 장씩 올리면 움직이는 카드뉴스가 됩니다. 소리는 들어가지 않습니다.
npm i playwright && npx playwright install chromium # 장면을 열고 seek(초)를 부르며 한 장씩 저장한 뒤 ffmpeg -framerate 30 -i frames/frame_%05d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart out.mp4 # 목소리 넣기 ffmpeg -i out.mp4 -i voice.wav -c:v copy -c:a aac -b:a 192k -shortest out_audio.mp4
화면 크기는 가로 영상 1920×1080, 쇼츠 1080×1920. 복사한 코드의 qmEngine(…)이 돌려주는 값에 seek(초)가 있습니다.
다른 길도 있습니다. HeyGen HyperFrames는 HTML로 영상을 짜는 무료 도구(Apache 2.0)이고, Remotion은 React 기반으로 가장 널리 쓰이지만 4인 이상 조직은 유료 라이선스가 필요합니다. 둘 다 Claude Code용 스킬이 공개돼 있습니다. 위 내용은 2026년 10월 해외 문서와 튜토리얼을 조사해 정리한 것입니다.
복사한 것을 어디에 어떻게 붙이는지
‘프롬프트’는 클로드 코드 같은 AI에게 그대로 붙여 넣는 부탁 글이고, 코드가 그 안에 들어 있습니다. 넣을 자리만 한 줄 적어 주면 돼요. 직접 붙일 때는 ‘코드’를, 새 페이지로 쓸 때는 ‘HTML 파일’을 복사해 .html로 저장합니다.
아니요. 필요한 코드가 HTML 한 덩어리 안에 다 들어 있어서 붙여 넣기만 하면 움직입니다. 3D·배경의 입체 모션만 three.js를 불러오는 한 줄이 코드에 함께 들어가는데, 그것도 설치할 것은 없어요. 영상은 창의 ‘영상으로 저장’으로 바로 뽑을 수 있고, 직접 뽑을 때만 Playwright와 ffmpeg가 필요합니다.
카드 쇼케이스와 휴대폰·책 목업은 ‘내 이미지’에서 파일을 고르면 미리보기에 바로 보입니다. 코드에는 images/파일이름으로 적히니, 같은 파일을 내 사이트의 그 폴더에 올려 두세요.
글자는 창 오른쪽 ‘문구’ 칸에서 고치면 화면과 복사되는 코드에 바로 들어갑니다. ‘설정’에서는 글꼴(눈누 한글 글꼴 24종)과 포인트 색(강조·형광·상자 색)을 고를 수 있습니다. 포인트 색을 쓰지 않는 모션에서는 그 줄이 보이지 않습니다. 더 크게 바꾸려면 복사한 코드 ‘① 설정’의 colors: [...] 여덟 칸을 밝은 색부터 고치면 전체 색 계열이 바뀝니다.
창 위쪽에 ‘ThreeUI’라고 적힌 모션은 HTML 파일 하나가 통째로 모션입니다. ‘HTML 파일’을 복사해 .html 파일로 저장한 뒤, 내 페이지에서 <iframe src="저장한파일.html">로 불러오면 됩니다. MIT 라이선스라 자유롭게 쓸 수 있지만, 파일 맨 위의 저작권 고지는 지우지 말고 그대로 두세요.
눈누(noonnu.cc)에 있는 무료 한글 글꼴을 씁니다. 한글이 든 글줄은 영문·숫자까지 한글 글꼴 하나로 찍히게 맞췄어요(영문 글꼴과 한글 글꼴이 한 줄에서 섞여 보이지 않게). 복사한 코드에는 그 모션이 쓰는 글꼴 선언이 함께 들어갑니다.
SIL 오픈 폰트 라이선스(OFL): 페이퍼로지, G마켓 산스, 하다 콘덴스드, 프리텐다드, 원티드 산스, 함렛, 가석체, 검은고딕, 동글, 갈무리, 마루 부리, D2Coding, 학교안심 알림장, 나눔손글씨 펜·붓, 개구쟁이, 동해 독도. 제작사 무료 글꼴: 에이투지체, SB 어그로체(샌드박스), 여기어때 잘난체(여기어때), 배민 도현·한나 Pro·주아(우아한형제들), 카페24 써라운드(카페24). 모두 상업적 사용과 영상 사용이 가능한 무료 글꼴이고, 글꼴 파일만 따로 파는 것은 금지예요. 쓰기 전에 각 글꼴의 눈누 페이지에서 조건을 한 번 확인해 주세요.
창 오른쪽 ‘문구’ 칸에서 고칩니다. 한 칸이 화면에 한 번 나오는 자막 한 덩어리예요. 덩어리 안에서 /는 줄바꿈, 낱말 앞의 *는 강조 표시입니다. 예: 이거 *3초면 / 끝나요. 덩어리를 더 넣거나 빼려면 복사한 코드에서 LINES와 LOOP(한 바퀴 길이)를 함께 고쳐 주세요.
‘코드’를 복사해 홈페이지의 원하는 자리에 붙이면 됩니다. 설정의 live: true가 있으면 실제 마우스와 스크롤을 따라 움직이고, 마우스가 없을 때는 쉬는 모습으로 있어요. 창에서는 화면에 마우스를 올려 직접 움직여 볼 수 있습니다. once가 있는 모션은 화면에 들어올 때 한 번 재생하고 멈춰요(계속 되풀이하려면 0). 스크롤 연출은 ‘HTML 파일’로 복사하면 스크롤 칸까지 함께 만들어지고, 내 페이지에 넣을 때는 키 큰 칸 안에 상자를 position:sticky로 두고 그 칸을 track에 적습니다. 히어로 배경은 SHOW_TEXT를 false로 바꾸면 배경만 남아 내 제목을 위에 올릴 수 있어요.
서로 다른 모션이면 그대로 여러 개 붙여도 됩니다. 같은 모션을 두 번 넣을 때만 id="qm-…" 이름을 서로 다르게 고쳐 주세요. 모션은 화면에 보일 때만 움직입니다.
쿼카연구회 · 쿼카 모션랩
한 줄 = 자막 한 덩어리(차례로 나와요). 덩어리 안에서 줄을 바꿀 자리에 / 를 쓰고, 강조할 낱말 앞에 * 를 붙여요. 비워 두면 자막의 예시 문구가 나와요.
미리보기와 ‘영상으로 저장(MP4)’에 함께 들어가요. 로고는 이 브라우저에만 담겨 있고 어디에도 올라가지 않아요. 복사되는 코드에는 배경(효과 켜기·끄기 포함)만 들어가요.
코드에는 폴더 이름과 파일 이름이 칸 차례대로 적힙니다(빈 칸은 null = 샘플). 같은 파일을 내 사이트의 그 폴더에 올려 두세요.
쉼표로 나눠 여러 낱말을 넣을 수 있어요. 줄을 바꿀 자리에는 \n이라고 적습니다. 비워 두면 기본 낱말이 나옵니다.
학생 응답을 그대로 붙여 넣으세요(쉼표나 줄바꿈으로 나눠요). 같은 낱말이 여러 번 나오면 그만큼 커지고, ‘협력:5’처럼 숫자로 무게를 줄 수도 있어요. 비워 두면 예시 낱말이 나옵니다.
고친 문구는 미리보기와 복사되는 코드, 저장되는 영상에 그대로 들어갑니다. 칸 수는 그대로 두고 내용만 바꿀 수 있어요.
오늘 수업, 딱 3분이면 돼요 · ABC 123
글자·숫자·날짜 같은 내용은 복사한 코드의 ‘② 모션’ 맨 위에서 바꿉니다.