개발자인 당신.. 타이포만 제대로 이해해도 끝내주는디자인을할수있다

안녕하세요 수빈입니다.

사실 오래전부터 정말 쓰고싶었던 주제였는데요

제가 개발을 처음배울때 java공부를 했고 지금은현재 파이썬을 공부중이긴합니다.

그런데 마침 제가 웹개발을 틀게된 전환점이 블로그였는데요!

블로그를 막상개발하려고 하니 디자인을 몰라서 그게 문제였습니다.

 

그래서 디자인을 배우자 !!

하고 맨땅에 헤딩하고 저의 현직업인 그래픽디자이너가 되었습니다.

(진짜 왜이러는지 모르겠음)

 

사실 제목이 어그로아니냐 이럴까봐 진지하게 제가 독학을하면서 타이포그래피를 공부했는데요

제인생이 달라졌습니다.

스티브잡스가 말했죠.

내인생의 전환점은 타이포그래피였다

 

아무튼 정말 여러분이 이제 이블로그를 본이상 여러분의 디자인은 달라질것이라고 장담합니다

(물론 이해하시면요)

 

정말 제가 독학한 수업땐 국민대 교수님강의를 들었는데

정말현업에서 너무자주쓰입니다.

 

이제 본론으로 들어가볼게요

 

여러분이 들었을때 타이포그래피가 뭘까요

글자?라고 유추하실겁니다

 

정확히는 타이포그래피는 활자서체 배열이라고하는데 그냥 "글자의 활동이다"라고 생각하시면되요

여러분은 레터링까지 굳이 배울필요없고 단순히 개발하실때 글자 자간과 횡간에 대해서만 잘알아도 깔끔해지는 마법을 보여주기위해

이번 블로그를 작성하게되었습니다. 

 

솔직히 이런거 알려면 머리 진짜아파요 (저도아직 서체에대해서 잘외우지못함)

딱 베이스라인정도만아는정도 ? 그치만 폰트작업하시는분들은 다알고계시죠

 

일단 서체에는 두가지종류가있습니다.

세리프체(왼쪽),산세리프체(오른쪽)

 

주로 웹에선 세리프체를안쓰는데 이유는 커닝값조정때문에 잘안쓰는걸로알고있습니다

(이건 제 뇌피셜임)

 

커닝값이 뭐냐 하기전에 자간부터 설명할게요

자간은 글자의 가로넓이라고생각하시면됩니다.

미묘한 차이 보이시나요?

(주로 디자이너분들이 많이사용하시는 notosans로 제작함)

 

영어폰트에서는 글자사이를 줄일수있는데 그것을 커닝이라고부릅니다

근데 사실 개발에선 커닝이라기보다는 자간을줄이죠(?)

참고로 프리텐다드 폰트가 정말예뻐보이는이유가 자간에 있습니다

 

자간을 이해했으니 이번엔 행간으로 가겠습니다

행간은 줄바꿈의 간격이라고 이해하시면 편한데요

이행간이 진짜 마법인데

네모꼴을 아시면 이해하기가 편해요

예를들어볼게요

이게 폰트가 네모꼴로 이루어져있는데 행간을 예쁘게 맞추고싶다!

왼쪽의 이미지로 이해하면 편한데 글자사이즈에맞게 글자를 대충예상하면서 행간조절을 하는겁니다.

그럼 네모상자를 빼면 오른쪽처럼 되는거죠

지금 이블로그도 마찬가지로 행간조절이 잘되어있습니다  애플도 마찬가지구요

이행간조절만잘해도 정말 글이 잘읽히는 마법이생겨요

 

이제 블로그를 만드는 당신들도 가독성있는 블로그를 제작할수있을거라 믿습니다.

궁금한것이나 질문이있다면 언제든지 댓글달아주세요