소개
앤티앨리어싱은 웹 그래픽에서 잘 알려지지 않은 기술입니다. 그렇기 때문에 화면에서 명확한 텍스트와 매끄러운 벡터 도형을 사용할 수 있습니다. 실제로 오늘날 브라우저에서 사용되는 앤티앨리어싱에는 텍스트 렌더링에서 가장 명백한 몇 가지 접근 방식이 있습니다. 스위치 방지에 사용된 알고리즘으로 인해 예기치 않은 시각적 결과가 발생할 수 있습니다. 이 도움말에서는 앤티앨리어싱 접근 방식을 살펴보고 픽셀이 그려지는 방식을 알아봅니다.
모든 화면은 모두가 알고 있듯이 픽셀로 구성되어 있습니다. 블록으로 구성된 거대한 그리드이며 각 블록에는 빨간색, 녹색, 파란색 (RGB) 구성요소가 포함되어 있습니다. 멀리서 이미지, 텍스트, 아이콘이 보이지만 가까이에서 보면 실제로 RGB 구성 요소의 그리드와 모든 것이 어떻게 구성되어 있는지 볼 수 있습니다.
앤티에일리어싱
벡터 도형을 그리고 픽셀의 '일부'를 통과하면 어떻게 될까요? 그리고 있는 도형이 검은색이고 배경이 흰색이라고 가정해 보겠습니다. 픽셀에 색상을 지정해야 할까요? 색을 칠하면 어떤 색으로 할까요? 검은색, 회색 등 다른 것이 있나요?
앤티앨리어싱 프로세스에 따라 픽셀을 채울 때 어떤 색상을 사용해야 할지 결정합니다. 가장 간단한 버전을 그레이 스케일 안티앨리어싱이라고 하며, 픽셀의 세 가지 구성요소를 동일하게 취급합니다. 픽셀이 반만 가려진 상태에서 잠시 흰색 바탕에 검은색 텍스트를 가정하여 단순하게 유지해 보겠습니다. 각 구성 요소가 절반 밝기로 설정될 것이라고 생각하겠지만 (물론 그랬듯이), 실제로는 그보다 더 복잡합니다. 즉, 감마를 고려해야 하므로 정확한 값으로는 설정하지 않을 것입니다. 물론 이해하기가 좀 까다로울 수도 있지만 이 주제는 도입부이기 때문에 여기서는 자세히 다루지 않겠습니다. 그레이 스케일 앤티앨리어싱은 픽셀 수준에서 처리되므로 실제로 훨씬 더 잘 할 수 있습니다.
그림 2에서는 같은 삼각형이 그려져 있지만 왼쪽에는 앤티앨리어싱이 사용 설정되어 있고 오른쪽에서는 사용 중지되어 있습니다. 보시다시피 앤티앨리어싱이 사용 설정되면 삼각형이 픽셀의 일부만 통과할 때 픽셀이 회색 음영으로 표시됩니다. 하지만 사용 중지하면 픽셀이 검은색 또는 흰색으로 채워지고 도형이 들쭉날쭉해집니다.
텍스트 렌더링
브라우저가 텍스트(본질적으로 벡터 모양)를 렌더링할 때마다 동일한 문제에 직면하게 됩니다. 텍스트의 문자가 일부 픽셀만 채우므로 이러한 픽셀을 채우는 전략이 필요합니다. 텍스트를 안티앨리어싱하면 더 쉽고 즐겁게 읽을 수 있습니다.
그러나 앤티앨리어싱에 대한 그레이 스케일 접근법은 한 가지 방법에 불과합니다. 흔히 사용되는 접근 방식은 픽셀의 RGB 구성요소를 사용 설정하는 방법을 좀 더 선택적으로 사용하는 것입니다. 이 프로세스를 서브픽셀 앤티앨리어싱이라고 하며, 특히 Microsoft의 ClearType 팀은 이를 발전시키기 위해 많은 시간과 노력을 투자했습니다. 지금은 훨씬 더 널리 사용되고 있으며 모든 주요 브라우저에서 어느 정도 사용되고 있습니다.
첫째, 각 픽셀이 각각 별도의 빨간색, 녹색 및 파란색 구성요소로 구성되어 있다는 것을 알기 때문에 문제의 픽셀에 대해 각 구성요소가 얼마나 '켜져' 있는지 감지합니다. 따라서 픽셀이 왼쪽에서 '절반 덮여' 있는 경우 빨간색 구성요소를 완전히 켜고 녹색 구성요소를 절반으로 전환하고 파란색은 꺼진 상태로 유지할 수 있습니다. 이 프로세스는 '화면의 가로 해상도 3배'로 설명되며, 각 픽셀이 실제로 단일 단위가 아니라 나란히 놓인 세 개의 구성요소라는 사실에 의존합니다.
위의 그림 3은 왼쪽에서 각 구성요소를 동일하게 취급하고 각각 동일하게 사용 또는 사용 중지 (그레이 스케일)한 것을 볼 수 있습니다. 그러나 오른쪽에서는 하위 픽셀 접근 방식을 사용하여 그리고 있는 도형과 얼마나 겹치는지각 구성요소 (빨간색, 녹색, 파란색)를 다르게 사용 설정합니다.
그러나 이 모든 것을 고려할 때 인간의 시각으로는 빨간색, 녹색, 파란색 빛의 무게가 실제로 동일한 것은 아닙니다. 우리는 빨간색이나 파란색보다 녹색에 훨씬 더 민감합니다. 이는 Darel Rex Finley의 의견에서와 같이 그레이 스케일 안티앨리어싱에 비해 확실한 이점이 있지만, 각 구성요소를 별도로 사용 설정한다고 해서 실제로 선명도가 3배 개선되지는 않습니다. 하지만 서브픽셀 앤티앨리어싱은 확실히 유용합니다. 즉, 그레이 스케일 앤티앨리어싱을 사용할 때보다 텍스트가 더 명확하게 표시됩니다.
순조로운 시작
이 모든 것이 개발자에게 어떤 의미가 있을까요? Chrome 관점에서는 적어도 텍스트를 렌더링하는 데 사용되는 그레이 스케일과 서브픽셀 앤티앨리어싱이 혼합되어 있으며, 어느 것을 받게 되는지는 몇 가지 기준에 따라 달라집니다. 그러나 먼저 레이어에 대해 약간 이해해야 합니다. 레이어가 주된 기준이기 때문입니다. Chrome에서 레이어가 어떻게 사용되는지 알지 못했다면 Tom Wiltzius가 작성한 이 주제에 관한 멋진 소개를 읽어보세요.
레이어에 익숙하거나 방금 레이어를 읽었다고 가정하면 계속하겠습니다. 페이지에 하드웨어 합성이 사용 설정되어 있고 루트 레이어가 아닌 레이어에 텍스트 콘텐츠가 있는 경우 기본적으로 그레이 스케일 앤티앨리어싱을 사용하여 렌더링됩니다. 개발자는 요소에 핵을 적용하여 루트가 아닌 자체 레이어(예: translateZ 사용)로 요소를 가져오는 경우 텍스트가 다르게 렌더링되는 것을 자주 인지합니다. 개발자는 종종 JavaScript나 CSS를 통해 '새 레이어' 트리거를 적용할 때 텍스트 렌더링이 하위 픽셀에서 그레이 스케일로 전환되도록 하는데, 렌더링 변경을 트리거한 원인을 모른다면 혼란스러울 수 있습니다. 그러나 텍스트가 루트 레이어에 있는 경우 하위 픽셀 앤티앨리어싱으로 렌더링되어야 하므로 훨씬 더 명확하게 읽을 수 있습니다.
하지만 웹의 다른 모든 것이 그렇듯이 변화하고 있습니다. 레이어가 세 가지 기준을 충족하는 경우 루트가 아닌 레이어의 텍스트에 대해 Chrome에서 서브픽셀 앤티앨리어싱이 사용 설정됩니다. 이 기준은 오늘부터 적용되지만 앞으로 변경될 가능성이 크므로 시간이 지남에 따라 더 많은 사례를 확인할 수 있습니다. 현재 이러한 기준은 다음과 같습니다.
- 레이어에 완전히 불투명한 배경 색상이 있습니다. 특히
border-radius또는 기본값이 아닌background-clip값을 사용하면 레이어가 불투명하지 않은 것으로 처리되고 텍스트 렌더링이 그레이 스케일 앤티앨리어싱으로 되돌아갑니다. - 레이어에는 항등식 변환 또는 적분 변환만 적용할 수 있습니다. 적분이란 반올림한 값을 의미합니다. 예를 들어
translate(20.2px, 30px)는 x 구성요소20.2px은 정수가 아니므로 그레이 스케일 앤티앨리어싱이 발생합니다. 항등식 변환은 단순히 기본값 이상으로 적용된 추가 회전, 변환 또는 배율이 없음을 의미합니다. - 레이어의 불투명도가 1.0입니다. 불투명도를 변경하면 앤티앨리어싱이 하위 픽셀에서 그레이 스케일로 변경됩니다.
마지막으로 CSS 애니메이션을 적용하면 새 레이어가 생성될 수 있지만 requestAnimationFrame를 사용하면 생성되지 않습니다. 텍스트 렌더링 차이로 인해 CSS 애니메이션을 사용할 수 없는 개발자도 있습니다. 따라서 텍스트 렌더링 차이로 인해 JavaScript를 사용하여 요소에 애니메이션을 적용했다면 이 업데이트로 문제가 해결되는지 확인하세요!
지금까지 Chrome에 대해 알아보았습니다. 다른 브라우저에서는 Opera가 Chromium으로 이동하는 경우 Chrome의 동작과 거의 일치합니다. Internet Explorer는 거의 모든 텍스트에 서브픽셀 앤티앨리어싱을 사용하는 것처럼 보입니다 (물론 ClearType을 사용 설정한 경우). 하지만 Windows 8의 Metro 모드에서는 보이지 않는 것으로 보입니다. WebKit이 블링크에 가까이 있다는 점을 감안할 때 Safari는 더 많은 서브픽셀 앤티앨리어싱을 허용하는 새로운 개선 사항은 없지만 Chrome과 매우 유사하게 동작합니다. Firefox는 거의 모든 텍스트에 대해 서브픽셀 앤티앨리어싱을 사용하기 때문에 대체로 Internet Explorer와 동일한 방식으로 작동합니다. 물론 이 목록은 전체 목록이 아니며, 모든 브라우저에서 하위 픽셀 대신 그레이 스케일 앤티앨리어싱이 사용되는 경우가 있을 수 있습니다. 하지만 서브픽셀 앤티앨리어싱은 기본 브라우저 전반에 널리 사용되고 있다는 점을 알아두면 좋습니다.
결론
이제 앤티앨리어싱이 작동하는 방식과 오늘날 특히 DPI가 낮은 기기에서 텍스트 렌더링에 차이가 발생하는 이유에 대해 알게 되었습니다. 텍스트 렌더링과 관련하여 Chrome의 구현을 따라가고 싶다면 다음 버그에 별표를 표시해야 합니다.
- 48px를 초과하는 자동 글꼴 그레이 스케일 안티앨리어싱은 재정의할 수 없음
- Windows용 Chrome에서 Google 웹 글꼴로 글꼴 렌더링이 불안정함)
- DirectWrite 지원