티스토리 자바 스크립트로 & nbsp 없애기 - 박스로 표시되는 문제

티스토리 블로그를 일년 전부터 꼼꼼히 관리하지 않았더니.. 최근에 작은 엑스박스, 혹은 text 엑박이 군데 군데 나타나는 버그가 있다는 것을 발견했습니다. 블로그 경험을 확 안좋게 하는 버그인데요.. 카테고리의 다른글 소개하는 부분에도 끝에 두개가 겹쳐 나오고 있었습니다. 

&nbsp 공백문자 때문에 엑스박스가 발생한 모습

html 모드로 자세히 보면 해당 부분에 &nbsp로 공백 코드가 들어가 있는데 이게 공백으로 처리 안되고 엑스박스로 나오는 것 같습니다. &nbsp는 여러가지 이유로 들어가는 데.. 대표적으로 티스토리에서 붙여넣기 하면 자동으로 들어가는 것으로 알려져 있습니다. 

전에는 &nbsp가 들어가 있어도 공백으로 잘 보였는데.. 최근에 업데이트하며 무슨 이유에서인지.. 구형 스킨에서 엑스박스로 보이는 문제가 발생한 것 같습니다. 다른 티스토리 블로그 돌아다녀 보면 별 문제가 없어 보입니다. 워낙 왓에버 스킨을 변형해 놔서 새로 다운 받을 수도 없고.. &nbsp를 없애는 방법을 알아 봤습니다. 

구글링 해보면 구독자님 중에 avada 님이 자바스크립트를 이용해 제거하는 해법을 올려 놓으신 글이 있습니다. https://avada.tistory.com/2476 이글 참고하시면 되고.. 

다만 살짝 에러가 있어 그대로 사용하면 작동을 안하더라구요. 왓에버 스킨에서는 백슬래시가 문제를 일으키는 것 같았습니다. 이것을 지웠더니 아래처럼 모든 &nbsp가 정상적으로 완벽히 제거되었습니다. 

엑스박스가 깔끔하게 제거된 모습

부작용 문제로 메인 커버에서 자동 슬라이드 넘어가는 것과 충돌이 발생하네요. 새로 추가한 코드를 지우면 슬라이드가 작동합니다. 그래서 이것 저것 위치를 조정해 봤더니.. 백슬래시가 있어도 잘 작동합니다. 무슨 조화가 발생하는지 모르겠습니다. 백슬래시 문제는 큰 것 같지 않고..

<script> // &nbsp 없애기
	var options = document.getElementsByClassName('inner') 
	for (index = 0; index < options.length; ++index) { 
		options[index].innerHTML = options[index].innerHTML.replace(/&nbsp;/g, ' '); 
		}
</script>

자동 슬라이드 문제는 &nbsp 없애는 범위를 article에서 본문에 해당하는 inner로 변경하니 해결되었습니다. inner 부분을 적당한 class name이나 tag name, id 등으로 수정해 주면 되겠습니다. 아래는 위 코드에서 다른 스킨에 적용한 예입니다.

var options = document.getElementsByTagName('main')

위의 수정된 스크립트를 복사해서 티스토리 html 편집의 </body> 태그 위에 붙여넣기 하면 됩니다. 

그럼 비슷한 문제로 고통받는 분들께 도움이 되었으면 좋겠습니다.

(추가 2022/8/24) 결국 문자 엑스박스가 생기는 이유는 &nbsp를 공백으로 처리 못하는 특정 폰트의 이슈였던 것 같습니다. 나눔고딕 폰트를 안쓰고 원래 default 폰트를 쓰면 해당 문제가 발생하지 않습니다. 아래 css 부분 참고하기 바랍니다.

/* @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

그래서 원래 폰트로 돌아가거나.. 스크립트를 이용해 &nbsp를 정상으로 보이게 하거나.. 둘 중에 하나를 선택하면 될 것 같습니다.