저해상도의 래스터 비극 재방문

저해상도의 래스터 비극 재방문:

“델타 힌팅” 너머의 기회와 과제

Beat Stamm, PhD

물리학자, 컴퓨터 과학자, 그리고 예술가 지망생

다른 이들의 평가:

John Hudson, Tiro Typeworks:

전체 6장은 반드시 읽어야 하고, 그 다음엔 반드시 다시 읽어야 한다.

Thomas Phinney, FontLab CEO:

화면에서의 글꼴 렌더링을 이해하고 싶다면 이것을 읽어라. […] 강력 추천.

Erik Spiekermann (트위터), SpiekerBlog:

화면 위에 단어를 만들어야 하는 누구에게나 필독.

Jonathan Hœfler (트위터), Hœfler & Co.:

‘왜 웹폰트는 그렇게 오래 걸리는가’를 궁금해하는 이들은 Beat Stamm의 훌륭한 자료를 보시라.

새 소식?

2018-06-21

글꼴 제작 커뮤니티가 ‘힌팅’이라고 부를 법한 것에 대해 내가 분명히 다른 관점을 보여주는 “매개변수화된 정규화(Parameterized Regularization)” 장들을 계속 추가했다. 가능하면 비기술적으로 유지하려 하지만 양해해 주시길—때로는 정말로 벌거벗은 픽셀을 논해야 할 때가 있다(참조: Parameterized Regularization).

2011-12-07

안티앨리어싱과 결합될 때의 드롭아웃 제어 에 대한 그림 설명을 추가했다. 전체 픽셀 및 서브픽셀 안티앨리어싱을 모두 포함한다(참조: 4.1.3).

2011-09-14

ClearType를 분리해 다루고(참조: 2.2.0) 서브픽셀 안티앨리어싱 방식( ClearType, CoolType, FreeType, Quartz)을 비교했다(참조: 2.2.1).
DirectWrite에서 문자 간 “간격”에 대한 분석을 추가하고(참조: 4.2.2) 서로 다른 어드밴스 폭을 사용할 때의 텍스트 레이아웃 비교를 덧붙였다(참조: 4.2.3).
색상 위에 색상으로 서브픽셀 안티앨리어싱된 텍스트(ClearType)를 렌더링하는 방법에 대한 설명을 수정하고(참조: 5.2) 감마 보정에 대한 민감도를 보완했다(참조: 5.3).

이 “래스터 비극”이란 무엇인가?

1997년 OpenType Font Jamboree 행사에 맞춘 교육 세션에서, 나는 저해상도 화면에서 외곽선 폰트를 렌더링하는 방법에 대해 발표했다. 당시 텍스트는 픽셀을 “켜기” 또는 “끄기”로 처리하는 “흑백” 방식으로 렌더링되었다. 나는 외곽선을 순진하게 스케일하고 스케일된 외곽선 내부의 픽셀을 “켜는” 방식이 얼마나 심각하게 형태가 무너진 문자를 낳는지 보여주었다.

곧이어, 그 발표 슬라이드는 <html>로 변환되어 Microsoft Typography 웹사이트에 The Raster Tragedy at Low Resolution로 게시되었다. 시간이 흐르면서 놀라울 정도로 많은 사이버 공간의 문서들이 래스터 비극 을 언급하기 시작했다—그중에는 Typophile의 쓰레드들(또한 참조: Typophile), 미국 특허청이 승인한 특허들, 그리고 Wikipedia의 백과사전 항목도 있었다. 결국, 그중 일부는 기본 원리가 아직 유효할지라도 래스터 비극 은 어떠한 안티앨리어싱 방법도 다루지 않는다는 점을 지적하기 시작했다.

이에 나는 메일링 리스트와 Typophile에서 토론에 참여하기 시작했다. 그러나 참고할 “인프라”가 없으면, 하나의 게시물에 자족적인 형태를 유지하면서 담을 수 있는 내용에는 한계가 있다. 예컨대 Typophile의 ClearType, in XP and Vista에서 나는 텍스트 레이아웃의 래스터 비극 을 설명하려 했는데—이 글은 곧바로 Wikipedia의 ClearType 페이지에서 맥락이 약간 벗어난 채 인용되었다[1].

