제품 데모 디렉터

제품 데모 디렉터은(는) 무엇을 하나요?

당신은 소프트웨어 마케팅에서 가장 어려운 단일 샷을 연출합니다: 실제 UI가 실제 작업을 수행하는 모습을, 낯선 사람이 첫 시청에 따라갈 수 있는 방식으로 보여주는 것입니다. 기본적인 실패는 사람 속도의 원시 화면 녹화입니다. 커서가 순간이동하고, 세 가지가 동시에 변경되며, 시청자는 어디를 봐야 할지 전혀 알 수 없습니다. 당신의 임무는 주의를 안무하는 것입니다: 한 번에 하나의 변경, 카메라는 그 변경에 초점을 맞추고, 읽을 수 있을 만큼 충분히 유지하는 것입니다.

이것은 미적 감각의 레이어입니다. 어떻게 움직임이 발생하는지(이징 곡선, 기대감, 12가지 원칙)에 대한 문법은 motion-design-principles에 있고; 비트 목록은 video-storyboard에 있으며; 단어 애니메이션은 kinetic-typography에 있습니다. 당신은 카메라와 커서가 UI 위에서 무엇을 할지 결정하고, 그 결과를 해당 스킬들과 빌드 팩(remotion-compose, remotion-render)에 전달합니다.

하나의 예제를 통해 작업합니다: 사용자가 설정 대시보드에서 기능 플래그를 켜고 메트릭 타일이 켜지는 것을 보는 12초 클립입니다.

작업 흐름

다음 순서대로 실행하세요. 커서 동선을 안무하기 전에 기록 대 재현 결정을 먼저 내리세요. 이 결정은 이후 모든 작업을 변경합니다.

1단계 - 결정: 화면 녹화 또는 UI 재현

이것이 분기점입니다. 다른 작업보다 먼저 선택하세요.

• 화면 녹화는 UI가 실제이고 안정적이며, 데모의 신뢰성이 "이것이 실제 제품입니다"에 달려 있을 때 사용합니다. 캡처 속도가 가장 빠릅니다. 통제력을 포기하는 대가를 치릅니다. 버벅거리는 커서, 느린 네트워크 스피너, 실제 고객 데이터, 또는 확대 시 앤티앨리어싱이 잘못되는 글꼴 등을 수정할 수 없습니다. 최종 해상도의 2배로 녹화하여 확대할 때 흐려짐 없이 충분한 여유 공간을 확보하세요.
• UI 재현 (관련 화면을 컴포넌트로 다시 구축)은 깔끔한 커서 경로, 결정적인 타이밍, 가짜지만 정직한 데이터, 아직 존재하지 않는 부분 제품 상태, 또는 픽셀 완벽한 확대/축소가 필요할 때 사용합니다. 더 많은 작업이 필요하지만 완전한 제어가 가능합니다. 이 경로는 remotion-compose로 이어지며, 각 화면이 컴포넌트가 되고 커서는 애니메이션 레이어가 됩니다.
• 혼합 (일반적이지만 과소평가됨): 화면 녹화로 텍스처(실제 스크롤, 앱 내에서 재생되는 실제 비디오)를 캡처한 다음, 재현된 콜아웃, 커서 및 하이라이트를 위에 합성하여 안무를 작성합니다. 제품은 실제이지만 원시 녹화가 너무 지저분하여 연출하기 어려울 때 사용합니다.

결정과 그 이유를 기록하세요. 전체 장단점 표는 references/record-vs-recreate를 참조하세요.

2단계 - 비트당 하나의 변경으로 축소

데모는 한 번에 정확히 하나의 변경이 발생하고 시청자가 그 변경이 발생할 때 보고 있을 때만 읽을 수 있습니다. 흐름의 모든 상태 변경을 나열하세요(포커스 이동, 필드 채움, 토글 전환, 타일 업데이트, 토스트 표시). 두 가지 변경이 동시에 발생하면 시간적으로 분리하거나 하나를 종속시켜야 합니다(희미하게 처리, 확대/축소 밖으로 밀어내기). "플래그 켜기"는 하나의 비트가 아닙니다. 커서가 토글에 도착 → 토글 전환 → 메트릭 타일 재계산 → 확인 토스트. 네 개의 비트, 네 번의 홀드 읽기입니다.

3단계 - 커서 동선 설계

커서는 해설자입니다. 마우스 로그가 아닌 배우처럼 대우하세요.

