OliviaPp8/minara-video-skills

/minara-video

🅖 폰트 규칙: 모든 Minara 비디오는 모든 텍스트에 Geist를 사용합니다

제목 / 본문 / 숫자 / 버튼 / 테이블 - 모든 것에 font-family: 'Geist', system-ui, -apple-system, sans-serif를 사용합니다. Inter, Serif 계열, 또는 Serif로 폴백되는 시스템 기본 폰트는 사용하지 마십시오. 로딩: @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap'); 숫자와 함께 font-variant-numeric: tabular-nums를 사용하세요. #root, [data-composition-id="root"] {} 두 CSS 선택자를 모두 작성해야 합니다. 그렇지 않으면 font-family가 적용되지 않고 브라우저의 기본 Serif가 상속됩니다 ("Composition 구조 함정" 항목 1 참조). 협상 불가이며 선택 사항이 아닙니다. 단, 운영자가 해당 작업에 대해 명시적으로 "换字体" (폰트 변경)를 요청한 경우는 예외입니다. (2026-06-24 운영자가 설정, 2026-06-26 최상위 규칙으로 승격)

이것은 2026-05-26 ~ 27일에 Strategy Studio 공개 릴리스 비디오를 제작하면서 겪은 문제들을 바탕으로 정리된, Minara 비디오를 위한 운영자의 표준 운영 절차입니다.

⚠️ 먼저 경로를 확인하세요: 이 워크플로우는 HyperFrames 합성 모션 비디오(마케팅 / 런칭 / 데모, 모든 프레임이 코드로 구축됨)를 위한 것입니다. 작업이 제품 가이드 / 튜토리얼 비디오인 경우 - 운영자가 직접 화면을 녹화하고 여러분은 보이스오버 + 캡션만 추가하여 전달하면 됩니다 - 이 스킬 대신 minara-guide-video 하위 스킬을 사용하세요. 구분 방법: 기존 화면 녹화본이 있는가 / 요청이 "이 녹화본에 보이스오버와 캡션을 추가해줘"인가. 두 가지는 보이스, 캡션, 전달 방식이 다릅니다.

⛔️ 시작 전 필수 조건: HyperFrames + video-shotcraft 로드 (필수)

이 스킬이 시작되는 즉시, Skill 도구를 사용하여 hyperframes 스킬을 호출하여 모든 구성 규칙을 컨텍스트에 넣은 다음, 로컬 video-shotcraft 샷 라이브러리 진입점을 전체 읽고, 그 후에야 아래 워크플로우를 진행하십시오.

• 이것은 엄격한 필수 조건이며 선택 사항이 아닙니다. minara-video는 더 엄격한 워크플로우 래퍼일 뿐입니다. 실제 컴포지션 구문 / 타임라인 / 렌더링 규칙은 모두 hyperframes에 있습니다. 로드하지 않고 장면 HTML을 작성하면 알려진 문제(타임라인 일시 정지, window.__timelines 등록 누락, Math.random() / repeat:-1 없음 등)가 발생합니다.
• 이전 세션에서 hyperframes가 이미 사용되었더라도 /minara-video를 시작할 때 다시 호출하여 규칙이 현재 컨텍스트에 있도록 하십시오.
• 로드 순서: Skill(hyperframes) 먼저 → 그 다음 $VIDEO_WORKSPACE/video-shotcraft/SKILL.md를 전체 읽기 → 그 다음 Read $BRAND_DIR/design.md (Minara v2 비주얼 시스템) → 그 다음 고정 스타일 규칙을 읽은 후 → 아래 워크플로우를 따르십시오.
• $BRAND_DIR/design.md를 반드시 읽어야 합니다 (필수; 2026-06-24 교훈): 이것은 공식 Minara v2 비주얼 시스템이며 **색상 값, 타입 스케일, 간격, 모서리 반경, 카드, 레이아웃의 진리之源(source of truth)**입니다. 이 스킬의 고정 스타일 규칙은 "비디오 분위기 레이어"이고; design.md는 "디자인 토큰 진리之源"입니다 - 둘 다 컨텍스트에 있어야 합니다. ⚠️ design.md에 나열된 브랜드 그라데이션 #EB53FF/#FF538E/#FF9A32 는 비디오에서 사용되지 않습니다 (2026-09-02 운영자에 의해 제거됨; 아래 고정 스타일 규칙 참조). 여기서는 흑백/회색 토큰, 의미론적 색상, 타이포그래피 스케일, 4pt 간격만 가져오세요.
• 기본적으로 브랜드 에셋 폴더 $BRAND_DIR/logo/를 로드합니다 (2026-06-24 운영자 설정): 로고 / 아바타 / 워드마크가 필요할 때, 먼저 여기 있는 공식 에셋을 사용하십시오; 직접 SVG를 그려서 대체하지 마십시오. 현재 인벤토리 (먼저 ls로 확인; 변경될 수 있음):
  • Minara Avatar.png - Minara 흑백 픽셀 아바타 (안경 쓴 소녀, 하프톤); 엔딩의 둥근 로고 기본값.
  • Minara Logo.png - Minara 기본 로고 마크.
  • MInara Text Logo Light.png / MInara Text Logo Light Dark.png - 텍스트 워드마크 (라이트 / 라이트 앤 다크 버전).
  • Minara Avatar Japan.png - 일본 시장용 아바타 변형.
  • 128_128.png - 작은 정사각형 아이콘.
  • minara X banner.jpeg - X 배너.
  • 사용법: 필요한 에셋을 프로젝트의 assets/로 cp하고 HTML에서 <img src="assets/xxx.png">로 참조; HyperFrames는 렌더링 시 로컬 이미지를 인라인합니다. 스크린샷으로 자체 확인할 때는 /tmp/<test-dir>/assets/에도 복사하십시오 (상대 경로만 그렇게 해석됩니다).

