애니메이션 스타일

애니메이션 스타일은(는) 무엇을 하나요?

39가지 수제 애니메이션 스타일을 갖춘 Remotion 프로젝트입니다. 모든 스타일이 하나의 고정 스토리를 다시 그리기 때문에 나란히 비교할 수 있고 템플릿으로 재사용할 수 있습니다: 주전자가 들어와서 기울어, kulhad(진흙 컵)에 차를 따르고, 컵이 채워지고, 주전자가 나가고, 김이 올라옵니다. 150프레임, 30fps, 1080×1350(4:5), 무음. --scale=2로 렌더링하면 2160×2700이 됩니다.

모든 장면은 코드로 그려집니다: 필터가 있는 SVG, 또는 각 프레임을 칠하는 <canvas>. 이미지 모델, 비디오 모델, 스톡 푸티지는 사용되지 않으므로 결과물은 독창적이고 반복 가능합니다.

프로젝트는 이 스킬의 폴더(이 파일을 담고 있는 폴더, 아래에서는 <skill>로 표시)에 있습니다. 명령어는 해당 폴더에서 실행하세요.

0. 세션에서 처음 사용할 때

1. cd <skill>로 이동하고 node_modules/가 있는지 확인합니다. 없으면 npm install을 실행합니다(약 1분, Node 18+ 필요).
2. npm run list를 실행하면 39개 스타일의 번호, 슬러그, 한 줄 설명이 출력됩니다.
3. 첫 번째 렌더링 시 헤드리스 Chrome을 한 번 다운로드합니다(약 100 MB). 인터넷이 필요합니다.

일반적인 요청: "<아이디어>를 <스타일> 스타일로 5초 영상 만들어 줘"

이것이 주요 작업입니다(그리고 이 스킬을 안내하는 게시물의 프롬프트). 아이디어가 명확하지 않은 경우를 제외하고는 질문 없이 처음부터 끝까지 수행하세요:

1. 작업 폴더: 사용자의 현재 작업 폴더 안에 있는 animation-films/를 사용합니다. 없으면 해당 폴더에서 node <skill>/scripts/new-project.mjs animation-films로 생성하고, cd animation-films && npm install을 실행합니다(첫 번째 이후에는 빠름). 이미 존재하면(후속 작업) 그대로 재사용합니다.
2. 스타일 선택: 요청에서 스타일을 선택합니다(섹션 1). 이름이 없으면 아이디어에 어울리는 3가지를 제안하고 물어보세요.
3. 스토리 계획: 6개 비트(섹션 3)를 짧은 표로 만듭니다. 한 메시지로 보여주고 계속 진행하며, 모호한 점이 없으면 기다리지 마세요.
4. 먼저 shapes: 사용자의 객체(행위자, 용기, 흐르는 것, 올라가는 것)를 src/films/<idea>-shapes.ts에 src/story.ts의 P와 동일한 좌표계의 SVG 경로로 넣고, 비트 표를 상단에 주석으로 추가합니다. 이 아이디어의 모든 스타일 버전은 이 하나의 파일을 가져옵니다.
5. 구축: 스타일의 컴포넌트(섹션 3)를 사용하여 src/films/<idea>-<style>.tsx를 빌드하고, shapes 파일을 사용하며, src/films/index.ts에 <idea>-<style> ID로 등록합니다.
6. 확인: npm run render -- <idea>-<style> --frames를 실행하고 6개 프레임(섹션 5)을 모두 확인합니다. 수정하고 반복합니다.
7. 전달: npm run render -- <idea>-<style> --final을 실행하고 out/<idea>-<style>.mp4의 전체 경로를 사용자에게 알려줍니다. 다른 스타일을 요청할 수 있다고 언급합니다("이제 픽셀 아트로 만들어 줘").

스타일 변경 후속 요청("이제 픽셀 아트로 만들어 줘", "수채화 시도해 봐", "똑같은 걸 목판화로"): 같은 animation-films/ 폴더에 머물고, 같은 아이디어, 비트 표, shapes 파일을 유지하며, 새 스타일의 컴포넌트로 새로운 src/films/<idea>-<new-style>.tsx를 빌드합니다. 이전 버전 옆에 등록하고(덮어쓰지 않음), 프레임을 확인하고, 최종 렌더링 후 새 경로를 알려줍니다. 사용자가 스타일을 느슨하게 부르면("8비트", "옛날 영화", "분필"), 섹션 1로 매핑합니다. 3D 느낌 스타일(57, 58, 59, 62, 80)은 객체를 3D 메시로 구축하므로 새로운 객체를 교체하려면 더 많은 작업이 필요합니다: src/styles/3d/mesh.ts의 도우미로 shapes를 간단한 선반 또는 상자 메시로 변환합니다.

