Readable Font 설계 및 기획 PPT 공개

https://black7375.tistory.com/67

BlaCk Void Zsh 설계 및 기획 문서 공개

에 이어 공개하는 기획글입니다.

 

 

https://github.com/black7375/Readable_Font

2018년 말에 만들었던 확장기능인데..

이거 만들어본다고 자바스크립트를 처음 이용해봤기 때문에..

코드는 딱히 도움안될겁니다.

지금 보니 처음부터 다시 만들어야 될 것 같다는ㅋㅋㅋ

 

그냥 순수한 기획용으로만 참고했으면.

ReadableFont.pdf

3.41MB

 

교내 공모전에서 돈을 받기 위해 만들었던 PPT 파일 입니다.

아래 글은 PPT에 대한 부연설명을 달아놓았습니다.

 

폰트 관련 확장기능이라 타이포그래피 위주로 디자인이 되어 있어요.

만들게된 이유, 기능소개, 디자인정도로 이루어져 있습니다.

만들게된 동기는 우연히 크로미움 계열 브라우저를 써봤더니 파이어폭스에 Custom CSS를 적용한것과 렌더링 차이가 많이나서 였습니다.

한눈에 봐도 차이가 엄청 심하죠.

그래서 사람들이 많이쓰는 윈도우 기준으로 크롬, 엣지, 파이어폭스로 테스트 해보았답니다.

파이어폭스가 가장 두꺼워서 진해보이지만 작아서 잘 안보이죠?

이에 대해서는 뒷부분에서 확대 해보며 이야기해봅시다.

 

동일한 방식으로 렌더링을 확인해보았을 때 OS에서는 윈도우 < 리눅스 < 맥의 렌더링이 좋다는 것을 확인해볼 수 있었습니다.

만약 윈도우 크롬을 맥의 파이어폭스처럼 보여줄 수 있다면 최고라 할 수 있겠습니다. ㅎㅎ

 

크롬의 글씨를 파이어폭스처럼 만들어볼 때 고려해볼 수 있는 것은 글씨를 '진하게' 만들어보는 겁니다. 

그런데 폰트를 조금이라도 다루어본적이 있는 사람이라면 Office 같은 곳에서 제공하는 '진하게' 기능은 사용하지 않고 전용 Weight를 사용합니다.

그 이유는 다음 그림에서 볼 수 있습니다.

조형적 문제(업 1번)가 생기거나, 띄어져야 할 곳이 붙어있는(업 2번, 짰 1, 2, 3번)등의 문제가 발생합니다.

큰 글자라면 어색함이 덜하겠지만, 글씨가 작아지면 어색함과 가독성 문제가 속출하기 시작합니다.

 

따라서 신중하게 설계된 폰트들의 굵기변화는 함부로 건들 것이 아니란 원칙을 세워볼 수 있습니다.

 

우선, 글씨의 굵기변화를 건들이지 않고 할 수 있는 작업은 2가지가 있습니다.

바로 Kerning과 Ligature입니다.

Kerning은 글자사이의 간격을 조정하여 가독성을 향상 시키는 것, Ligature은 합자를 만들어 가독성을 향상시키는 기법입니다. 보통 Ligature은 글씨가 작아 뭉쳐보일때 합쳐서 가독성이 향상시키는 것이 유리하며 약 20pt아래일때 적용이 되는 것으로 알고 있습니다.

 

흠.. 그런데 글자를 아예 건들이면 안되는 걸까요?

발표시간이 5분이라 못넣었던 이론들을 토대로 알아봅시다.

 

앞선 '작업' 중 '업'자 만 확대시켜보았습니다.

'ㅇ'의 곡선, 'ㅂ'과 'ㅓ'의 직선을 조화롭게 확인할 수 있을 거라 생각합니다.

파이어폭스의 글씨가 더 진한 것을 볼 수 있습니다.

 

그렇다면 우리가 생각하는 '진하게'란 무엇을 뜻할까요? 

각 'ㅓ'의 오른쪽 부분의 컬러코드[Hex, HSL]를 확인해보도록 합시다.

• 크롬: #ABE5FF | (141, 255, 213)
• 엣지: #9CDBFF | (143, 255, 206)
• 파폭: #317FD3 | (150, 165, 130)

 

첫번째의 Hex는 RGB를 의미하고 많이 접하기 때문에 익숙합니다.

두번째 HSL은 색상(Hue), 채도(Saturation), 명도(Luminance)로 이루어집니다.

https://en.wikipedia.org/wiki/HSL_and_HSV

HSL and HSV - Wikipedia

 

전 사람이 색보다 밝기 변화에 민감하다는 점을 주목했습니다.