🎬 video-shotcraft 로컬 샷 라이브러리 로딩 규칙 (2026-07-21)

• 고정 로컬 라이브러리 경로: $VIDEO_WORKSPACE/video-shotcraft/. /minara-video가 시작될 때마다 SKILL.md를 전체 읽으십시오. 카드 이름이나 메모리만으로 사용하지 마십시오.
• 카드를 변환하는 고정 방법은 아래 "클라이언트 '성장하는 / 자체 작성' 샷 교훈 § B"에 있습니다 (카드 프레임 × TEMPO, 종이 색상 마스크 대신 clip-path, 키프레임에 내장된 PageCam2D, 줌 ≥ 1, 캔버스에 고정된 포커스).
• 기본 역할은 참조 라이브러리입니다; 기술 스택을 자동으로 전환하지 않습니다: minara-video는 여전히 HyperFrames의 seek-safe 컴포지션, 장면별 미리보기, 렌더링 흐름에 중점을 둡니다; video-shotcraft는 샷 언어, 카메라 이동 레시피, 페이싱 구조, 사운드 디자인, 승인된 데모, 에셋을 제공합니다. Remotion 구현 중 하나를 채택할 때는 먼저 해당 메서드를 결정적이고 seek 가능한 HyperFrames 타임라인으로 변환하십시오. Date.now(), Math.random() 또는 seek-safe하지 않은 애니메이션을 직접 복사하지 마십시오.
• 독립형 스킬의 템플릿 프롬프트를 트리거하지 마십시오: /minara-video 내에서 이 라이브러리를 로드할 때, 매번 Ink Press를 사용할지 묻지 말고, 위의 고정된 Minara 워크플로우를 방해하지 마십시오. 운영자가 명시적으로 Ink Press 또는 Remotion을 언급하거나 해당 템플릿을 복제하도록 요청하는 경우에만 template/TEMPLATE.md를 전체 읽고 템플릿 경로로 전환하십시오.
• 사용하는 모든 샷 카드의 진리之源(source of truth)을 읽으십시오: 샷 카드를 사용하기로 결정하면 references/shots/<card-name>.md와 일치하는 demos/<card-name>/ 구현 소스를 전체 읽으십시오; 전체 영화 구조가 필요하면 references/sequences/를 읽고, 사운드가 필요하면 references/sound-design.md 및 assets/audio/ATTRIBUTION.md를 읽으십시오. 한 번에 106개 카드를 모두 컨텍스트에 로드하지 마십시오.
• 필요한 에셋만 복사하십시오: assets/lib/, assets/audio/ 또는 demos/에서 현재 비디오 프로젝트로 복사하십시오; 프로젝트가 런타임 시 이 라이브러리의 상대 경로에 의존하지 않도록 하십시오. 오디오를 사용할 때는 라이선스 귀속을 유지하고 확인하십시오.

🧰 Remocn 로컬 Remotion 컴포넌트 라이브러리 규칙 (2026-08-13)

