설치하고 싶게 만드는 브라우저 확장·플러그인 데모 녹화법

브라우저 확장은 데모하기 어렵습니다. 제품 전체가 300픽셀짜리 팝업, 16픽셀짜리 툴바 아이콘, 그리고 남이 만든 페이지에 생기는 약간의 변화 안에 담겨 있습니다. 자랑할 앱 창도, 스플래시 화면도, 대시보드도 없습니다. 그런데도 확장 데모 영상은 관심을 가진 방문자와 설치 사이에 놓인 유일한 관문인 경우가 많습니다.

다행히 어려움의 형태는 늘 예측 가능합니다. 확장 데모가 어디서 무너지는지 알고 나면, 짧은 녹화로도 놀랄 만큼 설득력 있는 영상을 만들 수 있습니다.

확장 데모가 특별한 이유

대부분의 화면 녹화 조언은 제품이 창 전체를 차지한다고 가정합니다. 확장은 그렇지 않습니다. 그래서 네 가지가 달라집니다.

• UI가 아주 작습니다: 팝업, 배지, 컨텍스트 메뉴는 화면의 일부에 불과해서 기본 구도로는 보이지 않습니다
• 호스트 페이지가 무대입니다: 무엇이 바뀌었는지 보기 전에, 어떤 사이트를 개선하는지 알아볼 수 있어야 합니다
• 가치는 ‘차이’입니다: 기능을 보여주는 게 아니라, 더 좋아진 페이지를 보여주는 것입니다
• 설치도 제품의 일부입니다: 권한 요청과 아이콘 고정은 신규 사용자가 가장 먼저 만나는 화면이고, 실제 이탈이 발생하는 지점입니다

이 네 가지를 중심으로 녹화를 계획하면 나머지는 평범한 작업입니다.

먼저 깨끗한 데모 프로필을 만드세요

평소 쓰는 브라우저에서 확장 데모를 녹화하지 마세요. 녹화 전용 프로필을 따로 만들고 그것만 사용하세요.

• 툴바를 비웁니다: 다른 확장 아이콘은 모두 내 아이콘과 경쟁합니다. 제거하거나 숨기세요
• 내 확장만 고정합니다: 텅 빈 툴바에 아이콘 하나면 혼동할 여지가 없습니다
• 개인 계정에서 로그아웃합니다: 프로필 사진, 이름, 이메일은 생각보다 많은 프레임에 등장합니다
• 북마크와 북마크 바를 정리합니다: 아니면 데모용으로 안전한 북마크로 교체하세요
• 새 탭 페이지를 초기화합니다: 기본 새 탭 화면은 방문 기록을 썸네일로 보여주는 경우가 많습니다
• 관련 없는 알림을 끕니다: 브라우저와 OS 양쪽 모두
• 확대 수준을 맞춥니다: 페이지 확대는 100%, 창 크기는 내보낼 화면 비율에 맞추세요

한 번 설정한 뒤 프로필을 저장해 두세요. 이후 모든 녹화가 같은 상태에서 시작되고, 영상들이 하나의 시리즈처럼 일관되게 보입니다.

올바른 캡처 모드 선택하기

합리적인 선택지는 세 가지이고, 브라우저 UI가 중요한지에 따라 달라집니다.

• 윈도우 캡처: 확장 데모의 기본값입니다. 아이콘과 배지가 있는 툴바가 보이고, 바탕화면과 독도 가려집니다
• 영역 캡처: 팝업과 그 영향을 받는 페이지 부분만 타이트하게 담을 때 좋습니다. 짧은 소셜 클립에 유용하지만 툴바가 잘려서 UI의 위치 감각이 사라집니다
• 전체 화면: 브라우저 밖의 무언가를 보여줘야 할 때만 사용하세요. 네이티브 파일 대화상자, OS 권한 요청, 확장이 연동되는 다른 앱 같은 경우입니다

대부분의 데모는 브라우저 창을 16:9에 가까운 크기로 녹화하고, 클로즈업은 중간에 캡처 모드를 바꾸는 대신 에디터의 줌 효과로 처리하는 것이 좋습니다.

설치 흐름을 솔직하게 보여주세요

설치 과정을 건너뛰고 이미 작동하는 확장부터 보여주고 싶은 유혹이 있습니다. 적어도 한 편의 영상에서는 반대로 하세요. 신규 사용자는 권한을 걱정하고, 누군가 그 화면을 무사히 지나가는 모습은 큰 안심이 됩니다.

• 스토어 페이지나 설치 버튼에서 시작하세요: 실제 사용자가 지나는 경로 그대로
• 권한 대화상자를 숨기지 마세요: 그대로 띄우고, 왜 필요한지 한 문장으로 설명하세요. “이 사이트의 가격 정보를 읽기 때문에 접근 권한이 필요합니다”는 의심이 생기기 전에 답을 줍니다
• 아이콘 고정 단계를 보여주세요: 많은 사용자가 설치 후 확장을 찾지 못합니다. 10초짜리 고정 시연이 수많은 문의를 줄여줍니다
• 새 프로필을 써서 실제 흐름을 재현하세요: 이미 허용된 권한은 대화상자를 조용히 건너뛰어 영상이 사실과 달라집니다

