[Jekyll] NBSP와 ZWSP으로 인한 렌더링 문제 해결하기

문제 상황

Jekyll로 만든 블로그에 게시글을 포스팅하여 올리다 보면 인터넷의 자료를 긁어서 IDE에 붙혀넣기 한 후 수정할 때가 있다. 어느 때에는 제대로 표시되지만 어느 때에는 개행이나, 스크립트, 레이아웃이 제대로 적용되지 않은 채 렌더링 되는 경우가 발생한다. 내용에 문제가 있나 싶어서 포스팅 할 때 사용하는 Visual Studio Code를 사용하여 아무리 살펴봐도 표시되는 별 다른 내용은 없다.

문제 원인

문제의 원인은 간단하다. NBSP와 ZWSP 때문이다.

• NBSP(Non-Breaking Space) : 눈에 보이는 공백을 추가하고 줄바꿈을 적절히 처리하도록 만든다.
• ZWSP(Zero-Width Space) : 눈에 보이지 않는 공백으로 줄바꿈을 적절히 처리하도록 만든다.

 와 &zwsp;가 안보이는데요?

물론 NBSP와 ZWSP를  와 &zwsp;로도 입력할 수 있다. 하지만, 문서 자체에 UTF-8 인코딩 방식으로 NBSP의 경우에는 \xC2\xA0또는 U+00A0로 ZWSP의 경우에는 U+200B가 입력되어 있을 수 있다.

결국  와 &zwsp;로 입력하면 HTML 파서가 해석하는 것이고 \xC2\xA0또는 U+00A0, U+200B로 입력하면 UTF-8 디코더가 해석하여 같은 기능을 수행한다.

해결 방법

문제점을 알았으니, 해결하는 방법은 간단하다. NBSP와 ZWSP를 보여주는 기능을 사용하여 원치 않는 기능을 수행하는 NBSP와 ZWSP를 삭제하면 된다. 포스팅을 작성하고 Notepad++와 같은 도구로 포스팅 내의 NBSP와 ZWSP를 검사하여 삭제하면 된다.

Notepad++에서 해당 문자 표시하기

한글화된 버전 기준으로 상단 탭의 보기 → 기호 보기 → 출력 불가능 문자 표시를 체크하면 해당 문자들이 표시된다.