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

HOME > webdevetc

브라우저 한글 깨짐 현상과 인코딩 방안

Last Modified : 2018-07-13 / Created : 2018-07-12
6,484
View Count
신규 프로젝트를 진행하면서 브라우져 한글깨짐 이슈에 대하여 몇 가지 적어봅니다.




# 특정환경에서의 한글깨짐 발생

한글깨짐 현상은 예전부터 항상 존재했죠. 하지만 한글을 사용하는 방문자에게는 한글이 깨지는 현상이 없도록 최선을 다해야겠습니다. 하지만 현실은 그리 녹록하지 않은 것 같은데요... 어떤 문제가 있을까요?

HTML에 설정된 한줄의 메타태그가 모든 한글깨짐을 해결해준다면 얼마나 좋을까요? 하지만 잘생긴 HTML5 UTF-8 인코딩도 완벽히 피해가지는 못하는 것 같습니다. 에디터, 서버, 데이터베이스에서 사용되는 인코딩 문제를 잘 해결해도 특정 브라우저나 OS에서만 발생하는 한글깨짐이 나타날 수 있더군요... 이 같은 문제가 나타나는건 아래와 같은 예외적인 케이스입니다.

1. 기본값이 영문이나 다른 언어가 설정된 경우
2. 인코딩 자동설정을 하지 않은 경우
3. OS 운영체제가 다른 언어인 경우

위와 같은 예외적인 케이스에서 한글깨짐이 나타날 수 있는데 이를 피하기 위해서 방문자에게 스스로 브라우저나 기타 환경 설정의 인코딩을 변경하라고 요청해야한다면? 방문자 입장에서는 불편한 사항이죠. 좀 더 효과적인 대처방법이 있다면 아래의 방법을 생각해볼 수 있습니다.



# HTTP Response에 인코딩값 제공하기

접근하는 방문자가 웹사이트 서버에 HTTP request 정보를 보내고 서버는 이에 HTTP response를 전달하는데 이때 인코딩값을 UTF-8로 설정하면 다양한 환경에서 인코딩을 한글로 설정하여 보여줄 수 있더군요. 깨짐현상을 줄일 수 있는 방법 중 하나입니다.

다만 서버의 HTTP response를 설정하려면 Apache든 Tomcat이든 Nginx든 각각 다른 설정방법이 필요하므로 이를 잘 적용하는 것이 필요하겠습니다.


! 브라우저마다 다른 한글깨짐

크롬과 다른 브라우저를 비교하면 크롬에서는 한글 인코딩을 더 잘 인식하거나 아니면 웹페이지의 메타 인코딩 설정에 더 높은 우선순위를 가지는 것 같습니다. 동일한 환경에서 크롬은 한글에 대하여 자동으로 인코딩을 설정하여 깨짐현상이 상대적으로 더 덜하더군요.

Previous

[HTML5] canvas 요소에 이미지 추가하기

Previous

네이버블로그 더 만드는 방법은? 추가하기