안되네요 ㅠㅠ

    .ilbuni.zoom {
      transform: scale(2);
      border: 2px solid red;
    }


  <script type="text/javascript">
    (function() {


        const outputElem = document.querySelector('.output');
        const ilbuniElem = document.querySelector('.ilbuni');
        let num=0;

        function showValue() {
          let posY = ilbuniElem.getBoundingClientRect().top;
          outputElem.innerHTML = posY;
          // console.log(window.innerHeight);
          if (posY<window.innerHeight * 0.2) {
            ilbuniElem.classList.add('zoom');
          } else{
            ilbuniElem.classList.remove('zoom');

          }
        }


        window.addEventListener('scroll', function () {
            showValue();
        });


        showValue();


        })();
  </script>

똑같이 작성했는데 이미지 크기가 변하지 않아요
확인해보려고 줌 클래스에 보더값을 추가했는데 보더값은 반응해서 나오더라구요.

혹시 삽입된 그림이 크거나 뭔가 호환상에 따라서 안될수도 있는건가요??

그리고
let num=0;  이값은 영상에서는 설명이 없던데 갑자기 왜 넣으신걸까요?

그리고 이벤트리스너 부분을 아래처럼 변경 해도 똑같이 값이 나오는데 이대로 써도 문제없는건가요?
window.addEventListener('scroll', showValue);

설명 부탁드립니다 선생님~