1. 의도적으로 움직이고, 약간 호를 그리세요. 절대 순간이동하거나 떨리지 마세요. 커서는 정지 상태에서 가속하고 목표 지점으로 감속합니다(ease-in-out - motion-design-principles에서 곡선을 가져오세요). 희미한 호는 자 직선보다 더 의도적으로 읽힙니다.
2. 행동하기 전에 정착하세요. 도착 후 약 6-10프레임 동안 멈춘 다음 클릭하세요. 이 멈춤은 눈이 필요로 하는 "이제 이 작업을 하려고 합니다" 비트입니다.
3. 클릭을 보여주세요. 실제 클릭은 보이지 않습니다. 시각적 표시를 추가하세요: 커서의 빠른 축소/확대, 클릭 지점의 방사형 리플, 또는 대상의 짧은 누름 상태. 이 중 하나만 사용하고 세 가지를 모두 사용하지 마세요.
4. 하나의 커서, 하나의 경로. 흐름에 커서가 두 장소에 있어야 한다면, 화면을 가로질러 휘두르지 말고 컷(cut)하세요. 4프레임 대시보다 하드 컷이 더 깔끔하게 읽힙니다.
5. 커서가 주제가 아닐 때는 커서를 제거하세요. 타일이 업데이트 중이고 커서가 그냥 대기 중이라면, 페이드 아웃하거나 확대/축소 밖으로 이동시키세요. 실제 주제와 경쟁하는 정적 커서는 주의를 분산시킵니다.

4단계 - 카메라 연출: 확대/축소, 이동, 강조 표시

프레임은 UI 위를 촬영하는 카메라입니다. 일관된 이동 어휘를 사용하여 시청자가 당신의 언어를 배울 수 있도록 하세요:

• 밀어넣기(확대/축소) 는 변경이 발생하기 전에 영역에 집중하세요. 토글이 전환되기 전에 토글에 도착하세요. 밀어넣기는 기대감이고, 변경은 결과물입니다.
• 이동/트래킹 은 한 프레임에 담기에는 너무 멀리 떨어진 두 영역 사이를 커서를 따라 이동합니다. 이동 속도를 느리게 유지하고 커서에 의해 동기화되도록 하세요. 카메라는 배우를 따라갑니다.
• 빼내기(축소) 는 세부 비트 후에 맥락을 재확립하여 시청자가 다음 영역 전에 다시 고정할 수 있도록 합니다.
• 콜아웃(하이라이트 링, 레이블, 연결선, 나머지를 어둡게 하는 스포트라이트)은 그렇지 않으면 단어로 이름을 지정해야 하는 것을 가리킵니다. UI 요소가 화면에 있을 때는 내레이션보다 콜아웃을 선호하세요.

규칙: 카메라는 요소가 변경되기 전에 이미 그 요소를 보고 있어야 합니다. 토글이 전환된 다음 확대/축소하면 순간을 놓친 것입니다.

5단계 - 상태 변경을 명확하게 만들기

전체 데모는 상태 변경을 위해 존재합니다. 각 변경은 의도적인 처리를 받습니다:

• 핵심 변경 시 세계를 느리게 하세요. 탐색 중에는 일반 속도를 유지하고, 실제 전환/업데이트는 실제 지속 시간의 약 1.3-1.6배로 늘려서 눈이 원인→결과를 인식할 수 있도록 하세요. 이후 속도를 다시 높이세요.
• 전/후 차이를 강조하세요. 변경된 요소를 펄스(광선, 짧은 색상 워시, 규모 확대)합니다. 숫자가 변경되는 경우, 값을 하드 컷하지 않고 카운트업하세요. 움직임 자체가 메시지입니다.
• 포커스를 당기세요. 메트릭 타일이 업데이트되면, 약 10프레임 동안 다른 모든 것을 희미하게 하거나 흐리게 하여 타일이 명백히 주제가 되도록 한 다음, 다시 복원하세요.
• 원인과 결과를 그 사이에 비트를 두고 순서대로 배치하세요. 토글이 전환되고(홀드), 그런 다음 타일이 업데이트됩니다(홀드). 동시에 발생하면 시청자는 토글이 타일을 유발했는지 알 수 없습니다.

6단계 - 샷 리스트 검사 후 전달

비트 목록에 아래 린터를 실행하여 고전적인 가독성 실패(중복 변경, 누락된 홀드, 커서 순간이동, 늦게 도착하는 카메라)를 찾아내세요. 모든 플래그를 수정하세요. 그런 다음 연출된 샷 리스트를 전달하세요: 타이밍/이징 세부 사항은 motion-design-principles에, 비트 순서는 video-storyboard에, 실제 구현(커서 레이어, 확대/축소 변환, 컴포넌트 화면)은 빌드용 remotion-compose와 반복 루프용 remotion-render에 전달하세요.

품질 기준

데모는 다음 모든 조건이 충족되어야 A+입니다:

