크롬에서 글자가 깨지는 경우
게시일: 2011/09/24 | 글쓴이: doa | 22241 번 | 프린트 | 메일



참혹하게 글자가 깨지는 크롬

오늘 크롬 까나리 빌드를 판올림했다. 그런데 글자가 참혹할 정도로 깨졌다. 인터넷을 찾아 보니 비슷한 문제가 이미 개발진에게 보고된 상태. 즉, 판올림되면 이 문제는 해결될 것으로 생각된다. 그러나 판올림까지 크롬을 사용하지 못해 불편한 사람은 이 글을 읽기 바란다. 완전한 해결책은 아니지만 문제의 상당 부분을 해결할 수 있기 때문이다. 또 문제 해결 뿐만 아니라 아주 유용한 확장도 하나 소개하고 있다.

크롬의 대약진

내가 주로 사용하는 브라우저는 구글 크롬(Google Chrome)이다. 크롬은 2008년에 처음 출시 됐다. 아울러 크롬(Chrome)을 보자 마자 크롬이 구글 OS를 위한 플랫폼 이라는 것은 깨달았다. 내가 크롬을 주 브라우저로 사용한 가장 큰 이유도 바로 여기에 있었다. 플랫폼으로 동작하기 위해는 빠른 속도안정성 은 필수이기 때문이다. 즉, 크롬은 개발이 계속되도 다른 브라우저처럼 무거워 지거나 불안정해지지 않을 것으로 내다 봤다. 처음 크롬은 상당히 미약했다. 그러나 최근 불여우의 점유율을 위협 하고 있으며 내년에는 지난 10여년간 절대지존으로 군림한 인터넷 탐색기(Internet Explorer)의 점유율을 돌파할 것 이라고 한다.


핑돔의 예측 그래프

그래프를 보면 알 수 있지만 올 11월 불여우의 점유을 넘어서고 내년 6월 인터넷 탐색기(Internet Explorer)의 점유율을 넘어선다. 예측치이기 때문에 틀릴 수 있지만 현재의 추세라면 충분히 가능하다. 또 안드로이드(Android)의 기본 브라우저가 모바일 크롬[주:현재는 User-Agent가 모바일 사파리로 되어 있다. 그러나 조만간 모바일 크롬으로 바뀔 것이라고 한다.]이 되면 이런 현상은 더 심해질 것이다.

여기에 최근 주로 사용하는 SNS(Social Network Service)는 [tg]구글+[/tg](Google+)다. 이미 블로그를 통해 여러 번 [tg]구글+[/tg]에 대해 소개했다. 또 얼마 전 구글+는 비공개 베타에서 공개 베타로 바뀌었다. 아직까지도 구글 계정[주:구글 앱스도 아직은 되지 않는다. 반드시 @gamil.com으로 끝나는 주소만 가입이 가능하다.]으로만 사용할 수 있지만 이제는 굳이 초대를 받지 않아도 누구나 가입할 수 있다[주:참고로 내 구글+ 계정은 이다]. 이렇다 보니 최근에는 관심이 다시 구글로 되돌아 와있다. 물론 구글 복귀했다고 애플이나 아이폰에 대한 관심이 사라진 것은 아니다. 아이폰이라는 제품은 내가 사용한 어떤 전자기기 보다 뛰어나기 때문이다.

글이 깨지는 크롬

아무튼 오늘도 구글+에 접속했다. 그런데 여기 저기 크롬에 대한 불만이 들린다. 다른 곳은 괜찮은데 트위터에 접속하면 흐리다는 불만, 크롬으로 접속하면 글을 알아 볼 수 없을 정도로 깨진다는 불만이다. 그런데 트위터는 조금 흐릿하기는 해도 다른 사이트는 아무런 문제가 없었다. 혹시나 하는 생각에 크롬 까나리 (Chrome Canary Build)를 판올림했다. 그리고 자주가는 뷰앤뉴스 를 접속하자 다음 그림처럼 글을 읽을 수 없을 정도로 화면이 깨졌다. 직접 경험해 보니 아침 부터 사람들이 크롬에 대한 불만을 쏟아낸 이유를 알 수 있었다.


글이 깨지는 뷰앤뉴스

