6space7/autozoom-demo-scenes

AutoZoom 데모 비디오

당신은 사용자의 프로젝트 내부에 있습니다. 기능의 실제 코드를 읽고, 그 화면을 Remotion 프로젝트의 React 컴포넌트로 재구축한 다음, AutoZoom이 화면 녹화를 촬영하는 방식처럼 각 동작에 카메라가 자동으로 줌인되어 촬영합니다. 코드로 빌드된 화면은 스크린샷보다 뛰어납니다. 텍스트가 실제 입력 필드에 타이핑되고, 행이 슬라이드 인되며, 버튼이 상태를 변경하고, 모든 요소가 어떤 줌에서도 선명하게 유지됩니다.

이 스킬의 파일:

• scripts/setup.mjs: Remotion 프로젝트를 생성하고 설치합니다 (Remotion + React).
• assets/remotion-template/: 복사되는 템플릿입니다. 자동 줌 카메라, 창, 커서, 스포트라이트, 오버레이 및 예제 화면과 스토리가 포함되어 있습니다. 데모마다 src/story.tsx와 src/screens/*만 변경됩니다.
• references/story-api.md: 모든 스토리 필드, 화면 훅 및 위치 측정 방법을 문서화합니다. 스토리를 작성하기 전에 읽으십시오.
• references/style.md: AutoZoom의 외관(프레임, 모션, 오버레이)을 정의합니다.

작업 흐름

1. 스토리 확정

한 문장으로 시청자가 배워야 할 한 가지를 합의하세요 (예: "모든 지표를 검색하고, 한 번의 클릭으로 공유하세요"). 6~15초로 유지하고 2~4개의 동작(비트) 으로 구성하세요. 비디오당 하나의 아이디어: 두 가지 기능이 있다면 두 개의 비디오를 만드세요. 보여줄 기능이 명확하지 않은 경우에만 질문하고, 그렇지 않으면 가장 인상적인 흐름을 선택하세요.

2. 프로젝트 읽기

데모가 보여줄 대상을 찾으세요:

• 라우트, 페이지 또는 컴포넌트 및 그 자식 컴포넌트
• 디자인 토큰: Tailwind 설정, CSS 변수, 테마 파일
• 폰트, 아이콘 라이브러리, 로고
• 현실적인 샘플 데이터: fixture, 시드, Storybook 스토리, 목(mock), 테스트

절대 다른 디자인을 만들어내지 마세요. 데모는 그들의 제품처럼 보여야 합니다.

3. Remotion 설정

node <skill-dir>/scripts/setup.mjs demo     # ./demo 디렉토리를 생성하고 설치합니다

다시 실행해도 안전합니다. demo/를 프로젝트 워크스페이스에 추가하거나 독립적으로 유지하세요.

4. 화면 빌드 (demo/src/screens/<Name>.tsx)

스토리 뷰포트(기본값 1440×900, 브라우저 창 크기)에 맞게 그립니다. 프로젝트에 적합한 방식을 선택하세요:

• A. 실제 컴포넌트 임포트 (React 프로젝트). 가장 충실도가 높습니다. 컴포넌트가 표현적인 경우에 적합합니다. 정적 props와 데이터를 제공하고, 필요한 모든 provider(테마, 라우터, 쿼리 클라이언트, i18n)를 stub 값으로 감싸주세요. 절대 네트워크에서 가져오거나 인증을 읽지 못하게 하세요. 별칭(alias)이 해석되고 스타일이 로드되도록 하세요. 자세한 내용은 references/story-api.md › "프로젝트 자체 컴포넌트 사용"을 참조하세요.
• B. 다시 구축 (모든 스택: Svelte, Vue, Angular, 네이티브, 또는 무거운 런타임 의존성이 있는 React). 페이지를 동일한 구조, 클래스 이름 또는 값, 색상, 반경, 간격, 폰트, 아이콘 및 복사본으로 React에 포팅하고, 소스에서 직접 읽어오세요. 화면에 보이는 것만 포함하세요.

어느 방식이든:

• 프로젝트의 실제 데이터(이름, 숫자, 상태)를 사용하고, 절대 lorem ipsum을 사용하지 마세요.
• 스토리가 대상으로 하는 요소에 알려진 위치를 지정하세요. 박스를 명시하거나 디버그 그리드(6단계)로 측정할 수 있도록 배치하세요.
• 화면이 자체적으로 애니메이션되도록 src/lib/hooks.ts의 훅들(useTyped, useAfter, useProgress, usePop, useCount)을 사용하세요. 프레임 번호를 스토리에서 props로 전달하여 타임라인이 한 곳에 있게 하세요. src/screens/MockDashboard.tsx가 작업 예제입니다.

5. 스토리 작성 (demo/src/story.tsx)

타임라인을 주석으로 시작하세요 (fps 60 기준):

0–60     개요; 커서가 검색창으로 이동, 클릭 (58)
60–130   카메라가 검색창으로 줌인
140–260  쿼리가 스스로 타이핑됨; 자막 1
268      ↵; 결과 업데이트
280–345  카메라가 결과로 축소
...      카메라 + 커서 이동 → 클릭 → 결과 → 토스트; 자막 2
520–600  카메라가 부드럽게 축소됨

그런 다음 camera, cursor, clicks, keys, captions, toasts, spotlights를 모두 화면 픽셀 단위로 채우세요. rec는 비활성화하세요: 줌인했을 때 모서리의 오버레이는 앱 위에 표시됩니다. 필드 참조는 references/story-api.md에 있습니다.

6. 스틸(정지 프레임) 확인 후 렌더링

cd demo
npx remotion still Demo out/f.png --frame=150    # 주요 프레임 확인 (PNG 읽기)
npm run studio                                   # 사용자에게 실시간 미리보기 제공
npm run render                                   # → out/demo.mp4

스토리에서 debug: true로 설정하여 화면 위에 라벨이 있는 100px 그리드를 표시하고, 스틸 이미지에서 위치를 읽을 수 있게 하세요. 렌더링 전에 끄세요. 각 동작(비트)에서 스틸을 확인하세요: 줌인되었을 때 주제가 화면에 완전히 보이고, 커서 끝이 대상 위에 있으며, 텍스트를 읽을 수 있고, 오버레이가 동작을 가리지 않아야 합니다.

7. 전달

사용자에게 MP4 경로를 제공하고 한두 프레임을 보여주세요. 선택적으로 @remotion/player를 사용하여 라이브 컴포지션을 사이트에 포함시킬 수 있습니다 (references/story-api.md 참조).

모션 규칙 (AutoZoom 느낌)

• 자동 줌 카메라: 전체 창(1×) 또는 선명한 클로즈업(1.6–2.2×)만 사용하고, 그 사이는 절대 사용하지 않음: 1.1–1.5× 줌은 창을 잘라내어 보기 흉하게 만듭니다. 중요한 것에 줌인하고, 유지하고, 직접 다음 대상으로 이동하고, 마지막에는 1×로 되돌아옵니다. 이동은 60~100프레임이 소요되고, 유지는 최소 50프레임 이상입니다. 이동에는 ease: 'smooth'(기본값)를 사용하고, 빠른 도착에만 'snap'을 사용합니다. 모션 블러는 사용하지 않습니다.
• 커서: 먼저 도착한 다음 클릭(누름 + 물결 효과, clicks의 각 프레임에서 자동), 클릭 후 2~6프레임 뒤에 결과가 표시됩니다. 타이핑하는 동안 텍스트를 가리지 않도록 약간 옆으로 이동합니다.
• 동작(비트) 순서: 카메라 이동 시작 → 커서 도착 → 클릭 → 상태 변경 → 토스트 또는 키캡 → 자막이 의미를 전달합니다.
• 자막: 발표자가 말할 내용, 줄당 3~6단어, 비디오당 최대 두 줄.
• 오버레이 (자막, 키캡, 토스트, REC)는 카메라 외부에 유지: 줌되지 않으며, 동작을 가리지 않습니다.
• 절제: 하나의 강조 색상, 색종이/회전/튀는 텍스트 없음. 제품이 주인공입니다.

품질 체크리스트

• 제품처럼 보임: 동일한 폰트, 색상, 복사본 및 데이터.
• story.tsx 상단에 타임라인 주석; 프레임 번호는 한 곳에서 제공.
• 모든 동작을 스틸로 확인; 줌인되거나 오버레이에 가려져 중요한 부분이 잘리지 않음.
• 커서가 정확히 대상 위에 위치; 클릭이 결과보다 먼저 옴.
• 1080p에서 텍스트 읽기 가능; 자막이 짧음.
• debug가 꺼져 있고, 렌더링이 오류 없이 완료됨.