2015년 7월 2일 목요일

인코딩(Encoding)에 대한 이해 - (2) HTML 에서의 캐릭터셋(CharSet) 지정.

웹 개발을 하면서 처음에는 까다롭게 다가오다가 어느 순간 의미도 모른채 그냥 그 설정 그대로 유지하는게 바로 언어에 대한 인코딩이 아닌가 합니다. 특히 정형화된 구조에서 크게 문제가 발생하지 않기 때문에 신경을 쓰지 않다가 새로운 환경으로 이전을 하게 된다거나 할 때 한글이 깨지는 등의 문제가 발생하여 고생을 할 때가 종종 있습니다.

그래서 인코딩에 대한 최소한의 내용을 알려드려 크게 당황하지 않도록 도움을 드리고자 합니다.

이 글은 초보자를 위한 글이므로, 인코딩(Encoding) 정도는 우습다는 분은 패스해주시길...^^;;;

------------------------------------------------------------------------------------------------------

먼저 살펴볼 것은 HTML 의 캐릭터셋 설정입니다. 아직 웹 프로그램에 익숙하지 않은 분들 중에선 서버와 클라이언트 영역을 혼동하시는 분들이 계신데, 흔히 말하는 웹 프로그램 언어는 서버에서 해석이 되며, HTML 등을 만들어내는 역활을 합니다(물론 동적으로 만들어내는 경우에). 그리고 이렇게 만들어진 HTML 은 사용자의 장비로 전송되어 클라이언트의 브라우져에서 해석되어져 사용자에게 보여지게 됩니다. 이 때 HTML 뿐만 아니라 Javascript, CSS 들도 HTML 에 정의된 내용에 따라 처리되거나 서버에서 읽어오기 때문에 정확한 내용을 읽어오는 것은 중요합니다.

사용자의 브라우져는 HTML 을 해석할 때 스스로 기본적인 캐릭터셋을 가지고 해석을 시도하거나 문서의 내용을 읽어보고 캐릭터셋을 파악할 수 있는지 시도해봅니다. 강제로 지정되어 있다면 그 방식대로 인코딩해서 읽지만, 그렇지 않다면 스스로 인코딩 방식을 변경할 수도 있습니다. 이 때 HTML 내용 중에 <haed> 영역에서 <meta> 로 선언된 부분 중 캐릭터셋에 관련된 설정을 읽어 이를 파악합니다. 주로 다음과 같은 형식으로 되어 있습니다.


<meta http-equiv="content-type" content="text/html; charset=utf-8">

혹은

<meta charset="UTF-8">

전자는 기존의 HTML4, 후자는 HTML5 의 선언방식입니다.
보통 <head> 에서도 가장 먼저 선언을 하는 편이고, 이렇게 선언을 하면(위에서는 utf-8 로 선언을 했습니다) 브라우저는 선언된 방식으로 인코딩을 해서 문서를 해석하려고 할 것입니다.

그럼 외부 링크를 통한 문서 중 Javascript 나 CSS 파일은 어떨까요?

먼저 Javascript 는 HTML 에서 다음과 같이 외부 파일 형태로 읽어올 수 있습니다.

<script type="text/javascript" src="/js/test.js"></script>

이렇게 HTML 에서 외부 파일을 지정하면 다시 서버에 해당 파일을 요청하여 읽어온 뒤 해석을 합니다(type 대신에 language="javascript" 쓰는건 비표준이니까 type 으로 지정하세요). 이 때, 읽어올 파일에 대한 캐릭터셋을 지정할 수 있습니다.

<script type="text/javascript" src="/js/test.js" charset="UTF-8"></script>

눈치채셨겠지만, 동일한 캐릭터셋으로 저장된 파일이라면 굳이 선언을 하지 않아도 됩니다. 하지만, HTML 은 UTF-8 로 저장되었는데, Javascript 파일은 다른 곳에서 가져올 경우 캐릭터셋이 다를 경우 인코딩을 잘못 하여 내용이 깨질 수 있다고 판단되면 charset 애트리뷰트를 명시하여 정확하게 불러오는 것이 좋습니다.

CSS 는 <script> 와 마찬가지로 <link> 의 charset 을 이용할 수도 있지만, 반대로 CSS 파일 제일 상단에 캐릭터셋을 정의할 수도 있습니다.

@charset "UTF-8";

표준 문서에 보면 외부 css 파일을 불러올 때만 사용하고, 파일 제일 상단에 지정하라고 되어 있습니다.




이렇게 하면 정적인 HTML 에서도 인코딩 문제로 인해 글자가 깨지는 문제는 발생하지 않을 것입니다.




팁을 하나 드리면, 흔히 쓰는 이클립스에서는 확장자 별로 캐릭터셋을 UTF-8 로 미리 지정을 해서 새로운 파일을 만들 때 별도로 설정할 필요가 없도록 할 수 있습니다.
윈도우즈용 이클립스 기준으로 CSS 파일을 선언하는 곳은,

Windows > Preferences > General > Content Types

로 이동한 뒤,

Content types: > Text > CSS

을 선택하고 하단의

File associations:

에서 원하는 파일 확장자를 선택한 뒤

Default encoding:

에 UTF-8 을 입력한 뒤 Update 을 누르고 OK 을 눌러서 반영하면 됩니다. 물론 js 파일이나 JSP, HTML, Java 모두 이런 방식으로 인코딩 선언이 가능합니다.




개인적인 일이 좀 바빠서 이번 글은 좀 늦게, 그리고 성의없이(?), 그리고 짧게 끝냈습니다. 죄송합니다. 다음에는 WAS 와 JSP 에서의 설정을 설명드리겠습니다.





이 글은 제 개인 블로그(http://zepinos.blogspot.kr)와 okky(http://okky.kr)에만 공개되는 글입니다. 퍼 가는 것은 금해주시고, 링크로 대신해주시기 바랍니다. 당연히 상업적 용도로 이용하시면...저랑 경찰서에서 정모하셔야 합니다. ^^;;;

위에 작성한 코드 등은 실제 컴파일한 것이 아니라 제가 글을 적으면서 키보드 코딩(?...손 코딩의 친구) 한 것이므로, 오류가 있다면 저에게 알려주시면 고맙겠습니다.

댓글 없음:

댓글 쓰기