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