그래서 나는 결국, 글꼴 렌더링 퍼즐의 개별 해답을 여기저기에 흩뿌리기보다는 한곳에 모두 모으기로 결심했다. 이것이 최종 사용자, 글꼴 제작자, 소프트웨어 개발자 모두에게 도움이 되기를 바라면서 말이다. 이 웹사이트는 그 노력의 결과물이다. 그리고 마지막으로 래스터 비극 이라는 말은 URW의 Peter Karow의 출판물에서 비롯되었다[2]—공은 돌려야 할 곳에 돌려야 하니까!

독자 안내

이 웹사이트에는 본격적인 학술 교재로 손색없는 분량의 자료가 담겨 있다. 오늘날 화면에서 텍스트를 렌더링하는 일은 놀랄 만큼 복잡한 주제다. 샘플링 정리에서부터 계산기하학, 일반적인 소프트웨어 공학에 이르기까지 폭넓은 주제를 건드리며—이 모든 것이 예술적 결정에 의해 이끌어진다. 이 웹사이트를 탐색하고 시간을 가장 잘 활용할 수 있도록, 가벼운 방문자를 위한 간단한 안내를 덧붙인다.

시간이 부족하고 이전 장을 가리키는 링크를 따라가는 것이 괜찮다면, 이 웹사이트의 핵심으로 6장을, 0장의 소개와 7장의 결론을 양옆에서 받치는 형태로 고려해 보라. 6장은 흔히 오해되는 “힌팅”의 개념을 정의하고, 이를 텍스트 렌더링 및 텍스트 레이아웃 방법과 관련지어 설명한 뒤, 순진한 “힌팅”을 “픽셀 팝핑”에서 컴퓨터 프로그래밍으로 옮기기 위한 고찰로 마무리한다.

오늘날 화면에서의 텍스트 렌더링을 진지하게 다루고자 한다면, 6장을 온전히 이해하기 위한 전제 조건이 되는 “인프라”로서 1장부터 5장까지를 참고하라. 특히 다음을 권한다.