• 기록-대-재현 결정이 이유와 함께 기록되었으며, 프로덕션이 이를 준수합니다('깔끔한' 재현에 지저분한 원시 녹화를 몰래 넣지 않음).
• 비트당 정확히 하나의 변경이 주제이며; 동시 변경은 의도적으로 종속되고(희미하게 처리되거나 프레임 밖으로), 우연히 발생하지 않습니다.
• 모든 클릭은 시각적 표시를 보여주며, 커서는 행동하기 전에 정착합니다. 순간이동, 떨림, 휘두르기 패닝이 없습니다.
• 카메라는 각 요소가 변경되기 전에 이미 그 요소에 프레임이 맞춰져 있습니다.
• 모든 상태 변경은 최소한 하나의 가독성 처리(슬로우다운, 하이라이트, 포커스 풀 또는 카운트업)와 그 후 홀드 읽기를 받습니다.
• 샷 리스트가 린터를 플래그 없이 통과합니다.

하지 말아야 할 것

• 원시 실시간 화면 녹화를 데모로 제공하지 마세요. 연출하세요. 그렇지 않으면 데모가 아닌 푸티지입니다.
• 두 개의 상태 변경이 동시에 발생하도록 두지 마세요. 시청자는 원인과 결과를 할당할 수 없습니다.
• 커서를 순간이동, 떨림 또는 휘두르기 패닝하지 마세요. 두 장소에 있어야 한다면 컷하세요.
• 요소가 변경된 후에 확대/축소하지 마세요. 카메라는 항상 먼저 도착합니다.
• 콜아웃이 화면에서 가리킬 수 있는 것을 내레이션하지 마세요.
• 여기서 정확한 이징 곡선이나 프레임별 타이밍을 지정하지 마세요. 그것은 motion-design-principles입니다. 비트 순서를 처음부터 작성하지 마세요. 그것은 video-storyboard입니다. 화면의 단어를 여기서 애니메이션하지 마세요. 그것은 kinetic-typography입니다. React/Remotion 코드를 작성하거나 렌더링하지 마세요. 그것은 remotion-compose와 remotion-render입니다.

린터

자체 포함된 Node 스크립트입니다. demo_lint.js로 저장하고 node demo_lint.js로 실행하세요. 종속성이 없습니다. 데모를 비트의 순서 목록으로 설명하세요. 린터는 작업 흐름의 고전적인 가독성 실패를 플래그합니다. 데모에 맞게 beats 배열을 편집하세요.

// 제품 데모 샷 리스트 린터. 실행: node demo_lint.js
// 각 비트는 타임라인의 한 순간입니다. 필드:
//   t          시작 시간(초, 순서대로 정렬, 오름차순)
//   dur        비트가 유지되는 시간(초)
//   changes    이 비트에서 발생하는 UI 상태 변경(0, 1 또는 그 이상)
//   camera     'push' | 'pan' | 'pull' | 'hold'  (이 비트로 들어오는 카메라 이동)
//   framedOn   비트가 시작될 때 카메라가 가리키는 요소
//   cursorTo   이 비트에서 커서가 이동하는 위치 (null = 머물러 있음 / 주제 아님)
//   click      이 비트에서 클릭이 발생하는지 여부
//   clickAffordance  클릭이 시각적으로 표시되는지 여부(리플/누름/확대)
//   legibility 'slowdown' | 'highlight' | 'focuspull' | 'countup' | null
const beats = [
  { t: 0.0, dur: 1.2, changes: [],               camera: 'push', framedOn: 'settings-panel', cursorTo: 'toggle',     click: false, clickAffordance: false, legibility: null },
  { t: 1.2, dur: 0.5, changes: [],               camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: true,  clickAffordance: true,  legibility: null },
  { t: 1.7, dur: 1.0, changes: ['toggle-on'],    camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: false, clickAffordance: false, legibility: 'slowdown' },
  { t: 2.7, dur: 1.4, changes: ['tile-update'],  camera: 'pan',  framedOn: 'metric-tile',    cursorTo: null,         click: false, clickAffordance: false, legibility: 'countup' },
  { t: 4.1, dur: 0.8, changes: ['toast','badge'],camera: 'hold', framedOn: 'metric-tile',    cursorTo: 'export-btn', click: false, clickAffordance: false, legibility: null },
]

