AI로 웹 앱 데모 자동 녹화하기

이제 보여줄 내용을 작성하여 클라우드 브라우저에서 제품을 클릭하며 녹화하는 AI 에이전트에게 전달함으로써 웹 앱 데모를 자동으로 녹화할 수 있습니다. 녹화물이 사용 가능한지는 시작 전 설정에 달려 있습니다. 로그인할 계정, 화면에 표시된 데이터, 작성한 지침이 중요합니다. 이 가이드에서는 각 항목을 다루며, 에이전트가 막혔을 때 대처하는 방법과 Playwright 또는 Puppeteer 스크립트가 더 나은 도구인 경우를 설명합니다.

또한 이는 직접 화면을 녹화하지 않고도 제품 데모를 얻을 수 있는 가장 직접적인 방법입니다. 제품이 공개 웹 앱이 아니거나 데크 또는 URL만 있는 경우, 마지막 부분에 있는 다른 녹화 방법을 확인하세요.

자동 웹사이트 녹화 작동 방식#

Clevera의 AI 레코더는 시작 페이지와 보여줄 내용을 설명하는 서면 지침, 두 가지 입력을 받습니다. AI 에이전트가 클라우드 브라우저에서 시작 페이지를 열고 단계를 수행하며 세션을 녹화합니다. 실행 과정을 지켜보다가 언제든지 브라우저를 직접 제어할 수 있으며, 완료되면 다시 제어권을 넘길 수 있습니다.

기본적으로 에이전트는 읽기 전용입니다. 탐색, 메뉴 열기, 화면 읽기는 가능하지만 허용하지 않는 한 아무것도 생성하거나 편집하지 않습니다. 완성된 녹화물은 다른 녹화물과 마찬가지로 라이브러리에 저장되며, 이를 내레이션이 포함된 사용법 영상, 제품 데모 또는 기사로 변환할 수 있습니다.

1단계: 데모 계정 및 데모 데이터 준비#

에이전트가 보는 모든 것이 영상에 담깁니다. 지침을 작성하기 전에 계정을 먼저 설정하세요.

• 전용 데모 계정을 사용하세요. 운영 환경의 관리자 계정을 에이전트에게 연결하지 마세요. 별도의 로그인이 있는 데모 워크스페이스를 사용하면 실제 고객 데이터가 화면에 노출되지 않으며 실수로 인한 영향을 제한할 수 있습니다.
• 현실적인 데이터를 입력하세요. 빈 대시보드는 데모로서 가치가 없습니다. 10~20개의 레코드를 그럴듯한 이름, 금액, 날짜로 채워 표, 차트, 검색 결과가 실제 팀이 제품을 사용하는 것처럼 보이게 하세요. "Test 1", "asdf" 및 실제 고객 이름은 피하세요.
• 흐름이 시작될 상태를 설정하세요. 데모가 "첫 번째 프로젝트 만들기"를 보여준다면 프로젝트가 아직 존재하지 않는지 확인하세요. 송장 편집을 보여준다면 송장이 이미 존재하고 지침에서 가리킬 수 있는 명확한 이름이 있는지 확인하세요.
• 일회성 방해 요소를 제거하세요. 해당 계정에서 온보딩 투어, "새로운 기능" 모달, 체험판 배너를 먼저 해제하세요. 사용자당 한 번 나타나는 모든 요소는 녹화 시에도 나타납니다.
• 앱이 인터넷에서 접근 가능한지 확인하세요. 에이전트는 클라우드 브라우저에서 실행되므로 localhost, VPN 뒤의 스테이징 서버 또는 사무실 IP로 제한된 환경은 열 수 없습니다. 공개 데모 또는 샌드박스 환경을 사용하세요.

2단계: 에이전트가 따를 수 있는 지침 작성#

대부분의 잘못된 AI 녹화물은 모호한 지침에서 비롯됩니다. 에이전트는 작성한 내용을 작성한 순서대로 수행하며, 빈틈은 추측으로 채웁니다. 좋은 지침은 제품을 처음 보는 사람을 위해 작성된 짧은 테스트 스크립트처럼 읽혀야 합니다.

4가지 규칙을 따르세요:

