퀼리티의 기본은 폰트

2015.06.16 23:49|

에너지드링크|

추천12|

조회수2,605|

댓글20

콘텐츠를 이루는 가장 중요한 포인트는 폰트입니다.

사실 이렇게 생각 하시는 분들이 없어서 사진 이미지를 많이 올리고 멋지게 만들어도 촌스럽게 보이는 거죠.

오늘은 폰트에 대해서 이야기 해 보고자 합니다.

 

폰트는 미세하지만 아주 큰 차이를 보입니다.

한글 폰트의 경우 윤서체, 산돌서체, 폰트릭스등 수많은 회사들이 있는데요. 그완성도는 차이가 매우 큰 편입니다. 완성도의 차이란 것은 글자 자체의 균형감과 숫자와의 조화, 영문과의 조화들을 통해서 알수 있습니다.

대부분의 경우 나눔고딕을 많이 사용 하지만 사실 이것은 평균적인 퀄리티이고 이것 이상의 감각적인 부분을 상용 서체를 통해서 해결 하게 됩니다.

 

대부분의 서체는 다음과 같은 분류를 통해 적용  하실수 있습니다.

  • 고딕계열 : 정보 전달의 강점이 있음. 모니터 해상도에서 72pdi에서 가장 이상적으로 보이는 스타일 
  • 명조계열 : 감성적 소구시에 사용, 72dpi에서 상당해 불안정하게 보임
  • 흘림체 : 현재 유행하는 트랜드로 자극적인 헤드카피용으로 사용
  • 들쭉날쭉체 : 안상수체 같은 글꼴로 현재는 가독성의 저하로 인해 대부분 이용하지 않음 

 

뭐 이렇게 크게 구분해 볼수 있습니다.

 

아래를 한번 보실까요? 

 

 

 

먼저 글자 자체의 완성도 입니다. 위의 무료서체(맑은 고딕)와 달리 아래는 글자 자체의 짜임새와 조화가 훨씬 더 좋은 것을 보실수 있습니다.

살펴볼 포인트는 먼저 글자와 글자 사이의 간격인 자간입니다. 0보다는 -75포인트가 훨씬 더 읽기 좋게 보이죠?

마지막은 숫자와 한글, 한글과 영문의 조화 입니다. 중간 것은 한글의 경우 마이너스 자간이 좋은데 숫자는 완전히 붙어 있는 것을 보실수 있습니다. 그리고 숫자가 한글과 달리 너무 좁은 것을 보실수 있죠.

마지막의 경우는 숫자와 한글, 영문의 자간이 조화롭죠? 그리고 숫자의 경우 3자의 아래획, 6자의 위의 획, 5자의 아래획인 쌀짝 삐져 나옴으로서 리듬감을 주고 있죠?  

 

위에 설명 드린 것은 글자체의 완성도와 자간의 간격입니다. 자간을 마이너스를 준다는 것은 쉽게 문장을 읽게 만드는 중요한 요소이고 이것이 결국 가독성을 만들어 주는 중요한 요소입니다. 우리는 음절별로 낱말을 인식 하는 것이 아니라 문장 전체의 모양으로 인식하기 때문입니다. 쉽게 말하면 글자와 글자가 붙지 않지만 최대한 감각적으로 밀착된 섬세한 간격을 통해서 세련되었다라고 느끼는 것이죠. 

(자간은 글자와 글자 사이의 간격을 말합니다) 

 

 

좋은 고딕체는 정보전달에 가장 좋은 도구이며 어떤 서체를 선택 하느냐에 따라 무의식적인 신뢰도가 결정 됩니다. 문제는 이런 신뢰도는 측정되지 않지만 여성 고객에게는 본능적으로 알게 된다는 점입니다. 신뢰성 주는 세련된 느낌은 사실 화려한 이미지나 비주얼의 요소가 아니라 폰트로 결정 된다는 점이죠. 낮은 수준의 디자이너는 이런 감각을 구현하지 못하지만 높은 수준의 디자이너는 지시를 하지 않아도 이런 섬세한 간격을 스스로 조정해 내죠.  

 

특히 들쭉날쭉체나 흘림체를많이 쓰는 콘텐츠는 시장 분위기가 많이 나게 되는데 그 이유는 가독성이 무지 떨아지기 때문입니다. 글자나 키워드의 가독성은 좋지만 문장이나 문단의 가독성이 급격히 떨어지기 때문에 전체적으로 혼란스럽고 정신없어 보이는 것이죠. 기준선이 위에는 잡혀 있지만 밑에는 들쭉날쭉 하기 때문에 음절수가 늘어나면 급격히 가독성이 떨어지는 결과를 보여 줍니다. 아래가 들죽날쭉체(안상수체)입니다.  

 

 

 


 

대기업일수록 흘림체나 들쭉날쭉체를 사용하지 않고 고딕계열을 사용 하는 것은 글자는 신뢰감을 주는 정보 전달 역할을 하게 만들고 이미지나 사진에 집중하게 하려는 의도 때문입니다. 하지만 이류 삼류 회사들은 어떻게든 튀게 보이려 제품이나 이미지보다 더 자극적인 스타일을 글자체에 적용해서 여러 서체를 많이 사용하거나 흘림체를 적용하는 무모함을 보이는데 대부분 이런 경우 UX에는 이득 보다는 손해가 크게 됩니다. 글자체는 강조 보다는 자제를 해야 하는 디자인 소스라고 생각 하시면 좋습니다.  

 

