웹사이트 가독성 떨어지는데? Pretendard 폰트와 코드 줄바꿈으로 해결하기 (2026)

웹사이트 폰트가 좀 칙칙하고, 코드 블록에서 텍스트가 잘리는 문제가 신경 쓰였다. 이 글은 2026년 7월, 이 두 가지 문제를 해결했던 경험을 기록한 것이다.

시도와 함정

처음에는 그냥 폰트만 바꿔보면 되겠거니 싶었다. 기존의 고전적인 명조체에서 좀 더 모던한 Pretendard 폰트로 바꾸는 작업을 시작했다.

/* 기존 폰트 설정 (예시) */
body {
  font-family: 'Nanum Myeongjo', serif;
}

/* Pretendard 폰트 적용 시도 */
body {
  font-family: 'Pretendard', sans-serif;
}

폰트 자체는 괜찮았는데, 문제는 블로그 글의 코드 블록이었다. 긴 코드 줄이 화면 밖으로 나가버려서 잘리는 현상이 발생했다.

<pre><code>
// 매우 긴 코드 줄이 여기에 들어갑니다. 이 줄이 화면 너비를 초과하면 잘리게 됩니다.
// Pretendard 폰트로 변경 후에도 이 문제는 여전했습니다.
</code></pre>

이때부터 3시간 넘게 삽질을 시작했다. CSS white-space 속성을 pre-wrap으로 바꿔보기도 하고, overflow-wrap도 건드려봤지만 원하는 대로 되지 않았다. 폰트 변경과 코드 블록 텍스트 잘림이 별개 문제라고 생각했는데, 이게 엮여 있었다.

원인

결국 문제는 CSS의 white-space 속성 설정과 word-break 속성의 조합이었다. white-space: pre-wrap;은 공백과 줄바꿈을 유지하면서 긴 단어를 자동으로 줄바꿈해주는 역할을 하는데, 이게 word-break: break-all;과 충돌하면서 예상치 못한 동작을 하거나, 혹은 둘 다 제대로 적용되지 않는 상황이 발생했던 것 같다. Pretendard 폰트 자체가 글자 간격이나 너비가 기존 폰트와 미묘하게 달라서 레이아웃에 영향을 준 것도 한몫했다.

해결

가장 깔끔하게 해결된 방법은 white-space를 pre-wrap으로 설정하고, word-break는 break-word로 조정하는 것이었다.

/* 블로그 코드 블록 스타일 */
pre {
  white-space: pre-wrap; /* 공백과 줄바꿈 유지, 긴 단어 자동 줄바꿈 */
  word-break: break-word; /* 긴 단어 줄바꿈 */
  overflow-wrap: break-word; /* 긴 단어 줄바꿈 (word-break와 유사) */
}
/* 전체 body 폰트 설정 */
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

Pretendard 폰트 자체는 CDN으로 불러왔다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orval/stickers/dist/fonts/pretendard/pretendard.css">

이렇게 하니 긴 코드 줄도 자연스럽게 줄바꿈되면서 가독성이 확연히 좋아졌다. 여러 페이지를 돌며 폰트 변경으로 인해 미묘하게 틀어진 레이아웃도 함께 잡아주었다.

결과

• 웹사이트 전반의 가독성이 눈에 띄게 향상되었다.
• Pretendard 폰트 덕분에 사이트가 훨씬 현대적이고 깔끔해 보였다.
• 블로그 코드 블록에서 텍스트가 잘리는 현상이 거의 사라졌다.

정리 — 같은 함정 안 빠지려면

• [ ] 폰트 변경 시, 단순히 디자인 요소로만 보지 말고 가독성 및 레이아웃 전반에 미치는 영향을 고려하자.
• [ ] 코드 블록의 텍스트 줄바꿈 문제는 white-space: pre-wrap;과 word-break: break-word; 조합으로 해결될 가능성이 높다.
• [ ] 폰트 변경 후에는 반드시 여러 페이지를 돌며 레이아웃 깨짐이나 어색한 부분을 검토하자.
• [ ] CDN으로 폰트를 불러올 때는 해당 폰트 파일의 경로를 정확히 확인하자.