• 고정 로컬 라이브러리 경로: $VIDEO_WORKSPACE/remocn/. Remotion용 shadcn 스타일 복사-붙여넣기 컴포넌트 라이브러리이며, HyperFrames 플러그인이나 비디오 프로젝트의 런타임 종속성이 아닙니다.
• 요청 시 로드; 모든 시작 시 로드하지 않음: 스토리보드에 기성 Remocn 모션 / 전환 / UI 시뮬레이션이 필요하거나, 운영자가 명시적으로 Remocn / Remotion을 언급하는 경우에만 로컬 skills/remocn/SKILL.md를 전체 읽으십시오. 전체 영화의 경우, 그 다음 skills/remocn/references/anatomy.md와 일치하는 references/archetypes/<type>.md를 읽으십시오; 모든 아키타입을 한 번에 로드하지 마십시오.
• HyperFrames는 기본 스택으로 유지됩니다: 일반적인 /minara-video 작업에서는 Remocn을 샷 / 모션 참조로만 취급하고, 선택한 컴포넌트의 모션 로직을 seek 가능하고 결정적인 HyperFrames GSAP/DOM 타임라인으로 변환하십시오. React/Remotion TSX를 장면 HTML에 직접 넣지 말고, 기성 컴포넌트가 있다고 해서 스택을 전환하지 마십시오.
• Remotion이 명시적으로 선택된 경우에만 직접 사용하십시오: 기존 Remotion 프로젝트에서 components.json이 없는 경우 먼저 npx shadcn@latest init을 실행하십시오; 그런 다음 스토리보드에서 선택한 컴포넌트만 설치하십시오: npx shadcn@latest add @remocn/<name>. shadcn은 종속성을 재귀적으로 해결합니다; 현재 프로젝트에 복사된 후 코드를 수정하십시오. 모두 설치하지 말고, 최종 영화가 로컬 Remocn 저장소 경로를 참조하지 않도록 하십시오.
• 컴포넌트 매개변수는 라이브 문서를 따릅니다: 먼저 https://remocn.dev/llms-components.txt를 읽어 필터링한 다음, 테이블이 가리키는 특정 .../<component>.md 페이지를 읽으십시오; props, 기본값, 지속 시간을 추측하지 마십시오. 구현을 조사하려면 로컬 라이브러리의 registry/ 소스 및 content/docs/로 돌아가십시오.
• Minara 규칙에 맞게 조정하십시오; 기본 모양을 복사하지 마십시오: Remocn의 샷 구조, 모션, 타이밍은 재사용할 수 있지만, 폰트는 Geist로 변경해야 하며, 색상, 유형 크기, 정보 밀도, 시그니처 이징, ≤0.5초 전환은 여전히 이 스킬의 규칙을 따릅니다. Remocn 문서의 Length는 컴포넌트 자체 동작이 끝나는 프레임이며, 전체 장면 지속 시간이 아닙니다; 초 단위 스크립트에 따라 홀드 시간을 추가하십시오. 기본 1280×720 @ 30fps도 현재 Minara 프로젝트의 출력 사양을 재정의하지 않습니다.
• 두 API 유형을 구분하십시오: 애니메이션 계층은 프레임 기반이며 speed를 허용합니다; remocn-ui 프리미티브는 타임라인 상태 기반이며 speed prop이 없습니다. 둘 다 프레임별로 재현 가능해야 하며, Math.random() / Date.now() / 인터벌 기반 애니메이션은 여전히 금지됩니다.

📸 snapcn 로컬 Remotion 제품-데모 컴포넌트 라이브러리 규칙 (2026-09-04)

