Tofu, 모지바케(文字化け), 대체문자(�) — 문자 깨짐 🧐 정리하기

웹을 개발하다 보면 이런 걸 본 적이 있을 것이다.

• □□□□ 같은 네모 박스
• � (검은 다이아몬드 안에 물음표)
• 이상한 한글 깨짐 문자열 (안녕)

이 현상들은 모두 문자 인코딩 문제에서 시작된다.

 

이 글에서는 자주 등장하는 세 가지 용어를 찾아내서, 정리하였다.

• Tofu
• 모지바케(文字化け)
• 대체문자 (Replacement Character)

 

Tofu — 네모 박스 문자

👀 이게 뭐냐면...

□
□
□

이렇게 보이는 네모 박스.

 

이걸 흔히 Tofu(두부)라고 부른다.

하얀 네모가 두부처럼 생겼기 때문이다.

 

📌 왜 생길까?

폰트에 해당 글리프(glyph)가 없기 때문이다.

 

예를 들어...

• 시스템에 이모지 폰트가 없음
• 특정 한자/특수문자를 지원하지 않는 폰트 사용
• 오래된 OS 환경

즉, 문자는 유효하지만, 그릴 수 있는 폰트가 없는 상황이다.

👉 코드 자체는 정상
👉 렌더링 단계에서 실패

 

🛠 해결 방법

• 폰트 폴백 설정 (font-family에 여러 개 지정)
• Noto Sans / Noto Emoji 같은 광범위 폰트 사용
• 웹폰트 로딩 확인

 

모지바케(文字化け) — 문자 깨짐 현상

모지바케는 일본어로 “문자가 깨졌다”는 뜻이다.

 

👀 이런 경우....

정상 텍스트는 다음과 같은데,

안녕하세요

깨진 결과로 다음과 같이 나올 수 있다

안녕하세요

이건 인코딩을 잘못 해석했기 때문이다.

 

📌 왜 생길까?

예를 들면,

• 실제 데이터는 UTF-8
• 그런데 브라우저가 EUC-KR로 해석

즉,

👉 저장할 때 인코딩 A
👉 읽을 때 인코딩 B

이렇게 다르면 글자가 깨진다.

 

🛠 해결 방법

• HTML에 명확히 선언

<meta charset="UTF-8" />

• 서버 응답 헤더 확인

Content-Type: text/html; charset=utf-8

• DB, 서버, 파일 인코딩 통일

=>> 모지바케는 대부분 인코딩 불일치 문제다.

 

대체문자 (Replacement Character) — �

이 기호를 본 적 있을 것이다.

�

이 문자의 정식 이름은 Replacement Character이고,
Unicode 코드포인트는 U+FFFD다.

 

📌 언제 나타날까?

이건 조금 더 심각하다.

“해석 자체가 불가능한 바이트 시퀀스”를 만났을 때 등장한다.

예를 들면,

• 잘린 UTF-8 데이터
• 잘못된 바이트 조합
• 깨진 네트워크 전송

즉,

👉 이건 폰트 문제가 아님
👉 이건 인코딩 해석 실패

 

“이건 도저히 해석할 수 없으니 대신 이 문자로 표시한다”는 뜻이다

 

차이점 한 번에 정리 !!

Tofu

• 원인 => 폰트에 글리프 없음
• 데이터는 정상
• 렌더링 문제

모지바케

• 원인 => 인코딩 불일치
• 데이터는 존재
• 해석 방식이 잘못됨

대체문자 (�)

• 원인 => 유효하지 않은 바이트
• 데이터 자체가 손상됨
• 복구 불가능한 경우 많음

 

왜 이게 중요한가?

이 문제들은 단순히 “보기 안 좋은 문제”가 아니다.

• 사용자 입력 데이터 손상
• 검색 결과 불일치
• 해시값 불일치
• 보안 취약점 발생 가능

특히 다국어 서비스를 만들 때는 치명적이다.

 

안전하게 처리하려면?

⛈️ 모든 인코딩을 UTF-8로 통일

• HTML
• 서버
• DB
• 파일 저장

모두 UTF-8로 통일하는 것이 가장 안전하다.

 

🍉 입력 정규화 (Unicode Normalization)

특히 한글, 일본어, 이모지에서 문제가 발생할 수 있다.

text.normalize("NFC")

정규화를 통해 동일한 의미의 문자를 동일한 형태로 맞춘다.

 

🍪 데이터 유효성 검증

• API에서 잘린 바이트 검증
• 스트림 처리 시 encoding 명시
• 파일 업로드 시 문자셋 확인

 

문자 깨짐은 단순히 “보기 안 좋은 현상”이 아니다.

• Tofu는 폰트 문제
• 모지바케는 인코딩 문제
• � 는 손상된 데이터 문제

이 세 가지를 구분하여 적절하게 문자 깨짐에 대한 이슈를 잘 해결할 수 있다.

 

참고자료 📎

• Unicode Standard — https://unicode.org
• MDN: Character encoding — https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding
• MDN: TextDecoder — https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder
• WHATWG Encoding Standard — https://encoding.spec.whatwg.org/