brunch

You can make anything
by writing

C.S.Lewis

by 리플러스 Dec 10. 2018

글꼴 디자인 스터디 : 타이포그래피 실험하기

한글 타이포를 다루는 방법, 최소단위에 대한 실험까지



타이포에 대한 실험

갑자기 왠 타이포에 대한 실험이냐하면, 사실 예전부터 고민하고있던 부분이 있었다. 외국 폰트들을 너무나 예쁘고, 대단한게 많이 나오는데, 한글폰트는 만들기도 어렵고. 그 수가 너무 적다. 어차피 한국에서 디자인 하면서 먹고살려면,  폰트를 새로 만드는 수준까지는 어렵더라도 계속 타이포를 다뤄야하니까. 한글 타이포에 대한 실험을 해보려고 고민하고있었다.


필자가 항상 그렇듯이. 무작정 - 막무가내로 실험을 시작한건 아니었다. 나름대로 생각해뒀던 가설이 있었다. 게다가 기존에 여러 폰트를 사용해 브랜딩 디자인을 해본 경험도 있었다. 다만 한글을 위주로 사용한 경우는 드물었고, 대부분 영어폰트를 사용해서 작업을 했었을 뿐이지. 그래서 이번엔 한글을 위주로 실험을 해보기로했다.






타이포의 서체굵기에도 - 그리드 시스템처럼 최소단위가 있지않을까?








거의 사각형 배열에 가까운 정부청사 폰트를 기반으로 - 타이포 실험을 진행해봤다. 이 폰트는 사실 완성도가 그리 높은 폰트가 아니지만, 형태나 규격이 단순해서, 그리드를 통해서 들여다보기가 편리한 타이포다.






글씨의 최소단위 / 가로 세로 비율



이도저도 모르겠으면 일단 최소단위를 가늠해서 비례를 확인해보자








조금 신기했던것들 중에 하나는 - 타이포의 경우 획의 최소단위가 정확히 1대1 비율이 아니라는 거였다. 대충 비율로치면 가로가 1.5, 세로가 1.3 정도의 비율이었다. 다른 폰트의 경우 달라질수도 있지만, 이런 가로 세로의 비율이 다른건 다른 영어폰트에서도 자주 찾아볼 수 있는 내용이긴 하다.








정부청사폰트의 정확한 가로 세로 비율은 28 : 23 이라는 이상한 비율이었다. 그럼에도 불구하고 언뜻 보기에는 1:1 비율처럼 보인다. 








한글 폰트의 자음과 모음 / 그리고 전체 그리드를 분석해보려는 시도





기본적인 간격에 있어서, 최소단위나, 기준점이 있었는지가 궁금했다. 그래서 그리드를 그리고, 글씨들간의 주요 요소들의 영역을 파악해보기로했다. 정부청사 폰트는 딱 봐도 뭔가 자음과 모음의 간격이 좀 미묘한 폰트다. 그래서 글씨체용으로 사용하기보다는, 디자인용 / 로고 용으로 사용할 때 쓰는게 대부분이다. 다만 그 경우에도 글자간의 간격을 수동으로 조절해줘야한다.







들쭉날쭉한 상단, 하단 라인

상단 / 하단 라인이 들쭉날쭉한 상태





사각형으로 잘 정리된 정부청사폰트지만, 정작 뜯어보니 상단과 하단 부분의 높낮이가 들쭉날쭉이었다. 특히 하단 부분이 심했다. 물론 한글폰트는 은 영어폰트와 다르게 자음 자체가 굉장히 여러가지 크기로 변형되어야하는 상황이 많다. (실험을 통해 직접 확인한 바로는, 받침으로 사용되는 경우를 제외해도 최소 4가지 이상이다.)

반대로 말하면 이런 '여러 높낮이를 가지는 특성'때문에, 브랜드 디자인이나, 로고로 사용할 때 짜증나는 상황이 많이 생긴다. 라인이 일정치 않아서 다른 요소로 묶어주거나. 형태를 안정시키는 작업이 필요하기 때문이다.              







강제로 상단과 하단의 라인을 정돈한 경우





 이런 사각형에 가까운 폰트라면 - 강제로 상단 라인을 일자로 만들수 있기는 하다. 다만 대부분의 폰트들은 정확히 일자로 정렬하는게 불가능하고, 곡선이 들어가거나. 미묘하게 높낮이가 차이가 나는 경우가 많다. 위의 상황처럼 언제나 간결하게 정리를 할 수 있는 상태는 아니라는 거지.





모음의 하단 라인마저 강제로 정렬한 경우



