이름만 알면 AI가 영상 그래픽을 만든다 — 모션그래픽 주문 사전 152가지 무료 사이트 사용법과 응용 프롬프트

10월 10, 2026

멋진 모션그래픽을 보고 "나도 저거 만들어 보고 싶다" 싶어도, 그 효과의 이름을 모르면 AI에게 어떻게 부탁해야 할지 막막합니다. 댓글을 달아야 프롬프트를 보내 준다는 곳도 많고요.

이번에는 로그인도 회원가입도 없이, 모양을 보고 고른 뒤 빈칸만 채우면 AI에게 줄 요청 문장이 완성되는 무료 사이트 「모션그래픽 주문 사전」을 소개해 드리겠습니다. 가게 찾아오는 길, 움직이는 메뉴판, 층별 안내, 행사 시간표, 수업 개념도, 유튜브 인트로까지 152가지가 들어 있습니다.

🧾모션그래픽 주문 사전 (모두의 AI 교실)152가지 모션그래픽을 미리보기로 보고, 내 내용을 넣어 요청 문장을 복사하는 무료 사이트. 로그인 필요 없음.https://nondev-thinking.web.app/motion/바로가기 ↗

사이트 정보

사이트	모션그래픽 주문 사전 — 모두의 AI 교실 무료 자료 (2026년 10월 기준 152가지, 3D 19가지)
만드는 도구	HyperFrames(웹 화면을 영상으로 렌더링하는 오픈소스) + 클로드 코드 또는 코덱스
준비물	AI 코딩 도구 1개, Node.js, FFmpeg, HyperFrames 스킬 — 사이트 오른쪽 위 "처음이세요? 설치부터 차근차근"에 설치 영상이 있습니다
비용	사이트는 무료, 실제 제작은 AI 사용량(토큰)만 듭니다

카드뉴스로 먼저 보기

카드를 좌우로 밀거나 ← → 키, 아래 점으로 넘길 수 있어요

1. 어떤 그래픽이 있나요

모션그래픽은 영상 위에서 움직이는 글자와 그림입니다. 이 사전은 그걸 쓰임새별로 정리해 두었습니다.

종류	개수	이런 데 써요
🗺️ 지도·장소 안내	11	가게·학교 찾아오는 길, 층별 안내
🏪 가게·서비스 안내	9	움직이는 메뉴판, 가격표, 서비스 소개
📅 일정·행사	7	행사 시간표, 접수 일정, 카운트다운
📢 공지·절차·캠페인	8	신청 절차 안내, 공지 카드
🧑‍🏫 설명·교육	7	개념도 자동 그리기, 용어 팝업
📊 데이터·비교	5	막대그래프, 전후 비교
🔤 자막·글자	6	강조 자막, 타자기 효과
🖼️ 내 이미지 넣기	10	사진 한 장으로 배경·제목 장면
🎬 오프닝·로고 / 🔔 엔딩·구독	8	채널 인트로, 구독 유도 엔딩
📺 방송 화면 틀 / 💬 예능 자막	64	뉴스 하단 자막, 예능식 자막

업종 필터에는 교육, 공공, 병원, 음식점, 제조, 복지·자활, 법률·세무 등 19개 분야가 있어서, 내 일에 맞는 것만 골라 볼 수 있습니다.

2. 사용 순서 — 고르고 · 채우고 · 복사

1공통 설정

AI 도구, 화면 비율, 브랜드 색을 한 번만 정합니다. 브라우저에 기억돼요.

설정

2카드 고르기

종류·업종·검색으로 찾고 미리보기로 모양을 확인합니다.

선택

3내 내용 넣기

✏️ 내 내용 넣기에 제목·단계·전화번호 등을 넣으면 프롬프트가 자동으로 바뀝니다.

입력

4간단히 / 자세히

처음엔 간단히, 원하는 모양이 안 나오면 자세히로 장면 순서·금지 조건까지.

조절

5주문서에 담기

여러 장면이 필요하면 장바구니처럼 담아 전체 복사합니다.

묶기

6AI에 붙여 넣기

클로드 코드나 코덱스에 붙여 넣으면 HyperFrames로 렌더링됩니다.