1. 화면 이름을 지정하세요. UI에 나타나는 레이블을 사용하세요. "돈 섹션으로 이동"이 아니라 "왼쪽 사이드바에서 청구(Billing)를 여세요"라고 하세요.
2. 순서를 정하세요. 단계를 번호로 매기세요. 이야기의 흐름(설정, 사용, 결과 확인)이 중요하다면 이를 명시하세요.
3. 정확한 요소를 가리키세요. 버튼, 탭, 필드 또는 레코드의 이름을 지정하세요: "INV-1042 송장을 클릭하세요", "필터 드롭다운을 열고 연체(Overdue)를 선택하세요".
4. 멈출 지점을 말하세요. 시청자가 기억해야 할 결과 화면에서 끝내고, 에이전트에게 잠시 그곳에 머물라고 지시하세요.

실제 적용 시 차이점은 다음과 같습니다.

나쁜 지침:

우리 송장 기능이 어떻게 작동하는지 보여줘.

에이전트는 어떤 화면이 중요한지, 어떤 레코드를 열어야 하는지, 언제 끝내야 하는지 스스로 결정해야 합니다. 처음 발견한 내용을 보여주는 투어가 될 것입니다.

더 낫지만 여전히 모호한 지침:

송장을 만들고 고객에게 보내는 방법을 보여줘.

목표는 명확하지만 시작점, 고객, 항목이 없습니다. 읽기 전용 에이전트의 경우 송장 생성은 쓰기 작업이므로 이 지침은 성공할 수 없습니다.

좋은 지침:

대시보드에서 시작하세요. 1) 왼쪽 사이드바에서 송장을 클릭하세요. 2) 오른쪽 상단의 새 송장 버튼을 클릭하세요. 3) 고객 항목에서 "Northwind Studio"를 선택하세요. 4) 항목 하나를 추가하세요: "디자인 리테이너", 수량 1, 가격 2,400. 5) 초안 저장을 클릭하세요. 6) 초안을 열고 미리보기를 클릭한 다음, 미리보기 화면에서 3초간 멈추세요. 전송은 클릭하지 마세요.

이 지침은 모든 화면과 요소의 이름을 지정하고, 준비된 데이터에서 정확한 고객을 사용하며, 원치 않는 작업에 대해 명확한 선을 긋습니다. 또한 시작하기 전에 이 실행에 생성 권한이 필요함을 알려줍니다(4단계 참조).

다음과 같은 습관도 도움이 됩니다:

• 녹화당 하나의 흐름만 수행하세요. "송장 생성, 반복 일정 설정, 보고서 내보내기"는 3개의 영상입니다. 짧은 실행은 수정하기 쉽고 재사용하기도 쉽습니다.
• 입력할 값을 명시하세요. 에이전트가 텍스트를 임의로 생성하게 하면 화면에 이상한 내용이 나올 수 있습니다.
• 알려진 특이 사항을 언급하세요. "가격 필드에서 포커스가 빠지기 전까지 저장 버튼은 비활성화됩니다"와 같은 설명은 에이전트의 불필요한 클릭을 방지합니다.

3단계: 로그인 옵션 선택#

대부분의 웹 앱 데모는 로그인 뒤에 있습니다. 3가지 옵션이 있습니다:

1단계에서 준비한 데모 계정이 여기서 빛을 발합니다. 로그인 정보를 제공할 때 데모 전용 데이터에만 접근할 수 있는 데모 전용 비밀번호는 위험 부담이 적은 선택입니다. 회사가 2단계 인증이 포함된 SSO를 사용한다면, 에이전트에게 시키는 것보다 직접 입력하는 것이 보통 더 빠릅니다.

4단계: 읽기 전용 또는 생성/편집 결정#

읽기 전용이 기본값이며, 예상보다 많은 데모를 커버할 수 있습니다(에이전트에게 쓰기 권한을 줄 때의 위험은 AI 화면 녹화 에이전트 보안을 참조하세요). 탐색, 필터링, 검색, 레코드 열기, 탭 전환 및 보고서 표시 등이 가능합니다.

흐름상 반드시 필요한 경우(레코드 생성, 설정 변경, 양식 제출)에만, 그리고 데모 계정에서만 생성 또는 편집을 허용하세요. 그런 다음 두 가지를 수행하세요:

• 위 예시의 "전송은 클릭하지 마세요"와 같이 지침에 멈출 지점을 작성하세요. 이메일을 보내거나, 결제하거나, 통합 서비스에 게시하는 작업은 실행에서 제외하거나 데모 워크스페이스에서 연결을 해제해야 합니다.
• 다음 실행이 동일한 상태에서 시작되도록 이후에 데모 데이터를 초기화하세요.

5단계: 에이전트가 막혔을 때 직접 제어하기#

일부 화면은 자동화된 브라우저를 방해할 수 있습니다. 전체 흐름을 다시 실행하는 대신 다음과 같이 계획하세요:

