웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

HTML에서 한글 깨짐 문제 또는 현상을 해결하는 방법은?

Last Modified : 2018-07-06 / Created : 2017-04-09
49,204
View Count
한글이 깨져서 나타나는 문제를 알아보려고 합니다. 만약 html을 작성하는 에디터에는 아무 이상없이 한글이 잘 보이나 웹브라우저에는 한글이 깨져보이는 경우 어떻게 해결이 가능할까요?




# 한글 깨짐현상이 브라우저에 나타나는 경우

이 경우 가장 먼저 의심할 부분이 바로 html의 meta 영역에 선언된 한글 인코딩입니다. 만약 한글을 출력하는데 필요한 인코딩 설정이 잘못되었거나 되어 있지 않는 경우 한글 깨짐이 나타날 수 있습니다. 물론 서버나 데이터베이스에서도 문제가 있을 수 있죠. 이 글 맨 하단에도 언급되어 있습니다.

만약 한글이 출력되도록 UTF-8로 인코딩 설정이 필요한 경우라면 html 코드에 아래에 나오게 될 설정이 필요합니다.


! HTML 문서에 UTF-8 인코딩 설정하기

한글을 비롯한 언어가 정상적으로 보여지려면 html 문서에 바른 인코딩 설정이 필요합니다. 이 설정이 추가된 경우 브라우저 및 디바이스 환경에서 인코딩을 먼저 인식하여 초기 인코딩 값을 설정 후 보여주게됩니다. 한글 사용자의 경우 UTF-8로 설정하면 정상 출력되므로 아래와 같이 설정을 추가해주세요.


@ HTML5를 지원하는 경우
<meta charset="UTF-8" />

@ 이전 HTML, XHTML의 경우
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

위 인코딩 설정을 마치고 다시 테스트해보시기 바랍니다. 한글이 정상출력된다면 인코딩 설정이 잘되었다고 알 수 있죠.



# 영문 등의 환경에서 한글 깨짐이 계속 나타나는 경우

아이러니 하게도 위 인코딩 설정 중 HTML5만을 적용하였을때 일부 환경에서 한글 깨짐이 계속 발생함을 확인하였습니다. 브라우저에서 자동으로 인코딩을 잡지 못하는 문제인데 OS 설정이나 브라우저에 따라 차이가 다르더군요... 결론적으로 아래의 인코딩... XHTML 4.01 방식의 인코딩이 더 나은 결과를 가져오더군요.

@ 두 가지 인코딩 모두 사용
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />

즉, 여러가지를 고려하자면 위 두 가지 인코딩을 모두 사용하는 것이 더 좋은 결과를 가져오는 것을(환경에 따라 다르지만) 발생했습니다.




# HTML 인코딩 후 그럼에도 문제가 계속 발생

만약 위와 같이 설정을 하였음에도 한글이 깨져나오는 경우? 아래의 상황을 의심해보세요.

1. 서버측 언어의 인코딩이 잘못 설정된 경우
; 만약 서버 언어(ASP, PHP, .NET, JAVA, NodeJS등을 사용하는 경우 이 언어에 인코딩 설정을 확인하세요.

2. 에디터에서 인코딩이 다른 타입으로 저장되는 경우

; 에디터에서 저장할 때 인코딩이 다른 타입(ANSI) 또는 기타로 저장될 수 있습니다. 이 경우 UTF-8로 저장하기를 찾아 다시 저장 후 사용하시면 한글로 나타나게됩니다.

Previous

Notepad++에서 한글 인코딩을 변환, 저장하는 방법은?

Previous

특수문자를 제외하고 검색하는 정규표현식 방법