CE101
그림과 연습 문제로 이해하는 문자 인코딩
CSV 를 Excel 로 열었더니 「縺薙ｓ縺ｫ縺｡縺ｯ」 같은 한자 나열. 메일 제목이 기호 뭉치. 데이터베이스에 넣은 이름이 「????」— 문자 깨짐(글자 깨짐)은 늘 겪는 일인데도, 원인을 설명해 보라고 하면 의외로 어렵습니다. 이 강좌는 대처법의 통암기가 아니라, 깨진 화면을 보면 「어느 인코딩으로 쓰인 바이트 열을, 어느 인코딩으로 읽어 버렸는가」를 스스로 추리할 수 있게 되는 것을 목표로 합니다. 그림으로 구조를 잡고, UTF-8 의 바이트 열을 손으로 조립하고, 마지막에는 실무풍의 문자 깨짐 케이스를 추리하며 마무리하는 구성입니다.
그림 → 번호 → 바이트 열 → 추리
전 43 문제
브라우저 내 채점
localStorage 저장
소요 시간
3〜4 시간
문제 수
전 43 문제
형식
7 장 + 소문제 + 시뮬레이터
비용
무료
파일의 실체는 바이트 열뿐이고, 「무슨 인코딩인가」라는 표찰은 붙어 있지 않습니다. 같은 바이트 열이라도 읽는 방식이 다르면 다른 문자로 보인다 — 이 한 장이 강좌 전체의 출발점입니다.
이 강좌의 특징
본문 바로 아래에 소문제
읽은 직후에 1〜3 문제씩 푸는 구성이므로, 「이해한 것 같은 기분」인 채로 앞으로 나아가기 어렵게 되어 있습니다.
UTF-8 을 손으로 조립한다
일본어 문자 「あ」 U+3042 가 E3 81 82 의 3 바이트가 되기까지를, 비트 흘려 넣기로 직접 계산합니다.
바이트 열 시뮬레이터
제 3 장의 시뮬레이터에 원하는 문자열을 넣으면, 코드 포인트·UTF-8 의 바이트 열·UTF-16 의 코드 단위, 나아가 「Shift_JIS 로 오독한 모습」까지 눈으로 확인할 수 있습니다.
브라우저 내 채점·등록 불필요
전 43 문제는 브라우저 안에서 채점되며, 결과는 사용 중인 브라우저의 localStorage 에만 저장됩니다. 서버에는 아무것도 전송하지 않습니다.
이 강좌를 관통하는 1 가지 관점
문자는 컴퓨터 안에서 항상 2 단계로 다루어집니다. 이 2 단계를 나누어 생각할 수 있게 되는 것이 이 강좌의 전부입니다.
제 1 단계: 번호(코드 포인트)
문자 집합이, 어느 문자에 몇 번을 매길지를 정한다. Unicode 에서는 일본어 문자 「あ」 = U+3042. (제 2 장)
제 2 단계: 바이트 열(인코딩)
인코딩이, 그 번호를 어떻게 바이트 열로 만들지를 정한다. UTF-8 이라면 U+3042 → E3 81 82. (제 3〜5 장)
깨졌을 때의 틀
파일에는 어느 인코딩인지의 표찰이 붙어 있지 않으므로, 「쓴 인코딩」과 「읽은 인코딩」이 어긋나면 다른 문자로 보인다. (제 1·6·7 장)
이 강좌의 구호: 문자 깨짐을 보면, 거기서 생각을 멈추지 말고 물어보세요 — 어느 인코딩으로 쓰인 바이트 열을, 어느 인코딩으로 읽어 버렸는가?
장 구성
1 도입 — 문자 깨짐은 왜 일어나는가
5 문제. 파일의 실체는 바이트 열뿐이라는 것, 같은 바이트 열이 읽는 방식에 따라 다른 문자가 된다는 것, 문자 집합과 인코딩의 구별을 다집니다.
2 ASCII 에서 Unicode 로 — 문자에 번호를 매긴다
6 문제. 7 비트의 ASCII 에서, 일본어 문자 집합의 난립을 거쳐, 세계의 모든 문자에 고유 번호를 매기는 Unicode 까지. U+XXXX 표기의 읽는 법도 연습합니다.
3 UTF-8 을 손으로 조립한다
6 문제. 가변 길이 규칙을 배우고, U+3042 를 실제로 E3 81 82 로 손 계산합니다. ASCII 호환이 통하는 이유와 BOM, 시뮬레이터 포함.
4 Shift_JIS 와 일본어의 사정 — 다메 문자와 CP932
6 문제. 2 번째 바이트가 ASCII 영역에 파고드는 구조에서 「다메 문자」 문제를 끌어내고, 반각 가나·CP932·지금도 현역인 이유까지.
5 UTF-16 과 서로게이트 페어 — 문자 수의 함정
6 문제. 「𠮷」나 이모지가 2 코드 단위가 되는 구조를 따라가며, length 가 눈에 보이는 문자 수와 일치하지 않는 이유를 계산으로 확인합니다.
6 실무의 함정 — 선언과 실체를 일치시킨다
6 문제. charset 선언과 실체의 불일치, Excel 과 BOM 있는 UTF-8, 줄바꿈 코드, 데이터베이스의 연결 설정 — 현장의 단골을 총정리합니다.
7 종합 연습 — 문자 깨짐을 추리한다
8 문제. 「縺薙ｓ縺ｫ縺｡縺ｯ」 「ã“ã‚“…」 등의 단골 패턴을 지문으로 읽고, 실무풍 케이스로 전 장을 횡단합니다.
수강 요령
- 본문 → 바로 아래의 소문제 순서로 진행해 주세요. 모아서 나중에 푸는 것보다, 읽은 직후에 푸는 편이 정착됩니다.
- 제 3 장의 비트 흘려 넣기는 반드시 종이에 2 진수를 쓰면서 손을 움직여 주세요. 한 번 스스로 E3 81 82 를 도출하면, UTF-8 이 「암기물」에서 「계산할 수 있는 것」으로 바뀝니다.
- 제 3 장의 시뮬레이터에는 자신의 이름이나 업무에서 다루는 문자열을 넣어 보세요. 바이트 수와 문자 수의 어긋남이 체감으로 바뀝니다.
- 제 7 장의 케이스 문제에서 막히면, 대응하는 장으로 돌아가 1〜2 바퀴만 복습해 주세요. 전부 다시 할 필요는 없습니다.
시작 전 전제
- 텍스트 파일이나 CSV 를 다루어 본 경험이 있으면 충분합니다. 프로그래밍 경험은 필수가 아닙니다.
- 16 진수는 「0〜9 와 A〜F 로 수를 나타내는 표기법」이라는 정도의 전제에서, 장 안에서 읽는 법을 연습합니다.
- 2 진수와 16 진수의 상호 변환(4 비트 = 16 진 1 자리)만은 제 3 장에서 사용하므로, 본문 중에 복습을 끼워 넣습니다.