1. 스타일 고르기

사용자가 말하지 않았다면 어떤 스타일을 원하는지 물어보세요. 확실하지 않으면 npm run list를 패밀리별로 그룹화하여 보여주고 README.md의 갤러리(각 스타일은 media/thumbs/에 움직이는 미리보기가 있고 media/videos/에 720×900 MP4가 있습니다)를 보여주세요. 느슨하게 매칭하세요: "일본 판화" → 33 우키요에, "분필" → 02 칠판, "8비트" 또는 "레트로 게임" → 64 픽셀 아트 RPG, "점토" → 62 클레이메이션, "레고 같은" → 58 브릭 토이(화면에 레고라고 부르지 마세요), "옛날 영화" → 70 무성 영화 또는 71 뉴스릴, "SF 화면" → 84 홀로그램 HUD.

패밀리	스타일 (번호, 슬러그)
칠판에 그림	01 화이트보드 · 02 칠판 · 05 메모지 낙서 · 06 청사진
손 그림과 수채화	08 손 그림 · 09 도시 스케치 · 10 크레용 책 · 11 수채화 · 13 한 줄 · 16 셀 라인 보일
만화	17 플랫 벡터 · 21 셀 애니메이션 80년대 · 22 막대 인형
종이와 인형극	23 컷아웃 · 24 빨간 종이컷 · 25 종이 팝업 · 27 그림자 인형
인쇄와 공예	28 목판화 · 29 판화 · 31 실크스크린 포스터 · 33 우키요에 · 34 아르데코 · 35 스테인드글라스
그래픽과 설명	39 멤피스 디오라마 · 51 스티커 설명 · 52 수학 다이어그램
3D 느낌	57 로우폴리 아일랜드 · 58 브릭 토이 · 59 유리 제품 · 62 클레이메이션 · 80 라이더 서베이
영화 시대	70 무성 영화 · 71 뉴스릴
화면과 과학	64 픽셀 아트 RPG · 81 현미경 · 84 홀로그램 HUD · 85 회로 기판
추상	87 리퀴드 모션 · 89 제너레이티브 앱스트랙트

src/catalog.ts는 단일 목록입니다: 번호, 컴포지션 ID(33-ukiyo-e), 이름, 패밀리, 모양, 스타일이 화면에 표시하는 단어, 코드가 있는 파일.

2. 내장 스타일을 있는 그대로 보여주기

npm run render -- 33            # 720x900 프리뷰 -> out/33-ukiyo-e_preview.mp4  (몇 초에서 1분)
npm run render -- 33 --final    # 2160x2700 마스터 -> out/33-ukiyo-e.mp4          (crf 16)
npm run render -- 33 --frames   # 6개 확인 프레임 -> out/33-ukiyo-e_frames/ (+ ffmpeg가 설치되어 있으면 연속 시트)
npm run render -- 33 --still 75 # 75번 프레임의 PNG 한 장

스타일은 번호, ID, 슬러그 또는 이름의 일부(ukiyo, pixel, stained)로 지정할 수 있습니다. 기성 720×900 비디오는 이미 media/videos/에 있고, 전체 2160×2700 마스터는 GitHub 릴리스 페이지에 있으므로, 스타일을 보여주기 위해 렌더링할 필요가 전혀 없습니다.

3. 사용자의 스토리나 객체로 다시 이야기하기

스토리는 src/story.ts에 고정되어 있습니다. 타이밍을 유지하고 그려지는 내용을 변경하세요. 이것이 새로운 영화가 처음부터 제대로 나오게 하는 방법입니다: 모든 스타일이 이미 이러한 비트를 무대에 올리는 방법을 알고 있습니다.

비트 (30fps 프레임, 5초 영화를 위해 절대 이동하지 마세요):

프레임	비트	storyAt(f)의 값
0–24	행위자가 오른쪽에서 들어옴	kx, ky
24–42	준비됨 (기울임)	tilt (0 → −38°)
42–96	주요 동작 (따르기)	streaming, stream (tip에서 컵으로 가는 SVG 경로)
44–100	결과가 커짐 (컵이 채워짐)	level 0 → 1, surface (차 타원)
96–126	끝나고 나감	tilt 0으로 복귀, kx 슬라이드 아웃
104–150	여운 (김이 올라옴)	steam[0..2] 0 → 1, steamPath(i, p, t0)로 그림

