코드에서 >=, <= 가 한 글자처럼 보이던 문제 해결기

배포 후에 코드 블록이 뭔가 이상하게 보이는 걸 발견했어요.

원래는 >=, <=, !=, === 같은 연산자들이 그대로 보여야 하는데, 화면에서는 일부가 한 글자처럼 치환돼 보였어요. 예를 들면:

• >= → ≥
• <= → ≤
• != → ≠
• ===, !== 등도 비슷한 느낌으로 보일 수 있었어요

처음엔 코드 하이라이트 라이브러리 쪽 설정 문제인가 싶었는데, 원인은 폰트 리거처(ligatures) 였어요. 특정 폰트는 문자 조합을 하나의 기호처럼 합쳐서 보여주거든요. 코드에서는 이게 오히려 방해가 되더라구요.

그래서 해결은 단순했어요.

복사
font-variant-ligatures: none;

이 설정을 SyntaxHighlighter 코드 블록과 인라인 코드에 모두 적용했어요. 그 결과 배포 후에는 코드가 다시 원래 문자 그대로 보여요.

이렇게 바뀌었어요:

• >= 는 이제 진짜 >=
• <= 는 이제 진짜 <=
• != 도 그대로 !=
• ===, !== 같은 비교 연산자도 더 이상 기호로 뭉개지지 않아요

이번 작업에서 느낀 건, 코드의 내용만큼이나 보이는 방식도 정말 중요하다는 거였어요. 기능은 맞아도 화면에서 헷갈리면 개발자 경험이 꽤 떨어지더라구요.

작은 CSS 한 줄이지만, 이런 디테일이 전체 사용성을 꽤 많이 바꿔준다는 걸 다시 느꼈어요.