이건 디자인 반칙입니다 — 모션 코드 + 썸네일 시안 6개 프롬프트

포토샵·캔바 없이, 마음에 드는 썸네일 몇 장만 골라 주면 AI가 글자 크기·색·배치 규칙만 뽑아서 내 사진으로 시안 6개를 만들어요. 이 영상의 모션 코드와 썸네일 프롬프트를 그대로 드려요.

디렉터스AI 릴스 VOL.03 이건 디자인 반칙입니다 — 4줄 공식 썸네일 예시
이 썸네일이 ④의 4줄 공식 예시예요.

② 받기

모션 코드 + 썸네일 프롬프트 받기 (zip, 2.0MB)

릴스에 ‘썸네일’ 댓글을 남기신 분께 DM으로 보내 드린 페이지예요.

얼굴 영상·사진·목소리는 빠져 있어요. ‘YOUR VIDEO’ · ‘YOUR PHOTO’ 자리표시가 들어 있어서 받자마자 그대로 렌더돼요.

PC에서 받는 걸 추천해요. 휴대폰에서 받았다면 PC로 옮겨서 여세요.

썸네일 프롬프트 (PROMPT.md)레퍼런스 → 규칙만 뽑기 → 내 사진으로 시안 6개 → 고르기·다듬기, 클로드 코드에 붙여 넣는 말
썸네일 규칙 (THUMBNAIL_RULES.md)우리가 실제로 쓰는 4줄 공식·안전 영역·색 규칙
썸네일 스타터 (thumb-starter/)4줄 공식 썸네일 HTML + PNG 찍기(9:16 + 인스타 3:4 미리보기)
영상 모션 코드 (index.html)무한 캔버스 위 아트보드 9장을 카메라가 날아다니는 영상(세로, 32초)
맞추기 도구 (make_words.py, build.py, sfx.py)받아쓰기 → 장면 시각·자막·효과음을 내 목소리에 다시 맞춤. 효과음은 코드로 만든 소리
README.md · LICENSE.txt쓰는 법 · 이용 조건

③ 썸네일 시안 6개 만드는 법 (프롬프트)

규칙만 뽑기

refs/ 폴더의 썸네일들을 보고 '규칙만' 뽑아서 rules.json 으로 저장해 줘. 그림·사진·로고·틀은 절대 가져오지 말고, 이런 것만 숫자와 말로 정리해 줘: - 글자 크기 비율(제목 / 부제 / 작은 글씨, 1080×1920 기준 px) - 색 몇 가지와 어디에 쓰는지(바탕 / 제목 / 강조 띠) - 배치(제목 위·사진 아래 같은 큰 틀, 여백, 정렬) - 강조 방식(색 띠, 상자, 밑줄 등) THUMBNAIL_RULES.md 의 우리 규칙(4줄 공식, y 240~1680 안전 영역, 큰 빨간 원 금지)과 부딪히는 건 우리 규칙을 따라 줘.

내 사진으로 시안 6개

[ ] 안의 문구를 내 영상에 맞게 바꿔서 보내세요.

rules.json 과 THUMBNAIL_RULES.md 를 지켜서, thumb-starter/index.html 을 바탕으로 썸네일 시안 6개를 thumb-starter/drafts/1.html ~ 6.html 로 만들어 줘. - 문구는 4줄 공식: 1줄 판정 "[이건 ○○ 반칙입니다]" / 2줄 도구 "[클로드 코드]" / 3줄 "[미친 ○○ 기술]" / 4줄 "[○○ 복붙]"(꽉 찬 색 띠 안) - 사진은 thumb-starter/assets/photo.jpg(내 사진)만 써. - 6개는 규칙은 같고 배치만 다르게(제목 위/아래, 사진 크게/작게, 원형/사각, 세로 글자 등). - 핵심 글자와 얼굴은 전부 y 240~1680 안. 글자는 아주 크게. 밝은 바탕에 큰 빨간 원 금지. - 다 만들면 6개를 PNG 로 찍고, 3:4 미리보기 6장을 3×2 한 장(drafts/모음.png)으로 붙여서 보여 줘.

