한글 최초의 힌팅 폰트, 맑은고딕을 말한다-4

힌팅이란?

 

지금까지는 폰트를 화면에 조금이라도 더 품질이 좋게 표현하기 위한 폰트 렌더링 기술이 발전되는 상황을 살펴보았습니다. 그러나, 여전히 렌더링 기술만으로는 100% 해결되지 않는 근본적인 문제가 있는데, 그것은 바로, 아웃라인이 작은 글자 크기에서 왜곡되는 현상입니다. 결국, 그 왜곡현상을 수정보완하는 과정은 어쩔 수 없이 필요할 수밖에 없다는 의미가 되는 것입니다.

힌팅은 아웃라인 폰트가 저해상도 디스플레이에서 렌더링되는 과정에 발생하는 왜곡현상을 보완하기 위해 특정 명령어들을 추가하는 작업을 말합니다. 힌팅의 의미를 이해하기 위해서는 아웃라인 폰트가 왜 화면에서 왜곡이 될 수밖에 없는지 그 원인을 파악하는 것이 우선이라 할 수 있습니다.

 

 

 

래스터라이징의 의미 및 규칙

아웃라인 폰트에 있어서의 래스터라이징은 아웃라인으로 정보를 화면출력을 위해 픽셀 단위로 기계적으로 변환하는 작업을 의미합니다. 그런데, 다음 그림을 보면, 아웃라인 글자가 래스터라이징 처리되면 그 형태가 딱히 만족스럽지 않은 형태로 나오지 않는 것을 볼 수 있습니다.

<아웃라인 상태>

<10pt>

<12pt>

<32pt>

 

래스터라이징 규칙

래스터라이징의 규칙은 의외로 단순합니다. 바로, 아웃라인 정보를 모두 픽셀단위로 변환하면서, 픽셀 중심이 아웃라인의 안쪽에 위치하거나 정확히 경계에 붙으면 해당 픽셀은 On이 되고, 그렇지 않은 픽셀은 Off 상태가 되는 것입니다. 즉, 반올림의 개념이라 생각하면 됩니다.

 

 

 

1번 : 픽셀 중앙이 아웃라인 바깥에 위치하여 off 처리

2번 : 픽셀 중앙에 아웃라인이 걸치므로 on 처리

3번 : 픽셀 중앙이 아웃라인 안쪽에 있으므로 on 처리

 

아웃라인의 왜곡 현상

그럼, 왜 아웃라인이 작은 크기에서 왜곡되어 보이는 것일까요?

일반적으로 글자를 표현하는 해상도에 따라 정해진 크기의 이미지를 표현하는 픽셀의 수가 달라지게 됩니다. 해상도가 높다는 얘기는 픽셀의 집적도가 높다는 의미이고, 이는 결국 물리적인 픽셀 크기가 작다는 것을 의미합니다. 결국, 해상도가 높을수록 같은 크기의 이미지를 표현할 때 훨씬 더 작고 많은 픽셀들이 사용되어, 더욱 품질이 좋은 출력 결과를 얻을 수 있는 것입니다. 그러나, 안타깝게도 우리가 사용하는 OS에서 폰트를 표현하는 해상도는 대부분 72 ~ 96dpi로, 저해상도에 해당합니다. 

화면에서 다음 그림과 같은 선이 있고, 이 아웃라인이 화면에 출력될 때 좌표값 10 단위가 비트맵 한 픽셀의 값으로 비율처리 된다고 가정합니다. 그렇게 되면, 화면에 래스터라이징되는 결과는 다음과 같이 표현될 것입니다.

 

<아웃라인 상태>

  

<래스터라이징 결과>

 

 

A’의 좌표 : (15/10, 70/10) = (1.5, 7) = (2, 7)

B’의 좌표 : (14/10, 0/10) = (1.4, 0) = (1, 0)

C’의 좌표 : (44/10, 0/10) = (4.4, 0) = (4, 0)

D’의 좌표 : (46/10, 70/10) = (4.6, 7) = (5,7)

 

 

즉, 특정 비율로 해당 좌표들을 픽셀 단위로 변환하면, 위와 같은 결과가 나옵니다. 여기에서 주목해서 보아야할 부분은 점 A, B의 x좌표 값의 차이 및 점 C, D의 x좌표 값의 차이입니다. 이 두 값의 차이는 아웃라인 상에서 각각 1, 2 차이밖에 안나기에 거의 직선에 가깝지만, 래스터라이징을 거치면서 결과에서는 1픽셀의 차이가 생겨버렸습니다. 이를 달리 표현하자면, 두 간격을 비율로 계산하면 각각 1/10픽셀, 2/10픽셀로 실제 픽셀로 계산되면 0픽셀, 즉, A와 B, C와 D는 x축 위치에서 각각 같은 픽셀 값을 가져야 하는 것이나 실제 결과는 그렇지 않은 것입니다. 이는 변환되는 비율에 따른 기계적 변환과정에서 좌표값의 위치를 절대적으로 계산하면서 생기는 현상입니다. 그리고, 이로 인해 아웃라인들이 원치 않게 왜곡이 발생될 수밖에 없게된 것입니다. 즉, 래스터라이저는 기본적으로 좌표의 위치를 절대적인 비율로 계산할 뿐, 좌표들 사이의 간격을 전혀 계산하지 못하는 것입니다.

