[며느리도 몰라! 모션그래픽 꿀팁 6탄] 타이포그래피

모르면 손해

큰 맘 먹 고 싹 다 공 개


모션그래픽 디자이너이신가요? 타이포그래피, 어려우시죠?

여러분이 꼭 알아야 할 꿀팁!!

많은 모션그래퍼들이 놓칠수도 있는 세밀한 부분까지 캐치해주는 소장가치 100% 추천 자료!!

인증된 자료를 쉐이커에서 지금 바로 공개합니다 !!


6. TYPOGRAPHY

타이포 그래피는 타입과 연관된 디자인을 일컫는 말입니다. Typeface(서체)디자인과 Kerning(자간), Tracking(어간), Leading(행간)등을 이용하여 만드는 사람의 의도와 영감, 상상력을 보는사람들에게 전달하기 위한 디자인을 말합니다

 

'왜 디자인 리소스들은 대부분 영어로 되어있는 것이더냐 ..'

우리는 한국인! 한국어로 바꾸어 포스팅하겠습니다!

 

타이포그래피에 대해서 당신이 알아야 다섯 가지!

 

1.     Choose the right font 알맞은 폰트를 고르세요.

폰트는 정말 많기 때문에, 알맞는 폰트를 찾는 것은 매우 중요합니다. 

프로젝트를 시작하기 전, O,H,A 3 가지 기본적인 모양부터 찾습니다. 만약 이 모양(동그라미, 네모, 세모) 들이 O,H,A에 가깝다면, 아주 좋아요! 사각형과 H도 그렇고, 삼각형과 A도 마찬가지입니다.

“Search for the basics. More closer to basics means more useful.”

기본적인 것들부터 찾으세요. 쉽게 말하자면, 모든 글자에서 기본적인 모양을 찾아보세요. 더 많은 글자들이 기본 모양에 가까울수록, 유행이 지나거나 이상한 모양이 되지는 않을 거예요. 그러한 폰트를 찾으면 프로젝트 내의 더 넓은 범위에서 사용 할 수 있습니다.

“Make sure that all the symbols you need are included!”

당신이 필요로 하는 모든 기호들이 포함되어 있는지 확인하세요. 대문자, 소문자, 숫자, 기호 모두 다요. 만약 폰트 내에 이러한 기호들이 포함되어 있지 않다면 비슷한 것을 계속 찾아야 할 것입니다.

그리고 좀 유연하게 폰트를 설정하고 싶으면 비슷한 폰트들을 묶어둔 Font family를 사용하는 것도 좋은 방법입니다. Bold, Medium, Condensed 폰트 모두 이탤릭체 폰트가 있다면 더욱 더 좋겠지요.

 

2.     Basic Distribution and align 기본적인 분배와 정렬.

글자 정렬은 구성을 어떻게 하는지에 따라 결정됩니다.

왼쪽 정렬, 오른쪽 정렬, 가운데 정렬… 3 가지의 정렬이 주어져 있습니다.

구성의 중심이라고 해서 그것이 비주얼의 중심은 아닙니다. 왼쪽 화면 중심에 있는 가로 선이 구성의 중심을 뜻하는데요, 글자가 그 선보다 약간 위에 있는 것이 보이시죠? 가로 선보다 조금 올리거나 사이드로 두다면 비주얼의 중심이 완벽하게 맞게 됩니다. 완전히 이 선에 맞추면, 텍스트가 조금 떨어져 있다는 느낌을 받으실 거예요. 실제 중심보다는 조금 위에 두어, 선 아래에 빈 공간을 만들어 주세요.

오른쪽 화면의 경우 중간 선이 실제 구성의 중심이고, 텍스트는 이탤릭체로 되어 있습니다. 이런 경우 텍스트를 약간 왼쪽으로 치우치게 하여 선 오른쪽에 빈 공간을 좀 더 주세요. 

 

3.     Space between letters 글자 간격. 

이 부분에서는 제가 사용하는 트릭을 좀 보여드릴게요.

대부분의 글자에서는 보시다시피 글자 간격이 같습니다. 그러나 간격이 같다고 해서 글자 사이의 공간 면적까지 같은 것은 아닙니다. 두번째를 보시면, 실제 공간은 글자의 형태에 따라 달라집니다. 세번째는, 그러한 공간들의 면적을 최대한 비슷하게 만들어 주세요.

 “a”, “o”, “3”, “9”와 같은 글자들은 세로 길이가 다른 글자에 비해 길다랗고 더 큽니다. 실제 크기는 크지만, 그렇게 함으로써 눈으로 보기에는 사이즈가 같아 보입니다.

이게 2D에서는 문제가 없지만, 3D로 만드시게 되면 몇가지 문제가 생길 수 있는데요….

O가 좀더 크기 때문에 디멘션에서 문제를 일으키게 됩니다. O가 땅에 닿아서 밑부분에 그림자가 좀 덜 짙게 표현되는 것을 보실 수 있을 겁니다. 이렇게 글자를 땅에 닿도록 하고 싶다면, 3D로 넘어가기 전에 타입을 조정하는 등의 준비를 해주시면 됩니다.

 

4.     Do not use 이런건 쓰지 마세요.

여기서는 제가 몇 가지 하지 말아야 할 실수들을 예시로 보여드릴게요. 

Serif 체와 Sanserif 체는 같은 구성 내에서 사용하지 마세요.
예시로 주어진 사진을 보시면, 둘 다 같은 구성입니다.

왼쪽 예시를 보시면 Sanserif 체가 있고, 바로 아래에 Serif 체가 있어요. 이렇게 하지 마세요. 폰트를 섞어서 쓰는 건 대부분 좋지 않은 결과를 낳습니다. 오른쪽처럼 Sanserif체만 사용하여 깔끔하게 구성해주세요.

