프론트엔드 개발자가 알아두면 좋은 한글 타이포그래피

Seoyong Lee·2022년 8월 4일

개발 관련 생각들

목록 보기

5/9

본 글은 한글 타이포그래피 안내서를 읽고 관련 내용을 참고하여 작성한 글입니다.

타이포그래피?

우리는 대부분의 업무를 글을 쓰는 방식으로 진행한다. 너무나 자연스럽게 쓰고 있어서 깊이 생각해 보지 않았더라도 당장 글 사이 간격이나 행간 조절 등의 단어가 무엇을 의미하는지는 대충 알고 있을 것이다. 그렇다면 이러한 글자를 표현하는 프론트엔드 개발자들은 어떨까? 생각보다 텍스트 스타일링 작업을 많이 진행한다는 점에는 공감할 것이다. 그렇다면 이렇게 개발 과정에서 중요한 부분을 차지하는 타이포그래피에 대해서 우리는 얼마나 알고 있을까? 이러한 의문을 해결하기 위해 타이포그래피에 관한 서적을 둘러보던 중 우연히 '한글 타이포그래피 안내서'를 발견하게 되었다.

한글 타이포그래피 안내서

이 책은 디자인 전공자 혹은 타이포그래피를 처음 배우는 사람을 대상으로 작성되어 타이포그래피의 기초에 대해 쉽게 설명하고 있다. 책의 내용은 주로 인쇄물과 관련된 타이포그래피 이론이 중심이지만 이중 웹디자인 혹은 프론트엔드 개발과 관련해서 알아두면 좋을 내용을 추려 정리해 보았다.

1. 한글 서체는 제작 방식에 따라 '조합형'과 '완성형'으로 나누어진다

조합형
조합형 글꼴은 닿자, 홀자, 받침을 각각 디자인한 후 이를 모듈 구조로 조합해서 만들어진다. 이렇게 만들어진 글자는 '세벌식'이라고 부르기도 하며, 대표적으로 안상수체가 이러한 방식으로 만들어져있다.
완성형
완성형 글꼴은 한글을 음절문자처럼 온자 단위로 디자인하는 방식으로 대부분의 한글 글꼴은 이러한 방식으로 제작된다.

대표적인 조합형 타이포그래피 안상수체 (출처: AG타이포그라피연구소)

대부분의 서체는?
현대 한글을 모두 적기 위해서는 11,172자가 필요하므로 이를 모두 완성형으로 개발하기에는 시간이 너무 오래 소요되므로 대체로 완성형 한글 코드(KS X 1001)로 지정된 2,350자와 사용 빈도가 높은 일부 글자만 완성형으로 디자인하고 나머지 글자는 일정 패턴에 따라 조합하여 생성한다. (나눔고딕의 경우 2,350자는 완성형, 8,822자는 조합형으로 개발)
개발자가 알아야 할 점
폰트는 서로 바뀌어도 같은 글자를 표현하기 위해 글자별로 코드 값을 부여한 문자 집합 규격을 따른다. 만약 특정 글자가 화면에 표시되지 않거나 빠짐표(□) 처리되어 있다면 해당 코드 값에 해당하는 글자가 포함되어 있지 않은 것으로, 다른 폰트로 교체가 필요하다! (일부 프로그램은 기본 시스템 폰트로 대체되어 표시 자체는 되어있을 수 있다)

2. 인쇄용 서체와 화면용 서체는 서로 다르다

