본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

글자의 깨짐 현상

최초 작성일
최종 수정일
텍스트 에디터로 웹 페이지를 마크 업하고서, 웹 브라우저에서 열어 보았을 때, 다음과 같이 글씨가 깨져보이는 경우가 있습니다.
[cml_media_alt id='699']깨져보이는 글자들[/cml_media_alt]

문자셋이 깨진 텍스트

 이런 경우는 보통 해당 파일과 문자셋이 맞지 않아서 발생합니다.  

문자셋 (charset)

문자셋(문자 집합)이라는 것은 글자들의 집합을 나타냅니다. 이는 컴퓨터가 글씨를 나타내는 방식이라고 할 수 있겠습니다. 세상에서 문자는 영어만 존재하는 것이 아니라, 한국어도 있고, 중국어도 아랍어도 있습니다. 이런 다양한 문자들의 집합이 문자셋이라 할 수 있습니다. 각 언어의 문자들 마다 그를 포함하는 문자셋이 있습니다. 국내 웹 페이지의 경우 보통 문자셋을 EUC-KR을 사용하며, 최근에는 UTF-8을 사용하는 추세입니다. UTF-8은 유니코드를 위한 문자 인코딩 방식으로, 유니코드라고 하면 전 세계 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 표준입니다. 그렇기 때문에 신규로 제작되는 웹 페이지들의 문자셋은 UTF-8로 권장합니다. 위의 경우 처럼 글자가 깨져 보이는 것은 보통 EUC-KR로 작성된 문서를 UTF-8로 보여주거나 또는 반대의 경우이기 때문에 발생합니다.  

문자셋 선언

우리는 HTML 파일 내에서 meta 요소를 통해서 브라우저가 어떠한 문자셋으로 렌더링 할 지 선언합니다. 이 메타 정보를 이용해서 웹 브라우저는 이 문서를 어떠한 문자셋으로 보여줄 지를 결정합니다. 여러분들은 파일을 작성할 때, 이 선언과 실제 저장할 때의 인코딩 타입을 동일하게 해주어야 합니다.  

에디터에서의 문자셋

보통 대부분의 텍스트 에디터는 저장할 때, 문자셋을 지정하여 저장 할 수 있습니다. (요새 나오는 웹 개발 에디터 중에는 이 부분의 설정없이 UTF-8로 통일 되어있는 것들도 많이 있습니다.) 예를 들어 가장 기본적인 메모장에서 문서를 저장할 때, 창의 하단을 보면 인코딩을 통해서 문자셋을 선택할 수 있습니다.
[cml_media_alt id='700']메모장에서 저장할 때 나타나는 창 하단의 옵션[/cml_media_alt]

메모장의 인코딩 옵션

압타나(Aptana)나 이클립스(eclipse) 같은 경우에도 해당 파일의 속성을 보면 문자셋을 조절할 수 있습니다. 파일 목록에서 해당 파일을 마우스 오른쪽 버튼 클릭한 뒤, 속성(Properties)를 클릭하여 확인할 수 있으며, 단축키 Alt + Enter 를 통해서 도 같은 속성창이 열립니다.
[cml_media_alt id='701']압타나에서 속성창을 열어본 모습[/cml_media_alt]

압타나(Aptana)에서의 속성창(Properties)

 보통 기본적으로 EUC-KR은 있지 않지만, 그냥 직접 적으시면 EUC-KR로 저장이 됩니다. 메모장의 경우 ANSI로 저장하면 EUC-KR과 동일하게 저장이 되고요. 대부분의 다른 에디터들은 각각 저마다의 문자셋을 선택할 수 있는 인코딩 옵션이 있습니다. 다른 에디터를 사용하시는 분들은 조금만 검색해보면 해당 자료들이 많이 나올 것입니다.        

이 글이 유용하셨다면 친구들에게 공유 해주세요.