[튜토리얼/한글화] 안티앨리어싱 101 (Antialiasing 101)

어느새 새해의 첫날이 시작되었네요. 먼저 새해 복 많이 받으세요. :-)

HTML5Rocks에 +Paul Lewis의 '안티앨리어싱 101(Antialiasing 101)' 한글 튜토리얼이 업데이트되었습니다.

 다른 그래픽스와 마찬가지로 안티앨리어싱은 다양한 방식으로 처리될 수 있습니다. 또한 폰트에 대한 안티앨리어싱은 기본사항이나 마찬가지입니다. 이 튜토리얼에서는 현재 크롬에서 사용하고 있는 '그레이스케일 안티앨리어싱(Grayscale Antialiasing)과 서브픽셀 안티앨리어싱(Antialiasing)'에 대해 차이점을 설명하고 어떠한 기준으로 각 방식이 사용되는지에 대해 설명합니다.

"안티앨리어싱은 그래픽스에서 2가지 이상의 색상들이 충돌하는 픽셀과 그 주변들에 대해 어떠한 색상으로 채울 것인지를 결정하는 처리 과정을 말합니다. 특히 폰트의 렌더링에서 윤곽선의 처리는 미려한 출력을 위해 아주 오랜동안 사용된 기법이기도 합니다."

TL;DR;

안티앨리어싱은 스크린 상에서 깔끔한 텍스트와 부드러운 벡터 형태를 가지게 된 근본적인 이유인데도 불구하고 웹 그래픽스에서 알려지지 못한 영웅과도 같습니다. 실제로 안티앨리어싱의 접근 방법들 중 다음 방법들은 최근의 브라우저에서 텍스트를 렌더링할 때 가장 분명하게 사용되고 있습니다.

• 그레이스케일 안티앨리어싱(Grayscale Antialiasing)
• 픽셀들의 처리에 있어 RGB 요소를 모두 균등한 비율의 값으로 처리합니다.
• 서브픽셀 안티앨리어싱(Subpixel Anitialiasing) 
• 픽셀 별로 RGB의 각 요소를 각각의 연산에 따라 다른 비율로 처리합니다.
• 그레이스케일보다 깔끔하지만 처리 비용은 더 높습니다.

보다 자세한 내용과 각 안티앨리어싱 알고리즘이 선택되는 기준에 대해서는 본문을 참조하시기 바랍니다.

번역 링크

• 안티앨리어싱 101
• 원문 - Antialiasing 101
• 번역 - 안티앨리어싱 101