HyperFrames 영상 제작자

장면 구성안을 정리해 드리겠습니다. 총 러닝타임 약 55초, 7장면으로 설계했습니다.

---

🎬 DAIOps 소개 영상 — 장면 구성안

스펙 요약

---

Scene 1 — 문제 제기 0:00 – 0:08 (8초)

자막 문구

"팀은 바쁘고, → 잠깐 멈춤 → 사람은 부족하다."

화면 요소

• 완전한 암전 → 흰 텍스트가 한 줄씩 타이핑 인 효과로 등장
• "바쁘고" · "부족하다" 두 단어만 #fc4000으로 강조
• 문장 완성 후 1초 홀드, 부드럽게 페이드 아웃

의도 : 팀장이 공감하는 페인포인트로 시작

---

Scene 2 — 기존 AI 도구의 한계 0:08 – 0:15 (7초)

자막 문구

"AI 툴, 써봤지만 — 결국 세팅·관리는 사람 몫이었다."

화면 요소

• 3–4개의 AI 서비스 아이콘(추상 원형 아이콘, 실 로고 X)이 격자로 등장
• 각 아이콘 위로 "설정 필요" "연동 필요" "관리 필요" 레이블이 차례로 붙음
• 전체가 서서히 흐려지며(opacity ↓) 퇴장
• 배경 어두운 상태 유지

의도 : 대안이 있다는 기대감 형성

---

Scene 3 — 핵심 메시지 A 0:15 – 0:22 (7초)

자막 문구

"AI 직원을 채용하세요."

화면 요소

• 화면 중앙에 직원 프로필 카드 UI 슬라이드 인
  • 카드: 어두운 테두리(#fc4000 1px), 아이콘(원형 아바타), 이름 "마케팅 AI 직원", 역할 배지
• 카드가 자리 잡는 동시에 자막 등장
• "채용" 단어에만 #fc4000 색상

의도 : 'AI = 사람처럼 채용 가능'이라는 개념 각인

---

Scene 4 — 역할 부여 / 온보딩 0:22 – 0:30 (8초)

자막 문구

"역할과 업무를 알려주면 — 바로 시작합니다."

화면 요소

• 프로필 카드 좌측에 텍스트 입력창 등장
• 입력창에 타이핑 커서가 깜빡이며 순차 입력:
  • "담당: 주간 보고서 작성"
  • "채널: #마케팅팀 슬랙"
  • "주기: 매주 월요일 9시"
• 엔터 후 카드에 "✓ 활성" 배지(#fc4000)가 켜지는 모션

의도 : 설정이 '간단한 대화'임을 시각화

---

Scene 5 — 일하면서 익힘 0:30 – 0:40 (10초)

자막 문구

"시키는 대로 하고 — 하면서 배웁니다."

화면 요소

• 화면을 좌 / 우 2단 분할
  • 좌 : AI 직원이 태스크를 처리하는 로그 스트림 (흰 텍스트 라인이 위로 흘러가는 터미널 스타일)
  • 우 : 지식 아이콘들이 하나씩 쌓이는 애니메이션 (문서 → 메모 → 검색 → 연결 아이콘 순)
• 우측 최상단 아이콘에 #fc4000 글로우 효과
• 자막은 화면 하단 1/5 구간에 고정

의도 : '실행 + 학습'이 동시에 일어남을 시각적으로 병렬 표현

---

Scene 6 — 기능 3행 하이라이트 0:40 – 0:50 (10초)

자막 문구

(각 행이 등장할 때 읽히는 구조, 별도 큰 자막 없음)

화면 요소

• 배경 중앙에 3개 행이 위→아래 순으로 0.5초 간격 슬라이드 인
• 아이콘 색상 #fc4000, 텍스트 흰색
• 각 행 등장 시 짧은 수평 언더라인(#fc4000) 드로우 효과

의도 : 제품 기능을 한 눈에 스캔

---

Scene 7 — 클로징 / 브랜드 각인 0:50 – 0:55 (5초)

자막 문구

"DAIOps" ← 크게 "AI 직원이 일하는 방식" ← 작게

화면 요소

• 완전 암전 후 DAIOps 로고타입이 중앙에 페이드 인
• 로고 아래 슬로건 텍스트 등장
• "AI 직원" 두 글자만 #fc4000
• 마지막 1초간 홀드 → 서서히 페이드 아웃

의도 : 브랜드 이름과 핵심 메시지를 동시에 각인

---

전체 흐름 요약

[문제] 바쁘다·부족하다
  ↓
[한계] 기존 AI 툴은 결국 사람이 관리
  ↓
[솔루션] AI 직원 채용 (프로필 카드)
  ↓
[방법] 역할만 알려주면 시작
  ↓
[차별점] 일하면서 스스로 익힘
  ↓
[기능] 슬랙·자동화·지식 축적
  ↓
[브랜딩] DAIOps — AI 직원이 일하는 방식

---

구성안 확인 후 수정할 장면이 있으면 말씀해 주세요. 확정되면 바로 HyperFrames 렌더 작업으로 들어가겠습니다! 🎬

먼저 hyperframes 스킬을 읽고 작업을 시작하겠습니다.usage 상태는 unknown이지만 진행합니다. hyperframes-core를 읽어 authoring 계약을 확인하겠습니다.충분히 파악했습니다. 프로젝트를 스캐폴드하고 Scene 1 HTML을 작성한 뒤 draft 렌더하겠습니다.좋습니다. Scene 1 HTML을 작성하겠습니다. data-width=1920, data-height=1080을 맨 위에 설정하고 word-by-word 타이핑 인 애니메이션으로 구현합니다.lint 오류 2개 수정합니다. @font-face local 선언 추가 + GSAP 커서 겹침 해소.이제 GSAP 커서 겹침 오류를 수정합니다.오류 0개, 경고 1개(sub-composition 구조 권장사항 — 렌더에 영향 없음). 바로 draft 렌더합니다.렌더 완료! 이제 프레임 한 장을 스냅샷으로 뽑아 해상도와 글자 방향을 확인합니다.스냅샷이 검은 화면으로 나왔습니다. Pretendard 폰트 로드 실패와 스냅샷 타이밍 이슈가 동시에 발생했을 가능성이 있습니다. MP4에서 직접 프레임을 추출해 확인하겠습니다.완벽합니다! MP4를 출력 디렉토리에 복사하고 첨부합니다.렌더 완료입니다! 프레임 확인 결과를 아래에 정리했습니다.

---

렌더 결과 보고

✅ 프레임 검증 (3.5s 지점)

기타 참고사항

• Pretendard 폰트는 local() 선언 후 렌더 엔진에서 로드 실패 → 시스템 sans-serif 폰트(한글 고딕)로 폴백되었으나 가독성과 굵기 모두 무난합니다.
• 나머지 장면을 이어서 렌더할 준비가 되면 말씀해 주세요 🎬