• 쿠키 배너 및 동의 팝업. 직접 제어하여 수락하거나 닫은 후 다시 넘겨주세요.
• 사용자 지정 날짜 선택기 및 드래그 앤 드롭. 특이한 위젯은 에이전트가 가장 많은 시간을 낭비하는 곳입니다. 직접 날짜를 선택하고 제어권을 반환하세요.
• 캡차(Captcha). 이는 자동화를 막기 위한 것입니다. 직접 해결하세요.
• 2단계 인증 코드. 휴대폰에서 코드를 입력한 후 다시 넘겨주세요.

제어권을 다시 넘기면 에이전트는 남겨둔 화면부터 작업을 이어갑니다. 제어권 전환 과정이 녹화물에 보인다면 편집기에서 잘라내세요.

6단계: 크레딧 절약을 위해 짧게 녹화하기#

AI 레코더는 모든 플랜에서 AI가 작업하는 시간에 따라 크레딧을 사용합니다. 따라서 지침은 비용을 결정하는 요소입니다. 준비된 계정에서 정확한 지침을 사용하면 빠르게 완료됩니다. 팝업이 가득한 계정에서 모호한 지침을 사용하면 탐색, 재시도, 대기하는 데 시간을 낭비하게 됩니다. 플랜별 크레딧 양은 가격 페이지에서 확인할 수 있습니다.

녹화물의 활용#

원본 영상은 입력값일 뿐, 최종 결과물이 아닙니다. 동일한 AI 녹화본으로 다음을 생성할 수 있습니다:

• 사용 방법 영상. Clevera는 필요한 모든 동작을 순서대로 다루고, 스크립트를 작성하며, AI 음성을 추가하므로 직접 내레이션을 할 필요가 없습니다. 고객 센터 및 온보딩에 적합한 형식입니다. AI 튜토리얼 메이커에서 작동 방식을 확인하세요.
• 제품 데모. AI가 가치 낮은 장면을 건너뛰고, 클립 순서를 재배치하며, 모든 클릭을 설명하는 대신 결과를 내레이션합니다. 영업 및 출시 페이지에 적합한 형식입니다. 제품 데모 생성기에서 데모 형식을 확인하세요.
• 아티클. 문서 및 SEO를 위해 자동으로 선택된 캡션이 포함된 스크린샷이 들어간 사용 방법 가이드입니다.

각각은 별도의 콘텐츠 항목이며, 영상과 아티클은 74개 언어로 번역됩니다. UI가 변경되면 내레이션과 텍스트 수정 사항이 호스팅된 링크와 임베드에 업데이트되지만, 영상 자체는 변경되지 않습니다. 동일한 지침을 다시 실행하여 최신 영상을 얻으세요. UI 변경 후 튜토리얼 영상을 업데이트하는 방법에서 재녹화가 필요한 경우와 수정만으로 충분한 경우를 다룹니다.

청중에게 어떤 형식이 필요한지 확실하지 않다면, 인터랙티브 데모와 제품 영상 비교와 튜토리얼 영상 제작 방법 가이드에서 장단점을 확인하세요.

첫 실행: 지침 1개, 78초, 9 크레딧#

2026년 10월, 공개 데모 앱인 TodoMVC에서 다음 지침을 사용하여 AI 레코더를 실행했습니다:

할 일 세 가지 추가: '출시 포스트 작성', '데모 녹화', '뉴스레터 발송'. '데모 녹화'를 완료로 표시. 그런 다음 Active 필터를 클릭하여 열려 있는 할 일만 표시.

로그인은 없었습니다. 할 일을 추가하고 완료하는 것은 쓰기 작업이므로 '변경 허용(Allow changes)'을 켰으며, 이는 실제 데이터가 없는 공개 데모 앱이기 때문에 가능했습니다. 본인의 제품에서는 4단계를 따르세요.

에이전트는 우리가 작성한 대로 순서에 맞춰 정확히 수행했으며, 눈에 띄는 재시도나 잘못된 클릭은 없었고 우리가 개입할 필요도 없었습니다. 실행 시간은 약 78초가 소요되었고, 에이전트가 단계 사이에서 일시 정지하기 때문에 사람이 20초 만에 할 작업을 58초 분량의 영상으로 남겼습니다. Clevera는 이를 2개의 챕터, 6개의 단계, 1.5배 및 1.8배 자동 줌이 포함된 40초짜리 사용 방법 영상으로 약 50초 만에 편집했습니다. 크레딧: 녹화 분석에 5, 사용 방법 영상에 4, 총 9 크레딧이 소요되었습니다.

