글자 스스로 글모양을 변형시키는 기술, 힌팅(Hinting)

글자 스스로 글모양을 변형시키는 기술, 힌팅(Hinting)

글자 스스로 글모양을 변형시키는 기술, 힌팅(Hinting)
Category
Share Story

오늘은 금주 작업중에 나온 이야기 중 힌팅에 관한 개념 설명과, 3주간의 뉴스/가십등을 이야기하고자 합니다.

1. Hinting

힌팅은
“윤곽선 글자 정보에 약간의 힌트(hint)를 주어 폰트를 비트맵으로 변환할 때 그 힌트를 이용하여 글자의 변형이나
왜곡 없이 더 나은 출력 결과를 얻게 만든다는 의미에서 붙여진 용어” 라고 정의할 수 있습니다.
말이 좀 어렵지요. 간단히 말씀드리면,
“모니터상에서 글씨가 보다 뚜렷하게 보이게끔, 글자 스스로 약간 글모양을 변형시키는 기술” 입니다.
이미지로 확인하면 다음과 같습니다.

Hinting_01

위로부터 릭스고딕B, 릭스모던고딕B, 릭스고딕B를 shape로 변환한 것입니다.
(400%로 확대하여 캡쳐한 이미지)

릭스고딕과 릭스모던고딕은 ‘ㅎ,ㅊ’등의 갓을 제외하면 거의 같은 폰트로 보아도 무방한데요.
릭스고딕은 힌팅이 적용된 폰트이고, 릭스모던고딕은 힌팅이 미적용된 폰트입니다.
아무래도 릭스고딕이 더 범용성이 좋으니 좀 더 세공한 모양입니다.
맨 아래의 (shape로 변환한) 이미지와 비교해 보면, 차이가 좀 더 분명하지요.
힌팅의 경우, 디자이너가 할 수 있는 일은 크게 없습니다.
폰트 스스로 힌트를 주는 것이니 시스템적인 부분이지요.
디자이너가 할 수 있는 일은 오직

Hinting_02

이 폰트옵션(안티알리아싱 조정)을 통해 힌팅의 정도를 조정해 주는 것이 전부입니다.
(그리고, Crisp를 쓰는 것을 권장합니다. sharp는 힌팅을 강화해 주는 것이고, smooth는 힌팅을 약하게 해 주는 옵션입니다.)
또한, 대개의 힌팅은 짝수에 맞추어 세팅이 되어 있습니다.
6,8,9,10,11,12,14,18… 이와 같이 진행됩니다.
(9와 11은 좀 예외적입니다. 9는 힌팅이 부족한 경우가 많지만, 11은 거의 모든 폰트에서 최상의 힌팅을 지원합니다

Hinting_03

위는 12pt, 아래는 13pt입니다. 확실히 12pt가 좀 더 정제되어 보이지요.
힌팅 기술은, 전자화면과 관련된 기술이기 때문에, 그렇게 역사가 길지 않습니다.
여전히 기술적으로도 다듬는 중이구요.
그렇기 때문에, 폰트 선정에 있어서도 – 같은 폰트라면 최신의 폰트를 쓰는 것이 더 유리하지요.
주로 뒤에 Neue, Std가 붙는 폰트가 더 쓰기 좋은 폰트입니다. (영문)
(정리) 폰트 사용에 있어서 – 큰 이슈가 없다면 Crisp를 기준하여 사용,
폰트 선정에 있어서는 뒤에 뭐가 붙은 것이 더 좋은 것(Neue, Std),
폰트의 크기는 짝수로 사용하는 것이 힌팅이 보다 부드러움.

 

 

2. Path 3

Hinting_04

제 뉴스레터에 빈번히 등장하던 path app.이 3.0 업데이트를 통해 메시지 기능을 탑재했습니다.
앱 자체의 완성도가 좋아요.
디자인적으로는 완성도가 아주 높지만 아직 퍼포먼스는 좋지 않네요.
모바일 관련으로 좋은 레퍼런스이니 꼼꼼히 확인하시면 많은 도움이 되리라 생각합니다.

 

 

3. typography seoul

Hinting_05

http://www.typographyseoul.com/

윤디자인 연구소가 601비상, 슬기와민 등 쟁쟁한 분들의 자문을 받아 운영하는 블로그입니다.
친절하고 착해서 타이포그래피 좋아하는 분들에게는 유익한 자료가 될 것 같습니다.

 

 

4. Trend list

Hinting_06

http://www.trendlist.org

요즈음 회사에서 사용하는 그래픽 스타일이 좀 모이는 듯한 느낌을 받는데요.
아마도 회사의 트렌드가 형성되는 것이 아닌가도 싶습니다.
이 사이트는 그래픽 요소의 실례를 통해 트렌디한 디자인작업을 하는 데 유용할 것 같습니다. (하지만 다소 아트적이지요)

 

 

5. Galaxy S4

Hinting_07

갤럭시 S4가 출시되었습니다. 1920*1080이면 거의 23인치 모니터네요. ^^
제원은 언제나 그렇듯 나무랄데 없고, 창의적인 기능이 계속 업데이트 되는 것은 긍정적이지만,
아직 (아이폰처럼) 전체를 꿰뚫는 통일감이 여전히 부족한 것 같습니다. 특히 UI는 그다지 개선되어 보이지 않네요.

 

 

6. Firefox – phone

Hinting_08

파이어폭스에서 폰을 출시했습니다.

폰 자체보다 UX, BX를 멋지게 구축하고 있는 것 같습니다. 물론 과정중이라 풋풋한 느낌도 좀 있는 것 같구요.
https://blog.mozilla.org/ux/2012/09/mozcamp-warsaw-design-principles-behind-firefox-os-ux/

 

 

7. google – how search works?

Hinting_09

http://www.google.com/insidesearch/howsearchworks/thestory/

검색에 관한 알고리즘을 보기 쉽게 정리해 준 웹사이트입니다.
뉴스에 이게 떠서 더 찾아보니, 국문 사이트도 있네요. 디자인도 좋고 내용도 좋으니 일독을 권합니다.

http://www.google.com/insidesearch/

 

감사합니다.

 

by 김병수

 

본 포스팅의 내용은 개인의 의견이며, Right Brain Communications 의 의견과는 다를 수 있습니다.[catlist name=”Design Tip” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]