윤디자인, 윤디자인연구소, 이새봄, 윤톡톡, 레터링, 폰트, 글꼴, 서체, 한글, 한글 레터링, 서체디자이너, 폰트디자이너, 시각삭제, 착시현상, 아름다운 한글, 타이포그래피,



초등학교 시절, 포스터를 참 많이 그렸던 것 같아요. 불조심 포스터, 반공 포스터, 교통안전 포스터 등등. 포스터를 그릴 때마다 제일 신경 많이 썼던 부분이 글자였던 것 같아요. 일정한 크기의 네모 칸에 글자를 그려 넣어야 하니, 표어 문구의 글자수를 적게 하게나 최대한 그리기 쉬운 글자들을 쓰려고 머리를 이리저리 굴렸던 기억이 있네요.



윤디자인, 윤디자인연구소, 이새봄, 윤톡톡, 레터링, 폰트, 글꼴, 서체, 한글, 한글 레터링, 서체디자이너, 폰트디자이너, 시각삭제, 착시현상, 아름다운 한글, 타이포그래피,

  어느 초등학교 아이들의 불조심 포스터 / 출처: 네이버 블로그



그렇게 한글을 그리다 보면 나는 신경 쓰면서 그리긴 했는데 무언가가 어설프거나 어색하고 덜 만들어진 것 같은 느낌이 들기도 했었죠. 그때는 무슨 이유에서 그랬는지 몰랐지만, 지금은 그 이유를 알고 있습니다! 그래서 오늘은 한글을 그릴 때 조심해야 하는 몇 가지 유의사항에 대해 말씀 드리고자 합니다. :D



▶ 한글 레터링의 대부, 김진평을 아시나요? (바로가기)

▶ 한글 레터링의 오늘, 한글을 그려서 말하는 사람: 김기조 (바로가기)






한글 레터링 그릴 때 기억해야 하는 두 가지


지금 말씀드릴 것은 한글을 그릴 때 적용되어야 하는 규칙들인데요, 이는 디자인 콘셉트를 더 우선적으로 드러내는 한글 레터링에 적용할 수 있고, 비교적 표준화된 글꼴을 가져야 하는 폰트 디자인에서도 적용이 되는 규칙들입니다. 크게 두 가지로 나눌 수 있는데요, 바로 글자를 구성하는 획의 굵기에 관련된 규칙과 글자들끼리 모였을 때의 조화를 이룰 수 있도록 자소의 크기를 조절하는 규칙입니다. 



1. 획의 굵기를 일정하게 하라! 

하나의 글자는 여러 직선들과 곡선의 획으로 이루어져 있지요. 그래서 한 글자가 굵기에서 안정감을 드러내기 위해서는 이들 사이에 무게의 균형이 필요합니다. 포스터 글자와 같이 글자를 고딕체로 그린다고 가정했을 때, 일단 같은 굵기의 획으로 가로획, 세로획을 긋겠지요. 그러다 ‘ㅅ’이나 ‘ㅈ’과 같은 자음이 오면 별다른 고민 없이 가로획과 세로획에 쓰인 획의 굵기 그대로 대각선을 긋겠죠? 그러나 여기서 문제가 생깁니다. 분명히 같은 굵기로 대각선을 그렸는데, 어랏? 획의 굵기가 각각 달라 보입니다. 


윤디자인, 윤디자인연구소, 이새봄, 윤톡톡, 레터링, 폰트, 글꼴, 서체, 한글, 한글 레터링, 서체디자이너, 폰트디자이너, 시각삭제, 착시현상, 아름다운 한글, 타이포그래피,

같은 굵기의 획임에도, 획의 방향에 따라 굵기가 각기 다르게 보인다



자, 상상만으로 이해가 가지 않으실 까봐 준비했습니다. 위 그림의 1, 2, 3 기둥을 봐주세요. 똑같은 사각형으로 방향만 다르게 한 것뿐입니다. 그러나 시각적으로 보이는 굵기가 다르게 느껴질 것입니다. 


먼저 1과 2 기둥을 살펴보면, 같은 굵기라도 세로획보다는 가로획일 때의 시각적인 굵기가 더 굵어 보입니다. 이는 우리가 한 글자를 볼 때 우리 눈이 초성부터 위에서 아래 순으로 보기 때문에 글자 하나 하나를 읽어나갈 때 수평보다는 수직 방향에 하중이 실리게 되기 때문이지요. 그래서 일반적으로 획의 굵기가 일정해 보이는 고딕체의 경우라도, 세로획보다는 가로획을 더 가늘게 만들어줍니다. 