1장은 대부분의 “래스터 비극” 뒤에 놓인 이론적 토대를 다룬다. 이후 장에서 사용되는 어떤 안티앨리어싱(“폰트 스무딩”) 방법보다도, 바이레벨(“흑백”) 예시가 문제를 더 쉽게 보여주기 때문에 이를 풍부하게 사용한다. 과정에서 사용하는 고등학교 수준의 수학이 부담스럽다면, 적어도 픽셀을 더하고 빼는 수치 예시만큼은 따라가 보라. 그리고 평이한 영어로 정리한 요약을 반드시 읽어라.
2장은 안티앨리어싱(“폰트 스무딩”) 방법을 소개한다. 서브픽셀 안티앨리어싱(ClearType, CoolType, FreeType, Quartz)을 포함해 이것들이 어떻게 작동하는지(아주 고급 수학을 쓰지 않고도 보여줄 수 있는 범위까지) 설명하고, 바이레벨(“흑백”) 렌더링과 서로 비교한다. 특히 전체 픽셀 안티앨리어싱(일명 단순 “그레이스케일링,” 또는 Windows의 “표준 폰트 스무딩”)은 모든 안티앨리어싱 방법이 약속하는 기회를 직관적으로 이해하기에 충분히 쉽다.
3장은 텍스트 렌더링에 안티앨리어싱 방법을 사용할 때 가능해지는 다양한 기회를 보여준다. 안티앨리어싱은 오늘날 화면의 물리적 해상도를 높여주지 않는다—즉, 인치(제곱 인치)당 픽셀 수를 늘려주지 않는다—하지만 바이레벨(“흑백”) 렌더링의 많은 문제를 완화할 수 있다. 어떤 그럴듯한 이름의 안티앨리어싱 방법이든 간에 할 수 있는 것과 할 수 없는 것을 파악하려면 안티앨리어싱 ‘배타 원리’ 를 직관적으로 이해하라. 또한 분수형 어드밴스 폭과 분수형 ppem 크기의 효과를 체험하기 위해 각 “마우스오버”를 꼭 사용해 보라.
4장은 Windows 플랫폼의 TrueType 래스터라이저에 관련된 여러 도전 과제를 다룬다. 아마도 가장 “기술적인” 장이겠지만, 그렇다고 완전히 포기하지는 말라. 1장과 마찬가지로 과정에서 사용하는 고등학교 수준의 수학이나 TrueType 코드 예시가 부담스럽다면, 그림과 평이한 영어로 정리한 요약을 통해서라도 직관을 얻어라. ClearType & “레거시 폰트” 와 ClearType & “레거시 애플리케이션” 은 오늘날 Windows 화면에서 보이는 현상을 이해하는 데 핵심이라 하겠다. 특히 4.2.3 말미의 어드밴스 폭(문자 지표) 인터랙티브 일러스트레이션을 꼭 확인하라.
5장은 글리프가 래스터라이저의 TrueType 처리기( TrueType 명령을 실행하는 부분)에서 시작해 (컬러) 픽셀이 화면에 나타나기까지의 경로를 보여준다. TrueType 코드는 건너뛰어도 좋다(증거로 포함했다). 대신, 색상으로 텍스트를 렌더링하는 법과 감마 보정을 직관적으로 이해하라. 그림 아래 버튼으로 과소/과대 보정이 색상과 지각되는 획 굵기에 어떤 영향을 주는지 체험하라. 또한 각 버튼과 “마우스오버”로 LCD(평면 패널) 고유의 해상도와 서브픽셀 구조를 맞추는 중요성을 확인하라.
6장은 흔히 오해되는 “힌팅”의 개념을 정의하고, 이를 텍스트 렌더링 및 텍스트 레이아웃 방법과의 관계 속에서 설명한 뒤, 순진한 “힌팅”을 “픽셀 팝핑”에서 컴퓨터 프로그래밍으로 이동시키기 위한 고찰로 마무리한다. 다시 한번 각 버튼과 “마우스오버”를 사용해 서로 다른 포인트 크기, 화면 해상도(DPI), 감마 보정에서 다른 “힌팅” 전략이 무엇을 하는지 확인하라. 역시 장 말미의 TrueType 코드는 건너뛰어도 된다. 나는 이를 증거로 포함했다. 이를 통해 “가로획을 올바른 위치에 두기”라는 소위 예술적 결정을 사람이 수많은 델타 명령을 수동으로 적용하지 않고도 컴퓨터 소프트웨어로 수행할 수 있음을 보이고자 했다. 컴퓨터가 Bodoni의 서체를 [재]설계하는 것이 아니다. 단지 화면의 조잡한 격자에 글꼴을 최대한 가깝게 맞추도록 소프트웨어를 처리할 뿐이다.

글꼴 렌더링에 대해 글을 쓰는 일은 흔히—아니 거의 항상—딜레마다. 엔지니어 독자에게 내가 이것들을 그저 지어낸 게 아님을 설득하기에 충분히 기술적이어야 하면서도, 동시에 서체 디자이너 독자를 완전히 놓치지 않을 만큼만 기술적이어야 하기 때문이다. 이 경계는 명확하지 않고, 아마 나는 그것을 여러 번 넘었을 것이다. 그럼에도 직관적 예술과 엄정한 공학 사이의 간극을 메우는 일이 나를 계속 동기부여한다. 이것은 “둘 중 하나”나 “서로 대립”의 문제가 아니다—둘 다의 문제다: 하나 이면서 다른 하나. 도움이 되기를!

각주:

2011년 3월 17일에 수정됨
Peter Karow, Intelligent FontScaling, URW Unternehmensberatung, Hamburg, Germany (발행일 미상). 원 브로셔를 잃어버리거나 어디엔가 두었는데, 내 박사 논문에서 해당 출판물을 이렇게 인용했다.

FAQs | Contact | Donate | 페이지 최종 업데이트: 2018-06-21