Rocky 's Blog

프로젝트 소개

어떤 프로젝트를 진행하고 있었는가?

Plum은 비대면 강의의 단방향 소통 문제를 해결하기 위해 만든 실시간 화상 강의 서비스다. WebRTC 기반의 mediasoup를 사용해 발표자와 참여자가 실시간으로 영상과 음성을 주고받을 수 있도록 구현했다.

참여자는 자신의 카메라와 마이크를 자유롭게 켜고 끌 수 있어야 했다. 단순한 토글 기능처럼 보였지만, 하드웨어 자원을 어떻게 제어하느냐에 따라 성능과 사용자 경험이 크게 달라졌다.

문제 발견

어떤 문제를 발견했는가?

하지만 카메라에서 문제가 드러났다. 카메라 UI가 OFF 상태임에도 노트북 LED가 계속 켜져 있었다. 사용자 입장에서는 "카메라를 껐는데 왜 LED가 켜져 있지?" 라는 불안감을 느낄 수밖에 없었다. UI 상태와 하드웨어 상태가 일치하지 않는 것은 서비스 신뢰도 문제로 직결됐다.

카메라와 마이크를 어떻게 제어하고 있었는가?

카메라와 마이크를 끌 때 하드웨어 권한은 유지하되, 서버로의 미디어 송출만 중단하는 방식으로 구현했기 때문이다. 장치를 껐다 켤 때 초기화 과정이 없으니 반응이 즉각적이었고, 마이크의 경우 음소거 해제 시 발언 앞부분이 잘리는 일도 없었다. 하지만 이 방식은 카메라 LED를 끄지 못한다는 문제가 있었다.

해결 과정

시도한 방법: 하드웨어 권한 해제

어떤 방식으로 해결하고자 했는가?

LED 문제의 원인은 명확했다. 카메라를 껐음에도 하드웨어 권한이 유지되고 있었기 때문이다. 이를 해결하기 위해 카메라를 끄면 즉시 track.stop()을 호출해 하드웨어 권한을 완전히 반환하는 방식을 적용했다. 카메라 권한이 해제되면 브라우저가 하드웨어를 더 이상 점유하지 않아 LED가 즉시 꺼졌다.

어떤 한계가 존재했는가?

문제는 카메라를 다시 켤 때였다. 하드웨어 권한을 완전히 해제했기 때문에 재활성화 시 getUserMedia()를 다시 호출해 장치를 초기화해야 했다. 이 초기화 과정에서 짧은 지연이 발생했고, 화면이 검게 번쩍이는 현상이 나타났다. LED는 꺼졌지만 재활성화 시 시각적 불안정이라는 새로운 문제가 생겼다.

마이크에도 같은 방식을 적용해봤지만 다른 문제가 생겼다. 음소거를 해제하는 순간 getUserMedia()를 다시 호출하기 때문에 짧은 초기화 지연이 발생했고, 그 사이에 발언 앞부분이 잘리는 문제가 나타났다. 강의 흐름에서 발언 시작이 잘리는 것은 사용자 경험에 직접적인 불편을 줄 수 있다.

해결 방법: 미디어 타입별 전략 분리

어떤 방식으로 해결했는가?

두 번의 시도를 거치면서 카메라와 마이크가 서로 다른 우선순위를 가진다는 것을 깨달았다. 하나의 방식으로 두 미디어를 처리하려 했기 때문에 어느 쪽도 만족스럽게 해결할 수 없었던 것이다. 미디어 타입별로 다른 전략을 적용하기로 했다.

카메라는 시각적 신뢰성이 우선이었다. LED가 켜져 있으면 사용자는 감시당한다는 느낌을 받는다. 재활성화 시 번쩍임은 로딩 스피너로 완화할 수 있었고, LED 소등이 훨씬 중요하다고 판단해 하드웨어 자원을 완전히 해제하는 방식을 유지했다.

마이크는 즉각적인 반응성이 우선이었다. 음소거를 해제하는 순간 바로 송출이 시작되어야 발언 앞부분이 잘리지 않는다. 대화의 흐름을 끊지 않기 위해 하드웨어 권한을 유지하고 송출만 제어하는 방식을 유지했다.

결론

결과적으로 어떻게 개선됐는가?

카메라 OFF 시 track.stop()으로 하드웨어 권한을 해제해 LED가 즉시 소등됐다. UI 상태와 하드웨어 상태가 완전히 동기화되어 사용자가 카메라가 꺼졌다는 것을 명확하게 인지할 수 있게 됐다. 비디오 디코딩 리소스도 완전히 해제되어 브라우저 성능도 함께 안정화됐다.

마이크는 하드웨어 권한을 유지한 채 송출만 제어하기 때문에 음소거 해제 시 getUserMedia() 재호출 없이 즉시 반응했다. 발언 앞부분이 잘리는 문제가 완전히 해결됐다.

사용자 인식에 따라 같은 동작도 해결 방식이 달라진다.

카메라와 마이크는 같은 "끄기" 동작이지만, 사용자가 느끼는 신뢰 기준이 달라 전략도 달라야 한다. 카메라는 LED라는 물리적 신호로 상태를 인지하고, 마이크는 발언의 즉각적인 반응으로 상태를 인지한다. 같은 방식으로 처리하려 했기 때문에 두 번의 시도가 필요했다.

기술적으로 옳은 구현이 항상 올바른 UX를 보장하지는 않는다.

무엇을 먼저 개선할지 정의하지 않으면 기술적으로 올바른 구현도 UX를 해칠 수 있다. 하드웨어 완전 해제는 기술적으로 올바른 접근이었지만, 마이크에 적용했다면 발언 앞부분이 잘리는 문제가 생겼을 것이다. 미디어 타입별로 무엇을 우선해야 하는지를 먼저 정의했기 때문에 올바른 방향으로 설계할 수 있었다.