HTML - 문자 인코딩

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 HTML에서의 문자 인코딩이라는 흥미로운 세상으로 접어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 명확한 설명, 많은 예제, 그리고 한 조각의 유머를 더해 이 여정을 안내해 드리겠습니다. 그럼 가상의 노트패드를 집어들고, 시작해 보겠습니다!

HTML - Character Encodings

HTML Charset 속성

여러 문자 셋으로 뛰어들기 전에, 우리의 웹 페이지가 어떤 인코딩을 사용할지 알리는 방법에 대해 이야기해 보겠습니다. 여기서 HTML charset 속성이 등장합니다.

charset 속성은 일반적으로 <meta> 태그 안에 배치되며, HTML 문서의 <head> 부분에 있습니다. 다음은 예제입니다:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の素晴らしいウェブページ</title>
</head>
<body>
<h1>私のウェブサイトへようこそ！</h1>
</body>
</html>

이 예제에서 우리는 브라우저에게 UTF-8 인코딩을 사용하도록 알립니다 (나중에 이에 대해 더 설명하겠습니다). 이를 webpage가 특별한 안경을 쓰고 텍스트를 정확히 읽도록 하는 것으로 생각해 보세요.

ASCII 문자 셋

이제 문자 셋의 여정을 시작해 보겠습니다. 그 시작은 ASCII, 모든 것의 조상입니다. ASCII는 미국 표준 정보 교환 코드(American Standard Code for Information Interchange)의 약자로, 문자 인코딩의 모델 T라고 할 수 있습니다 - 오래되었지만 기초가 됩니다.

ASCII는 7비트를 사용하여 128개의 문자를 표현하며, 다음을 포함합니다:

대문자 (A-Z)
소문자 (a-z)
숫자 (0-9)
기본적인 문법 기호

다음은 오직 ASCII 문자만을 사용한 간단한 HTML 예제입니다:

<p>Hello, World! 123</p>

이 문장은 ASCII 인코딩을 사용하여 기본적인 라틴 문자와 숫자만을 포함하기 때문에 완벽하게 표시됩니다.

ANSI 문자 셋

ANSI (미국 국가 표준 협회) 문자 셋은 ASCII의 더 cool하고 다양한 사촌입니다. ANSI는 8비트를 사용하여 256개의 문자를 허용합니다. 이 추가 공간은 다양한 언어에 특화된 문자를 위한 것입니다.

그러나 ANSI는 단일 표준이 아니며, 컴퓨터의 언어 설정에 따라 달라집니다. 이는 웃픈 상황을 초래할 수 있습니다. 예를 들어, ANSI로 사랑의 편지를 보내고, 당신의 연인의 컴퓨터가 다른 ANSI 코드페이지를 사용하여 그것을 엉터리로 표시할 수 있습니다!

ISO-8859-1 문자 셋

ISO-8859-1, 또는 라틴-1은 문자 셋의 유럽 여행 가이드입니다. 이는 서유럽 언어에 사용되는 문자를 포함하는 8비트 인코딩입니다.

다음은 ASCII를 벗어난 문자를 사용한 예제입니다:

<p>Café Français</p>

ISO-8859-1 인코딩을 사용하면 이 표시가 정확하게 됩니다. 하지만 다른 인코딩을 사용하면 "CafÃ© FranÃ§ais"가 되는 경우도 있습니다!

UTF-8 문자 셋

이제 문자 인코딩의 슈퍼 헴으로 이동해 보겠습니다 - UTF-8. 이는 문자 셋의 스위스 아ーノ이 knife와도 같아, 거의 모든 문자를 인코딩할 수 있습니다.

UTF-8은 문자에 따라 변하는 수의 바이트를 사용합니다. 이는 간단한 ASCII 문자(한 바이트로 표현)와 다른 쓰기 체계의 복잡한 문자(여러 바이트로 표현)를 효율적으로 처리할 수 있습니다.

다음은 UTF-8의 다양성을 보여주는 예제입니다:

<p>Hello, नमस्ते, こんにちは, مرحبا</p>

UTF-8 인코딩을 사용하면 이 줄이 영어, 힌디어, 일본어, 아랍어로 정확하게 표시됩니다!

ISO 문자 셋

ISO는 다양한 언어 그룹에 맞춘 여러 문자 셋을 개발했습니다. 이들은 특정 지역에 맞춘 전문 도구 세트라고 생각할 수 있습니다. 다음은 일부 일반적인 ISO 문자 셋의 표입니다:

문자 셋	설명
ISO-8859-1	서유럽 언어
ISO-8859-2	중앙 및 동유럽 언어
ISO-8859-3	남유럽 언어
ISO-8859-4	북유럽 언어
ISO-8859-5	키릴 문자
ISO-8859-6	아랍어
ISO-8859-7	그리스어
ISO-8859-8	히브리어

UTF 문자 셋

UTF (Unicode Transformation Format)은 문자 인코딩의 현대적인 해결책입니다. 이는 세계의 모든 쓰기 체계의 문자를 하나로 모은 유엔과도 같습니다.

UTF 인코딩은 세 가지 주요 형식이 있습니다:

UTF-8: 변하는 폭의 인코딩, ASCII와 호환 가능.
UTF-16: 대부분의 일반 문자에 16비트 사용, 다른 문자는 더 많이 사용.
UTF-32: 모든 문자에 32비트 사용.

다음은 비교 표입니다:

인코딩	특성	가장 적합한 경우
UTF-8	변하는 폭 (1-4 바이트)	웹 페이지, ASCII 호환 환경
UTF-16	변하는 폭 (2 또는 4 바이트)	운영 체제, 자바
UTF-32	고정 폭 (4 바이트)	빠른 문자 접근이 중요한 경우

제가 가르치는 연간 동안, UTF-8이 가장 흔하게 사용되고 웹 개발에 추천되는 인코딩임을 알게 되었습니다. 이는 문자 인코딩의 "하나의 반지로 통치하라"는 것과도 같습니다.

마지막으로, UTF-8을 HTML에서 어떻게 사용하는지 실제 예제를 보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>다국어 인사말</title>
</head>
<body>
<h1>우리의 국제 페이지에 오신 것을 환영합니다!</h1>
<p>English: Hello</p>
<p>Spanish: Hola</p>
<p>French: Bonjour</p>
<p>German: Guten Tag</p>
<p>Russian: Здравствуйте</p>
<p>Chinese: 你好</p>
<p>Japanese: こんにちは</p>
<p>Arabic: مرحبا</p>
</body>
</html>

이 페이지는 UTF-8 인코딩을 사용하여 여러 언어로 인사말을 정확히 표시합니다.

기억해 두세요, 적절한 문자 인코딩을 선택하는 것은 여정에 맞는 적절한 신발을 고르는 것과 같습니다. UTF-8은 어디로든 데려다줄 수 있는 편안한 신발이지만, 다른 인코딩은 특정 지형에 더 적합할 수 있습니다.

이 강의를 마치면서, HTML에서 문자 인코딩에 대한 견고한 이해를 얻었기를 바랍니다. 계속 연습하고, 호기심을 유지하며, 다른 문자 셋을 실험해 보지 마세요. 행복한 코딩을 기원합니다!

Credits: Image by storyset