기능만 보여주는 짧은 클립이 필요하다면, 전체 워크스루를 훼손하는 대신 같은 녹화에서 따로 잘라 쓰세요.

작은 UI를 읽히게 만들기

확장 데모의 승패가 갈리는 지점입니다. 팝업은 내 모니터에서도 작고, 휴대폰에서는 거의 보이지 않습니다.

• 팝업이 열릴 때마다 줌: 팝업이 열려 있는 동안 그 지점을 중심으로 확대하는 것이 확장 영상에서 가장 가치 있는 편집입니다
• 배지가 바뀔 때 툴바 아이콘을 줌: 숫자가 0에서 12로 바뀌어도 읽히지 않으면 의미가 없습니다
• 커서를 강조하세요: 16픽셀 아이콘 클릭은 그냥 두면 보이지 않습니다. 커서 강조와 클릭 효과가 상호작용 지점을 알려줍니다
• 팝업을 열고 잠시 멈추세요: 마우스를 움직이기 전에 1초를 주세요. 작은 UI에서의 움직임은 압축 후 흐릿하게 보입니다
• 확대할 수 없는 라벨은 텍스트 오버레이로: 10픽셀 글자를 들여다보게 하는 것보다 짧은 캡션이 낫습니다
• 호버 툴팁에 의존하지 마세요: 작고 느리고, 녹화에는 아예 안 잡히는 경우가 많습니다. 라벨은 말로 읽어주세요

전후 비교로 구성하세요

확장은 기존 경험을 개선하는 제품이니, 불편함부터 보여주세요.

1. 확장 없는 페이지를 5~10초 보여줍니다. 수동 작업, 없는 정보, 번거로운 단계
2. 확장을 켜거나 아이콘을 클릭합니다. 눈에 보이게
3. 같은 페이지가 바뀐 모습을 보여줍니다. 가능하면 같은 구도로, 차이가 분명하게
4. 현실적인 작업 하나를 처음부터 끝까지 그 기능으로 수행합니다
5. 설치 경로와 설정 위치로 마무리합니다

1번과 3번의 구도를 똑같이 유지하면 많은 일이 자동으로 해결됩니다. 시청자가 1분 전 페이지를 기억해내려 애쓰는 대신 두 프레임을 바로 비교하게 되기 때문입니다.

녹화·내보내기 설정

• 30fps로 충분합니다: 페이지 상호작용과 팝업 UI에는 넉넉하고, 글자는 선명하며 파일은 작게 유지됩니다
• 네이티브 해상도로 녹화하세요: 작게 녹화해 확대하지 말고, 크게 녹화한 뒤 에디터에서 자르거나 줌하세요
• 브라우저 창 크기를 고정하세요: 녹화 중 크기를 바꾸면 페이지가 재배치되고 줌 키프레임이 망가집니다
• 확장이 소리를 낸다면 시스템 오디오도 녹음, 아니면 마이크만
• 웹용은 1080p로 내보내고, 가장 좋은 20초는 세로 비율로 따로 잘라 소셜용으로 준비하세요

녹화 전 체크리스트

[ ] 데모 브라우저 프로필 활성화, 다른 확장 숨김
[ ] 내 확장만 툴바에 고정
[ ] 개인 계정 로그아웃, 새 탭 페이지 정리
[ ] 호스트 페이지에 데모 데이터 준비
[ ] 페이지 확대 100%, 창 크기는 내보내기 비율에 맞춤
[ ] 설치 흐름을 보여줄 경우 권한 미허용 상태 유지
[ ] 알림 끄기, 알림 배지 정리
[ ] 10초 테스트 녹화를 휴대폰 크기로 확인

흔한 실수

• 다른 확장 15개가 깔린 브라우저에서 데모: 어떤 아이콘이 내 것인지 알 수 없습니다
• 줌을 전혀 쓰지 않음: 확장 영상이 실패하는 가장 흔한 이유입니다
• 권한 요청 화면을 잘라냄: 무언가 숨기는 것처럼 보입니다
• 실제 로그인 계정 사용: 다시 꼼꼼히 보지 않을 프레임으로 개인정보가 새어 나갑니다
• 마우스를 움직이며 팝업을 설명: 하나씩 순서대로 하세요
• 호스트 페이지 맥락 생략: 어떤 사이트인지 알아야 무엇이 바뀌었는지 관심이 생깁니다

마무리

확장 데모는 2분 안에 두 가지를 해내야 합니다. 설치가 안전하고 간단하다는 것을 보여주고, 작은 UI가 의미 있게 느껴지도록 만드는 것입니다. 첫 번째는 깨끗한 프로필이 해결합니다. 두 번째는 줌 효과, 커서 강조, 그리고 촘촘한 전후 비교 구성이 해결합니다. 브라우저 창을 녹화하고, 화면을 흔들지 말고, 팝업마다 확대하고, 바뀐 페이지가 직접 설득하게 두세요.