[타이포그래피] '커닝'의 중요성
보기 좋은 텍스트의 비밀
거리를 걸으며 무심결에 쇼윈도에 비친 모습을 보고, 내키지 않은 상황에 찍힌 단체사진 속 모습을 보고 "눈, 코, 입의 위치를 조절할 수 있으면 좋겠다"라는 생각을 종종 하곤 했는데요. 셀카 어플에 이목구비의 위치를 조절하는 기능이 기본으로 들어있는 걸 보면 저만 그런 생각을 했던 건 아니었나 봅니다. 사람들은 친절한 자동 보정 기능에는 눈길 한 번 안 주면서 완벽한 프로필 사진을 위해 시간을 쏟는 건 아까워하지 않습니다. 시간이 남아도는 것도 아닌데 왜일까요?
답답하면 니들이 뛰던가. jpg그건 우리가 기계보다 섬세한 시각을 가졌기 때문입니다. 저는 그림은 잘 못 그리지만 빛의 방향이라던지.. 어딘가 어색한 그림은 잘 찾아냅니다. 화려한 CG를 직접 연출할 수는 없지만 어설픈 CG는 바로 캐치하고 '이 영화는 저예산이구나'라고 인식합니다. 어떤 부분에서 어색하다고 느껴지는지 정확한 이유는 저도 모릅니다.
이 처럼 사람의 눈은 정교하며(사람마다 다르겠지만) 미세한 차이도 곧바로 알아차릴 만큼 예민하죠. 디자인 작업을 할 때도 마찬가지입니다. 전문가가 아니더라도 무심결에 본 포스터의 어떤 부분이 어설픈지 정도는 귀신같이 알아 챈다는 말입니다. 어딘가 2% 부족하게 느껴지는 이유는 디테일의 한 끗 차이인 경우가 많은데요.
타이포그래피에서 드러나는 경우가 많습니다. 위계, 그룹핑, 대비 등.. 많은 요소가 있지만 그중에서도 '커닝'값을 조절할 때 시각 보정을 활용하는 방법을 소개해드리려고 합니다. 처음에는 익숙하지 않겠지만 트레이닝 과정을 겪다 보면 자연스레 컴퓨터의 정렬 기능보다 나의 눈을 더 믿게 될 거예요.
자간? 커닝?
커닝 (kerning) 이란 글자의 간격을 조절한다는 뜻을 가지고 있습니다. '??? 자간이랑 같은 말 아니야?'라고 생각하실 수 도 있지만.. 자간과 커닝은 다른 의미를 가지고 있습니다. '자간'은 활자의 모양과 관계없이 고정된 수치 값을 부여하는 것이고 '커닝'은 활자의 모양에 따라 글자의 간격을 시각 균형에 맞게 조절하는 것입니다. 자간은 '고정된 수치 값이 존재'하고 커닝은 '고정된 수치 값이 없다'라고 생각하면 기억하기 쉽습니다.
커닝 값 조절 하기_1. 한글
"시각보정을 해봅시다"라는 문장을 예로 들어보겠습니다. (띄어쓰기는 하지 않겠습니다.) 위의 문장은 고정된 자간 값을 가졌고 아래의 문장은 시각 균형이 맞도록 커닝 값을 조절했습니다. 커닝을 조절하지 않은 문장은 같은 자간 값을 가지고 있지만 앞서 얘기한 것처럼 활자의 형태에 따라 '시'와 '다'의 사이 공간은 넉넉해 보이고 '을'과'해' 사이 공간은 좁아 보이는 효과가 나타납니다.
이해를 돕기 위해 자간 값과 상관없이 우리 눈이 인식하는 공간을 빨간색 박스로 표시했습니다. 자세히 보면 활자의 끝과 끝이 맞닿는 부분을 맞추는 게 아니라 모양에 따라 값을 조절한 것을 알 수 있습니다. 대표적으로 'ㅇ'이나 'ㅅ'같은 자음과 'ㅏ,ㅓ'이나'ㅔ,ㅐ' 같은 모음의 조합에서 배열이 고르지 않아 보이는 효과가 나타납니다.
그러나, 한글의 경우 겉으로 보기에 차이가 크지 않기 때문에 필수로 조절해야 하는 건 아니지만 내가 입힌 텍스트가 왠지 모르게 응집력이 없고 균형이 안 맞는 느낌이 들 때 활용하면 좋습니다.
커닝 값 조절 하기_2. 영문
영문의 경우 겉으로 보기에도 차이가 크기 때문에 표시는 생략했습니다.예시 이미지의 좌측을 보면 'T'와 'w'의 공간이 다른 것에 비해 넓게 느껴져서 배열이 고르지 못해 보인다는 것을 알 수 있습니다. 영문의 경우 활자의 모양에 따라 느껴지는 공간의 차이가 크기 때문에 커닝 값을 조절하는 것은 필수인데요. 대문자와 소문자, 세리프와 산세리프 등의 요소에도 영향을 받지만, 대표적으로 'T', 'W', 'A', 'o', 'l', 'i' 등 굴곡이 없거나 많은 활자에서 차이가 도드라집니다.
매거진 같은 인쇄물이나 웹에서도 중요한 요소지만 로고를 제작할 때는 묻지도 따지지도 않고 커닝 값을 조절해야 합니다. 일반 카메라로 찍은 원본 사진을 카톡 프로필로 쓰지 않는 것 과 비슷한 맥락입니다.
문단의 시각 보정
문단이나 그룹끼리의 정렬에도 활용할 수 있습니다. 좌측은 시각 보정을 거치지 않고 포토샵의 정렬 기능을 이용한 예시입니다. 좌측 라인을 보면 들쑥날쑥하죠. 사람의 시각이 아닌 프로그램에 의한 정렬이기 때문입니다.
반면에 우측 예시를 보면 좌측 라인이 가지런하게 정렬되어 보입니다. 실제로 'I' 보다 'O'의 기준선이 좀 더 앞으로 나와있음에도 균형이 안정적으로 보이는 이유는 활자의 끝 부분을 기준으로 두는 것이 아니라 모양에 따른 시각 균형을 기준으로 뒀기 때문입니다.
다시 정리해보면, 자간이란 글자와 글자 사이 활자의 모양에 관계없이 고정된 수치 값을 가집니다. 커닝이란 활자의 모양에 따라 글자와 글자 사이를 시각 균형에 맞게 조절하는 것입니다.
한글의 경우 (서체에 따라) 겉으로 보기에 공간의 차이가 크지 않아서 커닝을 조절하는 것이 필수는 아니지만, 타이틀 디자인을 하거나 정보의 양이 많아 가독성을 높여야 하는 경우에 활용하면 완성도 높은 결과물을 얻을 수 있습니다.
영문의 경우 활자 모양에 따른 공간의 차이가 커서 커닝을 조절하는 것은 필수입니다. 서체에 따라 대문자, 소문자에 따라서도 차이가 있습니다. 텍스트가 많은 인쇄물이나 웹에서도 중요한 요소이며 로고를 제작할 때는 필수입니다.
나눠진 문단과 그룹끼리의 정렬을 할 때에도 굉장히 유용합니다. 정렬을 할 때 기준은 활자의 끝 부분이 아니라 모양에 따른 균형에 맞춥니다.
커닝에 대한 감을 더 키우고 싶으시다면 아래 링크에서 테스트해볼 수 있습니다. 글자를 마우스로 움직여서 조절한 다음 (처음과 끝 글자는 조절이 불가합니다.) 전체적인 배열의 균형이 맞다 싶을 때 'Done'이라는 버튼을 누르면 해당하는 점수가 나옵니다.