Clevera가 해당 AI 녹화본으로 만든 40초짜리 사용 방법 영상(편집 전).

주의할 점: 영상이 흐릿하고 대비가 낮게 나올 수 있으므로 게시 전에 확인하세요. 또한 지침에 번호를 매기지 않았습니다. 3단계 흐름에서는 입력할 값과 클릭할 정확한 필터를 명시했기 때문에 잘 작동했습니다. 더 긴 흐름의 경우 단계에 번호를 매기세요.

스크립트 기반 대안: Playwright 및 Puppeteer#

엔지니어링 팀은 수년간 자동화 스크립트로 브라우저를 녹화해 왔으며, 일부 작업에는 스크립트가 더 나은 도구입니다.

Playwright는 기본적으로 영상을 녹화합니다. Playwright Test에서는 video 옵션을 'on', 'retain-on-failure' 또는 'on-first-retry'으로 설정합니다. 라이브러리를 사용할 때는 dir 및 선택 사항인 size과 함께 browser.newContext()에 recordVideo를 전달합니다. 두 가지 세부 사항에 주의하세요. 영상은 브라우저 컨텍스트가 닫힐 때만 저장되므로 await context.close()해야 합니다. 또한 영상은 기본적으로 800x800에 맞게 축소된 뷰포트로 설정되므로, 선명한 1080p 영상을 원하면 뷰포트와 size를 직접 설정하세요. 선택자를 직접 작성할 필요도 없습니다. npx playwright codegen은 앱을 클릭하는 동안 스크립트를 생성합니다.

Puppeteer에는 기본적으로 30 FPS로 WebM을 녹화하고 시스템에 ffmpeg가 필요한 page.screencast()이 있습니다. Puppeteer 25.13 기준, 문서에서는 MP4를 출력하는 page.record()을 권장하며 기존 방식은 구식으로 표시합니다.

스크립트가 더 나은 선택인 경우:

• 모든 릴리스에서 동일한 흐름을 녹화하고, 아무도 지켜보지 않는 CI에서 트리거하려는 경우.
• 녹화본이 테스트를 겸하며, 영상만큼이나 실패 여부가 중요한 경우.
• 앱이 CI 러너가 볼 수 있는 사설 스테이징 네트워크와 같이 클라우드 브라우저가 도달할 수 없는 곳에 있는 경우.
• 이미 엔드투엔드 테스트를 유지 관리하는 엔지니어가 있고 선택자가 안정적인 경우.

에이전트가 더 나은 선택인 경우:

• 영상이 필요한 사람이 제품 마케팅, 영업 또는 지원 부서에 있고 코드를 작성하지 않는 경우.
• 흐름이 일회성이거나 자주 변경되는 경우(잠재 고객별 데모, 새로운 기능, 도움말 아티클).
• 원본 영상이 아닌 완성된 내레이션 영상이 필요한 경우. 스크립트는 무음 화면 캡처만 제공하며, 내레이션, 줌, 편집은 직접 해야 합니다.

두 가지 접근 방식은 잘 결합됩니다. Clevera는 무음 녹화본을 포함한 업로드된 영상을 지원하므로, 팀이 CI에서 Playwright로 흐름을 녹화하고 파일을 업로드하여 내레이션이 포함된 사용 방법 가이드나 데모를 생성할 수 있습니다.

화면 녹화 없이 제품 데모를 만드는 다른 방법#

깔끔한 영상을 얻으려면 정돈된 계정, 클릭하면서 따라갈 스크립트, 실수 없는 진행이 필요하며, UI가 변경될 때마다 다시 녹화해야 합니다. AI 레코더는 웹 앱에 대해 이러한 번거로움을 제거합니다. 적합하지 않은 경우, 녹화가 필요 없는 다른 옵션이 있습니다:

덱, PDF 또는 스크린샷 활용#

기능이 아직 출시되지 않았거나, 앱이 공개되지 않았거나, 웹 앱이 아닐 때 사용하세요. PDF 덱이나 스크린샷을 업로드하고, '새 기능'과 같은 데모 유형을 선택한 후 지침 한 줄("기존 관리자 대상, 90초 이내")을 추가하세요. 슬라이드 텍스트가 Clevera가 작성하고 음성을 입힐 내레이션을 안내하므로, 구체적인 문구("클릭 한 번으로 모든 보고서를 CSV로 내보내기")가 슬로건보다 효과적입니다. 데스크톱 앱의 경우, 잘 선택된 8~10개의 스크린샷으로 명확한 내레이션 워크루를 만들 수 있습니다. 제한 사항: 실시간 클릭이나 커서가 없으므로 "여기를 클릭하세요" 식의 교육 영상보다는 출시 미리보기에 더 적합합니다.