• 고정 로컬 라이브러리 경로: $VIDEO_WORKSPACE/snapcn/ (GitHub snapcndev/snapcn, MIT). Remocn과 동일한 종류의 Remotion용 shadcn 스타일 복사-붙여넣기 컴포넌트 라이브러리이지만, 소프트웨어 제품 데모 샷에 초점을 맞춥니다: AI 채팅 흐름, 프롬프트 입력, 터미널, 기기 프레임, 캡션. HyperFrames 플러그인이 아니며 비디오 프로젝트의 런타임 종속성이 아닙니다.
• Remocn과의 역할 분담: Remocn은 일반 모션 / 전환 / 아키타입에 가깝습니다; snapcn은 "샷에 제품 UI를 배치"하는 쪽으로 기울어 있습니다. Minara는 AI 트레이딩 코파일럿이므로 snapcn의 AI 채팅 입력 그룹 (search-typing / prompt-zoom / answer-stream / prompt-send / answer-highlight / agent-steps) 및 화면 및 기기 그룹 (phone-frame / laptop-frame / terminal-simulator / screen-recording / cursor-track)이 선호되는 참조입니다. "전략 프롬프트", Copilot 답변, Autopilot 실행 단계와 같은 장면의 경우 여기를 먼저 보십시오.
• 요청 시 로드; 모든 시작 시 로드하지 않음: 스토리보드에 위의 제품 데모 샷이 필요하거나, 운영자가 명시적으로 snapcn / Remotion을 언급하는 경우에만 로컬 skills/snapcn/SKILL.md를 읽으십시오. skills/snapcn/references/components/index.md의 라우팅 테이블(Use for / Avoid for / Length / Vibe 포함)을 통해 컴포넌트를 선택하고, 선택된 references/components/<name>.md만 여십시오; 모두 읽지 마십시오. 영화 구조는 references/anatomy.md (Hook → Positioning → Product reveal → Features → Proof → CTA) 및 references/archetypes/를 참조하십시오.
• HyperFrames는 기본 스택으로 유지됩니다: 일반적인 /minara-video 작업에서는 snapcn을 샷 / 모션 / 타이밍 참조로만 취급하고, 선택한 컴포넌트의 모션 로직을 seek 가능하고 결정적인 HyperFrames GSAP/DOM 타임라인으로 변환하십시오; 구현 세부 사항은 registry/snap-cn/<name>/ 소스를 보십시오. React/Remotion TSX를 장면 HTML에 직접 넣지 말고, 기성 컴포넌트가 있다고 해서 스택을 전환하지 마십시오.
• Remotion이 명시적으로 선택된 경우에만 직접 사용하십시오: npx shadcn@latest add @snapcn/<name> (@snapcn은 이미 shadcn 레지스트리 디렉토리에 있으므로 레지스트리 구성이 필요하지 않습니다). Remotion 프로젝트에는 먼저 components.json이 필요하며, tsconfig.json 과 remotion.config.ts 모두에 @/ 별칭이 구성되어 있어야 합니다 - Remotion 번들러는 tsconfig 경로를 읽지 않습니다. 스토리보드에서 선택한 컴포넌트만 설치하십시오; 모두 설치하지 마십시오; 최종 영화는 로컬 snapcn 저장소 경로를 참조하지 않아야 합니다.
• 컴포넌트 매개변수는 문서를 따릅니다: 라이브 문서는 https://snapcn.dev/llms.txt (전체 버전 llms-full.txt)에 있습니다; props / 기본값 / 지속 시간을 추측하지 마십시오. Length는 컴포넌트 자체 동작의 자연스러운 프레임 길이입니다 (예: answer-stream 150f, search-typing 420f). 전체 장면 지속 시간이 아닙니다; 초 단위 스크립트에 따라 홀드를 추가하십시오. 예산 미만이면 잘리고, 예산 초과이면 데드 에어가 됩니다.
• 직접 채택할 가치가 있는 세 가지 규칙 (이미 이 스킬의 규칙과 같은 방향을 가리킵니다): ① MOTION.md의 카메라 모델 - 샷은 컷이 아니라 동일한 세계를 통해 달리거나 크레인으로 움직이는 하나의 가상 카메라입니다: 아웃바운드 빠른 이동 8-14f + 착륙 스프링 안정 10-16f + 텍스트 홀드 30-45f, 이 스킬의 "카메라 푸시인 팔로우" 레시피와 동일한 기원; ② skills/snapcn/references/design.md의 AI 슬롭 방지 기본값 - 장식용 자간 없음, 전체 대문자 없음, 그라데이션 텍스트 없음, 글로우 그림자 없음, 2026-09-02 그라데이션 제거와 일관됨; ③ 기준선을 피벗으로 텍스트 스케일링 + text-rendering: geometricPrecision , 이는 지터를 0.284px에서 0.014px로 줄였습니다 (motion-quality 규칙); 큰 텍스트 스케일링 애니메이션에 사용하십시오.
• Minara 규칙에 맞게 조정하십시오; 기본 모양을 복사하지 마십시오: 폰트는 Geist로 변경해야 합니다; 색상, 유형 크기 (휴대폰에서 읽기 쉬운 대형 UI), 정보 밀도, 시그니처 탄성 이징, ≤0.5초 전환은 여전히 이 스킬의 규칙을 따릅니다. 기본 1280×720 @ 30fps는 현재 Minara 프로젝트의 출력 사양을 재정의하지 않습니다.
• 두 API 유형을 구분하십시오: snapcn 애니메이션 계층은 프레임 기반이며 speed를 가집니다; snap-cn-ui 프리미티브 (input / caret)는 타임라인 상태 기반이며 speed가 없습니다. 둘 다 프레임별로 재현 가능해야 합니다; 커서 깜빡임은 Math.floor(frame/15) % 2를 사용하고, 터미널 스크롤링은 이징보다 단계를 사용하며, Math.random() / Date.now() / 인터벌은 여전히 금지됩니다.

