사용법 안내 영상 구성하기
실제 화면 흐름을 세 단계로 줄이고 개인정보 없이 짧은 사용법 영상으로 정리합니다.
화면 녹화 · 영상 편집
실제 실행 기록 · 확인한 범위만 공개
실제 조작 캡처로 30초 무음 안내 영상을 편집했습니다
직접 제작하고 로컬에서 실행한 별도 학습용 샘플입니다. 가상 노선도에서 출발 선택→도착 선택→경로 찾기를 실제로 실행했습니다. 각 단계 화면 캡처 3장을 10초씩 편집한 30초 무음 영상과 자막을 제공합니다. 연속 화면 녹화나 실제 서비스 계정 작업이 아닙니다.
무엇을 입력했나요?
- 완료 조건: A 작은숲→D 바다정원, R선 7분·환승 0회
- 실제 select 두 개와 경로 찾기 버튼, 각 조작 뒤 캡처
- 10초×3장 편집 계획·한국어 VTT·음원과 TTS 없음
실제로 얻은 결과
세 번째 실제 버튼 실행에서 A-B-C-D·7분·환승 0회를 확인한 후 그 화면을 편집했습니다. ffprobe로 완성 파일 30초·영상 1스트림·오디오 없음, 자막 세 구간 0~30초를 대조했습니다.
00–10초: A 작은숲 출발 선택 캡처 10–20초: D 바다정원 도착 선택 캡처 20–30초: 실제 경로 결과 캡처 연속 녹화 아님 / 무음 / 실서비스 작업 아님
원문과 실행 결과를 대조한 항목
| 확인 조건 | 실제 관측 |
|---|---|
| 작업 성공과 편집 완료 분리 | 실제 경로 결과 7분을 먼저 대조하고 캡처 편집 |
| 영상 파일·자막 | ffprobe 길이·해상도·오디오 없음 및 3개 VTT 구간 확인 |
| 실제 재생 | 새 로컬 미리보기에서 HTML video의 재생 시간 진행을 확인 |
실패·수정과 경계 조건
제작 방식의 명시
관측: 정지 캡처 편집을 실제 30초 화면 녹화로 오인할 수 있습니다.
수정·대응: 본문·영상 안내에 실제 캡처 3장 편집과 무음을 표시했습니다.
다시 확인: 클릭 동작의 연속 녹화·음성 해설이 없다는 한계를 명시했습니다.
실제 파일 길이 보완
관측: 최초 편집 파일은 ffprobe에서 29.933333초·449프레임이었습니다.
수정·대응: 15fps·450프레임으로 마지막 화면을 보존해 다시 인코딩했습니다.
다시 확인: 최종 파일은 ffprobe에서 30초·450프레임이며 브라우저에서 재생됐습니다.
실제 재생에서 발견한 자막 겹침
관측: 기본 하단 VTT 자막이 캡처 화면의 조작 버튼 일부를 덮었습니다.
수정·대응: 세 자막의 위치를 화면 위쪽 설명 영역(line 24%)으로 옮겼습니다.
다시 확인: 새 VTT의 세 구간 위치와 실제 재생 화면에서 조작 영역을 덮지 않는 배치를 확인했습니다.
직접 다시 확인하는 순서
- 소스 ZIP을 새 폴더에 풀고 README의 로컬 HTTP 명령으로 실행합니다.
- input.json의 가상 입력과 같은 값을 선택하고 해당 버튼을 실제로 조작합니다.
- verification.json의 관측값과 아래 적용 범위를 함께 대조합니다.
입력·소스·결과 파일
입력, 생성 응답 또는 직접 작성한 소스, 검증 자료의 성격을 각 사례에서 구분합니다. 공개 테스트 자료이며 실제 고객 성과 자료가 아닙니다.
- 로컬 재현 안내README.md · 1,989 bytes
- 한국어 자막 VTTcaptions.vtt · 328 bytes
- 실행 입력input.json · 378 bytes
- 샘플 제작 요구사항prompt.txt · 796 bytes
- 독립 샘플 소스 ZIPsample-source.zip · 10,740 bytes
- 3단계 편집 구성storyboard.json · 378 bytes
- 30초 무음 안내 MP4tutorial.mp4 · 166,647 bytes
- 실행 결과·적용 범위verification.json · 5,880 bytes
실행 환경·적용 범위
- 실제 조작 뒤 얻은 정지 캡처 3장을 편집한 30초 무음 영상입니다. 연속 마우스 녹화·음성 해설·실제 계정 로그인·파일 공유 기능은 범위 밖입니다.
- 자막 구간과 로컬 재생 진행을 관측했습니다. 실제 모바일 단말의 자막 가독성과 초보자 이해도 조사는 별도 사용성 시험 대상입니다.
- 직접 작성한 별도 로컬 샘플의 동작 기록입니다. 원작 재현이나 지정 AI 모델 간 성능 비교와 구분합니다.
- 화면 폭 검사는 데스크톱 Chromium 뷰포트 에뮬레이션 기준입니다. 실제 단말·Safari·Firefox·장기 운영은 별도 환경 시험 대상입니다.
01준비할 자료
- 안내할 작업 1개와 완료 화면
- 개인정보를 지운 테스트 화면
- 촬영할 클릭 순서와 자막 초안
아래 도구는 이 예시의 구현 방향입니다. 선택한 AI 도구에서 코드·파일을 다룰 수 있는지 먼저 확인하고, 설치 버전과 실행 방법을 기록하세요.
02시작 프롬프트
[서비스]에서 [작업]을 완료하는 30초 안내 영상의 구성을 만들어줘. 독자: [처음 사용하는 사람 등] 실제 화면과 동작: [캡처와 순서] 시작 상태: [로그인 여부·화면] 완료 기준: [어떤 결과가 보여야 하는지] 먼저 클릭 3단계 이내의 촬영 대본과 장면별 자막을 제안해줘. 제공한 화면에 없는 버튼이나 기능을 만들지 마. 이름·이메일·파일명·알림이 노출되지 않도록 촬영 전 점검표를 줘. 비밀번호나 인증 코드를 입력하는 장면은 촬영 대상에서 빼줘. 클릭 강조는 한 번에 한 곳만 보여주고 자막이 버튼을 가리지 않게 해. 편집 전 각 장면의 길이와 전체 길이를 확인해. 실제 작업 성공 여부와 단순 편집 완료를 구분해 보고해줘.
03만들고 다듬는 순서
완료 상태를 먼저 정하기
파일 공유를 설명하는 영상이라면 어디까지 보여 줄지 먼저 정하세요. 링크를 복사하는 데서 끝낼지, 상대방이 열 수 있는지까지 확인할지에 따라 촬영할 장면이 달라집니다. 30초에 담기 어렵다면 작업을 나눕니다. 촬영용 테스트 자료를 준비하고 알림을 끈 뒤, 화면에 보이는 계정명과 최근 파일을 확인하세요.
클릭과 자막 맞추기
클릭 전에 대상 버튼을 잠깐 보여주고, 반응이 나타난 다음 다음 단계로 넘어갑니다. 빠른 화면 전환을 자막으로 메우지 않습니다. AI가 제안한 버튼 이름이 실제 화면과 같은지 대조하고 달라진 메뉴는 직접 수정합니다.
초보자 관점으로 다시 보기
소리를 끄고 자막만 읽어도 작업을 따라갈 수 있는지 봅니다. 모바일 재생에서 글자가 작으면 전체 화면을 확대하기보다 해당 조작 영역으로 구도를 바꿉니다. 완성 영상에 개인정보가 남지 않았는지 프레임 단위로 마지막 확인합니다.
04완성 전 체크
직접 확인한 항목만 체크하세요. 체크 상태는 저장되거나 서버로 전송되지 않습니다.
05막힐 때 확인할 것
30초 안에 설명이 들어가지 않습니다
준비 단계와 본 작업을 분리합니다. 자막을 빨리 지나가게 하지 말고 목표 하나로 줄입니다.
실제 메뉴와 촬영 대본이 다릅니다
녹화한 버전의 화면을 기준으로 자막과 순서를 함께 고칩니다. 존재하지 않는 버튼을 이미지로 합성하지 않습니다.
06출처와 참고 자료
아래 공개 사례는 주제의 참고 자료입니다. 이 글의 도구 선택·절차·프롬프트는 AI Tools Lab의 독립적인 편집 예시이며, 원 제작자의 실제 입력이나 실행 재현 기록이 아닙니다.
- 웹페이지 사용법 30초 화면 녹화 ↗X · @danpeguine · 원본 번호 56
- MDN: 화면 캡처 API 개요 ↗
AI가 실제 계정에서 작업을 수행한 것처럼 편집하지 않습니다. 화면 녹화와 성공 확인은 따로 기록하세요.