배경이 하얀색일 경우 밝기가 낮을수록, 배경이 검은색일 경우 밝을수록 글자가 '선명'하게 여길 것이라는 거죠.

원추 세포에서 만들어진 전기 신호들은 다시 밝고 어두운 정도를 나타내는 밝기(achromatic) 신호, 빨강-초록(redness- greenness) 정도를 나타내는 신호, 노랑-파랑(yellowness-blueness) 정도를 나타 내는 신호 이렇게 세 가지의 대응색 신호(Opponent- signal)로 바뀐다. 대응색 신호들 중 밝기(achromatic) 신호는 가장 공간해상도가 높고 노랑-파랑 정보들의 공간해상도는 가장 낮다. 즉 노랑-파랑 컬러 영상 정보는 어느 정도 해상도를 낮춰도 사람들은 화질 차이를 잘 느끼지 못하는 반면 밝기 정보의 해상도 변화는 쉽게 인지하게 된다. 대응색 신호들은 시신경을 따라 뇌의 대뇌피질 영역으로 이동하게 되고 최종적으로 밝고 연한 빨강, 진한 녹색과 같은 ‘색’으로 인지되게 된다.

사람이 보는 색을 기계로 측정한다 | 과학포털 사이언스올

또한 가장자리의 밝기는 커다란 영향을 미치기도 합니다.

방송자막이나 유튜브들 썸네일 글씨들의 가장자리 처리를 확인해보도록 합시다.

밝기 변화를 확실히 주어 돋보이게 만든 것이 보일꺼에요.

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4315842/

Brightness–Color Interactions in Human Early Visual Cortex

 

그래서 저는 글자를 '선명'하게 만들기 위해서는 아래와 같은 조건을 중심으로 진행하였습니다.

• 픽셀이 확장되면 안됨 (원형의 보존)
• 글씨의 가장자리 처리가 중요
• 가장자리의 밝기를 조절

 

특히 밝은 영역보다 어두운 영역에서의 밝기 차이를 더 민감하게 여기므로 다크모드에서 효용이 커질것입니다.

https://ledshield.wordpress.com/2012/11/13/led-brightness-to-your-eye-gamma-correction-no/

 

'가장자리 처리'라 하면 우리 컴공인들은 당연히 떠오르는 기술이 있습니다.

바로 안티얼라이싱(Antialiasing)!!

안티얼라이싱은 글씨를 부드럽고 매끄럽게 만들어주죠.

 

그런데 글씨에 사용하는 안티얼라이싱 기술은 크게 2가지로 나눠볼 수 있습니다.

그레이스케일과 서브픽셀(클리어타입이라고도 불림)입니다.

• 그레이스케일: 저해상도에서는 흐릿하지만 고해상도에서는 매끄럽게 보임.
• 서브픽셀: 명암비를 높혀 저해상도 화면에서 유리, 고해상도에서 매끄럽지 않음, 글씨 원형을 보존하기 힘듦.

 

https://en.wikipedia.org/wiki/Font_rasterization

Font rasterization - Wikipedia

저는 요즘 디스플레이들의 특성상 Grayscale을 기본값으로 적용했습니다.

단, 옵션으로 서브픽셀렌더링을 적용하도록 나두었습니다.

 

그러나 문제가 한가지 있습니다.

다음은 미적용, 그레이스케일, 서브픽셀 렌더링의 모습입니다.

보다시피 부드러워지고 원형에 가까운 형태를 보여주기는 하나 '진하게', '선명하게'와는 거리가 생긴다는 거죠.

 

힌팅에 대해서

위키피디아를 보면 힌팅에 관련된 이야기가 나오기도 하는데 대부분의 폰트에 이미 힌팅정보가 포함되어 있으므로 건들일 필요가 없습니다.

하지만 혹여나 힌팅이 필요하다면 아래 링크를 참고해보세요.

https://www.freetype.org/ttfautohint/

ttfautohint

 

따라서 저는 안티얼라이싱을 보완하는 작업을 실행했습니다.

안티얼라이싱의 문제는 '가장자리'가 흐릿흐릿하다는 것이었습니다.

그래서 그림자와 스트로크의 약한 변화를 주어 가장자리 픽셀이 진하게 보이게 만들었습니다.

