한글 사용자로서 누릴 수 있는 기쁨인 동시에 고통 가운데 하나는 ‘섞어 짜기’입니다. 이는 여러 언어의 문자를 한 줄 안에서 조합해 조판하는 일을 뜻합니다. 한글과 로마자, 숫자, 특수문자, 한자나 가나 등 서로 다른 문자 체계를 한 화면에 자연스럽게 조화시키기란 생각보다 손이 많이 갑니다. 각 문자의 크기, 기준선, 자간, 굵기, 색상 등이 제각각인 까닭이죠. 이는 인쇄물뿐 아니라 웹 환경에서도 마찬가지입니다.
이런 문제를 해결하고자 소원영, 강이룬 선생님은 2015년 제4회 『타이포잔치 2015: 문자와 도시』의 웹사이트를 제작하는 과정에서 multilingual.js라는 오픈소스 자바스크립트 라이브러리를 개발해 공개한 바 있습니다. 동아시아권 디자이너들이 HTML과 CSS 환경에서도 인디자인의 ‘합성 글꼴’ 기능처럼 다국어 타이포그래피를 섬세하게 제어할 수 있도록 돕기 위한 도구였죠.
multilingual.js는 HTML 문서에서 특정 문자 세트(한글, 로마자, 한자 등)를 정규 표현식으로 탐지한 뒤 해당 단어를 인라인 속성의 <span> 태그로 감싸고 문자 종류에 따라 고유한 클래스명을 부여합니다. 이 방식 덕에 디자이너는 각 문자 유형별로 다른 폰트, 자간, 위치 등을 개별적으로 설정할 수 있게 되죠. 말하자면 웹 기반 다국어 타이포그래피의 실험적이지만 유효한 출발선이었던 셈입니다.
「다국어 타이포그래피 도우미」(Multilingual Typography Assistant)는 저 또한 즐겨 사용해온 multilingual.js를 조금 더 쉽게 사용할 수 없을지 고민한 결과물입니다.
「다국어 타이포그래피 도우미」는 multilingual.js의 확장판 또는 플러그인이라 할 만합니다. 한글, 로마자, 가나, 한자, 숫자, 특수문자 등 문자마다 컴퓨터에 저장된 폰트의 이름을 입력하거나 폰트 파일을 업로드해 다국어 타이포그래피를 테스트해볼 수 있습니다. 글자 크기, 줄 높이, 자간, 수직 위치, 색 등을 조절해볼 수도 있고요. 물론 오른쪽의 CSS 코드를 복사해 자신의 웹사이트에 적용해볼 수도 있죠. 아쉽게도 사이드바를 비롯해 창이 제법 많이 나뉘는 탓에 랩톱 또는 데스크톱에서만 실행됩니다. 그뿐입니다.
한편, 섞어 짜기, 다국어 타이포그래피에 관심 있는 분은 『글짜씨 13: 기술과 타이포그래피』에 실린 논문 「multilingual.js: 다국어 웹 타이포그래피를 위한 섞어쓰기 라이브러리」을 참고하시기 바랍니다. multilingual.js의 작동 원리와 디자이너를 위한 기술적 맥락이 꼼꼼히 정리돼 있으니까요.