또 다른 예시는, 같은 구성에서 2개 이상의 폰트 패밀리를 사용하지 마세요. 왼쪽 예시에서는 4개의 폰트를 사용했습니다. 하나의 구성을 위해서 4개의 폰트라니 좀 많은 숫자죠. 1,2,3,4… 좋아 보이지 않죠. 그래서 오른쪽에서는 2개만 사용했습니다. 첫번째 타이틀, 두번째 타이틀, 본문은 같은 폰트이고요, 웹사이트 주소만 다른 폰트입니다. 괜찮죠?

웹사이트 주소는 다른 폰트지만, 비슷한 폰트입니다. 완벽한 구성을 원한다면 메인 타이틀과 본문 텍스트에 쓰여진 폰트를 똑같이 쓰는 것도 좋은 방법이에요.

한가지 더, 글자를 보기 편안한 위치에 놓아주세요. 왼쪽 예시에서는 띄어쓰기 하나의 공간밖에 여유공간이 없어요. 크게 느껴지죠. 여기 빨간색 줄과 회색으로 칠해진 이 공간은 띄어쓰기 하나를 뜻해요. 공간이 너무 적으니 답답해 보입니다.

최고의 방법은, 오른쪽 예시처럼 띄어쓰기를 두 번이나 세 번 정도 한 공간을 두고 글자를 위치시키는 거예요. 덜 답답하겠죠. 읽는 사람들을 혼란스럽게 만들지 않는 좋은 방법입니다. :)

그리고 (또) 한가지만 더… 정렬을 섞어 쓰지 마세요. 왼쪽 사진처럼 읽는 사람을 혼란스럽게 할 수 있습니다. 오른쪽과 같은 방법으로 편하게 읽을 수 있도록 해주세요.

마지막으로, 왜곡된 폰트를 사용하지 마세요. 이런 폰트들은 멋져 보이지만, 몇 가지 문제가 있습니다.

1) 커스텀 폰트이기 때문에, 그래픽 요소들을 가지고 있어요.

2) 현재 가지고 있는 모양 그대로만 쓰이게 돼요. 여기 ‘t’의 경우, 두번 모두 그 특이한 모양이 그대로 쓰였죠.

3) 왜곡된 폰트는 다른 사람의 프로젝트에서도 쓰일 수 있기 때문에 조심해야 합니다. 주문자의 요청에 따라 커스터마이징 된 폰트이기 때문에, 다른 작가들의 큰 작품에서 쓰였을 가능성이 있습니다. 좋지 않죠.

4) 드래그 앤 드롭으로 만들었다는 첫인상을 줄 수 있습니다.

5) 3D 적용이 불가능해요.

 

5.     Make it readable 읽기 쉽게 만드세요.

얼마나 멋져 보이는가는 상관없어요. 읽을 수 있어야 해요.

멋있음과 가독성 사이의 균형을 찾아야 합니다. 여기 두가지 예시가 있습니다. 첫번째는 그다지 보기 좋지 않고, 두번째 예시는 괜찮죠? 재밌는 모양을 만들다 보면, 때때로 우리는 글자를 읽기 힘들게 만들어버리는 실수를 할 때가 있습니다. 왼쪽 예시처럼요. 오른쪽에 보시면 H는 좀 길게 나와 있는데, 만약 짧은 길이였으면 S와 합쳐졌겠지만, 이렇게 나와 있어서 좀 더 글자가 읽기 쉬워졌습니다. P도 그런 경우예요. 왼쪽 예시에서는 H의 왼쪽 오른쪽 전부 길게 나와 있어서 읽기가 어렵죠. 이렇게 균형을 맞춰주세요.

두번째로, 글자의 사이즈가 두께를 결정합니다.

왼쪽은 얇은 Thin 타입의 글자가 쓰여져 있는데, 글자가 너무 작습니다. 이런 얇은 타입의 글자에서 글자를 작게 쓰면, 몇가지 글자는 보이지 않게 됩니다. 오른쪽 예시처럼, 얇은 타입의 글자는 큰 사이즈로 써주세요.

Extra Bold 타입도 마찬가지예요. 너무 작고 오밀조밀 모여 있으면 가독성을 잃어 읽기가 힘들어집니다. 오른쪽 예시처럼 공간을 확보해주세요.

여기 가독성에 대해 생각해 보게 하는 마지막 예시가 있어요. 반사 효과요. 3D에서 사용하는 이러한 반사 효과는 글자의 가독성을 떨어지게 합니다. 그러므로 이런 효과를 사용하실 때는 더 주의해 주세요. 왼쪽 예시처럼 너무 강한 반사 효과를 주면, 글자 사이사이를 구분하기가 힘들어집니다.

오른쪽 예시에서는 반사 효과가 부드럽게 적용되었고, 가독성을 침해하지도 않았습니다.

멋있어 보이는 것과 가독성 사이의 균형을 찾아야 합니다.

 

여기 알려드린 것들이 쓸모있게 쓰였으면 좋겠네요. ^^


(포스팅 마무리 전에 타이포그래피의 기초를 예시로써 설명 중인 이미지 투척!!)

Screen Shot 2014-12-08 at 7.18.03 PM.png

여러분도 이제 멋진 타이포그래피를 이용한 모션그래픽 작업을 시작해 봅시다!

그럼, 다음 [며느리 몰라! 모션그래픽 꿀팁 7탄]에서 계속되겠습니다.


ShakrDesigners-Stamp-var2-cleanup.png