다른 브라우저가 다른 글꼴 엔진을 사용하여 PDF 텍스트를 렌더링하는 방법
동일한 컴퓨터의 Google Chrome과 Mozilla Firefox에서 동일한 PDF 파일을 열면 완전히 다른 두 가지 PDF 렌더링 엔진이 문서를 처리합니다. Chrome은 원래 Foxit에서 개발했으며 현재 Chromium 프로젝트의 일부로 Google에서 관리하는 C++ 라이브러리인 PDFium을 사용합니다. Firefox는 브라우저의 JavaScript 엔진 내에서 완전히 실행되는 Mozilla에서 개발한 JavaScript 기반 렌더러인 PDF.js를 사용합니다. 이 두 엔진은 근본적으로 글꼴 처리에 대한 접근 방식이 다르며, 이러한 차이로 인해 동일한 PDF 소스 파일을 렌더링할 때에도 텍스트 선명도가 눈에 띄게 달라집니다.
PDFium은 운영 체제의 기본 글꼴 렌더링 스택을 사용하여 텍스트를 렌더링합니다. Windows에서는 LCD 디스플레이에 최적화된 하위 픽셀 앤티앨리어싱을 적용하는 DirectWrite를 사용한다는 의미입니다. Mac에서는 픽셀 격자 정렬보다 모양 충실도를 우선시하는 다양한 앤티앨리어싱 알고리즘을 적용하는 Core Text를 사용합니다. 이러한 OS 수준 글꼴 렌더링 차이는 동일한 PDF의 PDF 글꼴을 Windows의 Chrome과 Mac의 Chrome에서 열 때 브라우저 간 차이를 고려하기도 전에 눈에 띄게 다르게 보일 수 있음을 의미합니다.
PDF.js는 완전히 다른 접근 방식을 취합니다. 브라우저의 자체 캔버스 텍스트 렌더링 API를 사용하여 HTML5 캔버스 요소에 텍스트를 렌더링합니다. 즉, 텍스트 렌더링 품질은 Firefox와 Chrome에 따라 달라지는 브라우저의 캔버스 구현과 PDF에서 참조되는 글꼴을 찾고 로드하는 방법을 결정하는 브라우저의 글꼴 일치 논리에 따라 달라집니다. Chrome이 시스템 글꼴 디렉토리에서 찾아 하드웨어 가속 DirectWrite로 렌더링하는 글꼴은 Firefox에서 약간 다른 글꼴 변형과 일치하거나 다른 앤티앨리어싱 코드 경로를 통해 렌더링될 수 있습니다.
글꼴 삽입, 대체 및 텍스트 선명도에 미치는 영향
모든 글꼴이 완전히 포함된 PDF는 텍스트를 표시하는 데 필요한 정확한 글꼴 데이터가 파일 내에 있기 때문에 이론적으로 모든 뷰어에서 동일하게 렌더링되어야 합니다. 실제로 완전히 포함된 글꼴이라도 브라우저마다 다르게 렌더링됩니다. 글꼴 윤곽선을 화면 픽셀로 변환하는 구성 요소인 글꼴 래스터라이저가 렌더링 엔진마다 다르기 때문입니다. PDFium은 플랫폼에 따라 FreeType 또는 OS 기본 래스터라이저를 사용합니다. PDF.js는 브라우저의 렌더링 파이프라인을 통해 간접적으로 OS 텍스트 렌더링 스택을 사용하는 브라우저의 캔버스 텍스트 렌더링을 사용합니다.
글꼴이 PDF에 포함되지 않은 경우(시스템 글꼴을 포함하지 않고 참조하는 Office 제품군 및 PDF로 인쇄 드라이버에서 생성된 문서에서 일반적으로 나타남) PDF 보기 환경은 브라우저에 따라 훨씬 더 다양합니다. Chrome과 Firefox에는 각각 고유한 글꼴 대체 논리와 기본 대체 글꼴 세트가 있습니다. 'Helvetica'를 포함하지 않고 참조하는 PDF는 한 브라우저에서는 Arial로 표시되고, 다른 브라우저에서는 다른 산세리프 대체 문자로 표시될 수 있으며, 적절한 대체가 구성되지 않은 경우 세 번째 브라우저에서는 빈 직사각형으로 표시될 수 있습니다.
보다 선명한 화면 표시를 위해 작은 크기의 픽셀 격자에 맞춰 글꼴 윤곽선을 조정하는 프로세스인 글꼴 힌트는 브라우저 간 선명도 변화의 또 다른 원인입니다. 데스크탑 PDF 뷰어는 글꼴 파일에 포함된 글꼴 힌트 지침을 적용합니다. 브라우저 캔버스를 통해 렌더링하는 PDF.js는 캔버스 API가 응용 프로그램에 글꼴 힌트 제어를 노출하지 않기 때문에 힌트 지침을 무시하거나 부분적으로 적용할 수 있습니다. 이는 일반적으로 10포인트 이하의 작은 텍스트 크기가 동일한 컴퓨터의 데스크톱 뷰어보다 브라우저 기반 뷰어에서 더 부드럽거나 덜 뚜렷하게 나타날 수 있음을 의미합니다.
앤티앨리어싱 차이와 인지된 선명도에 미치는 영향
앤티앨리어싱은 텍스트 색상과 배경 색상 사이의 음영으로 가장자리 픽셀을 색칠하여 텍스트 문자의 들쭉날쭉한 가장자리를 부드럽게 합니다. 앤티앨리어싱 알고리즘이 다르면 선명도에 대한 주관적인 느낌이 다르며 렌더링 엔진도 알고리즘을 선택합니다.
Windows의 DirectWrite에서 사용되는 하위 픽셀 앤티앨리어싱은 LCD 디스플레이의 빨간색, 녹색 및 파란색 하위 픽셀의 물리적 배열을 활용하여 텍스트 렌더링의 효과적인 수평 해상도를 3배로 높입니다. 하위 픽셀 앤티앨리어싱으로 렌더링된 텍스트는 각 픽셀을 균일한 단위로 처리하는 회색조 앤티앨리어싱으로 렌더링된 텍스트보다 작은 크기에서 눈에 띄게 더 선명해 보입니다. Windows의 Chrome은 DirectWrite를 통해 하위 픽셀 앤티앨리어싱을 사용합니다. Windows의 Firefox는 PDF.js 출력을 포함하는 캔버스 렌더링 텍스트에 대해 기본적으로 회색조 앤티앨리어싱을 사용합니다. 동일한 Windows 컴퓨터의 Chrome 및 Firefox에서 보는 동일한 PDF는 앤티앨리어싱 차이로 인해 한 브라우저에서는 선명하게 보이고 다른 브라우저에서는 약간 부드러워 보일 수 있습니다.
높은 DPI 디스플레이에서는 더 높은 픽셀 밀도가 단순한 앤티앨리어싱 알고리즘으로도 텍스트를 깔끔하게 렌더링할 수 있는 충분한 물리적 해상도를 제공하기 때문에 앤티앨리어싱 차이가 눈에 덜 띄게 됩니다. 200% 운영 체제 배율의 4K 모니터에는 하위 픽셀과 그레이스케일 앤티앨리어싱 간의 차이가 거의 인식되지 않을 만큼 문자당 충분한 픽셀이 있습니다. 각 문자가 상대적으로 적은 물리적 픽셀로 렌더링되는 100% 크기 조정의 표준 1080p 디스플레이에서 앤티앨리어싱 선택은 인식되는 텍스트 품질에 훨씬 더 큰 영향을 미칩니다.
여러 브라우저에서 일관된 PDF 텍스트 렌더링을 보장하는 실제 단계
PDF를 주로 웹에서 PDF로 브라우저 기반 렌더링을 통해 보는 경우 여러 가지 방법을 통해 브라우저 간 텍스트 일관성을 향상할 수 있습니다. 시스템 글꼴 참조에 의존하지 않고 PDF에 모든 글꼴을 포함시킵니다. 내장된 글꼴은 모든 렌더링 엔진이 정확히 동일한 글꼴 데이터에 액세스할 수 있도록 보장하여 렌더링 차이의 원인이 되는 글꼴 대체를 제거합니다.
일반적인 텍스트 크기의 화면 렌더링용으로 설계된 글꼴을 사용하십시오. 좋은 힌트 지침이 있는 글꼴은 힌트 없이 좋은 결과를 생성하기 위해 래스터라이저를 사용하는 글꼴보다 렌더링 엔진 전체에서 더 일관된 결과를 생성합니다. Google Fonts와 같은 서비스의 웹 최적화 글꼴은 일반적으로 일반적인 텍스트 크기의 화면 표시에 대해 잘 암시되어 있으며, 브라우저 보기용 PDF에 이를 포함하면 오프셋 인쇄 출력용으로 설계된 인쇄 최적화 글꼴을 사용하는 것보다 더 예측 가능한 크로스 브라우저 결과가 생성됩니다.
PDF를 웹 액세스 가능한 위치에 게시하기 전에 Chrome, Firefox 및 Edge에서 테스트하십시오. 표준 해상도 디스플레이를 100% 확대하여 나란히 비교하면 문서가 최종 사용자에게 도달하기 전에 해결할 가치가 있는 텍스트 선명도 차이가 드러납니다. 한 브라우저가 다른 브라우저보다 훨씬 더 부드러운 텍스트를 표시하는 경우 글꼴 포함 설정을 조정하거나 본문 텍스트 크기를 1포인트씩 늘리면 세 브라우저 모두 허용 가능한 시각적 일치를 얻을 수 있습니다.
WukongPDF의 PDF 내보내기 옵션에는 모든 글꼴이 출력 파일에 완전히 포함되도록 하는 글꼴 포함 설정이 포함되어 있어 브라우저 간 텍스트 렌더링 차이의 원인이 되는 글꼴 대체를 제거합니다.
브라우저 PDF 렌더링의 광범위한 추세는 발산보다는 수렴을 향하고 있습니다. Chrome의 PDFium과 Firefox의 PDF.js는 모두 텍스트 렌더링 품질과 일관성을 향상시키는 정기적인 업데이트를 받습니다. 2년 전, 이들 엔진 간의 렌더링 차이는 오늘날보다 훨씬 더 컸습니다. 웹 기반 문서 보기의 중요성이 증가함에 따라 두 엔진의 지속적인 개발로 인해 브라우저 간 텍스트 품질 격차가 점차 줄어들고 있습니다. 문서 게시자에게 이러한 추세는 오늘날 크로스 브라우저 렌더링 테스트에 대한 투자가 기본 엔진이 지속적으로 개선됨에 따라 더욱 일관되게 렌더링되는 문서를 생성한다는 것을 의미합니다.
접근성을 위해 브라우저 간의 텍스트 렌더링 차이는 미적인 측면을 넘어서는 부차적인 효과를 갖습니다. 브라우저에서 렌더링된 PDF에서 텍스트를 추출하는 화면 판독기는 브라우저의 텍스트 추출 정확도에 따라 달라지며, 이는 브라우저의 PDF 엔진이 내부적으로 텍스트를 표현하는 방식과 직접적인 관련이 있습니다. 텍스트를 선명하게 렌더링하는 브라우저는 일반적으로 화면 판독기 사용을 위해 텍스트를 정확하게 추출하기도 합니다. 여러 브라우저에서 화면 판독기를 사용하여 PDF 접근성을 테스트하면 문서가 시각적으로 일관될 뿐만 아니라 화면 판독기 사용자가 선호하는 브라우저에 관계없이 프로그래밍 방식으로 액세스할 수 있습니다.
이러한 브라우저 간 차이의 실질적인 영향은 문서의 대상 및 배포 채널에 따라 크게 달라집니다. 수신자가 선호하는 데스크탑 응용 프로그램인 Acrobat, Preview 또는 Foxit에서 다운로드하고 보기 위한 PDF에는 브라우저 렌더링 최적화가 필요하지 않습니다. 웹 페이지에 포함되어 수백 또는 수천 명의 사용자가 브라우저에서 직접 보는 PDF는 이 기사에 설명된 테스트 및 최적화 방법을 통해 상당한 이점을 얻을 수 있습니다. 기본 보기 컨텍스트에 최적화 노력을 일치시키면 사용자에게 가장 큰 영향을 미치는 곳에 리소스가 소비됩니다.
PDF 포함을 위한 글꼴 형식 선택은 브라우저 간 렌더링 일관성에도 영향을 미칩니다. 좋은 힌트 지침이 포함된 트루타입 글꼴은 일반적으로 덜 정교한 힌트 지원이 포함된 이전 형식인 PostScript Type 1 글꼴보다 렌더링 엔진 전체에서 더 일관된 결과를 생성합니다. 동일한 파일에 TrueType 윤곽선과 PostScript 윤곽선을 모두 포함하는 OpenType 글꼴(OpenType CFF라는 형식)은 렌더링 엔진이 선택하는 윤곽선 형식에 따라 다른 렌더링 결과를 생성할 수 있습니다. 브라우저 간 일관성을 극대화하려면 일반 텍스트 크기의 화면 표시에 최적화된 힌트 지침과 함께 트루타입 기반 OpenType 글꼴을 포함하세요.
색상 관리는 인식된 선명도에 영향을 미치는 미묘한 방식으로 텍스트 렌더링과 상호 작용합니다. RGB 색상 프로필이 포함된 PDF는 색상 프로필이 없거나 CMYK 프로필이 있는 동일한 PDF와 비교하여 배경 대비 약간 다른 대비로 텍스트를 렌더링할 수 있습니다. 브라우저마다 PDF 콘텐츠에 대한 색상 관리 지원이 다르며 브라우저의 색상 관리, 운영 체제의 디스플레이 보정 및 PDF에 포함된 색상 프로필 간의 상호 작용은 검정색 텍스트가 순수한 검정색으로 표시되는지 아니면 약간 더 밝은 어두운 회색으로 표시되는지에 영향을 미칠 수 있습니다. 이는 텍스트 렌더링 해상도가 동일하더라도 인지적으로 선명도에 영향을 미칩니다.