내공은 이렇게 생겨 납니다. 아주 자주 사용하는 고딕체 만으로도 신뢰를 주는 미세한 감각을 찾아내서 스스로 적용 하는 것. 이것이 바로 디자인 퀄리티가 됩니다.  

 

요약

1. 글자는 디자인 퀄리티의 뼈대를 이루는 아주 중요한 구성 요소이다.

2. 어떤 서체를 사용 하느냐는 그 서체가 가장 세련되게 보이는 셋팅(스타일)을 찾아내는 것이다.  

3. 글자체중 가장 중요한 것은 고딕체이고 이것을 통해서 신뢰를 전달 할수 있다.

4. 한글, 숫자, 영문의 조합이 가장 좋은 것을 찾는 것이 디자이너의 기본 소양이다. 

5. 고딕체로 기본 폰트 구성을 잡고, 흘림체나 들죽날쭉체는 짧은 헤드라인에 적절히 사용 한다.  

 

추천

머리 아프면 그냥 폰트릭스 회사의 고딕 서체를 사용하면 됨.

 

 

다음 번에는 문장에 대한 퀄리티를 알아 보겠습니다.  

하트 아이콘pavice님 외 11명이 추천했습니다.

  •   에너지드링크
댓글 20
소셜로그인
번호제목작성자등록일추천조회
1스토어팜, 네이버 검색결과에 자동 반영으로 변경 

교육보스

15.12.1421,632
34쇼핑몰 유입수 관련 답변부탁드려요~[2] 

더블에잇

15.11.260747
72네이버 스토어팜과 네이버 모두의 연동관계에 대하여 [3] 

윤입니다

15.11.26-2851
33선배님들 도움이 필요합니다.[5] 

리쿠키

15.11.200788
32오픈마켓 상품들 직접 다올리시나요 ?[3] 

blogface

15.11.182720
31쇼핑몰 운영하고 있습니다. 구매율이 너무 저조한듯합니..[6] 

돼랑이23

15.11.0901,611
30네이버쇼핑 순위[6] 

연라한

15.11.0401,096
29쇼핑몰 매매시 가격산정 (질문) 

공항딴따라

15.10.190683
28구매 의욕을 떨어뜨리는 옥의티[15] 

백만송이

15.10.1511,594
27사업자를 노출시키고 싶지 않은데 노출시켜야 하는 상황.. 

카바니

15.10.080641
71스토어팜도 품질지수,저품질이 있나요?[3] 

blogface

15.10.0601,225
26스토어팜이나 폐쇄몰 사용해보신분 계신가요[4] 

카바니

15.09.1801,158
25쇼핑몰에 타사의 제품 가격을 보여주고 비교 하는게 가..[3] 

박제이크

15.09.100887
24쇼핑몰에 대해 궁굼한게 있어요[6] 

쓰리앤

15.09.090965
6자사몰과 스토어팜 동시운영시 장단점?[4] 

승승장기

15.08.2811,827
23쇼핑몰에 사용할 이미지의 라이센스 관련 문의입니디.[3] 

uniquest

15.08.2501,031
22홈페이지 내 배송추적 기능[1] 

ㄲㄴ울

15.08.130762
21네이버 지식 쇼핑 랭킹에 관한 질문입니다. (상대 업체가..[1] 

빠밤밤

15.07.2901,607
20쇼핑몰에서 사용하는 이미지 저작권에 대한 정리 

uniquest

15.07.1021,305
19이건 어때요? 쇼핑몰 상품 상세페이지 상단 UX : 호시샵[8] 

에너지드링크

15.07.0431,631
18카페24 기반으로 쇼핑몰 운영(고려) 시 ... 소소한 팁..[9] 

uniquest

15.07.0183,693
17무모한 실험에 참여할 욕심 많은 쇼핑몰을 찾습니다. 히..[2] 

에너지드링크

15.06.2241,518
16마지막 쇼핑몰 이야기 [6] 

에너지드링크

15.06.2091,573
15이미지 퀄리티에 대한 쓸데 없는 이야기 [6] 

에너지드링크

15.06.1992,130
14문장의 구조화 (수정)[11] 

에너지드링크

15.06.1781,692
13퀼리티의 기본은 폰트[20] 

에너지드링크

15.06.16122,606
12콘텐츠 퀄리티 높이는 방법 이미지의 경우 [16] 

에너지드링크

15.06.10162,648
11모바일 할인 혜택[2] 

라킴

15.05.280694
5스토어팜의 장점이 뭔가요?[11] 

신용성

15.05.2648,125
10군지렁 군지렁 ... 

에너지드링크

15.05.220816
첫 페이지로 이동 이전 페이지로 이동 123456 다음 페이지로 이동 마지막 페이지로 이동
top
아이보스 배너광고 영역