다음 예를 보도록 하겠습니다. 1개의 아웃라인을 복사하여 서로 다른 위치에 붙여넣은 모습입니다.

 

<A : 이상적인 래스터라이징>

 

<B : 실제 래스터라이징 결과>

 

일반적으로 이상적인 래스터라이징은 같은 아웃라인이면 3개 원이 모두 똑같은 래스터라이징 결과를 갖는 것이 당연하지만, 현실은 전혀 그렇지 않습니다. 래스터라이징의 기본적인 규칙때문에 같은 아웃라인이라 하여도 위치가 달라지면, 래스터라이징 결과 또한 달라지게 되는 것입니다.

이런 현상은 폰트에 똑같이 적용되어, 다음과 같은 문제들을 야기하게 됩니다.

<계단현상 발생>

 

<획 두께가 서로 다른 현상>

 

<획이 사라지는 현상>

 

<획의 간격이 서로 다른 현상>

 

 

 

힌팅의 기본 원리

 

래스터라이징에서 생기는 왜곡의 근본 원인은 바로, 획의 두께 및 간격을 인식해 래스터라이징에 적용하지 못하기 때문이라 할 수 있습니다. 따라서, 대부분의 왜곡현상은 획의 두께 및 간격 조절을 통해 해결, 즉, 왜곡을 보정할 수 있습니다. 획의 두께와 간격을 계산하기 위해서는 ‘기준점’과 ‘상대점’의 개념이 들어가게 됩니다. 그리고, 힌팅은 바로 ‘기준점’과 ‘상대점’이라는 개념에서 시작하는 것이라 할 수 있습니다. 즉, 획의 두께를 일정하게 유지하고자 할 때는 먼저 기준점을 픽셀 그리드에 맞추고, 상대점을 특정 픽셀 값만큼 옮겨 그리드에 맞추도록 하는 것입니다. 앞의 래스터라이징 규칙에서 보았던 그림을 통해 설명하도록 하겠습니다.

단, 여기서는 점 A를 모든 점들에 대한 기준점으로 하고, 나머지 점들은 점 A에 대한 상대적 거리를 이용해 픽셀 단위로 변환해 보도록 하겠습니다.

<아웃라인 상태>

  

<보정된 결과>

 

A’의 좌표 : (15/10, 70/10) = (1.5, 7) = (2, 7)

B’의 좌표 : A’의 좌표 + A와의 간격/10

            = (2, 7) + ((14-15)/10, (0-70)/10)

            = (2, 7) + (-0.1, -7) = (2, 0)

C’의 좌표 : A’의 좌표 + A와의 간격/10

            = (2, 7) + ((44-15)/10, (0-70)/10)

            = (2, 7) + (2.9, -7) = (5, 0)

D’의 좌표 : A’의 좌표 + A와의 간격/10

            = (2, 7) + ((46-15)/10, (70-70)/10)

            = (2, 7) + (3.1, 0) = (5, 7)

 

 

보정을 통해 처리된 결과는 아웃라인 형태와 거의 차이가 없음을 보게 됩니다. 기준점은 특별히 고정되어 있지 않고, 임의대로 바꿀 수도 있습니다. 다만, 어느 점을 기준점으로 하느냐에 따라 약간의 위치가 달라질수 있지만 형태의 변화는 거의 없어, 해당 기준점의 위치를 이동시켜주는 정보만 추가해주면 됩니다.

 

예로, 위 그림에서 기준점을 점 A가 아닌 점 B로 설정하고 좌표를 다시 계산하면 위의 좌표들은 x축으로 -1씩 이동하여 A’(1, 7), B’(1, 0), C’(4, 0), D’(4, 7)의 값을 갖게 됩니다. 결국 전체 형태는 변함이 없이 옆으로 -1만큼 이동한 것과 같아, 기준이 되는 B’의 좌표를 x축으로 1만큼 이동하는 명령어를 추가하면 점 A를 기준으로 한 픽셀좌표와 동일한 결과를 갖게 되는 것입니다.

 

보정을 통한 문제 해결의 예

 위의 같은 보정 과정을 거치게 되면, 앞에서 있었던 래스터라이징의 문제점들을 모두 해결할 수 있게 됩니다.

<획이 사라지는 현상 해결>

<획 두께가 다른 현상 해결>

<획의 계단현상 해결>

 

<획 간격이 다른 문제 해결>

 

이렇듯 힌팅은 기계적 래스터라이징의 문제점들을 해결하기 위해 기준점을 중심으로 하여 다른 점들까지의 거리를 조정하는 명령을 추가하여 래스터라이저가 아웃라인을 래스터라이징 하는 과정에 참고하는 일종의 힌트(hint)를 주는 것입니다. 즉, 어떤 점을 기준점으로 잡고, 해당 기준점부터 다른 점까지의 거리는 얼마만큼 유지할 것인가를 래스터라이저에게 알려주는 정보를 넣어주는 것이라 할 수 있습니다.

 

---

이번 포스트에서는 래스터라이징 처리과정의 규칙과 이를 보완하는 작업이 힌팅이라는 것을 알아 보았습니다. 다음 포스팅에서는 힌팅의 종류에 대해 알아보도록 하겠습니다.