사이트의 문제가 아니라 크롬의 문제다. 작은 글씨는 잘 보이지만 큰 글씨는 읽기 힘들 정도로 깨진다. 참고로 이명박 대통령은 상당히 많은 사람들이 혐짤로 받아드려 모자이크 처리했다.

다만 이 문제는 크롬 까나리(Chrome Canary)나 크로미움(Chromium)처럼 개발자 판에서만 발생하는 문제로 보인다. 또 어제까지 사용한 크롬 까나리 16.0.889.0판에는 앞에서 이야기한 것처럼 글이 깨지는 문제가 발생하지 않았다. 즉, 크롬에 대한 불만을 쏟아낸 사람들은 모두 크롬 개발자판(크롬 까나리, 크로미움) 사용자가 아닐까 하는 생각이 든다. 아무튼 문제를 해결하기 위해 일단 크롬의 실험실 기능 부터 확인해 봤다. 크롬 실험실은 크롬의 기능을 미리 볼 수 있지만 대신에 사용하는 종종 여러 가지 문제를 발생했기 때문이다.

크롬(Chrome)을 실행할 때 --no-experiments라는 옵션을 주고 실행하면 실험실 기능이 꺼진다. about:flags로 접근은 할 수 있지만 기능은 동작하지 않는다. 그런데 증상이 같았다. 크롬 프로필을 완전히 지우고 실행해 봤지만 역시 증상은 같았다. 그래서 인터넷을 찾아 보니 비슷한 문제가 이미 크롬 개발진에 보고되어 있었다. 즉, 크롬의 새판이 나오면 이 문제는 바로 해결될 것이라고 생각된다. 생각이 여기까지 미치자 이번에는 크로미움(Chromium)이 생각났다. 크로미움은 크롬 까나리 보다 빌드가 앞서는 가장 최신 판이기 때문이다.

그런데 이 증상은 크로미움 최신 빌드에서도 마찬가지였다. 오늘 내려받은 가장 최신 크로미움은 16.0.891 빌드 102618이었지만 마찬가지로 글이 깨졌다. 문제는 내가 주로 사용하는 브라우저가 크롬이라는 점이다. 사실 요즘은 크롬 외에 다른 브라우저는 불편하고 느려서 거의 사용하지 못한다. 불여우(Firefox)를 띄워두고 [tg]애드센스[/tg]([tg]AdSense[/tg]) 사이트와 일부 사이트를 접속[주:블로그 계정과 구글+ 기본 계정이 서로 달라서 취한 조치다.]하고 있지만 말 그대로 가끔 사용하는 보조 브라우저다. 인터넷 탐색기(Internet Explorer)는 실행을 언제 해봤는지 기억조차 가물 가물하다.

해결책은?

이렇다 보니 글이 깨지는 것이 무척 불편했다. 다만 문제의 원인을 찾다 보니 재미있는 현상이 하나 발견됐다. 일단 내 블로그에서는 글이 깨지지 않는다. 일부 깨지는 글자도 있지만 제목과 본문 모두 잘 나온다. 바로 여기서 문제의 해결점을 찾았다. 내 블로그는 다른 사이트와는 달리 웹 글꼴을 사용 한다. 또 깨지는 글들은 모두 사이트에서 지정한 글꼴이 아니라 굴림과 같은 운영체제 기본 글꼴이라는 점이다.

즉, Internet Explorer처럼 사용자 스타일을 강제로 지정할 수 있다면 이 문제를 해결할 수 있을 것 같았다. 문제는 크롬에서는 사용자 스타일을 위해 Custom.css와 같은 파일을 지원하지만 사이트에서 특정 글꼴(운영체제 기본 글꼴)을 지정하면 사용자 스타일이 무시된다는 점이다. 그러나 해결책이 없는 것은 아니다. 블로그에 글을 올리지는 못했지만 Personalized Web처럼 사이트의 스타일을 바꿀 수 있는 확장을 사용하면 얼마든지 이런 문제를 극복할 수 있기 때문이다. 다음은 Personalized Web을 이용해서 이 문제를 해결한 화면이다.


깨끗하게 바뀐 검색화면

