size-adjust calculator — 섞어짜기 보정 계산기

웹사이트를 디자인하다보면 항상 부딪히게 되는 문제가 있다. 한글과 로만 알파벳을 함께 사용하는 경우가 많은데, 크기가 제각각이다. 그래서 일반적으로 한글 서체는 로만 알파벳을 포함하고, 함께 사용하는 것을 전제로 만들어진 경우가 많다.

그럼에도 불구하고 많은 디자이너들은 각자의 목적을 위해 한글 서체와 영문 서체를 별도로 사용하는 경우가 많다. 그래서 Adobe Indesign에서는 '합성 글꼴' 기능을 제공하여 섞어짜기를 구현할 수 있도록 하였다.

하지만 웹 환경에서는 CSS의 font-family 속성에서 영문 서체를 먼저 정의하고, 그 뒤에 한글 서체를 정의하는 것 외에는 언어별 글자 크기, 기준선 수정등의 디테일한 수정이 불가하다.

이에 제4회 ‹타이포잔치›의 웹사이트를 제작하는과정에서 개발되어 오픈 소스로 배포된 mutlilingual.js 라는 라이브러리가 만들어졌다. 이 라이브러리는 HTML문서 안에서 특정 문자세트로 표기된 단어들을 정규식(Regular Expression)으로 골라내어 그 단어들을 <span> 태그로 감싸고, 언어 및 부호에 따라 별도의 클래스 이름을 부여한다. 기본으로 지원되는 문자세트는 영문(en), 한글(ko), 중문(cn), 일문(jp), 숫자(num), 문장부호(punct)가 있고, 별도로 낱자들을 골라내어 별도의 클래스 이름을 지정하는 것도 가능하다.

이 라이브러리 덕분에 https://khakis2020.com 의 리뉴얼 전 스토어는 아주 두꺼운 Khakis2020 서체와 Noto Sans CJK간의 조합을 원활하게 사용할 수 있었다.

다만 multilingual.js는 모든 언어를 구분해내어 <span> 태그를 추가하고, 개별 클래스를 부여하기 때문에 레이아웃 시프트가 필연적으로 발생하고, 클래스 및 스타일 설정이 플랫폼 템플릿/테마에 종속된 경우 많은 양의 CSS 수정이 필요한 것이 단점이다.

그래서 나는 조금 더 효율적인 방법을 계속해서 모색해왔고, 최근 size-adjust라는 속성을 알게되었다. 이 속성은 웹 폰트를 CSS 파일에서 지정할 때, %단위로 크기를 조정할 수 있다. 크롬 브라우저에서는 line metric override 속성들을 활용하면 더욱 더 상세한 설정이 가능하다.

가장 고충을 겪게되는 크기 차이 문제부터 이 속성을 통해 해결할 수 있게 되었다. 이에 나는 Claude Code와 함께 한글 서체를 기준(100%)로 영문 서체는 몇%로 지정해야 하는지 계산해주는 도구를 만들었다.

기준 폰트 및 보정할 폰트(라틴)을 로컬환경 혹은 업로드를 통해 지정할 수 있다. 지정된 서체를 cavans 환경에서 그려 크기와 높이를 계산하고, 어떤 기준으로 보정할 지 고를 수 있다. 그리고 해당 값을 CSS로 작성하여 복사하여 바로 적용할 수 있게 한다.

보기와는 달리 굉장히 단순하고 직관적인 도구이기에 직접 사용해보기를 권한다. 사용하는데 문제가 있다면 메일을 통해 알려달라.

바로가기