URL 또는 몇 문장 활용#

소셜 미디어, 광고 또는 랜딩 페이지 상단용 짧은 클립의 경우, Clevera의 소셜 및 프로모션 유형(Starter 이상, 베타)은 영상이 필요 없습니다. 링크를 붙여넣으면 Clevera가 페이지에서 제품 정보, 스크린샷, 로고를 가져오거나, 몇 문장으로 제품을 설명하면 AI가 음악과 함께 모션 그래픽으로 클립을 작성하고, 유형에 따라 내레이션을 추가합니다. 제품 투어, 기능 집중 조명, 기능 발표는 데모와 가장 유사한 유형이며, AI 아바타 유형(Starter 이상, 베타)은 발표자를 추가합니다. 이는 교육용이 아닌 홍보용으로, 실제 워크플로가 아닌 제품이 무엇인지 보여줍니다.

아바타 및 인터랙티브 데모 도구#

HeyGen과 같은 아바타 도구는 스크립트나 제품 링크를 발표자 중심 영상으로 변환합니다. 소프트웨어의 경우 화면 영상은 어딘가에서 가져와야 합니다. Arcade나 Supademo와 같은 인터랙티브 도구는 영상 대신 클릭형 데모를 생성하지만, 이를 캡처하려면 누군가 제품을 직접 클릭해야 합니다. 인터랙티브 데모와 제품 영상 비교에서 각각의 전환율이 더 높은 경우를 확인하세요.

작업별 적합한 방법#

2026년 10월 테스트에서 차이는 분명했습니다. 위에서 언급한 AI 레코더 실행과 55초짜리 제품 개요는 11 크레딧이 소요되었고 실제 클릭을 보여주었습니다. clevera.ai에서 '웹사이트 조사'로 생성한 35초짜리 기능 집중 조명은 96 크레딧이 소요되었고, 약 7분이 걸렸으며, 게시 전에 수정해야 할 관련 없는 장면으로 시작되었습니다. 실제 영상이 더 저렴하고 데모에 가까웠습니다. 프로모션 클립은 워크루가 아닌 도달 범위를 위한 것입니다.

시작 전 알아야 할 제한 사항#

• 웹 전용. AI 레코더는 클라우드 브라우저에서 웹사이트와 웹 앱을 기록합니다. 데스크톱 소프트웨어나 네이티브 모바일 앱은 기록하지 않습니다. 데스크톱 흐름이나 직접 클릭하고 싶은 웹 흐름은 Clevera 데스크톱 앱(macOS 또는 Windows)을 사용하세요.
• 접근 가능한 앱 전용. localhost, VPN 전용 스테이징 또는 IP 허용 목록 도구는 사용할 수 없습니다.

지원 팀이 매주 설명하는 흐름 하나를 데모 계정에서 시작하세요. 모든 버튼의 이름을 명시한 번호가 매겨진 지침을 사용합니다. 첫 번째 실행을 지켜보고 직접 개입해야 했던 부분을 기록한 뒤, 다음 실행을 위한 지침에 해당 내용을 반영하세요.

FAQ#

화면을 전혀 녹화하지 않고 제품 데모를 만들 수 있나요? 네. AI 레코더가 클라우드 브라우저에서 공개 웹 앱을 대신 기록해주며, PDF 덱이나 스크린샷은 녹화가 필요 없고, URL이나 프롬프트만으로 프로모션 스타일의 클립을 만들 수 있습니다.

데모에 실제 고객 데이터가 포함되지 않게 하려면 어떻게 하나요? 운영 환경의 관리자 계정이 아닌, 실제와 유사한 가짜 데이터가 채워진 전용 데모 계정(1단계)을 에이전트에 지정하세요.

AI 레코더는 데스크톱 소프트웨어와 작동하나요? 아니요. 웹사이트와 웹 앱만 기록합니다. 데스크톱 소프트웨어의 경우 Clevera 데스크톱 앱으로 녹화하거나 스크린샷으로 데모를 만드세요.

무료로 데모를 만들 수 있나요? 무료 플랜에는 최대 3분 길이의 사용 방법 영상, 제품 데모, 기사가 포함되며 링크나 임베드로 공유할 수 있습니다(MP4 다운로드는 Starter 플랜부터 가능). AI 녹화는 모든 플랜에서 크레딧을 사용하며, 소셜 및 프로모션 클립과 AI 아바타 기능은 Starter 플랜 이상이 필요합니다.