고르고 다듬기

[ ] 안을 내가 고른 번호와 고칠 점으로 바꿔서 보내세요.

drafts/모음.png 에서 [3]번이 좋아. 이걸 thumb-starter/index.html 로 옮기고 이렇게 다듬어 줘: [4줄째 띠를 더 두껍게, 얼굴 10% 크게, 3줄째 색을 파랑으로]. 다 되면 python shot.py 로 찍어서 9:16 과 3:4 미리보기를 보여 줘.

문구가 고민될 때

내 영상 내용은 [영상 한 줄 요약]이야. THUMBNAIL_RULES.md 의 4줄 공식에 맞춰 문구 후보 5개를 표로 줘. 4줄째에는 보는 사람이 가져가는 것(복붙·다 드려요·○분이면 끝 등)이 꼭 들어가게.

레퍼런스는 규칙만 배우는 데 써요. 남의 썸네일 그림·틀·로고를 그대로 쓰면 안 돼요.

④ 우리가 쓰는 썸네일 규칙

4줄 공식① 판정(이건 ○○ 반칙입니다) ② 도구(클로드 코드 — 제일 크게) ③ 미친 ○○ 기술(포인트 색) ④ ○○ 복붙(꽉 찬 색 띠 안에, 보는 사람이 가져가는 것)
안전 영역세로 1080×1920 중 y 240~1680 안에 핵심 글자·얼굴 전부(인스타 프로필 그리드가 가운데 3:4만 보여 줘요).
글자는 아주 크게휴대폰 그리드에서 엄지손톱만 해도 읽히게.
문구에 '보는 사람이 얻는 것'복붙·다 드려요·3분이면 끝 …
레퍼런스에선 규칙만글자 크기 비율·색 수·배치. 남의 그림·틀은 절대 베끼지 않기.
색은 세 가지밝은 바탕에 큰 빨간 원은 쓰지 않기.
시안 6개규칙은 같고 배치만 다르게 → 3:4 미리보기로 비교해서 고르기.

⑤ 영상 모션 코드 실행법

클로드 코드에 붙여 넣기

이 폴더는 HyperFrames 모션 그래픽 프로젝트야. README.md 를 읽고, Node.js 22 이상·FFmpeg·렌더용 크롬이 준비됐는지 npx --yes hyperframes@0.8.156 doctor 로 확인해 줘. 없는 게 있으면 설치하고, 자리표시 영상·사진 그대로 한 번 렌더해서 out.mp4 를 만들어 줘.

2. 내 영상(대본 전체를 내가 읽은 세로 영상)을 assets/face.mp4 로, 사진 세 장을 내 것으로 바꾸고 ⑦의 말을 붙여 넣기.

직접 하고 싶은 분

npx --yes hyperframes@0.8.156 render . -o out.mp4 (썸네일은 thumb-starter 폴더에서 python shot.py).

⑥ 이 영상의 핵심 움직임

주요 장면 모음 — 반칙 칩, 도구 칩 4개가 와장창 깨짐, 4줄 공식 커버 조립, 레퍼런스 스캔, 시안 6장 3×2, FREE

주요 장면 — 누르면 크게 볼 수 있어요.

1가상 카메라

"어느 아트보드를 몇 %로" 키만 적어 두면 카메라가 그 사이를 날아가요. 날아가는 속도에 따라 모션 블러·속도선·3D 기울기가 자동으로 생겨요.

2무한 확대 점 격자

확대할수록 점 간격이 단계적으로 바뀌어 끝없이 들어가는 느낌.

3와장창 물리

도구 칩이 날아와 반으로 깨지고, 파편 8개가 중력으로 떨어져 바닥에서 두 번 튕겨요. 튕기는 순간마다 '딱' 소리가 정확히 맞아요. 깨지는 순간은 말하는 사람의 머리가 움직이는 첫 프레임에 맞췄어요.

