5장. 콘텐츠 제작 (2) - 영상과 웹페이지
최종 검토: 2026. 8. 24.
영상 대본과 웹페이지 코드는 AI가 빠르게 초안을 만들 수 있는 영역입니다. 완성처럼 보이는 미리보기는 검증의 시작일 뿐입니다. 실제 사용자 화면, 링크, 데이터 처리, 오류 상태를 확인해야 합니다.
웹페이지 제작의 네 단계
flowchart LR
A[사용자·목표 정의] --> B[화면·문구 초안]
B --> C[코드·링크·권한 검토]
C --> D[빌드와 실제 브라우저 확인]
D --> E[배포 후 핵심 경로 재검증]현재 배포된 앱을 기준으로 한 예시
공개된 Agent Lab의 레슨 상세 화면을 개선한다고 가정합니다. AI에게는 “강좌 사이트를 만들어 줘” 대신 이미 배포된 화면을 기준으로 검증 가능한 요구를 제공합니다.
공개 교육 사이트의 레슨 상세 화면 개선안을 작성해 줘.
현재 사용자 행동: 레슨 제목을 읽고 본문과 공식 출처를 확인한다.
필수 요소: 제목, 최종 검토일, 공식 출처 링크, 본문, 이전·다음 레슨 링크.
품질 기준: 모바일에서도 한 열로 읽히고, 키보드만으로 링크에 도달할 수 있다.
제약: 가짜 사용자 후기, 가격, 모델 사양, 성과 지표를 만들지 않는다.
검증: 구현 뒤 빌드와 실제 배포 URL의 데스크톱·모바일 화면을 확인한다.영상 대본도 사실 검증이 먼저
| 대본 요소 | AI에 맡길 일 | 사람이 확인할 일 |
|---|---|---|
| 개요 | 학습 순서와 장면 구성 제안 | 목표와 학습 난이도 |
| 내레이션 | 제공한 원고를 짧고 자연스럽게 다듬기 | 인용·수치·제품 설명 |
| 자막 | 핵심 문장과 용어 정리 | 오탈자·접근성·시간 코드 |
| 공개 설명 | 제목·요약·참고 링크 초안 | 저작권·링크·공개 범위 |
배포 전 체크리스트
- 화면의 링크와 버튼이 실제 목적지로 이동한다.
- 데스크톱과 모바일에서 제목·본문·출처가 읽힌다.
- 공개하면 안 되는 키, 계정, 개인 정보가 코드와 영상에 없다.
- 수치·인용·제품 기능이 원문 또는 실제 화면과 일치한다.
- 오류·빈 상태·긴 제목에서도 화면이 무너지지 않는다.