글자가 깨지는 주요 원인 3가지
- 인코딩 불일치: 웹페이지가 어떤 문자 체계로 텍스트를 읽어야 하는지 브라우저에 알려주지 못할 때 발생합니다.
- 폰트에 해당 글자가 없는 경우: 특수문자나 이모지, 일부 한자는 지정된 폰트 안에 아예 포함되어 있지 않을 수 있습니다.
- 다른 프로그램에서 복사+붙여넣기 할 때 생기는 이상 문자: 워드나 한글 프로그램에서 글을 쓰고 블로그에 그대로 붙여넣으면, 눈에 안 보이는 서식 코드가 같이 딸려와서 깨짐 현상을 일으키기도 합니다.
해결법 1: UTF-8 인코딩 확인하기
가장 흔한 원인입니다. <head> 태그 맨 위쪽에 아래 코드가 있는지 확인하세요.
<meta charset="UTF-8">UTF-8은 한글을 포함한 전 세계 대부분의 문자를 깨지지 않게 표현할 수 있는 표준 인코딩 방식입니다. 블로그스팟은 기본으로 이 설정이 되어 있는 경우가 많지만, 테마를 직접 수정했다면 빠져 있을 수 있으니 Blogger 관리자 → 테마 → HTML 편집에서 <head> 태그 바로 아래쪽을 확인해보세요.
해결법 2: 폰트에 없는 글자인지 확인하기
인코딩은 정상인데 특정 글자만 깨진다면, 적용된 폰트에 그 글자가 포함되어 있지 않은 경우입니다. 특히 오래된 무료 폰트나 디자인 전용 폰트는 특수문자·이모지 지원이 안 되는 경우가 흔합니다.
body {
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}이렇게 폰트를 여러 개 나열해두면, 첫 번째 폰트에 없는 글자는 두 번째 폰트에서 찾아 표시해줍니다. 이걸 폰트 폴백(fallback)이라고 합니다. 마지막에 sans-serif처럼 시스템 기본 글꼴을 꼭 넣어두면, 지정한 폰트가 전부 실패해도 최소한 깨지지 않고 표시됩니다.
해결법 3: 워드·한글에서 복사한 글, 깨끗하게 붙여넣기
워드나 한글(HWP)에서 작성한 글을 그대로 붙여넣으면, 눈에 안 보이는 서식 코드가 함께 따라와서 이상한 기호나 깨짐으로 나타날 수 있습니다. 해결법은 간단합니다.
- Blogger 글쓰기 화면에서 붙여넣기 할 때 Ctrl+Shift+V(서식 없이 붙여넣기)를 사용하세요.
- 또는 메모장에 먼저 붙여넣었다가, 메모장에서 다시 복사해서 블로그에 붙여넣으면 서식이 자동으로 제거됩니다.
해결법 4: 이모지가 네모로 나올 때
이모지(😀, ✅ 같은)는 폰트가 아니라 별도의 이모지 글꼴이 있어야 표시됩니다. 대부분의 최신 브라우저와 스마트폰은 자체 이모지 글꼴을 갖고 있어서 문제가 없지만, 오래된 윈도우 브라우저에서는 깨질 수 있습니다. 이 경우 이모지 대신 아이콘 폰트(예: Font Awesome)를 쓰거나, 이모지 사용을 최소화하는 것이 안전합니다.
초보자가 자주 하는 실수 2가지
- meta charset 태그 위치 실수:
<meta charset="UTF-8">은 반드시<head>태그의 맨 앞쪽에 있어야 합니다. 다른 태그 뒤에 있으면 브라우저가 이미 잘못된 인코딩으로 일부를 읽어버린 뒤라 효과가 없을 수 있습니다. - 폰트 폴백을 안 걸어두는 경우: 폰트를 하나만 지정해두면, 그 폰트 로딩이 실패했을 때 대안이 없어 글자가 깨지거나 기본 브라우저 글꼴로 강제 전환됩니다.
핵심 요약
- 글자 깨짐의 가장 흔한 원인은
<meta charset="UTF-8">누락입니다. - 특정 글자만 깨진다면 폰트에 해당 글자가 없는 경우이니, 폰트를 여러 개 나열해 폴백을 걸어두세요.
- 워드·한글에서 복사한 글은 Ctrl+Shift+V로 서식 없이 붙여넣으세요.
- 이모지는 폰트가 아니라 별도 글꼴이 필요해서, 오래된 환경에서는 깨질 수 있습니다.
여러분의 블로그에도 혹시 지금 깨져 보이는 글자가 있진 않으신가요? 위 방법으로 하나씩 확인해보시길 추천드립니다.