그림자의 색은 중성적인 회색(#ACACAC)을 채택하여 배경이 밝으나 어두우나 큰 영향이 미치지 않도록 했습니다.

 

자, 이제 결과를 보도록 합시다.

순정에 아주 약한 튜닝을 가해 원본을 해치지 않으면서도 나아졌다는 것이 느껴지십니까?

 

아까처럼 글씨를 확대시켜봅시다.

그리고 글씨만 따로 때서 비교도 해보고요.

생김새는 같지만 색이 훨씬 진해졌다는 것을 볼 수 있습니다.

 

기존

• 크롬: #ABE5FF | (141, 255, 213)
• 엣지: #9CDBFF | (143, 255, 206)
• 파폭: #317FD3 | (150, 165, 130)

적용

크롬: #84D1FF | (143, 255, 193)

파폭: #939393 | (0, 0, 147)

 

발표에서 프리젠터로는 색차이를 비교하기 힘들기 때문에 같다고 해놨지만,

수치적으로 비교해보았을 때, 크롬이 원래 엣지보다 근소하게 낫다는 것 또한 확인해볼 수 있습니다.

 

단, 정확히 그레이스케일로 렌더링이 되는 것은 파이어폭스 뿐이었네요.

덕분에 향상폭이 가장 컸습니다. (대신 윈도우에서 맥느낌을 낼 수 있어졌죠)

 

연속된 글로 비교해보면 효과적으로 느껴질 것입니다.

 

다음으로 생각이 났던건 바로 폰트 종류였습니다.

한국 인터넷을 돌아다니다보면 굴림체가 많이 보입니다.

그리고 굴림체, Comic Sans같은 폰트는 썩그리 좋은 글꼴이 아닙니다.

 

굴림체는 일본의 나루체에 들어갈 목적으로 만들어진 것으로 아는데 그러다보니 아래와 같은 문제들이 생기게 됩니다.

 

이외에 윈도우즈의 굴림, 돋움, 바탕등을 애용하는 사이트들이 많습니다.

대표적인게 네이버, 다음카페, DC 인사이드, MBL Park, 더쿠, 인벤 등등.

나름 유명한 사이트들이 품질이 좋지 않은 폰트들을 애용하고 있었습니다.(2018년 말 기준)

 

우리의 목표는 총 2개.

• 못생긴 글꼴: 굴림체처럼 못생긴 글꼴은 더 나은 글꼴로 바꿔주는 것.
• 유명한 글꼴: 웹사이트 디자이너가 유도한 특성을 최대한 지켜주기위해 비슷한 조형적 특성을 가지는 글꼴로 대체.
  특히 리눅스의 경우 오픈소스 프로젝트다보니 상용 폰트가 없어 다른 운영체제와 매우 다른 글꼴을 보여주기도 하기에 넣게 되었습니다.

 

따라서 다음과 같이 리스트를 작성할 수 있었습니다.

 

그런데 문제는 44개(패밀리를 따로 따로 계산)나 되는 폰트를 내장하려다보니 350MB가 넘는 흉악한 용량을 자랑하게 되었습니다.

따라서 용량을 줄여야 했습니다.

제작할 확장기능은 모던 브라우저용이라 woff2 포맷을 지원하여 압축율이 높은 woff2 포맷을 채택하였고, 폰트 서브셋을 통해 약 25배까지 용량을 낮출 수 있었습니다. 

적용하면 네이버 검색화면이 다음과 같이 달라집니다. ㅎㅎ

굴림체를 사용한 대표적 사이트인 굴림계획도 바꾸어봤고요.

 

당시에 마지막으로 넣었던 기능인 수식표현입니다.

크롬은 MathML을 지원하지 않아 수식이 풀어져보입니다.

반면 파이어폭스는 제대로 보이죠.

 

알고보니 파이어폭스와 사파리만 지원하는 브라우저였고, 제가 이 둘만 써왔기 때문에 몰랐던 것이었습니다..

 

그래서 수식표현을 강화할 방법을 찾았습니다.

첫번째는 크롬을 위해 MathML이 있으면 MathJax 라이브러리를 동적으로 로드.

두번째는 파이어폭스를 위해 STIX란 수식용 폰트를 내장하는 것.

 

이를 적용하면 크롬에서도 잘 보이는 것을 알 수 있습니다.

 

마지막으로 디자인인데 ㅋㅋㅋ

심사하는 사람들도 공돌이라 디자인은 잘 모르고 저도 잘 모르기 때문에

아무말이나 넣었습니다.

선명하게 글씨가 삐뚤어진거 불-편해져랐!! 원본 PPT파일이 날라가서 못고치는거 양해부탁드립니다.(포함된 폰트들 때문에 용량이 너무 커서 그런지 백업이 제대로 안되었었던..)

가장 어려웠던 것은 '선명하게', '글꼴치환', '수식표현'처럼 글자수를 맞추면서 의도한 바를 전달하는 표현을 찾는 것.

 

만든지 약 10개월정도 쯤 교내 대회가 열려서

확인을 해봤더니 생각보다 많은 분들이 쓰셨더군요.

 

 

파워포인트 인공지능이 만들어준 이미지인데 의외로 이뻐서

그냥 마지막으로 넣어본것.