모바일 가독성 가이드 2

2012-08-14구하나

010-4212-1057

타이포그래피를 잘하자타이포그래피란텍스트를 이용한 디자인 을 말합니다 .광고문구에서 빠질 수 없는 필수요소는바로 텍스트입니다 .

그러므로 텍스트를 얼마나 가독성높게 ,세련되게 컨셉 적합하게 디자인하느냐가디자인의 품질을 좌우합니다

1. 문자두께에 강약 넣기1. 비교 ( 無 강약 / 강약 ) ※ 디자인 예시 :

폰플 ( 리워드앱 )다 vote 광고디자인 ( 작업자 구하나 )1 탄에서 그림이 작고 깨져보이길래 이번엔 크게 넣었습니다

강

중

약

약

보통 광고문구의 처음시작은 본론과상관없는 내용입니다 .이 부분부터 강을 주면 안되겠지요

최강 어플의이름인만큼

가장 주목도 높게최강의 액센트를 준다음에는쉬어가는 약을 주세요 !

강약강약위에서는줄마다 다른 강약 . 이건 같은 줄의 특정부분만 강조

크게 중요하지 않은 내용은글씨크기와 두께도 작게

답답해보여도 어쩔 수 없어요Q: 왜 어떤 디자이너들은 강약을 주지 못할까요 ?

A: 폰트마다 두께가 다른 폰트패밀리를 보유하지 못했을 경우 , 폰트의 두께차이를 줄 수 없는 경우도 있어요 .

클라이언트가 특정 폰트를 요구했을 경우 , 그 폰트가 한가지 두께만 있을 수도 있구요 .

보통 디자인용 폰트는산돌고딕 L : 매우 가늘다산돌고딕 M : 중간 두께산돌고딕 B : 매우 두껍다이런식으로 나눠집니다 .

디자이너가 사실 가장 사랑하는 폰트는윤폰트이에요윤고딕을 예로들면윤고딕 110,120,130,140,150,160 등아주 세밀하게 두께가 나눠져 있어서 사용할 때 매우 편합니다 .하지만 가격이 66 만원쯤 합니다

폰트에 두께를 주는 방법• 폰트가 한가지라고 해도 두께를 줄 수 있어요 .

첫번째 T 는 볼드체2 번째는 이탤릭체 입니다 .

강하게를 선택하면

조금 두꺼워 져요

저 것을 선택하고나오는 메뉴에서 획을 선택 !

획의 색을검은색으로선택했을 경우에요

글씨를 감싸줄 획의 두께를 조절가능 !( 이건 2px)

2. 문자에 반전 음영 넣기보통의 광고주들은 깔끔하고 신뢰가는 화면을 원합니다 . 일체의 그림없이요 .그런데 텍스트로만 화면을 구성하면 솔직히 완성도가 떨어져요 .이럴 때 사용하는 노하우가 반전 음영 넣기 입니다 .

이런 반전음영은 주로 텍스트로4 줄이상의 글을 연달아 써야할 때사용합니다 .

3 줄까지는 반전음영을 쓰지않고도완성도가 많이 떨어지지 않지만

4 줄 이상부턴 반전음영을 쓰지않고폰트의 두께만으로는 완성도있는타이포그래피를 가지기 힘들어요 .

글이 매우 지루해 보입니다 .

3. 글씨에 하이라이트 주기주로 크고 무게감 있는 볼드체를 화면에 삽입해야 할 때글씨가 굉장히 투박하고 촌스럽게 보일 때가 있습니다 .그럴 때 그 두꺼운 글씨가 화면에 잘 녹아들어 가도록 쓰는 방법입니다 .

주로 뒤에 배경색이 있을 때 활용하면 좋습니다 .

이렇게 캐쥬얼하고 역동적인 화면을 연출할때글씨에 입체감을 주는 방식으로 활용하기도합니다 . 그러나 과한 효과는 뒤의 배경그림과주변의 요소와 조화를 못 이룰 때도 많습니다 .

그러므로 항상 적절한 정도로 써야합니다 .

가장 강조하는 큰 단어에 쓰는 것이 좋습니다 .

4. 여백선에 맞춰 정렬하기이건 기본 중의 기본입니다 .

화면이 정리정돈되게 보이게합니다 .가장 기본이 흐트러지면

화면의 구성이 산만해보입니다 .

지금은 작은 화면이라서 큰 차이가 없지만

크고 길쭉한 스크롤 모바일 화면이라면여백선이 안맞춰져 있을 때 매우 난잡해보여요 .

가운데 정렬을 하더라도 여백선에 맞춰서 !

왠만하면 양쪽의 여백선에 맞추는게 좋지만여의치 않을 때는 한쪽의 여백선에라도칼같이 맞추는 것이 좋습니다 !