JavaScript / document.characterSet으로 문자 인코딩 확인하기

document.characterSet은 브라우저가 현재 문서를 해석하는 데 사용하는 문자 인코딩 이름을 반환하는 읽기 전용 속성입니다. HTML에 <meta charset="utf-8">를 넣은 문서라면 보통 UTF-8이 표시됩니다. 속성 이름은 “characterSet”이지만 반환값은 문자 집합 자체가 아니라 인코딩 이름입니다.

현재 문서의 인코딩 읽기

괄호 없이 document.characterSet을 읽습니다. 문자열로 반환되며, 브라우저가 실제로 문서를 해석할 때 사용한 인코딩을 확인하는 데 유용합니다.

console.log(document.characterSet); // 예: 'UTF-8' 

속성에 값을 대입해 이미 로드된 문서의 인코딩을 바꾸는 용도는 아닙니다. 파일을 저장할 때 인코딩을 맞추고 HTML에는 올바른 선언을 넣어야 합니다. MDN의 document.characterSet 문서에서 읽기 전용 속성임을 확인할 수 있습니다.

HTML 선언과 실제 해석 결과 구분하기

<meta charset="utf-8">는 HTML 파일의 인코딩을 선언합니다. 반면 document.characterSet은 브라우저가 선택한 인코딩을 보여 줍니다. 서버가 보내는 Content-Type 헤더 등도 인코딩 결정에 영향을 줄 수 있으므로 두 값이 다르다면 HTML 파일과 응답 헤더를 함께 확인하세요.

const declared = document.querySelector('meta[charset]')?.getAttribute('charset');
console.log({ declared, actual: document.characterSet });

글자가 깨지는 문제를 해결하려면 반환값만 읽는 데서 끝내지 말고 파일을 UTF-8로 저장했는지, 메타 선언과 서버 응답이 일치하는지 확인해야 합니다. MDN의 HTML meta 요소 문서는 charset 선언의 역할을 설명합니다.

전체 예제: 선언과 실제 인코딩 비교

아래 코드를 UTF-8로 document-character-set.html에 저장한 뒤 브라우저에서 엽니다. 화면에 브라우저가 사용하는 인코딩과 메타 요소가 선언한 값을 각각 표시합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문서 인코딩 확인</title>
</head>
<body>
<p id="actual"></p>
<p id="declared"></p>
<script>
const actual = document.querySelector('#actual');
const declared = document.querySelector('#declared');
const charsetMeta = document.querySelector('meta[charset]');

actual.textContent = `브라우저가 사용한 인코딩: ${document.characterSet}`;
declared.textContent = `HTML 선언: ${charsetMeta?.getAttribute('charset') ?? '없음'}`;
</script>
</body>
</html>

예제대로 저장했다면 일반적으로 “브라우저가 사용한 인코딩: UTF-8”, “HTML 선언: utf-8”이 보입니다. 두 문자열의 대소문자가 달라도 인코딩 이름은 동일합니다. 값이 예상과 다르거나 한글이 깨지면 개발자 도구의 네트워크 응답 헤더와 파일의 실제 저장 인코딩을 확인하세요.