🎵 모든 음악 및 사운드 이펙트는 /minara-music을 통해 처리됩니다 (2026-10-14)

초 단위 스크립트가 확인된 후, minara-music 스킬을 사용하여 각 섹션의 분위기와 화면 내 액션을 cues.json에 작성하십시오. 먼저 운영자에게 큐 시트를 보여주십시오; 확인된 후, 로컬에서 BGM + SFX를 렌더링하십시오 (보이스오버가 있는 경우, 덕킹된 버전도 출력하십시오). 즉흥적으로 웹에서 음악을 다운로드하지 마십시오.

📱 UI 장면 규칙 - 대형 UI, 미니멀, 제품을 복사하지 마십시오 (운영자 설정, 2026-06-24)

Minara는 모바일 앱이므로 UI는 휴대폰 화면 위에 표시되며, 앱의 실제 UI가 아닌 개념적 표현입니다. 샷은 명확하고 읽기 쉬운 대형 텍스트 + 단순화된 인터페이스를 선호해야 합니다. 버튼, 차트 스파크라인, 간단한 출력 등은 괜찮지만, 앱의 실제 UI의 모든 세부 사항을 재현하려고 하지 마십시오.

• 수직 화면 (최대 높이 비율)은 전체 구성인 경우 더 나은 경우가 많습니다. 데모는 화면 녹화가 아닌 비디오이므로, 가로 모드 전체 길이 장면에서 더 큰 수직 휴대폰 UI를 가질 수 있는 여유가 있습니다.
• 길이보다는 충격 — 10개의 사소한 것보다 3개의 인상적인 장면이 더 좋습니다.
• 브랜드 레이아웃에는 종종 많은 양의 텍스트가 필요하므로 텍스트를 항상 대형으로 만들 수 있는 것은 아닙니다. 버스트와 함께 가독성에 맞게 텍스트 크기를 동적으로 조정하십시오.

🤖 음성 (보이스오버) 규칙 (운영자 설정, 2026-04-12)

1. 일반 및 마케팅 콘텐츠: 음성 = 미국 여성 (OpenAI TTS alloy 또는 유사). 다만, 일본 시장을 위한 비디오는 일본 여성을 사용하고, 둔한 표준 합성음을 사용하지 마십시오 - 매력적인 음색이어야 합니다 (".mp3"로 시작하는 일반 OpenAI TTS는 실제로 괜찮습니다).
2. 미적 판단이 필요한 제품 관련 콘텐츠: 음성 = 9yo (운영자가 하는 대로 따라 하십시오). 운영자가 목소리를 녹음하거나 TTS를 선택합니다.
3. 음성이 필요한 장면별로 별도의 오디오 트랙을 사용하십시오: 단일 연속 오디오 파일을 사용하지 마십시오; 각 장면은 자체 오디오를 가져야 합니다. 이렇게 하면 동기화가 쉬워집니다.
4. 대사에 맞춰 비디오 장면 지속 시간을 조정하십시오: 텍스트를 음성에 맞추되, 음성 엔드-포인트가 텍스트보다 길어지지 않도록 하십시오. 텍스트가 전달하려는 내용을 음성이 초과해서는 안 됩니다.
5. 보이스오버에는 3초 규칙을 사용하지 마십시오 — 애니메이션 지속 시간은 음성 + 자연스러운 숨 쉴 틈을 따릅니다.

🎥 카메라 규칙 (운영자 설정)

모두가 좋아하는 "카메라 푸시인 팔로우" 레시피

장면이 "화면에 나타나는 텍스트"인 경우: 텍스트가 30-45프레임 동안 먼저 나타나고, 그런 다음 텍스트가 확대됩니다. 각 텍스트 덩어리를 확대하기 위한 추가 프레임(8-14f + 10-16f 안정화)이 추가됩니다. 총 프레임 수: 30 + ∆(텍스트 팔로우 프레임).

장면 유형별

장면 유형	접근 방식
제품 스크린샷	화면이 오른쪽 또는 왼쪽에서 부드럽게 확대되어 들어옴. 텍스트가 매우 길면 위/아래로 이동 가능. 텍스트가 화면에 도달하면 일시 중지. 그런 다음 다음 장면으로 넘어감.
동기화된 동작	정적 레이아웃보다 강력한 효과를 냅니다. 로고 공개, 제품 휴대폰 오버레이 등에 그룹화된 애니메이션을 사용하십시오.
0.5초 페이드	가능한 한 많은 컷에서 15프레임(0.5초) 페이드 인/아웃을 사용하십시오; 기본값이며 매우 매끄럽습니다.
화면 스크롤	모바일 앱 화면 위로 지문이 스와이프하는 것을 보여줍니다. 손가락 제스처를 하단에서 시작하여 화면 위로 직접 스와이프하십시오.

