Zoom PoC - 화면 공유 중지 시 블랙 스크린 문제 해결

🐞 문제 상황

Zoom 연동 PoC 개발 중, 화면 공유를 중지했을 때 해당 공유 영역이 사라지지 않고 블랙 스크린처럼 남아 있는 현상이 발생했습니다.

기능 자체에는 문제가 없었지만, 사용자 입장에서 시각적으로 혼란을 줄 수 있는 상황이었습니다.

대략 이런 모습

🛠️ 원인 분석

화면 공유가 종료되어도 해당 DOM 요소(div)가 DOM 상에 계속 남아 있고, display 속성 등의 스타일 변경이 적용되지 않아 검은 화면처럼 보이는 현상이었습니다.

💡 해결 방법

PoC 기간 내에 빠르게 해결할 수 있는 방법이 필요했기 때문에, 스타일(display 속성)을 직접 제어하는 방식으로 처리했습니다.

화면 공유가 시작되면 display: 'inline'으로, 종료되면 display: 'none'으로 설정하여 DOM이 사라지도록 한 것입니다.

✅ 적용 코드

useEffect(() => {
  (async () => {
    if (props.member.useShareScreen) {
      if (props.shareScreenEL) {
        fnSet.shareScreenFn(props.shareScreenEL);
        // 화면 공유 시작 시: 요소 보이기
        props.shareScreenEL.style.display = 'inline';
      }
    } else {
      fnSet.stopShareScreenFn();
      if (props.shareScreenEL) {
        // 화면 공유 종료 시: 요소 숨기기
        props.shareScreenEL.style.display = 'none';
      }
    }
  })();
}, [props.shareScreenEL, props.member.useShareScreen]);

✨ 정리

화면 공유 상태에 따라 공유 요소의 display 속성을 직접 제어해주기만 하면 됩니다.
단순하지만 PoC 단계에서는 충분히 유효한 해결 방법이었습니다.