4커버 조립

"커버 만들어 줘" 말풍선 한 번에 4줄 공식 커버가 한 줄씩 착착.

5스캔 빔 → 포스트잇

레퍼런스 5장을 빔이 훑고 지나가면 SIZE · COLOR · GRID 규칙이 포스트잇으로 떨어져요.

6시안 6장

내 사진이 터지며 시안 6장이 흩어졌다가 3×2 자리로 착, 분홍 간격 가이드.

7말로 수정

마우스 ✕, 말풍선이 선택 상자 손잡이를 잡고 글자를 키워요.

영상 속 레퍼런스 썸네일·시안·도구 아이콘은 우리가 코드로 직접 그린 표본이에요(남의 썸네일·로고 아님). 모든 움직임은 “시간만 보고 그리기” 규칙이라 몇 번을 뽑아도 똑같이 나와요.

⑦ 클로드 코드에 시키는 말 — 영상

버튼 한 번으로 통째로 복사돼요. [ ] 자리만 내 내용으로 바꾸면 돼요.

내 영상·목소리에 맞추기

assets/face.mp4 를 내 영상으로 바꿔 넣었어. 내 대본은 script.txt 야. make_words.py --script script.txt 로 받아쓰고, index.html 의 A 주석을 보고 build.py 의 KEYS 를 내 대본 단어로 바꾼 뒤 python build.py --flinch 로 장면 시각·자막·효과음을 다시 맞춰 줘. check 로 오류 0개 확인하고 렌더해서 장면마다 프레임을 보여 줘.

사진 바꾸기

assets/still_full.jpg, still_head.jpg, cover_photo.jpg 를 내 사진으로 바꾸고 싶어. 내 영상에서 입을 다문 좋은 순간을 골라 세 장을 같은 비율로 잘라 만들어 줘(늘리지 말고).

도구 이름 바꾸기

도구 칩 4개를 [포토샵, 캔바, 미리캔버스, 일러스트] 대신 [프리미어, 캡컷, 다빈치, 브루]로 바꿔 줘.

색 바꾸기