src/story.ts의 P는 컵(kulhadBody, kulhadOutline, rim)과 주전자(kettleBody, kettleLid, kettleSpout, kettleHandle, kettleBand, 그리고 KNOB)의 SVG 경로를 보유합니다. 주전자는 자체 원점을 기준으로 그려지고 translate(kx, ky) rotate(tilt)로 배치됩니다.

먼저 사용자의 스토리를 동일한 6개 비트에 매핑하고, 짧은 표로 만들어 보여주세요. 예시:

사용자 아이디어	행위자 (주전자)	동작 (따르기)	결과 (채움)	여운 (증기)
머그에 커피	커피 포트	커피 흐름	머그 채워짐	증기
식물에 물 주기	물뿌리개	물방울	흙이 어두워지고, level에 따라 새싹이 자람	두 잎이 벌어짐
돈 저금	동전을 든 손	동전 떨어짐	돼지 저금통 채워짐 (level → 동전 더미)	반짝임
통에 페인트	페인트 캔	두꺼운 페인트	통 채워짐	방울이 가라앉음
데이터 업로드 (추상 또는 정보 스타일)	구름	패킷이 stream을 따라 이동	막대 또는 게이지가 level로 채워짐	체크 표시가 올라감

그런 다음 구축하세요:

1. 설치된 스킬을 깨끗하게 유지하기 위해 별도 프로젝트에서 작업하세요: 기본적으로 사용자의 현재 폴더에 있는 animation-films/ (위의 "일반적인 요청" 참조), node <skill>/scripts/new-project.mjs <folder>로 생성한 후 내부에서 npm install 실행. 절대 <skill> 내부에 사용자 영화를 구축하지 마세요.
2. 선택한 스타일의 컴포넌트를 해당 파일(src/catalog.ts 참조)에서 src/films/<film-name>.tsx로 복사하고, 함께 가져오는 도우미도 복사하세요. 39개의 원본 파일을 제자리에서 편집하지 마세요: 그것들은 참조입니다.
3. 타이밍이 아닌 shapes를 교체하세요: 주전자와 컵 경로를 사용자의 객체로 바꾸고(크기와 위치를 비슷하게 유지: 컵은 x 540 중심, rim은 y ≈ 800; 행위자는 정지 시 (796, 324) 주변에 있으며 "주둥이"는 로컬 점 (−251, −62)에 있음), 액체를 다시 색칠하고, 올라가는 것을 변경하세요. 스타일 자체의 재질, 팔레트 로직, 필터, 텍스처 및 모션 특성(수제 매체는 2~3프레임 간격, 디지털은 부드럽게, 필름은 깜박임)을 유지하세요.
4. 스타일이 단어를 표시하는 경우(카탈로그의 text 필드에 나열됨: 51, 52, 64, 70, 71, 84, 85는 단어 표시), 새로운 스토리에 맞게 다시 작성하세요: 짧고, 평이한 영어로, 스토리 자체에 대해서만.
5. src/films/index.ts에 영화를 등록하고 렌더링하세요(섹션 4).

더 길거나 다른 스토리(더 많은 비트, 두 명의 행위자, 카메라 이동): story.ts 옆에 새로운 스토리 파일(예: src/films/my-story.ts)을 작성하고, 자체 storyAt(f)를 사용하여 그리기에 필요한 모든 값을 반환하고, 상단 표에 새 비트를 나열하고, 영화에 durationInFrames를 설정하고, "스토리 파일이 모든 타이밍을 소유하고, 스타일 파일이 모든 외형을 소유한다"는 규칙을 따르세요. 스타일이 수제처럼 보이도록 의도된 경우에만 프레임을 양자화하세요(Math.floor(f / 2) * 2).

코드 규칙: 결정론적만 사용(Math.random(), Date 사용 금지; 프레임 또는 인덱스의 시드 함수 사용), 고유한 필터 및 clipPath ID, 글꼴은 @remotion/google-fonts/<Font>를 통해 loadFont()를 모듈 수준에서만 사용, package.json 이상으로 설치된 것은 없어야 함.

4. 렌더링