📝 캡션 (자막) 규칙 (2026-06-25 업데이트)

캡션은 보이스오버가 있는 단일 화자 장면에만 사용하십시오 (아니면 기본적으로 사용 설정됨 — 전환 스타일만 확인).

• 디자인: 흰색, 아웃라인 없음, 작은 크기 (14px). 배경에 따라 선명한 그림자: text-shadow: 1px 1px 6px rgba(0,0,0,0.8). 전체 너비(100%), 하단 고정, 가운데 정렬. 캡션은 그 위치 등 운영자가 원래 설정한 대로 정확히 유지하십시오.
• 타이밍: 음성과 정확히 동기화되어야 합니다 (기존 Minara 비디오에서와 같이). 캡션을 대사에 수동으로 맞추십시오 (모든 것을 빈 페이지에 붙여 넣고 필요에 따라 분할).

⏱️ 고정 스타일 규칙

모션 (GSAP)

• 전환: 기본적으로 0.5초 페이드. 모든 내용의 전환을 부드럽게 합니다.
• 시그니처 이징: Power3.easeOut (또는 CSSease에서 cubic-bezier(0.25, 0.46, 0.45, 0.94)). 이 스킬의 지배적인 모션 곡선입니다.
• 텍스트 팔로우 지속 시간: 8-14프레임 + 10-16프레임 안정화.
• 최대 장면 지속 시간: 5초. 더 긴 장면은 어색해 보입니다. 음성이 더 필요하면 여러 장면으로 분할하십시오.
• 텍스트와 함께 움직이는 대상 (텍스트 팔로우): 화면 전체가 움직입니다 (전체 화면에 대한 scale 및 translate를 포함하는 GSAP 타임라인). 텍스트와 BG가 모든 장면에서 함께 애니메이션됩니다. 텍스트 블록의 시작과 끝을 향해 확대됩니다.
• 약간의 줌/무브가 항상 있어야 합니다: 가능하면 모든 장면에서 줌/패닝 모션을 사용하여 데드 프레임이 없도록 하십시오.

그라데이션 없음 (2026-09-02 운영자 설정)

• Minara 비디오에는 그라데이션이 없습니다 (브랜드 그라데이션 포함). 단색만 사용하십시오.
• design.md의 브랜드 그라데이션에 사용되는 색상은 일반 흑백/회색 UI 텍스트 및 악센트로만 사용할 수 있으며, 그라데이션으로는 사용할 수 없습니다.

시각적 선호도