제작

🎞️HyperFrames (GitHub)HTML로 만든 화면을 영상 파일로 렌더링하는 오픈소스. 클로드 코드·코덱스에서 스킬로 불러 씁니다.https://github.com/heygen-com/hyperframes바로가기 ↗

컴퓨터가 버벅이면
페이지에 그래픽 미리보기가 한꺼번에 많이 들어 있어서 사양에 따라 느려질 수 있습니다. 위쪽의 ⏸ 미리보기 멈춤을 누르면 훨씬 가벼워집니다.

3. 우리 상황에 맞게 — 응용 프롬프트

사이트에서 복사한 문장을 그대로 써도 되지만, 아래처럼 장면 순서와 하지 말 것을 덧붙이면 훨씬 덜 어긋납니다. [ ] 안만 바꿔 쓰세요.

간단하게 — 상담 신청 3단계 안내

프롬프트

하이퍼프레임으로 7초짜리 단계 안내 그래픽을 만들어 줘.
단계: [홈페이지 문의] → [문자 예약 확정] → [1차 전화 상담]
연락처: [02-000-0000]. 화면 비율 가로 16:9, 색은 [남색과 노랑].

조금 더 구체적으로 — 학교 찾아오는 길

프롬프트

하이퍼프레임으로 [10]초짜리 "찾아오는 길" 안내 영상을 만들어 줘.

- 장면 순서
  0~2초: 단순한 지도 선이 그려지며 [○○역 2번 출구] 표시
  2~6초: 출구에서 학교까지 경로가 점선으로 그려지고, 큰 건물 2곳에 이름표가 붙음
  6~9초: 학교 위치에 핀이 떨어지며 [○○중학교 본관] 이름표
  9~10초: 아래에 [도보 7분] 칩
- 색: 배경 [연한 회색], 경로·핀 [남색 #1E1B4B], 강조 [노랑]
- 화면 비율 9:16(세로), 글자는 굵은 고딕
- 하지 말 것: 실제 지도 서비스 캡처, 실존 상호 로고, 빠른 빛 번쩍 전환

제대로 맡기기 — 주문서 3장 묶어서 한 영상

프롬프트

하이퍼프레임으로 아래 세 장면을 순서대로 이어 하나의 영상(총 약 [20]초)으로 만들어 줘.

[장면 1 · 오프닝 5초] 채널 이름 [AI 오토마타]가 글자 단위로 튀어 오르며 등장, 아래에 [직장인·교사를 위한 AI 실습]
[장면 2 · 개념도 10초] 가운데 [AI 에이전트] 상자 → 화살표로 [자료 읽기] [초안 작성] [검토] 상자가 차례로 그려짐
[장면 3 · 엔딩 5초] [구독] 버튼이 눌리고 종 아이콘이 흔들림, 아래에 [aiautomata.kr]

공통
- 가로 16:9, 30fps, 색은 [남색 #1E1B4B · 노랑 #FDE68A · 흰색]
- 장면이 바뀔 때는 짧은 밀어내기만 쓰고, 화면이 1초 이상 멈추지 않게
- 하지 말 것: 영어 문구 추가, 다른 회사 로고, 장면 끝 어두워지는 페이드
- 다 만들면 장면마다 가운데 프레임 1장씩 캡처해서 보여 줘

4. 쓰기 전에 알아 둘 것

항목	내용
설치	AI 코딩 도구, Node.js, FFmpeg, HyperFrames 스킬이 필요합니다. 처음이면 사이트의 설치 안내 영상부터 보세요.
저장	공통 설정과 적어 둔 내용은 이 브라우저에만 기억됩니다. 사생활 보호 창에서는 남지 않아요.
제작 시간	컴퓨터 성능에 따라 렌더링에 보통 몇 분이 걸립니다.
수정	마음에 안 들면 "제목을 더 크게", "2초 늦게"처럼 구체적으로 고쳐 달라고 하면 됩니다.
권리	사이트의 자료는 운영자가 무료로 공개한 것입니다. 만든 영상에 남의 로고·상표는 넣지 마세요.

AI 오토마타