const HOLD_MIN = 0.4 // 상태 변경은 읽기 위해 최소한 이 시간이 필요합니다
const flags = []
for (let i = 0; i < beats.length; i++) {
  const b = beats[i]
  const id = `비트 ${i + 1} (t=${b.t}s)`
  // 1. 비트당 하나의 변경.
  if (b.changes.length > 1)
    flags.push(`${id}: ${b.changes.length}개의 변경이 동시에 발생(${b.changes.join(', ')}) - 하나를 제외하고 모두 분할 또는 종속`)
  // 2. 모든 변경은 홀드 읽기를 받습니다.
  if (b.changes.length === 1 && b.dur < HOLD_MIN)
    flags.push(`${id}: 변경 "${b.changes[0]}"이(가) ${b.dur}s만 유지됨 - 읽을 수 있도록 >= ${HOLD_MIN}s 유지`)
  // 3. 모든 변경은 가독성 처리를 받습니다.
  if (b.changes.length >= 1 && !b.legibility)
    flags.push(`${id}: 변경 "${b.changes[0]}"에 가독성 처리(slowdown/highlight/focuspull/countup)가 없음`)
  // 4. 클릭은 보여야 합니다.
  if (b.click && !b.clickAffordance)
    flags.push(`${id}: 클릭에 시각적 표시가 없음 - 리플/누름/확대 추가`)
  // 5. 카메라는 요소가 변경되기 전에 프레임을 맞춥니다. 변경 비트에서가 아닙니다.
  if (b.changes.length >= 1 && (b.camera === 'push' || b.camera === 'pan'))
    flags.push(`${id}: 카메라가 변경이 발생하는 비트에서 이동(${b.camera}) - 먼저 도착하고, 두 번째로 변경`)
  // 6. 커서 순간이동 없음: 클릭 비트에서 커서가 방금 도착한 경우 정착이 없습니다.
  if (b.click && b.cursorTo)
    flags.push(`${id}: 커서가 같은 비트에서 이동하고 클릭 - 클릭하기 전에 정착(~6-10프레임)`)
}

if (flags.length === 0) console.log('통과 - 샷 리스트를 읽을 수 있습니다.')
else {
  console.log(`${flags.length}개의 플래그:`)
  for (const f of flags) console.log('  - ' + f)
}

작업 예제 출력

위 비트를 사용하여 스크립트는 다음을 출력합니다:

3개의 플래그:
  - 비트 4 (t=2.7s): 카메라가 변경이 발생하는 비트에서 이동(pan) - 먼저 도착하고, 두 번째로 변경
  - 비트 5 (t=4.1s): 2개의 변경이 동시에 발생(toast, badge) - 하나를 제외하고 모두 분할 또는 종속
  - 비트 5 (t=4.1s): 변경 "toast"에 가독성 처리(slowdown/highlight/focuspull/countup)가 없음

읽어보면: 토글 클릭(비트 2-3)은 깔끔합니다. 커서가 정착하고, 클릭에 리플이 있으며, 전환이 느려지고 유지됩니다. 그러나 비트 4는 메트릭 타일이 업데이트되는 동안 패닝하므로, 카메라가 결과물에 늦게 도착합니다. 비트 3의 홀드 동안 패닝하여 타일이 재계산되기 전에 프레임에 들어오도록 수정하세요. 그리고 비트 5는 한 번에 두 가지 잘못된 작업을 수행합니다: 같은 프레임에서 토스트 와 배지를 실행하고, 토스트에 가독성 처리가 없습니다. 배지를 종속시켜(희미하게 처리하거나 확대/축소 밖으로 밀어내기) 토스트가 단일 주제가 되도록 하고, 토스트에 하이라이트 또는 홀드를 제공하세요. 세 가지를 모두 수정하면 린터가 통과합니다.

템플릿: demo-shot-card

이것을 복사하고, FILL 필드를 채운 다음, 결과를 린터에 전달하고, 그런 다음 하위 스킬에 전달하세요.

제품 데모 샷 카드. [채우기: 기능 이름] - [채우기: 길이]s

프로덕션 결정
  기록 / 재현 / 혼합:   [채우기]
  이유:                   [채우기: 이 경로를 선택한 이유]
  캡처 해상도:           [채우기: 녹화 시 최종의 2배]

클립의 주제 (시청자가 가져가야 할 한 문장)
  [채우기]

비트 시트 (행당 하나의 변경, 변경 전에 카메라가 도착)
  #  시간   카메라   프레임 대상        커서            변경            가독성        홀드
  1  [채우기] [push]   [채우기]           [FILL로 이동] -                 -                 [채우기]s
  2  [채우기] [hold]   [채우기]           [정착+클릭] -                 -                 [채우기]s
  3  [채우기] [hold]   [채우기]           [대기/페이드]   [채우기: 전환]  [slowdown]        [채우기]s
  4  [채우기] [pan]    [채우기]           [오프프레임]     [채우기: 효과][countup/glow]    [채우기]s
  (행 추가; 한 행에 두 개의 변경 금지)

콜아웃 언어 (클립 전체에서 일관되게 유지)
  하이라이트 스타일:              [채우기: ring / spotlight-dim / connector]
  클릭 표시:                     [채우기: ripple / press / cursor-scale]
  포커스 풀 처리:                [채우기: dim others / blur others]

전달
  이징 + 타이밍 세부 사항 ->     motion-design-principles
  비트 순서 / 스토리 아크 ->     video-storyboard
  화면상의 단어 ->            kinetic-typography
  하이라이트의 색상 + 빛 ->     motion-color-and-light
  사운드 디자인

…

[번역을 위해 잘림]