화면 녹화 도구
화면, 창 또는 탭 녹화, 음성 녹음 지원, 원클릭 비디오 다운로드
녹화 미리보기
온라인 화면 녹화란?
온라인 화면 녹화 도구는 브라우저에서 화면, 애플리케이션 창 또는 브라우저 탭을 녹화하는 데 도움이 됩니다. 시스템 소리와 마이크 녹음을 지원합니다. 어떠한 소프트웨어도 설치할 필요가 없으며, 녹화 완료 후 비디오 파일을 직접 다운로드할 수 있습니다. 모든 처리는 로컬에서 완료되며, 귀하의 개인정보를 보호합니다. 화면 녹화는 브라우저 권한, 운영체제 설정, 탭 오디오 지원 여부에 영향을 받습니다. 민감한 창, 알림, 개인정보가 함께 녹화되지 않도록 시작 전에 화면 구성을 확인해야 합니다.
사용 방법
사용 방법
- 녹화 대상을 선택하세요: 전체 화면, 창, 브라우저 탭
- 오디오 설정을 선택하세요 (선택 사항)
- 「녹화 시작」을 클릭한 뒤 공유할 대상을 선택하세요.
- 완료되면 「녹화 중지」를 클릭하세요.
- 녹화를 다운로드하거나 미리보기하세요.
팁
- 녹화 전 불필요한 알림을 모두 닫아 주세요.
- 시스템 오디오를 함께 녹화하려면 「브라우저 탭」을 선택하고 「오디오 공유」를 체크하세요.
- 녹화 중 일시 정지 및 재개가 가능합니다.
- 원활한 녹화를 위해 안정적인 네트워크 환경을 사용하세요.
활용 사례
기술 원리
캡처는 navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })로 시작됩니다. 이 API는 선택한 화면, 창 또는 탭에 해당하는 비디오 트랙 하나와, 브라우저 및 소스가 허용할 경우 오디오 트랙 하나를 포함하는 MediaStream을 반환합니다. 사용자는 네이티브 선택 대화 상자에서 표면을 선택하며, 사용자가 시스템의 '공유 중지' 버튼을 클릭하면 스트림이 자동으로 종료됩니다. 이때 트랙의 ended 이벤트가 발생하여 레코더가 파일을 마무리할 수 있습니다. 인코딩된 출력은 MediaRecorder API에 의해 생성됩니다. 컨테이너 및 코덱 선택은 video/webm;codecs=vp9,opus, video/webm;codecs=vp8,opus, Safari의 경우 video/mp4;codecs=avc1 같은 후보에 대해 MediaRecorder.isTypeSupported()를 통해 이루어집니다. ondataavailable은 주기적으로(또는 중지 시) 발생하여 Blob 조각을 전달하며, 이 조각들은 협상된 mimeType으로 단일 Blob에 연결됩니다. videoBitsPerSecond와 audioBitsPerSecond는 품질과 파일 크기의 균형을 조절하며, 4Mbps VP9로 녹화한 일반적인 1080p 화면 녹화물은 분당 약 30MB입니다. 시스템 오디오와 마이크를 모두 요청한 경우, 페이지는 AudioContext를 생성하고 각 MediaStreamTrack을 MediaStreamAudioSourceNode로 감싼 뒤, GainNode를 통해 MediaStreamAudioDestinationNode로 혼합합니다. 합쳐진 오디오 트랙은 MediaRecorder 시작 전에 원본 스트림을 대체하므로, 결과 WebM에는 두 개의 별도 트랙 대신 하나의 혼합 Opus 트랙이 포함됩니다. 브라우저 지원은 Chrome 72+, Firefox 66+, Safari 13+ 이상이 필요하며, 이전 브라우저는 getDisplayMedia를 거부하거나 오디오 제약 조건을 생략합니다.
- 캡처 API: navigator.mediaDevices.getDisplayMedia({ video, audio })는 MediaStream을 반환하며, 사용자가 시스템 대화 상자에서 화면/창/탭을 선택합니다
- 인코더: MediaRecorder는 isTypeSupported()로 video/webm;codecs=vp9,opus를 먼저 탐색하고, vp8 또는 Safari의 H.264/AVC1 MP4로 대체합니다
- 청크 출력: ondataavailable은 Blob 조각을 생성하며, 이를 연결하여 협상된 mimeType의 단일 Blob으로 래핑합니다
- 오디오 믹싱: AudioContext + MediaStreamAudioSourceNode + GainNode + MediaStreamAudioDestinationNode가 시스템 오디오와 마이크를 하나의 Opus 트랙으로 병합합니다
- 스트림 종료 트리거: 사용자가 브라우저의 '공유 중지' 표시줄을 클릭하면 비디오 트랙의 ended 이벤트가 발생하여 녹화를 마무리합니다
- 비트레이트 제어: 1080p의 경우 videoBitsPerSecond는 약 2.5~8Mbps이며, 4Mbps VP9는 분당 약 30MB입니다
- 브라우저 기준선: Chrome 72+, Firefox 66+, Safari 13+ 이상; 탭 오디오 캡처는 Chromium 기반 브라우저에서 '탭 오디오 공유' 체크박스를 통해서만 작동합니다
예시
1080p 10분 소프트웨어 튜토리얼
소스: 전체 화면 (1920 x 1080)
오디오: 마이크만
코덱: video/webm;codecs=vp9, opus
프레임 레이트: 30 fps
시간: 10:00
출력: tutorial.webm, 약 190 MB
용도: 제품 사용법 안내, LMS 업로드시스템 오디오 포함 버그 재현
소스: 브라우저 탭 (Chrome)
오디오: 시스템 오디오 (대화 상자에서 탭 오디오 공유)
코덱: video/webm;codecs=vp8, opus
시간: 0:45
출력: bug-repro-2026-06-10.webm, 7.2 MB
첨부: GitHub 이슈 #1284마이크 + 시스템 오디오 온라인 미팅 클립
소스: 애플리케이션 창 (Zoom)
오디오: 시스템 + 마이크 (둘 다)
시간: 3:20
출력: meeting-snippet.webm, 42 MB
참고: 1:15에 일시정지로 자격 증명 입력 부분을 건너뛴 후 재개앱 스토어용 제품 데모
소스: 애플리케이션 창 (1280 x 720)
오디오: 없음 (나중에 자막을 입힐 무음 데모)
프레임 레이트: 30 fps, 비트레이트: 4 Mbps
시간: 0:30
출력: demo.mp4 (H.264 지원 시) 또는 .webm 폴백
크기: 약 15 MB, 앱 스토어 미리보기 용량 제한 충족자주 묻는 질문
스크린 레코더는 어떻게 동작하나요?
getDisplayMedia에서 가져온 화면 공유 MediaStream에 브라우저의 MediaRecorder API를 적용합니다. 브라우저가 무엇을 공유할지(전체 화면 / 창 / 탭) 묻고, 페이지는 메모리상의 비디오 blob에 프레임을 기록한 뒤 정지하면 다운로드를 제공합니다. 녹화 서버나 클라우드, 업로드는 없습니다.
어떤 포맷과 코덱을 쓰나요?
WebM 컨테이너에 VP8 또는 VP9 비디오 코덱(브라우저 지원에 따라), 오디오는 Opus입니다. 대부분의 최신 브라우저, 동영상 편집기, 플레이어가 WebM을 기본 지원합니다. MP4가 필요하면 다운로드 후 FFmpeg으로 로컬에서 변환하세요.
시스템 오디오도 포함할 수 있나요?
일부 브라우저/OS는 getDisplayMedia 동안 탭 오디오나 시스템 오디오 캡처를 허용합니다. Windows의 Chrome이 가장 관대하고, Safari와 Firefox는 더 제한적입니다. 마이크 오디오(목소리)는 권한을 허용하면 별도로 녹음됩니다.
최대 녹화 시간은 얼마나 되나요?
녹화는 정지 전까지 RAM에 저장되므로 브라우저 메모리가 한계입니다. 실용적인 한도는 해상도와 비트레이트에 따라 10~60분 정도. 더 길거나 고품질의 화면 녹화가 필요하면 OBS Studio(데스크톱)가 더 적합합니다. 디스크로 직접 스트리밍해 메모리 한계가 없습니다.
녹화본이 어디론가 업로드되나요?
아니요. 녹화는 브라우저 로컬에 머무릅니다. 다운로드하면 WebM 파일이 기기에 저장됩니다. 직접 공유하지 않는 한 서버로 전송되는 정보는 없습니다.
녹화가 끊기거나 화질이 낮아요. 왜 그럴까요?
화면 캡처와 재인코딩은 CPU를 많이 씁니다. 다른 앱을 닫고, 가능하면 녹화 해상도를 낮추고, 전체 화면 대신 창이나 탭 하나만 선택하세요. 지원되는 환경에서는 하드웨어 인코딩(WebCodecs API의 h264)이 도움이 되지만 아직 보편적이지는 않습니다.
녹화본을 자르거나 편집할 수 있나요?
이 도구에서는 안 됩니다. WebM 파일을 다운로드한 뒤 동영상 편집기(DaVinci Resolve, Shotcut, FFmpeg 명령줄 등)로 자르고 변환하거나 주석을 다세요.