[JS] Chrome Extension - 유데미 한글 자막 오류 수정하기

오늘 저번에 제작한 크롬 확장인 '유데미 한글 자막'에 리뷰가 달렸다!

 

오예에에에에

 

처음 달려보는 리뷰라서 하루 종일 기분이 너무 좋았다.

내용을 보니

 

 

2줄 자막부터 영문과 한글이 겹쳐 보이는 현상이 있다는 내용과, 자막을 '동영상 아래 표시' 말고 영상에 겹쳐서 나오는 기능을 추가해 줬으면 좋겠다는 내용이었다.

 

테스트의 중요성을 다시 한번 느꼈다.

난장판

 

테스트할 당시에 자막이 한 줄짜리로 되어 있는 영상으로만 테스트해서 두 줄 이상 표시될 시 저렇게 난장판이 되는지 몰랐었다.

그래서 한 줄짜리 자막에는 영문과 한글이 같이 붙어 있는 게 보기 좋다고 margin-top을 음수 값을 줘서 서로 붙게 만들어 놨는데 그 부분이 이런 문제를 일으켰다.

 

margin-top 값이 문제가 되기 때문에 영문 자막의 높이를 가져와 한글 자막의 높이보다 높을 경우 margin-top 값을 지워주는 방향으로 만들어 보기로 하였다.

 

if (document.querySelector('.well--text--2H_p0.well--transition-active--35hDP') && document.querySelector('.koreanSubtitle').offsetHeight * 2 < document.querySelector('.well--text--2H_p0.well--transition-active--35hDP').offsetHeight) {
  document.querySelector('.koreanSubtitle').style.marginTop = '';
} else {
  document.querySelector('.koreanSubtitle').style.marginTop = '-2em';
}

 

이렇게.

지금 보니까 코드를 깔끔하게 짜는 방법을 좀 배워야겠다. querySelector가 너무 중구난방으로 쓰이고 있어 이걸 깔끔하게 정리해야 할 필요가 있을 것 같은데 어차피 혼자 만들고 혼자 수정하기 때문에 깔끔하게 할 생각을 하지 않았다. 이거는 조금 더 있다가 코드를 정리하는 쪽으로 진행해 봐야겠다.

 

아무튼 우선 if 문에서 영문 자막이 표시되어있는지 검사한다. 이게 없으면 자막이 나타나지 않는 틈에 에러를 발생시키고 인터벌을 종료시켜 버린다. 그다음 한글 자막과 영문 자막의 offsetHeight를 비교해서 검사하는데 한글 자막의 높이에 *2를 해준 이유는 영문 자막에는 padding이 들어가 있어 저렇게 검사해야 2줄 이상인지 아닌지 검사할 수 있었다.

 

그렇게 수정을 해보았는데...

떠들썩 떠들썩 들썩들썩 떠들썩

 

자막이 들썩들썩거리게 되었다.

그렇다고 margin-top을 아예 없애버리게 되면 한 줄만 표시되는 영상에서 한글 자막과 영문 자막의 틈이 너무 커서 보기가 싫었다.

 

그래서 선택한 방법은

 

 

한글 자막을 영문 자막 위로 올라가게 만들었다. 어차피 이걸 쓰는 사람은 한글 자막을 더 주로 보기 때문에 강의를 보는 입장에서도 이게 더 좋을 것 같았다. 

 

한 가지를 해결하였다.

 

다음은 화면 내에 표시되도록 하게 하는 부분이었는데 처음 만들 때 그냥 인터넷에서 본 소스가 하단부에만 표시되도록 되어 있어 귀찮아서 안 만들었던 것인데 막상 보니 그리 어렵지 않게 만들 수 있었다.

 

if (document.querySelector('.well--container--2edq4') !== null) {
  document.querySelector('.koreanSubtitle').textContent = currentText;
} else {
  let subtitleBox = document.querySelector('.captions-display--captions-cue-text--ECkJu');
  document.querySelector('.koreanSubtitle').textContent = null;
  subtitleBox.innerHTML = currentText + "<br>" + subtitleBox.innerHTML;
}

 

그냥 현재 하단 자막이 켜져 있는지 확인한 다음 하단 자막이 켜져 있지 않다면 화면 내부에 있는 자막 박스에 한글 자막을 넣어주면 끝이었다.

 

이런걸 왜 처음부터 안 만들어 놨는가

 

'동영상 아래 표시' 버튼을 끄게 되면 자막이 화면에 뜨게 된다.

 

수정 완료

 

이렇게 수정하고 크롬 웹 스토어에 다시 검토를 요청하였다. 저번처럼 또 하루 만에 승인을 내려줄지 모르겠다.

 

오늘 처음으로 리뷰를 받아 봐서 너무 신났고 테스트를 많이 해봐야 하는 필요성을 깨닫게 되었다.

 

 

앞으로 더 열심히 노력하자!