2013/11/01

한글이 깨지는 경우 // 한글깨짐, 한글인코딩, AJAX, JavaScript, JSP, HTML


1. meta 태그 누락 또는 파일 저장 형식과 불일치

이클립스 등의 개발툴을 사용하지 않고 윈도우즈 메모장이나 일반 에디터를 써서 html 파일을 만들다 보면 발생.

브라우저에서 마우스 우클릭 -> 인코딩 으로 확인해 보면 한국어로 되어 있음에도 불구하고 한글이 깨져서 보임.

HTML 한글 깨짐


head 태그 안쪽에

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

를 넣어주면 됨. UTF-8 부분은 본인의 환경에 맞게 euc-kr 등으로 변경.


HTML 한글 깨짐 수정 (UTF-8)


간혹, 파일을 저장할 때 한글 인코딩 방식이 이상하게(?) 지정되는 경우도 있는데, 이러한 경우에는 보편적으로 많이 사용하는 에디터 등으로 소스 코드 내용을 복사해서 붙여넣은 다음 저장하는 방식으로 테스트 해 볼 수도 있음.

2. request.setCharacterEncoding()

request.setCharacterEncoding("UTF-8");

레이아웃상 전체적인 틀이 되는 페이지가 있고 내용 부분만 동적으로 바뀌는 구조라면
전체 틀이 되는 페이지의 상단에서 위의 한줄로 해결됨.

UTF-8 이외의 코드를 쓰는 경우에는 매개변수 값을 바꿔주면 되겠고...


만약 저거 한줄로 안 된다면
데이터를 받는 페이지 상단에 response와 함께 써주면 됨.

response.setContentType("text/html; charset=UTF-8");
request.setCharacterEncoding("UTF-8");


여기서 상단이라 함은,

request.getParameter() 로 값을 받아오는 부분보다 위쪽을 말합니다. ^^

3. escape(), encodeURIComponent(), URLDecoder.decode()

대개는 위의 방법만 적용해도 잘 되지만,
특정 상황(get 방식으로 파라미터를 전송하느라 URL에 한글을 들어가는 경우 등)에서는 또 다시 한글이 깨지는데 그러한 경우에는

한글 문자열을 보내는 페이지에서는
아래 자바스크립트(JavaScript) 코드처럼 encodeURIComponent() 를 써서 인코딩해주고,



var findStr = $('findStr').value; // 입력상자 값을 가져옴

findStr = escape(encodeURIComponent(findStr)); // 검색어가 한글인 경우

var url = './student_suggest.jsp?findStr=' + findStr;


*** 2014-02-07 내용 추가 - escape()와 encodeURIComponent() 는 서로 유사한 동작을 하는 거인 듯?? 중첩해서 쓸 필요가 없는 듯??? -.-a




받는 페이지에서는
URLDecoder.decode()를 쓰면 됨.

String dec = URLDecoder.decode(stdDao.getFindStr(), "UTF-8");



*** 2014-02-07 내용 추가 - 아래처럼 디코딩을 할 수도 있네요.

String dec = new String(stdDao.getFindStr().getBytes("iso-8859-1"), "UTF-8");



*** 2014-04-09 내용 추가 - encodeURIComponent() 로만 인코딩을 해서 보내면, 받는 쪽에서는 자동으로 디코딩이 된다고 합니다. (확인 필요 ㅋ)

자바스크립트에 존재하는 인코딩/디코딩 관련 함수로는 escape(), unescape(),encodeURI(), encodeURIComponent() 등이 있다고 합니다.

4. getBytes()

또는 위의 2번과는 별개로

한글 문자열을 받는 페이지에서(만)
String에 getBytes() 를 써서 처리해도 됩니다.

tempStr = new String(dbv.getJemok().getBytes("8859_1"), "UTF-8");
dbv.setJemok(tempStr);

5. 이클립스, 톰캣

이클립스와 톰캣 환경에서는 톰캣이 세팅(?)에 따라서 자동으로 인코딩/디코딩을 수행하는 부분도 있다고 하니, 한글 문자열을 보내는 페이지와 받는 페이지에서는 값이 제대로 전달되고 있는지 각 과정마다 확인부터 하는 게 좋을 듯 합니다. ^^a


그리고, 이클립스에서는,

Window -> Preferences -> General -> Workspace 하단

Window -> Preferences -> Web -> CSS Files
Window -> Preferences -> Web -> HTML Files
Window -> Preferences -> Web -> JSP Files

등에서 한글 인코딩 방식을 통일하는 게 무엇보다도 먼저일 듯 하네요. ^^


ㄴ 2013년 11월 30일 내용 추가 - 이클립스의 설정과는 별개로, 개별 프로젝트의 속성에서 한글 인코딩 방식이 다르게 되어 있을 수도 있으니 각각의 프로젝트 속성에서도 인코딩 부분을 확인해주세요~


ㄴ 2014년 11월 21일 내용 추가 - 외부에서 작성한 JSP 소스 파일을 기존의 프로젝트에 추가해 넣은 경우에는 JSP 파일 상단에 메타 태그(?)가 이클립스의 세팅과 다른 형태로 되어 있을 수 있습니다.

이러한 경우에는 이클립스의 프로젝트 내에서 JSP 파일을 새로 생성해서 나오는 파일의 메타 태그와 외부에서 가져온 JSP 파일의 메타 태그를 비교해 보세요.

댓글 7개:

  1. 한글 처리 부분에 대해서 자세하게 설명되어 있는 글입니다.

    http://youngrok.com/%EC%9E%90%EB%B0%94%EC%9B%B9%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%9D%98%EA%B8%B0%EB%B3%B8#header-4.2.5

    답글삭제
  2. 본문 중 1, 3번은 Java (또는 JSP) 에서의 인코딩/디코딩이고

    2번은 Javascript 에서의 인코딩/디코딩입니다. ^^



    처음에 제대로 정리가 안 된 상태로 글을 썼더니 지금 봐도 헷갈리네요 ㅋ;;

    답글삭제
  3. 한글 인코딩 코드 종류 참조용
    http://gongam100.tistory.com/10

    답글삭제
  4. UTF-8 로 인코딩 된 페이지에서

    euc-kr 로 인코딩 된 페이지를 iframe 으로 가져오는 경우

    JavaScript의 alert 등에서 한글이 깨진다면



    euc-kr 로 작성된 페이지에 아래의 메타 태그가 들어가 있는지 확인을...

    <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

    답글삭제
  5. PHP에서 json_encode()를 해서 받은 한글이

    유니코드로 깨져서 나오는 경우의 해결 방법입니다.

    http://comajava.blogspot.kr/2015/07/php-ajax-json-unicode-jsonencode.html

    답글삭제
  6. 으악!!!!
    고마운님!!! 너무 감사합니다. ㅜㅜ
    일주일 걸려 해결안된거 해결했네요...
    requeust 에 respose로 xml 전송하는데 자꾸 한글 깨져서 힘들었는데 무식하게
    setCharacterEncoding만 해댔네요.

    답글삭제
    답글
    1. 해결하셨다니 다행이네요 ^^

      저도 예전에 무진장 고민하던 시절에 마구 적어놨던 글이라 지금 보면 두서 없고 뭔 소리를 써놨나 싶고 그런데.. 명쾌하게 정리할 자신도 없고 그래서 걍 냅둔 상태입니다. ^^;;

      즐-코딩 하세요~

      삭제