AI 영상면접: 완벽한 녹화를 위한 비법 (프론트엔드 편)

AI 기술의 발전으로 인해 면접 방식도 변화하고 있습니다. AI영상면접은 화상면접과 더불어 시간과 장소의 제약을 없애고, 공정하고 효율적인 채용과정을 가능하게 합니다. 그러므로 AI 영상면접이 성공적으로 정착되기 위해서는 서비스의 안정성과 녹화의 신뢰성이 매우 중요합니다.

AI 영상면접은 기업에 지원하는 취업 준비생 분들은 새로운 기술과 방법에 대한 불안감과 긴장감을 갖고 면접에 임하게 됩니다. 만약 기술적인 문제가 발생한다면, 면접을 준비하는 지원자는 불안할 수밖에 없습니다. 또한, 기업의 인사담당자 입장에서는 지원자가 부정행위를 하거나 잘못된 응시 환경(ex. 실외, 소음이 있는 환경, 얼굴을 가리고 응시 등)에서 면접을 진행하지 않을까 하는 걱정이 있을 수 있습니다.

따라서 AI 영상 면접의 안정성과 신뢰성은 지원자와 기업의 인사담당자 모두에게 중요한 요소입니다. 이를 위해 뷰인터HR 응시 담당 프론트엔드 개발자는 어떤 준비와 과정을 거쳐야 하는지, 그리고 무엇을 중요하게 여겨야 하는지 알아보겠습니다.

하드웨어를 사용하는 방법 🦾

영상면접을 볼 때, 꼭 필요한 두 가지가 있습니다. 바로 카메라와 마이크입니다. 영상면접을 진행하기 위해서는 두가지 하드웨어가 필수인데요. 브라우저에서 어떻게 하드웨어를 사용하는지 코드로 알아보겠습니다.

실제 사용하는 코드를 예시로 변경하여 보여드리면 다음과 같습니다.

async function getMedia(constraints) {
  let stream = null;

  try {
  /* 이제부터 카메라와 오디오를 사용하기 위해 장비 권한을 가져옵니다. */
    stream = await navigator.mediaDevices.getUserMedia({
	    audio: true,
	    video: true
    });
  } catch (err) {
    /* 에러 처리! */
  }
}

위 코드가 실행되면 여러분도 한 번쯤은 본 적 있는 얼럿창이 나타나게 됩니다. 카메라와 오디오를 사용해도 되는지 유저에게 권한을 요청하게 됩니다.

여기서 허용을 누르게 되면 마침내 카메라와 마이크 장비를 사용할 수 있게 됩니다. 정확히는 하드웨어의 미디어스트림을 우리가 사용할 수 있도록 코드로 가지고 온 것이죠.

이제 가져온 미디어 스트림을 어떻게 사용하는지 보면 다음과 같습니다. <video /> 비디오 태그의 srcObject에 stream을 넣어 줍니다. 그리고 onloadedmetadata 이벤트를 작성합니다. 비디오 태그에 stream 이 주입되어 사용할 수 있는 상태가 되면 play()를 하여 재생시킵니다.

   /* stream 을 사용 합니다. */
     const video = document.querySelector("video");
	    video.srcObject = stream;
	    video.onloadedmetadata = () => {
	      video.play();
	    };

이와 같은 과정을 수행하면 비디오 태그에 카메라를 통해 보이는 비디오와 마이크를 통해 입력되는 오디오를 확인할 수 있습니다.

전체 코드를 보면 다음과 같습니다.

async function getMedia(constraints) {
  let stream = null;

  try {
  /* 이제부터 카메라와 오디오를 사용하기 위해 장비 권한을 가져옵니다. */
    stream = await navigator.mediaDevices.getUserMedia({
	    audio: true,
	    video: true
    });
   const video = document.querySelector("video");
	    video.srcObject = stream;
	    video.onloadedmetadata = () => {
	      video.play();
	    };
  } catch (err) {
    /* 에러 처리! */
  }
}

녹화하는 방법 📸

우리는 하드웨어를 통해 얻은 스트림을 비디오 태그에 넣어 재생시키는 것까지 확인했습니다. 이제 녹화를 시작하고 일정 시간이 지난 후 정지를 하여 영상 데이터를 저장해야 할 것입니다.