(내용 참고: <윤영기의 한글디자인>, 도서출판 정글, 1999.)


윤디자인, 윤디자인연구소, 이새봄, 윤톡톡, 레터링, 폰트, 글꼴, 서체, 한글, 한글 레터링, 서체디자이너, 폰트디자이너, 시각삭제, 착시현상, 아름다운 한글, 타이포그래피,

같은 굵기의 획임에도, 대각선이 수직선보다 더 굵어보인다.



그리고 2와 3 기둥을 보면, 이 역시 같은 굵기지만 수직선보다는 대각선일 때의 시각적인 굵기가 더 굵어 보입니다. 이것도 일종의 착시현상이라고 할 수 있겠습니다. 두 기둥의 일부분을 떼어보면 우리 눈으로 측정되는 넓이가 a, b와 같기 때문에 수직선의 기둥보다는 대각선의 기둥이 더 넓어 보이는 게 아닐까 생각이 됩니다. 그래서 대각선의 획을 그릴 때에는 기존 수직선의 획보다는 더 가늘게 처리해주어야 두 획이 균일한 굵기로 보입니다.



윤디자인, 윤디자인연구소, 이새봄, 윤톡톡, 레터링, 폰트, 글꼴, 서체, 한글, 한글 레터링, 서체디자이너, 폰트디자이너, 시각삭제, 착시현상, 아름다운 한글, 타이포그래피,

대각선 굵기의 잘못된 예 / 출처: 영화 <가디언즈 오브 갤럭시> 팜플렛



이렇게 하면 안돼요~! 위의 이미지는 대각선 굵기의 잘못된 예를 보여주고 있는데요, 수직선의 획을 너~~무 배려하다 보니 이렇게 대각선의 굵기를 확 줄여버렸네요. 다른 수직선 획들은 두툼한 반면, ‘ㅈ’의 대각선 획은 무지 가냘퍼 보여서 살을 찌워주고 싶군요. (한 군데가 부실한 듯한 근육화초 빈 디젤님.. T_T 지켜주지 못해서 미안합니다.) 이것 또한 대각선 획을 만들 때 흔히 하는 실수 중 하나입니다. 


이런 실수를 하지 않기 위해서는, 글자를 일단 만들고 나서 계속 보는 게 필요해요. 한글을 만들 때는, 글자의 한 획 한 획의 물리적인 수치도 중요하지만 그에 못지않게 시각적으로 보정해주는 것이 중요합니다. 어딘가 한 부분이 눈에 걸린다, 싶으면 규칙을 넘어서라도 시각적으로 균일하도록 보이게 해야 해요. 글자의 본질적 역할은 글 내용 전달에 있기 때문에 글자를 볼 때 눈의 걸림이 없이 읽혀야 합니다. 글자의 형태가 아무리 유려하게 되어있더라도 글을 읽을 때 눈의 걸림이 있다면, 좋은 글자라고 하기는 힘들겠지요.  



2. 시각삭제를 생각하라.

글자꼴은 획의 길이, 굵기, 바탕 공간 등이 어우러져 의도하지 않았던 여러 가지 착시 현상을 일으키기도 합니다. 그 중 가장 많이 일어나는 착시현상이 시각삭제인데요. 글자 한 자 한 자가 차지하는 공간을 보통 정사각형으로 설정하는데, 분명히 같은 면적임에도 모양에 따라 시각적 크기가 다르게 보입니다. 이를 시각삭제(visual off-cuts)라고 하지요. 

(내용 출처: <윤영기의 한글디자인>, 도서출판 정글, 1999.)


자, 그림으로 이야기해볼까요? 아래의 세 가지 도형(사각형, 삼각형, 원)이 있습니다. 이는 각각 한글 자음 ‘ㅁ’, ‘ㅅ’, ‘ㅇ’을 형상화했다고 생각하면 됩니다. 이 세 도형은 보다시피 물리적으로 같은 높이를 가졌습니다(1번). 그러나 시각적으로는 세 도형의 크기가 동일해 보이지 않지요? 아마도 사각형이 가장 크게 보일 것입니다. 이는 삼각형과 원형에 시각적으로 삭제되는 부분(빗금 친 부분)이 있기 때문에 그렇습니다. 그래서 이 세 도형이 모두 동일한 크기로 보이기 위해서는 이렇게 삭제되는 부분을 보완해주어야 하며, 그러기 위해서는 사각형의 높이보다 조금 더 크게 그려주어야 합니다. 그래야 시각적으로 사각형과 삼각형, 원이 모두 같은 크기의 도형으로 보이게 됩니다. 