사각형의 규격에 딱 맞게 정리가될수록, 그리드나 다른 요소에 적용 / 변형하기가 쉬워진다. 그래서 적어도 상단이나 하단 중, 하나의 라인은 정리해주는 것이 중요하다. 


-


이어서 실험을 해보려는 것은 글씨사이의 간격부분이었다.




글씨의 간격과 기준점


모든 폰트가 그렇지만, 각 요소의 좌우 최대값을 잡아서 - 동일한 간격을 벌리는건 별로 좋은 결과를 낼수 없다. 특히 'ㅏ ㅓ' - 같은 모음처럼 - 좌우에 톡 튀어나온 요소가 있는 경우는 더욱더 그렇다. 








빨강 : 1x 단위의 간격 / 파랑 : 2x 단위의 간격




위의 시안을 보면 알겠지만, 글씨 하나하나에 모두 동일한 간격을 줄 경우. 'ㅏ' 같은 요소는 특히나 공간이 더 넓어보이기 쉽다. 이건 간격의 단위가 넓어질수록 차이가 더 심해진다. (미세하지만  '포'와 '래' 사이의 간격도 조금 미묘해지기 시작했다.) 






그래서 2개 단위의 간격을 줄 때, 'ㅏ' 부분에 단위를 하나 빼줬다. 그러니 훨씬 보기에 좋은 결과물이 나온다.












요소 변형하기


이후에 신경을 쓰기시작한 부분은 - '이'와 '그'의 영역이 너무 텅 비어있다는 부분이었다. 그래서 이 부분을 채워보기 위해 ㅇ,ㄱ 두가지를 모두 변형해보기로했다. 









이,와 그의 ㅇ,ㄱ을 각각 변형했다



약간의 변형을 가하기 시작하니, 글씨가 훨씬 재미있어졌다. 물론 여전히 너무 딱딱한 사각형의 느낌을 벗어나긴 힘들어보이긴한다. 










이왕 바꿔본거, 하단 라인을 수정하거나, 서로 연결해보기도하고. 여러 변형을 만들어보기 시작했다.







기본 폰트를 기반으로, 변형타입 만들기


기존 폰트를 검은색으로 어둡게 깔고, 펜툴을 이용해 새로운 변형을 만들어봤다. 다른 직선 부분은 그대로 살리면서, ㅌ,ㄱ,ㄹ,ㅍ 부분의 끝부분을 삐쳐올리는 형태의 응용타입이다. 











이후에 동일한 박스 내부에 타이포가 모두 들어갔는지 확인하고, 약간의 비례를 수정해줬다. 짧은 시간동안 진행해본 작업이었지만, 여러가지 내용들을 직접 확인할 수 있었던 실험이었다. 사실 더 매만지면서 수정할 수도 있었지만. 시간관계상 여기에서 마무리를 하기로했다. 







자음과 모음의 크기가 달라진다? 
이번 실험에서 가장 눈여겨봤던것들 중 하나는 바로 - 자음과 모음의 크기변화였다. 



약간 무리한 방식이긴 하지만. 한글 폰트의 자음과 모음을 '비례와 그리드로 구분할수는 없을까 하는 생각에 분석을 진행해봤다. 그 과정에서 꽤나 재미있는 사실을 알게됐다.







한글 폰트의 받침이나, 모음 등의 크기변화가, 어떤 일정한 패턴을 갖고있다








사실 이 부분까지 여기서 이야기하면 얘기가 너무 길어지기 때문에. 이 부분은 따로 정리를 했다. 간단히 이야기하자면 - 자음 하나는 최소 4가지 이상의 변형을 갖게되고. 그건 모음의 상태나, 조합에 따라서 영향을 받게된다. 



오늘 진행했던 실험과정의 일부분. (결국 자음과 모음을 분석해보는 수준까지 파고들긴 했다.)
http://clay1987.blog.me/221415317276





간단하게만 정리해보려고했던 내용들이 - 생각보다 규모가 많이 커지게된 것 같다. 일단은 사각형 기반으로 - 비례와 간격, 자음과 모음의 크기비례에 대한 내용을 정리했으니. 추후에는 자음과 모음의 비례를 의도적으로 변형하거나, 비율을 깨는 방식에 대해서 연구를 진행해보려한다. 또한 곡선이 들어간 타이포를 사용할 때, 어떤 지점을 눈여겨봐야하는지. 외곽선 변형시에 어떤 점을 주의해야하는지도 확인해볼 수 있을 것 같다.






이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.

저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!





단톡방 이용안내

https://brunch.co.kr/@clay1987/113


매거진의 이전글 UI 디자이너의 3단계 성장과정
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari