글자랑은 웹에서 글자꼴(font)을 간편하게 디자인/프로토타이핑해 볼 수 있는 웹서비스로 사용자가 자신이 원하는 글자를 입력하면 해당 글자를 웹상에 시각화해줍니다. 그러기 위해서는 첫 번째로 어떤 글자가 입력되었는지 인식하고, 해당 글자를 자음과 모음으로 분리하여야 합니다. 그리고 자음, 모음의 그림을 각각 불러와 정해진 위치에 배치하게 됩니다. 이번 포스트에서는 자음과 모음을 어떻게 분리하는지 그 방법을 공유하려고 합니다.
11,172자의 한글 글자마다 자음, 모음 조합을 일일이 수작업으로 표기할 수도 있겠지만, 그 양이 워낙 방대하기 때문에 자동으로 처리하는 것이 필요하겠죠. 자동화를 위해서 우선적으로 한글의 글자를 컴퓨터가 이해할 수 있는 '숫자'로 변환하여야 합니다. 여기에 사용된 숫자가 바로 ‘유니코드’라는 개념인데요. 인간이 사용하는 문자를 임의의 숫자로 변환한 약속 같은 개념입니다.
아스키코드
위처럼 알파벳의 대문자와 소문자 그리고 구두점 등 특수문자를 정해진 숫자랑 매칭해 놓은 것을 ‘아스키코드’라고 부릅니다. 하지만 아스키코드는 7비트의 정보체계로 128가지의 정보밖에 표현할 수 없어서 전 세계의 모든 문자를 담기에는 버거웠습니다. 그래서 등장한 것이 유니코드로 한글의 11,172자뿐만 아니라 8만자가 넘는 한자(漢字), 더 나아가 이모지까지도 표현할 수 있어서 그 양은 어마어마합니다.
한글의 유니코드
유니코드는 16진수 체계로 되어있으며 글자를 유니코드로 표기할 때 'U+16진수 숫자'라고 씁니다. 위의 표처럼 '가'는 U+AC00이라고 표시되는 식입니다.
가장 먼저 개발한 부분은 사용자가 text field에 글자를 입력하면 그 글자를 유니코드로 변환하는 기능입니다.
'문자'.charCodeAt()함수는 String이 어떠한 유니코드를 가지고 있는지 10진수로 반환하는 함수입니다. 반면에 String.fromCharCode(유니코드)는 거꾸로 유니코드를 매개변수로 받아 해당 유니코드의 글자를 출력해줍니다. 이 두 함수를 통해서 '유니코드 ↔ 문자'를 자유롭게 변환할 수 있게 됩니다.