위에 화면은 나경원, 서울시장으로 검색한 결과다. 그림을 보면 알 수 있지만 상당히 형편없이 깨진 것을 알 수 있다. 아래 화면은 Personalized Web을 이용해서 글꼴을 강제로 나눔고딕으로 지정한 화면이다. 그림을 보면 알 수 있지만 웹 사이트 글꼴을 강제로 나눔고딕으로 지정하면 모두 정상적으로 표시되는 것을 알 수 있다.

Personalized Web

따라서 크롬에서 글을 알아 볼 수 없을 정도로 깨지는 사이트가 있다면 다음 방법으로 이 문제를 해결할 수 있다. Personalized Web는 나중에 따로 소개하겠지만 이외에도 쓰임새가 상당히 많은 확장이다. 나는 이 확장을 이용해서 구글+에서 가운데 스트림만 스크롤 되도록 해서 사용하고 있다. 이외에 광고 차단도 이 확장으로 하고 있으며, 트위터에서 불필요한 항목도 이 확장으로 제거해서 사용하고 있다. 과거 구글+ 트윅 확장(Google+ Tweaks) 으로 구현한 기능 중 상당수는 이 확장으로 구현 가능하다. 이 부분은 나중에 따로 글을 올릴 생각이다.

  1. Personalized Web를 클릭하고 Personalized Web 확장을 설치한다. 설치하는 방법은 어렵지 않으므로 따로 설명하지 않겠다.

  2. Personalized Web 확장의 옵션을 클릭한 뒤 다음처럼 설정하고 저장 단추를 클릭한다[주:참고로 이 확장은 자주 사용하는 확장이라 한글화해서 사용하고 있다. 따라서 항목의 이름은 실제 확장의 옵션과 다를 수 있다.].
    항목 설정
    규칙 이름 사용자 CSS
    일치 URL ^http://*
    CSS 추가 body, p, div, td, th, li, a { font-family: 나눔고딕 !important; }

눈치가 빠른 사람은 알겠지만 웹 사이트에서 자주 사용되는 태그의 글꼴을 나눔고딕으로 강제로 지정한 것이다. 이외에 추가하고 싶은 태그는 ,로 분리해서 추가하면 된다.

잠깐만

  1. 현재는 User-Agent가 모바일 사파리로 되어 있다. 그러나 조만간 모바일 크롬으로 바뀔 것이라고 한다.
  2. 구글 앱스도 아직은 되지 않는다. 반드시 @gamil.com으로 끝나는 주소만 가입이 가능하다.
  3. 참고로 내 구글+ 계정은 http://gplus.to/doa 이다.
  4. 블로그 계정과 구글+ 기본 계정이 서로 달라서 취한 조치다.
  5. 참고로 이 확장은 자주 사용하는 확장이라 한글화해서 사용하고 있다. 따라서 항목의 이름은 실제 확장의 옵션과 다를 수 있다.



Total Commander 8.0 베타 출시 토탈코맨더(Total Commander)는 가장 좋아하는... (25636) 2011-09-27
윈도 8/메트로 UI를 쉽게 끄고 켜기 부제: How to disable Metro UI 메트로 UI를... (25911)2011-09-20

QAOS.com에 게시된지 1년 이상된 자료와 관리자가 공개한 자료는 누구나 제한없이 읽을 수 있습니다.
그러나 QAOS.com의 자료를 퍼가는 것은 금지하고 있습니다.

이 정보가 유용하다고 생각되시면 QAOS.com과 많은 다른 사람들을 위해 퍼가기 보다는 링크로 알려주시기 바랍니다.

세상사는 이야기

  • 찾아라! 아이폰 순정용 >
  • 만원대 피젯 스피너를 >
  • 망하는 길을 택한 쿠팡 >
  • 물놀이에 적당한 가성 >
  • 컴퓨터를 IPTV로 2, po >
  • 컴퓨터를 IPTV로 만들 >
  • Warning.or.kr도 우회 >
  • 한국의 100대 부자, 어 >
  • 세상을 바꾼 크롬: 크 >
  • 장난(?)으로 시작한 여 >


  • RSS 구독 (익명 | 회원 | 강좌 | 포럼)
    (C) 1996 ~ 2017 QAOS.com All rights reserved.