뷰인터 HR은 Web API 인 MediaRecorder를 사용하여 녹화하고 있습니다. 아래 코드에서 녹화 시작부터 종료까지 확인할 수 있습니다.

  const mediaRecorder = new MediaRecorder(stream); // * MediaRecorder 를 선언하여 사용할 수 있는 변수에 담는다.
  let chunk = [];
  mediaRecorder.start(); // * 녹화를 시작합니다.
  mediaRecorder.onstart = () => {
	  // * 녹화가 시작되고 일을 수행할 수 있습니다.
  };
  
  await delay(10000) // * 10초 후에 정지를 한다고 가정
  mediaRecorder.stop();
  // * stop 을 호출하고 나면 ondataavilable 이 먼저 실행되고 그 뒤 onstop이 실행됩니다.
  mediaRecorder.ondataavilable = (blobEvent) => {
	  chunk.push(blobEvent.data);
  };
  mediaRecorder.onstop = () => {
	  const blob = new Blob(chunk, {type: 'video/webm'});
	  // * blob 을 이용하여 녹화된 비디오를 확인할 수 있습니다.
	  const url = URL.createObjectURL(blob);
    const video = document.querySelector("video");
    video.src = url;
    video.play();
  };

녹화된 데이터가 정상인게 당연하지 않나요? 🤔

우리가 작성한 코드대로 실행되면 정말 행복한 세상이겠지만, 현실은 그렇지 않았습니다. 하드웨어를 사용하기 때문에 너무나 다양한 환경적인 이유가 존재합니다. 일반적으로 하드웨어를 사용하는 순간부터 CPU 사용량이 한순간 높아집니다. 좋은 장비(ex. 방송용 기기)를 사용하려면 좋은 CPU가 뒷받침되어야겠지만, 그렇지 않은 경우에는 컴퓨터 리소스가 부족할 수도 있습니다. 사양이 좋지 않은 노트북에서 웹캠을 사용할 때도 마찬가지입니다. 이러한 하드웨어 적인 이유로 시스템이 불안정할 수 있습니다.

그로 인해 MediaRecorder API의 호출이 우리가 원하는 대로 작동하지 않는 경우도 있습니다.

뷰인터 HR은 어떻게 극복했나요?!

뷰인터 HR 응시 서비스에는 안정적인 비디오 촬영을 위해 여러 가지 방어로직이 추가되어 있습니다.

• 녹화 시작을 할 수 있는 상태 인가?
• 녹화 중 장비가 사라지지는 않았나?
• 실시간 녹화 중인 비디오에서 영상이 존재하는가?
• 녹화 중 페이지가 새로고침 되었는가?
• 녹화된 비디오의 재생시간과 녹화한 시간이 일치하는가?

나열되어 있는 극복방법 이외에도 영상을 업로드하기 전에 비디오와 오디오의 정합성을 검증하는 로직등 다양한 방어로직이 있습니다만, 회사의 기밀이라 이곳에서 밝힐 수는 없어 아쉽네요 🤫

응시 지원자들의 절실함이 담긴 소중한 데이터를 기업의 인사 담당자와 면접관에게 올바르게 전달하기 위한 노력이 쌓이다 보니 지금까지 발전할 수 있었다고 생각됩니다. 🤩

AI 영상면접을 개발하면서 쌓인 뷰인터 HR만의 노하우를 일부 소개해드렸는데요. 이러한 기술적 노하우와 준비 과정을 통해 우리는 더욱 안정적이고 신뢰할 수 있는 면접 환경을 제공합니다. 👍🏻

지원자들이 최상의 컨디션에서 면접에 임할 수 있도록 기술적인 부분에서 기여하고, 인사담당자와 면접관들이 공정하고 투명한 면접과정이 진행됨을 믿고 채용할 수 있도록 개선해 나가고 있습니다.

여러분의 소중한 의견과 피드백을 바탕으로 더욱 향상된 서비스를 제공할 것을 약속드립니다. 🙏🏻

Write 김영준 (제네시스랩 서비스개발실 웹프론트개발팀)
Review & Edit 최성원 (제네시스랩 마케팅)