윤디자인, 윤디자인연구소, 이새봄, 윤톡톡, 레터링, 폰트, 글꼴, 서체, 한글, 한글 레터링, 서체디자이너, 폰트디자이너, 시각삭제, 착시현상, 아름다운 한글, 타이포그래피,

같은 높이라도 시각삭제 현상으로 인하여 높이가 달라 보인다(1번). 

그래서 3번과 같이 크기를 보정해야 한다.



이런 보정의 과정이 한글의 자음, ‘ㅅ’과 ‘ㅇ’, 그리고 ‘ㅂ’ 등에서 적용될 수 있습니다. 이런 형태의 자음들을 의도적으로 작게 보이고자 하는 것이 아니라면, 사각형을 기준으로 형태가 많이 깎여있는 자음들을 만들 때는 사각형보다 더 키워주는 것이 필요하지요. 




한글을 그릴 때 가장 중요한 그것


얼마 전 디자인페스티벌에 지원근무를 나갔다가 학생들을 만나서 이런 질문을 받았습니다. “한글 2,350자를 만드는 기간은 얼마나 되나요?” 저는 이 질문에 마음 먹고 그 작업만 만지게 되면 짧게는 한, 두 달 안에 모두 만들 수 있다고 말했지요. 참 놀랍지요. :-0 그들도 놀라더라구요. (저도 놀라워요.) 그러나 이것은 기계적으로 한글을 파생했을 때의 이야기이므로 이것으로 한글 디자인을 다 끝마쳤다고 (절대) 말할 수 없습니다. 어떤 디자인이나 다 그렇겠지만, '만들어 놓고 장땡'이 아니잖아요. :-) 


분명 우리가 한글폰트를 만드는 이유는 이 글자들이 사용자들에게 자연스럽게 쓰이기 위해서이고, 그렇게 하기 위해 지속적인 수정작업이 필요한 것입니다. 위에서 살펴보았다시피 한 글자 안에서도 굵기를 물리적 수치가 아니라 시각적으로 확인하면서 수정하는 과정을 거쳐야 하며, 다른 글자와의 조화도 보면서 수정해야 합니다. 이에 대해서는 노하우는 있을지 몰라도 정답은 없습니다. 그래서 작업자가 계속해서 자기의 글자들을 보면서 수정하고 또 보고 또 수정하고, 이런 과정을 지속적으로 거쳐서 한 벌의 폰트가 나오는 것이지요.


그래서 한글을 그리고 싶다면, 위 규칙들을 유의해서 그려보고 그 후에 글자를 멀리서도 보고 가까이에서도 보고 혹은 작게도 뽑아보고 크게도 뽑아보면서 ‘이 정도면 됐다!’ 싶을 정도까지 수정하면 좋겠습니다. 그러면 이 과정 속에서 1pt의 위력을 발견하게 될 거예요. 이 오묘하고도 티 잘 안 날 것 같지만 티가 엄청 나는, 한글 디자인의 세계로 들어오시길 고대하고 있겠습니다! 


▶ 활자디자이너 이새봄의 새봄체 소개 (바로가기)



윤디자인, 윤디자인연구소, 이새봄, 윤톡톡, 레터링, 폰트, 글꼴, 서체, 한글, 한글 레터링, 서체디자이너, 폰트디자이너, 시각삭제, 착시현상, 아름다운 한글, 타이포그래피,






저작자 표시 비영리 변경 금지
신고
Posted by 윤톡톡

댓글을 달아 주세요

  1. 또잉 2014.12.11 10:42 신고  댓글주소  수정/삭제  댓글쓰기

    가장 기본적이지만 가장 어려운 부분이 시각삭제와 굵기보정인 것 같아요. 잘 봤습니다^^

  2. BlogIcon 팝스 2014.12.12 19:54 신고  댓글주소  수정/삭제  댓글쓰기

    한글폰트 제작은 멀고도 험하구나(...)
    유니버스 글자 만들때 참고해봐야겠군요ㅋㅋㅋㅋ

    다만 완성형과 조합형을... 이 둘중에서 머리가 아주 복잡하더군요.

    p.s. 초등학생 포스터 글씨를 진짜 폰트로 만들면 대박일듯



티스토리 툴바