브라우저 탭에서 짧은 제품 데모를 녹화하려면 OpenScreenShot Chrome 확장 프로그램의 녹화를 사용하세요. 탭 전체나 일부를 고르고, 마이크, 탭 오디오, 웹캠을 켠 뒤 데모를 녹화하세요. 그러면 편집기가 클릭마다 줌을 넣고, 테이크를 트리밍할 수 있게 해 주고, MP4로 내보내요. Firefox 버전은 스크린샷만 지원하고 레코더가 없어요.

데모를 녹화하는 단계

  1. 일반 브라우저 탭에서 데모를 준비하세요. 로그인하고, 샘플 데이터를 불러오고, 알림을 닫으세요. 브라우저 내부 페이지는 녹화할 수 없어요.
  2. 기본 설정에서는 툴바 아이콘을 클릭하면 스크린샷을 찍어요. 아이콘을 마우스 오른쪽 버튼으로 클릭하고 원클릭 Express 모드를 해제하면 다음 클릭에 팝업이 열려요.
  3. 팝업에서 녹화를 클릭하세요. 페이지 옆에 녹화 탭이 열려요. 처음에는 Chrome이 탭을 캡처할 권한을 한 번 물어봐요.
  4. 필요에 따라 마이크, 탭 오디오, 웹캠을 켜고 브라우저의 권한 요청을 허용하세요.
  5. 탭 전체를 그대로 두거나, 페이지 그림 위를 드래그해 일부만 녹화하세요.
  6. 녹화 시작을 클릭하세요. OpenScreenShot이 페이지로 전환돼요. 일정한 속도로, 의도가 분명하게 클릭하며 데모를 진행하세요.
  7. Alt+Shift+X를 눌러 중지하거나, 녹화 탭으로 돌아가 중지를 클릭하세요. 같은 탭에서 녹화 편집기가 열려요.
  8. 줌을 조정하고, 시작과 끝을 트리밍한 뒤 MP4 내보내기를 클릭하세요.

녹화 탭에는 일시중지/재개 버튼과 취소 버튼도 있어요. 녹화하는 페이지에는 아무것도 추가되지 않으므로 영상에 컨트롤이 보이지 않아요.

클릭할 때 줌

편집기는 커서가 클릭한 모든 지점에 부드러운 2배 줌을 넣어요. 타임라인에서 각 줌 블록을 조정하거나 삭제할 수 있어요. 줌 추가를 클릭하면 1.5배, 2배, 3배의 블록을 직접 넣을 수 있어요. 예를 들어 클릭 없이 바뀌는 숫자에 쓰세요.

클릭 효과가 클릭한 위치를 표시해요. 커서 설정으로 녹화된 경로를 따라가는 부드러운 포인터를 보여 주거나, 클릭만 보여 주거나, 포인터를 숨길 수 있어요.

데모가 다른 사이트로 넘어간다면 클릭 추적에 설정의 선택 권한인 여러 사이트에서 녹화가 필요해요. 이 권한이 없으면 툴바 배지가 주황색으로 바뀌고, 영상의 나머지 부분에서 줌과 클릭 효과가 멈춰요. 영상 자체는 계속 녹화돼요.

웹캠, 음성, 탭 오디오

웹캠은 둥근 버블로 내보낸 영상에 들어가요. 편집기에서 아무 모서리에나 놓거나, 크기를 바꾸거나, 숨길 수 있어요. 마이크 볼륨과 탭 볼륨을 따로 조절하는 슬라이더가 있어서, 제품 자체의 소리보다 목소리를 크게 유지할 수 있어요.

먼저 짧은 테스트 테이크를 녹화해 음량과 버블 위치를 확인하세요.

테이크 트리밍과 프레임

구간의 시작이나 끝에 있는 핸들을 드래그해 트리밍하세요. 실행 취소와 다시 실행이 타임라인에서 동작해요. 사이드 패널의 Beautify 패널은 영상 주위에 여백, 모서리, 그림자, 배경을 넣어요. 스크린샷 편집기가 제공하는 것과 같은 프레임이에요.

영상 내보내기

MP4 내보내기는 줌, 오디오 트랙, 웹캠 버블, 프레임을 넣어 테이크를 렌더링하고, H.264 비디오와 AAC 오디오로 된 MP4 파일을 다운로드해요. WebM 파일이 필요하면 버튼 옆의 선택기에서 WebM을 고르세요. 탭이 숨겨지면 렌더링이 일시정지되므로, 렌더링하는 동안 편집기 탭을 화면에 보이게 두세요.

MP4는 4096×2304 픽셀로 제한되므로, 그보다 큰 탭은 맞춰서 축소돼요. MP4 녹화를 지원하지 않는 브라우저는 WebM으로만 내보내요. 파일 이름은 설정의 파일 이름 템플릿을 따라요.

제한 사항과 저장

레코더는 브라우저 탭 하나를 캡처해요. 다른 창, 다른 앱, 데스크톱은 녹화하지 않아요. 브라우저 내부 페이지나 보호된 페이지는 녹화할 수 없어요.

녹화, 커서 기록, 웹캠과 마이크 스트림은 삭제하기 전까지 기기의 브라우저 저장소에 남아요. 내보낸 후 녹화 삭제를 켜면 파일이 저장된 뒤 테이크를 지워요. 내보낸 파일을 공유하지 않는 한 아무것도 업로드되지 않아요.

녹화 레퍼런스에 모든 컨트롤이 있어요. 같은 버그나 기능의 정지 이미지는 버그 리포트용 스크린샷을 참고하세요.