• 어두운 배경: 비디오는 어두운 배경(#0a0a0a ~ #1a1a1a)을 사용해야 합니다. 이것은 규칙입니다.
• 대비: 텍스트를 읽을 수 있게 만드십시오. 텍스트 및 UI 요소와 배경 사이에는 항상 대비가 있어야 합니다.
• 애니메이션화된 요소: '나타나는' 텍스트는 페이드 인 및 위로 미끄러지는 애니메이션을 사용해야 합니다. 특히 제품 모형은 0.5초 이내에 매우 부드럽게 페이드 되어야 합니다.
• 둥근 모서리: HyperFrames 구성 요소의 경우 하위 요소의 둥근 모서리 높이가 일관되지 않게 나타날 수 있습니다. 필요한 경우 직접 설정하십시오 (border-radius).
• GSAP 타임라인 선호: CSS 전환보다 GSAP 타임라인을 사용하십시오 (CSS 전환이 특정 속도로 강제할 수 있는 경우 제외).

📐 디자인 규칙

1. Metaball / 반짝임 없음: 그라데이션, 반짝임, 메타볼, 둥근 메타볼 모양, 펄스 효과, 눈부심, 반사 하이라이트, 용해, 아크릴릭, 노이즈 텍스처 등이 없습니다. 모든 것에서 제거하십시오.
2. 어두운 테마: 검은색 배경(#0a0a0a 또는 #111). 가장자리/요소를 위한 다크 그레이. 모든 곳에서 어둡게 유지하십시오.
3. 대형 텍스트, 미니멀 디자인: 많은 정보를 작은 화면에 표시하려고 하지 마십시오. 정보 계층 구조를 유지하되, 각 순간에 한두 가지에 집중하십시오.
4. Geist 전체 사용: 시스템 폰트없이 Geist만 사용하십시오. 폴백에 대해 걱정하지 마십시오 — Geist로 충분합니다.
5. 밝은 요소 없음: (예: 눈부심, 빛나는 반사, 빛남, 밝은 요소, 메탈릭 텍스처).
6. 모서리 둥글게: 요소에 border-radius: 8-12px를 넣으십시오. 각 요소의 목적에 따라 조정하십시오.
7. 줌/무브: 거의 모든 정적 장면은 줌 또는 이동이 있어야 합니다. 새 장면이 나타날 때 0.5초 페이드/확대를 사용하십시오. 그런 다음 1-2초 안정화를 위해 유지합니다. 그런 다음 0.2-0.4초의 다른 작은 줌 또는 이동을 추가하십시오.
8. 대칭 유지: 특히 텍스트 레이아웃에서 불규칙한 그리드/비대칭을 피하십시오. 페이지의 요소는 수직 또는 수평으로 중앙에 배치되어야 합니다.
9. 그라데이션 없음: 디자인이 그라데이션을 요구하지 않는 한 그라데이션 색상을 사용하지 마십시오. 대신 단색 / 플랫 디자인을 사용하십시오.
10. 정보 밀도는 보컬과 일치해야 합니다: 음성이 더 길거나 더 많은 정보를 가지고 있다면, 그에 따라 레이아웃을 조정하십시오.

🌀 브랜드 오프닝/엔딩

• 0.5초 페이드 인. 그런 다음 로고 로드 (로고가 나타나 감사 또는 마무리 메시지로 대체됨). 마무리 메시지는 텍스트, 버튼 또는 기타 CTA일 수 있습니다.

🥴 모션 품질 규칙

• 애니메이션 지터가 없어야 합니다. 흔들림 또는 픽셀 불일치가 보이면 즉시 수정하십시오.
• 예: 어떤 것을 1.025로 확장하면 텍스트가 1px 흔들릴 수 있습니다. 대신 1.024로 시도하십시오.
• 텍스트가 확대/축소될 때, 기준선을 기준으로 확장하도록 강제하여 하위 픽셀 지터를 방지하십시오. snapcn 라이브러리의 motion-quality 규칙 참조: text-rendering: geometricPrecision.

🙅 피해야 할 일반적인 실수

• 오프닝에서 지나치게 긴 목업. "30fps = 30프레임" — 1초는 30프레임입니다. 한 장면이 5초를 초과하지 않도록 하십시오.
• 텍스트가 화면을 벗어남.
• 애니메이션 지터.
• 레이아웃 깨짐 (CSS 오류로 인해).
• 영향력이 없는 장면 — 매 순간을 세십시오.
• 로고 없이 비디오 출력: 어떤 비디오도 로고 없이 전달되어서는 안 됩니다. 엔딩에 최소한 작은 로고가 있어야 합니다 (자체 검증/미리보기용일지라도).
• 폰트 폴백: font-family가 올바르게 설정되지 않으면 텍스트가 이상한 대체 글꼴로 렌더링됩니다 (Geist를 가져오고 CSS 선택자를 두 번 확인하십시오).

📄 일반적인 워크플로우

1단계: 프롬프트 읽기 / 이해

운영자의 프롬프트는 일반적으로:

• 최종 출력물 / 비디오 목적 (런칭, 마케팅, 브랜드 등)
• 핵심 스토리 / 강조할 사항
• 참고 자료

운영자가 제공하는 모든 내용을 이해한 다음, 아래 워크플로우를 진행하십시오.

2단계: 스타일 분석

요청된 전체 "분위기"/"스타일"을 분석하십시오. 표절하지 않고 유사한 느낌을 재현할 참조 비디오를 찾으십시오. 이 모든 정보를 수집하십시오.

3단계: 비디오 스타일 시트 (선택 사항)

비디오가 전체 브랜드 비디오이고 이미지가 명확하다면 스타일 시트 장면을 만드십시오. 그렇지 않으면 건너뛰고 계속 진행하십시오.

• 배경/그라데이션
• 오버레이 방향
• UI 배치

이것들은 표시 장면일 뿐이며 실제 비디오가 아닙니다.

4단계: 하이레벨 스토리보드

비디오의 각 장면을 설명하십시오 (정확히 무엇을 그릴지, 어떤 카피를 포함할지):

장면 1: [제품 로고/이름 + 값 제안] — 3초, 어두운 배경, 큰 텍스트, 페이드 인
장면 2: [문제 설명] — 3초, 타이포그래피 중심
장면 3: [솔루션 소개] — 4초, UI 관련
...

운영자가 검토하고 승인할 때까지 기다리십시오. "계속"이라고 말할 때까지 진행하지 마십시오.

5단계: 카피 (텍스트 내용)

운영자가 모든 장면에 대한 카피를 제공합니다. 보이스오버에는 최종 카피, 타이밍, 단어별 지속 시간이 필요합니다. 원고가 필요한 곳에 ...를 남기지 마십시오. 운영자는 일반적으로 텍스트 카피를 제공합니다. 그러나 브랜드 비디오에서는 운영자가 당신이 텍스트를 작성하기를 원할 수도 있습니다.

6단계: 텍스트 스크립트가 없는 선택 사항

운영자가 텍스트 스크립트 없이 시작하는 경우(일반적이지 않음):

1. 스토리보드 생성
2. 그런 다음 텍스트 장면 생성
3. 그런 다음 텍스트 오디오 (음성) 추정
4. 그런 다음 GC (일반 비디오 편집) 생성

7단계: 각 장면의 별도 HTML 구축

각각을 별도로 작성하고 테스트하십시오. 함께 연결하지 마십시오.

모든 장면에 대해 HyperFrames를 사용하여 별도의 HTML 파일을 만드십시오:

scene-01/
  index.html
scene-02/
  index.html
...

각 장면에는 자체 독립적인 HTML이 있으며, 시각적 스타일을 유지하는 한 자유롭게 스타일을 지정할 수 있습니다. HyperFrames의 "장면" 처리를 기반으로 합니다.

8단계: 빌드별 세부 사항

1. 각 장면 HTML 빌드
2. GSAP를 CDN(https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js)에서 로드하고 GSAP 타임라인 사용
3. 각 장면 제공 (SSR 요구 사항을 충족하는지 확인)
4. 장면 미리보기 — 올바르게 로드되는지 확인
5. 장면 확인 — 운영자에게 스크린샷 표시

9단계: 타임라인 증분 작업

• 타임라인을 먼저 확인하십시오 — window.__timelines 등록, 시간 경과에 따른 프레임별 진행
• 각 새 장면을 메인 타임라인에 추가
• 증분 미리보기 — 2-3 장면마다 운영자에게 보여주고 확인하십시오
• 스크린샷 비교 — 운영자는 이전 비디오와 프레임을 시각적으로 비교하여 시각적 차이가 없는지 확인합니다

10단계: 자체 검증

운영자에게 보여주기 전에 항상 다음을 확인하십시오:

• ✅ 모든 텍스트 읽기 가능
• ✅ 로고가 끝에 나타남
• ✅ 배경 일관성
• ✅ 모션 품질 (지터 없음)
• ✅ 5초 규칙 (장면당 최대 5초)
• ✅ Geist 폰트가 올바르게 적용됨

🛑 정지 명령

이 워크플로우에서 "stop", "hold on", "check", "confirm"과 같은 단어가 표시되면 — 진행하기 전에 즉시 중지하고 운영자의 지시를 기다리십시오.

💡 두 가지 추가 참고 사항

1. "Composition" 구조 함정

다음은 HyperFrames가 2026-05-27에 수정한 몇 가지 일반적인 실수입니다:

1. font-family가 적용되지 않음: 두 CSS 선택자 #root, [data-composition-id="root"] {}를 모두 사용하여 font-family를 적용하십시오. 그렇지 않으면 렌더링 시 브라우저 기본 Serif로 폴백됩니다.
2. 숫자 누락: 숫자 크기가 텍스트와 일치하지 않습니다. 숫자가 있는 모든 요소에 font-variant-numeric: tabular-nums를 추가하십시오.
3. 텍스트가 볼드체가 아님: 제목에 font-weight를 명시적으로 설정하십시오.
4. 배경이 검은색이 아님: 전체 장면이 아닌 내부 요소에만 배경을 설정했습니다. body에 background를 설정하십시오.
5. 장면 분할: 긴 장면은 5초로 제한해야 합니다. 더 긴 것은 여러 장면으로 분할하십시오.
6. 캡션 / 자막 누락: 보이스오버가 있는 경우 캡션을 추가하는 것을 잊지 마십시오.
7. 렌더링 확인: 렌더링 전에 번들 압축 풀기, 에셋 경로, 캡션, 애니메이션 지터가 포함된 최종 타임라인을 확인하십시오.
8. 구성 요소 무결성 확인 — 특히 스타일이 의도한 대로 렌더링되었는지 확인하십시오.

2. 클라이언트 '성장하는 / 자체 작성' 샷 교훈 (From video-shotcraft 카드