크롬 업데이트 후 네이버 일부 글자가 흐릿하게 보이는 건에 대하여...
크롬 업데이트 후 갑자기 네이버 페이지 곳곳에 이런 현상이 발생하면서 크롬을 욕하는 어떤 블로거를 보고 원인을 정리해 둘 필요가 있을 것 같아서 적어둡니다.
정확하게는 크롬에만 나타나는 문제는 아니며, 크로미움 엔진을 사용하는 마이크로소프트 신형 에지 웹 브라우저에서도 동일한 현상이 발생합니다.
파이어폭스 웹 브라우저에서는 이 현상이 발생하지 않으며, 발생하지 않는 다기보다는 문제가 발생한 원인이 되는 한글 글꼴의 글자 안티 알리아싱 자체를 지원하지 않아서입니다. 지원이 안 되는 문제도 안 생기는 것입니다.
문제의 원인은 크롬의 렌더링 엔진인 크로미움 엔진에서 웹페이지의 글꼴을 렌더링할 때 적용하는 안티 알리아싱 처리 방식(폰트 스무딩)이 바뀌면서 굵기 별 글꼴 정보가 없는 구버전 윈도우 글꼴에 대한 지원이 제대로 되지 않게 된 것입니다.
조금 더 정확하게 한정하면 윈도우 운영체제의 구버전 글꼴 중 일부 글꼴에서만 발생하는 현상입니다.
전통의 윈도우 구형 글꼴인 바탕체, 돋움체, 궁서체, 굴림체 4종 중에서 돋움체(dotum), 궁서체(gungsuh)에서 발생하는 문제입니다.
웹의 초기에는 거의 대부분의 구형 웹사이트들에서 기본 글꼴로 돋움체를 주로 사용했기 때문에, 호환성 유지를 위해서 계속 CSS 기본 글꼴로 돋움체를 표기하는 문제가 크롬 업데이트 후 문제가 불거진 것입니다.
돋움체, 궁서체 이외의 구버전 윈도우 운영체제 글꼴에서는 발생하지 않는 현상이며, 영문 글꼴에서는 버전에 상관없이 문제가 발생하지 않습니다.
당연히 돋움체를 기본 글꼴로 사용하지 않는 다른 운영체제 크롬에서는 발생하지 않는 문제입니다.
웹 페이지에만 내용을 한정해서 설명하면 돋움체, 궁서체를 <strong> 태그, 또는 "font-weight: bold;" CSS 속성을 부여해서 볼드체로 만들었을 때 이 문제가 발생합니다. 기본 굵기 속성 글꼴에서는 문제가 발생하지 않습니다. 기본 글꼴에서는 안티 알리아싱이 적용되지 않고 표시되기 때문에 볼드체에 한정돼서 발생합니다.
픽셀 퍼펙트와 같은 글꼴 표현과 관련된 복잡한 기술적인 문제가 있지만, 이런걸 설명하는 게 아무 의미는 없으므로 그냥 패스합니다.
대충으로만 설명하면 구버전 윈도우 글꼴에는 글꼴에 굵기 별 정보가 없기 때문에 굵기를 표현할 때 글자를 좌우로 약간씩 쉬프트 해서 굵은 글자("font-weight: bold;")를 표현하는데 이 부분에서 크로미움의 텍스트 렌더링 엔진과 돋움체, 궁서체의 일부 글자 커닝 정보가 호환성 문제를 발생시킵니다.
돋움체가 윈도우 운영체제에 계속 포함되고 있는 것은 구버전 앱이나, 구버전 웹브라우저 호환성 등 구버전 운영체제와의 호환성을 유지하기 위한 측면이 강합니다.
윈도우7 이후로 윈도우 운영체제의 기본 글꼴은 "맑은 고딕"이었고 윈도우용 앱에서 사용 글꼴을 시스템 글꼴로 사용하면 "맑은 고딕"이 기본으로 사용됩니다.
웹 페이지에서도 동일하게 적용됩니다. 정확하게는 웹 브라우저의 기본 설정 글꼴로 표현되는 것이지만, 대부분의 윈도우 운영체제 설치 웹 브라우저가 "맑은 고딕"을 기본 글꼴 값으로 사용하기 때문에 기본은 "맑은 고딕"이 됩니다.
"돋움체"가 계속 운영체제에 포함된 것은 구지 글꼴을 "돋움"으로 지정해서 제작된 앱에나 웹페이지 등과의 호환성을 유지할 수 있도록 하기 위해서입니다.
그냥 별도로 지정하지 않고 웹브라우저의 기본 설정 글꼴을 사용하거나 그냥 운영체제의 기본 시스템 글꼴을 사용하거나, 굳이 돋움체 계열을 사용하고 싶으면 "sans-serif"로 글꼴을 지정하면 됩니다.
굳이 콕 집어서 이 오래된 구버전 윈도우 운영체제의 화석 글꼴을 웹에서 최우선으로 사용한다고 CSS에 "돋움(Dotum)"이라고 글꼴을 지정해서 사용하면서 이 문제가 생기게 된 것이고, 방문자가 가장 많은 사이트가 네이버여서 불편함이 크게 느껴지는 것입니다.
국내 대형 사이트 중에 돋움체를 기본으로 아직도 사용하는 사이트는 쿠팡이 대표적입니다.
쿠팡은 메인과 서브 페이지 모든 영역을 통틀어 돋움체가 메인 글꼴입니다. 기본적인 환경별 글꼴 설정도 되어 있지 않습니다.
쿠팡의 메인 글꼴 CSS 설정
font-family: 돋움, Dotum, sans-serif;
네이버는 메인 페이지는 호환성 글꼴 처리가 제대로 되고 있지만 일부 하위 서비스들에서 돋움체가 메인으로 사용되고 있습니다.
네이버 메인의 글꼴 CSS 설정
font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif
네이버 웹 메일 서비스의 메인 글꼴 CSS 설정
font-family: '돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;
구글이 크로미움 엔진 패치를 통해 이 문제를 해결해줄지는 미지수입니다.
구형 윈도우 글꼴 일부의 볼드 속성에서만 나타나는 현상이고, 근본적으로는 이들 글꼴이 너무 오래된 글꼴이어서 지금의 운영체제, 또는 웹 환경과는 맞지 않는 글꼴이기 때문입니다.
근본적으로는 크롬의 엔진인 크로미움의 문제가 아니라, 구시대의 CSS 글꼴 설정을 그대로 답습해서 사용하고 있는 국내 대형 사이트들이 문제입니다.
충분히 회피할 수도 있고, 당연히 사용하면 안 되는 것인데도 구시대의 인간들이 변화하는 웹 환경에 적응하지 못하고 옛날 CSS 코드들을 복붙 해서 사용해서 발생한 문제입니다.
남의 사이트는 알아서 해결하겠지만 내 웹사이트, 내 블로그, 내가 관리하는 사이트에 이런 문제가 생기면 글꼴 초기화 CSS 설정을 다음과 같이 바꿔주는 것이 좋습니다.
font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,arial,"Apple SD Gothic Neo",sans-serif;
돋움체 지원을 굳이 해야 겠다면 다음의 순서로 돋움체 우선순위를 두어서 표시해야 합니다.
font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",Dotum,돋움,helvetica,arial,"Apple SD Gothic Neo",sans-serif;
가끔 실수하는 경우가 있는데 "맑은 고딕" 글꼴명을 한글로 표시할 때는 반드시 가운데 공백을 넣어서 이름을 표기해야 합니다. 붙여쓰면 인식되지 않기 때문에 없는 글꼴로 처리됩니다.