필요	명령어
빠른 확인	npm run render -- <film-or-style> (720×900, crf 23)
최종	npm run render -- <film-or-style> --final (2160×2700, crf 16)
src/films의 영화	npm run render -- <film-id> --final (동일한 플래그 사용 가능: --frames, --still 75)
실시간 편집	npm run studio로 브라우저에서 Remotion Studio 열기

3D 느낌 스타일(57, 58, 59, 62, 80)은 소프트웨어 렌더링된 장면을 1080 너비의 1.5배(80은 1.25배) 캔버스에 그리고 2160으로 늘리므로 나머지보다 약간 더 부드럽고 느립니다. 더 선명한 최종 결과를 원하면 src/catalog.ts에서 glView(...)의 두 번째 인수를 높이세요(2 = 네이티브 4K, 약 2배 느림).

5. 전달하기 전에 출력 확인

npm run render -- <id> --frames를 실행하고 모든 프레임을 확인하세요 (PNG를 읽으세요). 그런 다음 수정하고 다시 렌더링하세요. 2~3회 패스를 허용하세요.

• 읽을 수 있는 스토리: 50번 프레임에서 분명히 무언가 따르고 있고, 75번에서 용기가 눈에 띄게 채워지고 있으며, 149번에서 여운이 보입니다.
• 프레임 가장자리에서 잘리는 것 없음: 행위자가 완전히 들어오고 완전히 나갑니다.
• 레이어링: 액체는 용기 안에 유지되고, 흐름은 용기 안으로 들어가고(가까운 테두리 앞이 아님), 증기는 표면에서 시작됩니다.
• 스타일이 한 프레임에서 읽힘: 스타일을 아는 사람이 정지 화면에서 이름을 말할 수 있어야 합니다. 두 스타일이 서로의 색상 변형처럼 보여서는 안 됩니다.
• 대비: 액체와 흐름이 배경에 대해 보이고, 뿌옇지 않습니다.
• 모션 특성: 매체가 수제인 곳에서는 계단식, 디지털인 곳에서는 부드럽게; 의도하지 않은 깜박임 없음.
• 텍스트: 의도한 단어만, 철자가 맞고, 프레임 안에.
• 콘텐츠 규칙(아래) 모두 통과.

마지막으로 프리뷰 MP4를 한 번 끝까지 시청한 다음 최종 렌더링합니다.

6. 콘텐츠 규칙 (항상)

• 실제 브랜드, 로고, 제품, 사람, 채널 이름 또는 TV 네트워크 없음, 화면에 상표명 없음. "브릭 토이"는 일반 장난감 벽돌이며, 명명된 브랜드가 아닙니다.
• 실제 지도, 장소 또는 국경 없음, 깃발, 정치적 상징 또는 슬로건 없음. 풍경이 있다면 인식 가능한 지리가 없는 가상의 것입니다.
• 특정 영화, 쇼, 타이틀 시퀀스, 게임, 캐릭터 또는 알려진 캐릭터의 실루엣이나 스프라이트를 복사하지 마세요. 스타일이나 장르는 괜찮습니다. 특정 기존 작품은 안 됩니다.
• 허구의 사실 없음: 가짜 통계, 가격, 날짜, 인용문 또는 출처 없음. 데이터 스타일은 스토리 자체의 값(예: 채움 수준)만 그리고 그 외에는 아무것도 그리지 않습니다.
• 텍스트는 스타일이 타이포그래픽, 방송 또는 게임 UI인 경우에만, 그리고 스토리 자체에 대한 짧은 영어로.
• 독창성을 유지하세요: 사용자의 스토리, 자신의 그림, 기술로서의 스타일.

파일

경로	설명
src/story.ts	스토리: 크기, 타이밍, 비트, 객체 경로, storyAt(f) 및 steamPath()
src/kit.tsx	공유 도우미: Stage (SVG 스테이지), Paper (종이 결), Rough (흔들리는 변위), region
src/catalog.ts	39개 스타일: 번호, ID, 이름, 패밀리, 모양, 화면 텍스트, 파일, 컴포넌트
src/styles/<family>/	기술별로 그룹화된 그리기 코드
src/films/	사용자 자신의 영화
src/Root.tsx, src/index.ts	모든 스타일과 영화를 Remotion 컴포지션으로 등록
scripts/render.mjs	npm run list / npm run render
scripts/new-project.mjs	npm run new -- <folder> 코드를 새 프로젝트로 복사
media/videos/, media/thumbs/	각 스타일의 720×900 MP4 및 애니메이션 WebP