포인트 색 파랑(#2F6BFF)을 [초록 #16A34A]로 전부 바꾸고 글자 대비는 check 로 확인해 줘.

더 많은 말은 zip 안 PROMPT.md 에 있어요.

⑧ 장면 구성

0초이건 디자인 반칙입니다선택 상자 속 얼굴 + '반칙' 칩 쾅
2.4초포토샵, 캔바, 미리캔버스, 일러스트Tools 아트보드에 도구 칩 4개
5.5초여기 망할지도 몰라요!!칩이 날아와 와장창! 파편이 바닥에 튕김
7.0초썸네일 만들 때 이제 안 열어요칩이 회색 빈자리로, 스위치 OFF
9.3초이 영상 커버도 말로만 만들었거든요Cover — 4줄 공식 커버 조립
11.8초레이어도 마우스로 줄 맞추기도 없었어요레이어 패널 접힘, 커서 ✕, 상자 착 정렬
14.4초저는 마음에 드는 썸네일 몇 장만 골라 줬어요레퍼런스 5장 + ✓
17.3초AI가 글자 크기, 색, 배치 규칙만 뽑아내고스캔 빔 → SIZE · COLOR · GRID
20.6초제 사진으로 시안을 6개 만들었어요시안 6장 → 3×2 착
22.9초디자이너한테 맡긴 것 같죠?시안 하나로 줌인 → 얼굴
24.7초디자인도 이제 손이 아니라 말로 하는 겁니다말풍선이 손잡이 잡고 키움
27.0초이 영상 모션 코드랑 프롬프트 그대로 드릴게요보드 전체 → Export → FREE
30.0초댓글 달면 자료 보내 드리겠습니다댓글 → DM

시각은 원래 속도 기준이에요. 올린 영상은 1.4배속이라 더 빨라요.

⑨ 꼭 알아 둘 것

2026년 10월 기준(HyperFrames 0.8.156)이에요.

LUMIÈRE BETA

편집은 이제 손이 아니라 말로 — 뤼미에르 베타

촬영본을 넣으면 컷·자막·확대·효과음·썸네일까지, 단계마다 품질 검사를 붙여 자동으로 편집해 주는 시스템이에요. 쓸수록 내 스타일로 자라요.

정가 ₩200,000₩99,000베타 20명 선착순 한정

Claude Pro 이상 구독이 필요합니다(별도 결제). 뤼미에르 가격에 Claude 이용료는 포함되지 않습니다.

베타 버전입니다. 윈도우 전용이며, 한국어 영상에 맞춰져 있습니다.

뤼미에르 베타 보기 →

회사·채널의 영상 스타일과 일하는 방식에 맞춘 뤼미에르가 필요하신가요?

뤼미에르 커스터마이징(기업형 맞춤 시스템) 문의

artgourmet.official@gmail.com

Claude는 Anthropic의 상표입니다. 뤼미에르는 Anthropic과 제휴하거나 보증받은 제품이 아닙니다.

⑩ 자주 묻는 질문

정말 무료예요?

네, 코드·프롬프트·효과음 전부 무료예요. HyperFrames와 GSAP도 무료예요. 클로드 코드로 시키려면 Claude 유료 요금제(Pro 이상)가 필요해요.

뭐가 필요해요?

Node.js 22 이상, FFmpeg, 렌더용 크롬(없으면 자동으로 받는 명령이 있어요), 썸네일 찍기·받아쓰기엔 Python. 렌더할 때 인터넷 연결이 필요해요.

윈도우·맥 둘 다 돼요?

네.

HyperFrames가 뭐예요?

HTML로 만든 화면을 한 프레임씩 찍어 mp4·PNG로 만드는 오픈소스 도구예요.

포토샵·캔바 없이 진짜 돼요?

네. 썸네일도 HTML 한 장이라 클로드 코드에 말로 고치고 shot.py로 PNG를 뽑아요.

남의 썸네일을 레퍼런스로 넣어도 돼요?

보고 규칙만(글자 크기 비율·색 수·배치) 뽑는 데만 쓰세요. 그림·틀·로고를 그대로 가져오면 안 돼요. 프롬프트도 그렇게 짜여 있어요.

영상 없이 썸네일만 써도 돼요?

네. thumb-starter 폴더와 ③의 프롬프트만 쓰면 돼요.

휴대폰에서 받았는데 열리지 않아요.

이 파일은 PC에서 클로드 코드로 여는 코드 묶음이에요. 휴대폰에서 받으셨다면 PC로 옮기거나, PC에서 이 페이지를 다시 열어 받아 주세요. 인스타그램 앱 안에서 다운로드가 안 되면 화면 오른쪽 위 메뉴(⋯)에서 "브라우저에서 열기"를 눌러 보세요.

⑪ 영상으로 보기

유튜브 쇼츠 · 이건 디자인 반칙입니다… 썸네일, 이제 디자인 툴 안 열어요

디렉터스AI — 포토샵·캔바 없이 말로 만든 썸네일

영상 보기 →
인스타그램 릴스 · VOL.03 이건 디자인 반칙입니다

디렉터스AI 인스타그램(@directors_ai)

영상 보기 →

문의

돌려 보다 막히는 부분이 있으면 이메일 주세요. 같이 풀어 드릴게요.

artgourmet.official@gmail.com

문의하기 페이지 →

더 보고 싶으시다면

▶ 디렉터스AI 유튜브 보러 가기

홈페이지의 다른 자료도 둘러보세요.

인사이트AI와 함께 회사를 운영하며 겪은 일을 기록한 글 모음전자책 · AI 회사를 만들었습니다코드를 못 쓰는 사람이 AI로 회사를 만든 넉 달의 이야기 (2권 세트)실용 도구 모음설치 없이 바로 쓰는 작은 도구들무료 심리테스트회원가입 없이 가볍게 해 보는 성향 테스트