인쇄용 서체
인쇄용 서체의 경우 모니터에서 굉장히 못생겨 보일 수 있다(바탕체 등). 이는 화면 형태 어그러짐 보완을 위한 힌팅(hinting) 기술 등이 적용되지 않았기 때문으로 이러한 서체들은 오히려 망점을 이용하는 인쇄물에서 더욱 정교하게 표현된다. 인쇄용 서체는 잉크를 섞을수록 어두워지는 감산혼합 방식으로 구현되므로 화면용 서체에 비해 굵기가 더 굵어 보인다.
화면용 서체
디스플레이장치에서 사용되는 것을 전제로 하여 개발된 화면용 글꼴은 형태를 더욱 단순하게 정리하여 글자 왜곡을 피한다. 대표적인 예로는 이응에 상투가 없고 속공간을 닫는 등의 차이가 있으며 글자 크기가 상대적으로 큰 것도 특징이다. 돋움체(고딕)의 경우 인쇄용과 화면용 서체의 차이가 없는 편이다. 모니터는 색을 섞을수록 밝아지는 가산혼합 방식으로 구현되기 때문에 흰 바탕에 검은 글자를 구현하는 경우 주변 빛에 의해 글자가 원래보다 가늘어 보인다.
개발자가 알아야 할 점
선택한 폰트가 화면 출력에 최적화될 수 있도록 힌팅 적용이 된 것인지 확인하는 것이 좋다. 힌팅은 아웃라인 글꼴을 저해상도 장치에서 작은 사이즈로 출력할 때 생기는 문제를 해결하기 위한 기술로 아웃라인 글꼴에 힌트(Hint) 정보를 추가하여 화면상의 글꼴을 선명하고 보기 편하게 만들어 준다. 힌팅은 인쇄장비(600~1440 dpi) 보다 현격히 낮은 해상도인 디스플레이 장비(72~120 dpi)에서 서체를 더욱 미려하게 표현할 수 있는 기술이다. 구 모바일 브라우저 대응을 위해 SVG 포맷 서체를 사용하는 경우 서체의 힌팅 정보를 불러올 수 없으므로 선명한 표현을 위해선 다른 방식을 사용하여야 한다.

힌팅 작업 과정 (출처: rakfont님의 블로그)

3. 좋은 폰트 고르기

1.한글 외에 문장부호 등의 다른 글리프(glyph)를 전혀 포함하지 않는 폰트도 있으므로 글자의 구성을 살핀다
2.하나의 폰트에 포함된 전체 글리프가 일관성을 유지하는지 확인한다
3.활용 가능한 활자가족(font-weight과 같은 굵기에 따른 종류와 매칭되는 고딕 명조 등)의 규모를 살핀다
4.본문용 폰트라면 글자 간격이 균일한지 확인한다

4 폰트의 저작권

폰트의 사용에 앞서서 이용 범위를 확인하는 것이 좋다. 폰트 구매 시 소유권 자체를 이전받는 것이 아닌, 일정 범위 내에서의 사용 권리를 받는 것이기 때문이다. 문서, 인쇄 출판물, 웹사이트에 사용하는 것은 일반적으로 허용되지만 영상 자막이나 브랜드 로고에 대한 사용은 추가 계약이 필요한 경우가 많다. 특히 서버나 응용프로그램에 폰트 파일을 임베딩 하는 경우나 수정 재배포하는 경우에는 거의 모든 상용 폰트에서 금지하므로 유의하여야 한다!
개발자가 알아야 할 점
해당 폰트가 무료이더라도 이를 이용해서 프로그램을 만드는 등 임베딩을 할 경우 폰트 제작 업체에 따로 연락해 보자.

5. 간격과 정렬

글줄사이(line-height)
보통 적정한 글줄사이 길이는 낱말사이보다 넓고 글줄들이 하나의 단락을 유지하도록 하는 것이 좋다. 이를 line-heigt에 적용하면 보통 150% 이상 되어야 시각적으로 글줄 단위를 쉽게 지각할 수 있다.
단락정렬(text-align)
일반적인 단락 정렬 방식은 '양쪽정렬(justify)', '왼쪽정렬(left, start)', '오른쪽정렬(right, end)', '중앙정렬(center)'이 있다. 이 중 양쪽정렬은 신문 등에서 가장 일반적으로 쓰이는 방식이나 글자사이 간격이 매번 다르고 글줄 끝의 띄어쓰기 여부를 알 수 없다는 단점이 있다. 왼쪽정렬은 글줄 끝점이 매번 달라지므로 리듬감을 줄 수 있고 글자사이와 낱말사이 간격을 균일하게 유지한다는 장점이 있다. 오른쪽정렬과 중앙정렬은 글줄의 시작점이 계속해서 달라지므로 많은 분량의 글에는 부적합하다.

줄바꿈(word-break)
양쪽정렬이 아닌 경우 어절 단위로 잘리도록(word-break: keep-all) 해야 글줄 끝에서 잘린 어절 일부를 완전한 상태로 오해하는 등의 비효율이 발생하지 않는다. 그러나 양쪽정렬의 경우 음절 단위로 잘리도록 해야 글자사이 공백이 지나치게 넓어지는 것을 방지한다.
개발자가 알아야 할 점
글줄 사이가 너무 붙어있거나 지나치게 긴 글을 가운데정렬 하고 있지는 않은지 확인해 보자! 또한 양쪽정렬이 아닌 경우에는 되도록 어절 단위 분리를 적용하자.