크롬(Chrome)에서 글자가 깨지면?

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

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

목차

크롬의 대약진

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

핑돔의 예측 그래프

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

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

글이 깨지는 크롬

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

글이 깨지는 뷰앤뉴스

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

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

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

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

해결책은?

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

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

깨끗하게 바뀐 검색화면

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

Personalized Web

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

  1. Personalized Web를 클릭하고 'Personalized Web' 확장을 설치한다. 설치하는 방법은 어렵지 않으므로 따로 설명하지 않겠다.
  2. 'Personalized Web' 확장의 옵션을 클릭한 뒤 다음처럼 설정하고 저장 단추를 클릭한다[6].

    Settings 설정
    규칙이름 사용자 CSS
    일치URL ^http://*
    CSS추가 body, h1, h2, h3, h4, h5, h6, p, div, td, th, li, a, input, b, span { font-family: 나눔고딕 !important; }
    또는
    * {font-family : 나눔고딕 !important; }

눈치가 빠른 사람은 알겠지만 웹 사이트에서 자주 사용되는 태그의 글꼴을 나눔고딕으로 강제로 지정한 것이다. 이외에 추가하고 싶은 태그는 ,로 분리해서 추가하면 된다. 태그를 일일이 지정하는 것이 귀찮다면 \* { font-family: 나눔고딕; }처럼 모든 태그를 지정해도 된다.

관련 글타래


  1. 현재는 User-Agent가 모바일 사파리로 되어 있다. 그러나 조만간 모바일 크롬으로 바뀔 것이라고 한다. 
  2. 구글 앱스도 아직은 되지 않는다. 반드시 gmail.com으로 끝나는 주소만 가입이 가능하다. 
  3. 참고로 내 구글+ 계정은 http://gplus.to/doa이다 
  4. 블로그 계정과 구글+ 기본 계정이 서로 달라서 취한 조치다. 
  5. 사이트를 사용자 입맛에 맞춰 변경할 때 상당한 도움이 되는 Personalized Web 확장은 현재 동작하지 않는다. 똑 같은 기능은 아니지만 요즘은 Requestly를 이용하고 있다. 
  6. 참고로 이 확장은 자주 사용하는 확장이라 한글화해서 사용하고 있다. 따라서 항목의 이름은 실제 확장의 옵션과 다를 수 있다. 
글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
2011/09/24 15:47 2011/09/24 15:47
오늘의 글
인기있는 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: https://offree.net/trackback/3505

  1. Subject : 크롬 업데이트 후 글꼴이 깨지는 문제 해결..

    Tracked from 김용유 닷컴(kimyongyu.com) 2011/09/27 11:09 del.

    구글크롬을 업데이트 한후 글꼴이 깨지는 문제가 발생했다.. 그러다가 도아님의 트윗중에 크롬이 깨지는 문제를 해결하는 방법이 있다고 한 것을 본 듯해.. 도아님의 블로그를 가 보았다.. 역시

Facebook

Comments

  1. lunamoth 2011/09/24 16:20

    Chromium 쓰고 있는데 며칠전부터 말씀하신것 처럼 한글이 깨지더군요. 알려주신 방법대로 수정을 해봐야겠네요 ^^;

    도아님 해결책 알려주셔서 감사드립니다.

    perm. |  mod/del. reply.
    • 도아 2011/09/25 08:25

      어차피 내일 정도면 판올림이 될 것이라고 생각하지만 일단 불편하시면 바로 적용하면 됩니다. 제가 불편해서 올린 글이니까요.

  2. 삭제한 글 2011/09/25 08:28

    작성자가 삭제한 글입니다.

    perm. |  mod/del. reply.
    • 도아 2011/09/25 08:28

      묻어가고 싶으면 그냥 묻어가기 바랍니다. 사용자 스크립트를 몰라 위에 방법을 쓴 것이 아니니까요. 쉬운 이야기지만 클릭만 하면 되는 것과 사용자 스크립트를 만들어 폴더에 복사하는 것 중 아떤 것이 더 쉬운가요? 그리고 위의 Personalized Web는 사용자 스크립트를 쉽게 추가할 수 있는 확장입니다. 본문 내용을 읽었다면 그정도는 알텐데요.

  3. duckss2000 2011/09/24 19:55

    작성자가 삭제한 글입니다!

    perm. |  mod/del. reply.
    • 도아 2011/09/25 10:05

      당황한 분들이 의외로 많더군요. 저도 글이 깨져서 처음에는 조금 당황했고요.

  4. 진모씨 2011/09/25 14:27

    잠깐만 부분에 gmail.com이 gamil.com으로 되어있습니다

    perm. |  mod/del. reply.
    • 도아 2011/09/26 09:14

      수정해 두었습니다.

    • 진모씨 2011/09/26 15:51

      이건 http하고 https까지 적용이 된다고 나와있네요, 혹시 chrome://은 적용 못시킬까요?

    • 명성군 2011/09/27 10:18

      아무래도 판올림 될때까지는 기다리셔야...이것도 나름 편법(?)이라고 하면 편법이라 판올림 될때까지는 그냥 이대로 쓰셔야될꺼 같다라능

    • 진모씨 2011/09/27 16:22

      예 감사합니다

  5. 의리 2011/09/25 19:26

    아 같은 상황이군요. 저도 잘 안나오길래 그냥 일반 크롬으로 내려왔습니다.
    까나리가 빠른 느낌이긴 하지만 뭐 -ㅁ- 최근에 컴터를 업글 한 자신감으로 우하하..

    perm. |  mod/del. reply.
    • 도아 2011/09/26 09:14

      예. 판올림 때문에 발생한 일이라 아마 개발자판 사용자는 모두 격은 문제일겁니다.

  6. 오정열 2011/09/26 10:01

    주말내내 인터넷 세상을 끊고 있다가 아침에 출근해서 깜짝 놀랐습니다.
    도아님 덕분에 해결하고 가네여. 감사합니다. ^^

    perm. |  mod/del. reply.
    • 도아 2011/09/27 10:15

      금방 고칠 것으로 생각했는데 의외로 오늘 올라온 판본도 똑 같더군요. 시간이 좀 걸리는 것인지 아니면 빠쁜 것인지 모르겠더군요.

  7. HE 2011/09/29 19:20

    도아님 좋은 글 잘 보았습니다. ^^

    좀 더 사용하기 쉬운 확장프로그램으로 해결방법 소개한 글 링크 합니다.
    http://hestory.net/2511193

    perm. |  mod/del. reply.
    • 도아 2011/09/29 19:35

      이 문제는 오늘 오전 패치에서 해결됐습니다. 따라서 글을 올린 시각을 보면 올리지 않아도 될 글을 올렸다는 느낌이군요. 그리고 본문에 있지만 이 확장을 소개한 이유는 유저스크립트 대용으로 사용할 수 있을 정도로 강력하기 때문입니다. 마지막으로 확장의 사용이 더 편할 수는 있겠지만 초보자가 따라하기에는 이 확장이 더 쉽습니다.

    • HE 2011/09/30 17:01

      답변 감사합니다.
      말씀하신 부분에서 약간 이해가 가지 않아 이견 제시합니다.

      a. 이 문제에 대해 굳이 포스팅할 생각은 없었으나 검색결과 이번에만 발생한 문제는 아닌 것으로 판단되어 장기적으로 재차 나올 가능성이 있어 포스팅 하였습니다.

      b. 카나리아의 경우 29일 자로 16.0.895.0으로 버전 업되었으나 개발자 버전은 아직 16.0.891.0으로 아직 그대로입니다. http://www.chromium.org/developers/calendar

      c. 일반적인 사용자에게 CSS 코드를 보여주는 것 자체가 부담으로 생각되어서 코드가 보이지 않고 가장 단순한 쪽으로 선택한 확장프로그램입니다. CSS 코드를 수정하는 것보다는 폰트이름 몇 글자 입력하기가 더 쉽다고 판단했습니다. 이건 확장프로그램의 특성이 있으니 취향 따라 호불호가 갈리는 부분이라 사용자 개인의 선택이라고 보입니다.

    • 도아 2011/09/30 17:12

      이건 확장프로그램의 특성이 있으니 취향 따라 호불호가 갈리는 부분이라 사용자 개인의 선택이라고 보입니다.

      이 부분과

      좀 더 사용하기 쉬운 확장프로그램으로 해결방법 소개한 글 링크 합니다.

      이 부분이 이율배반적인 것은 아시겠죠? 쉽다는 것에도 호불호가 갈리니까요.

      다만 저는 저런 댓글을 뭐하러 달았나 궁금해 집니다. 트랙백은 이미 보냈고, 댓글을 달고 싶으면 글에 대한 댓글만 달면 됩니다. 그런데 트랙백을 보내고 본문에 더 쉬운 확장이라고 링크 달고. 저는 뭐가 되던 이중으로 링크 보내는 것을 아주 싫어합니다만. 그리고 댓글에 링크가 있기 때문에 트랙백은 삭제하겠습니다. 댓글 달때 알았다면 트랙백을 삭제했겠지만 그때는 몰랐으니까요.

    • HE 2011/09/30 17:27

      네 그러고 보니 그렇군요.
      선택은 항상 사용자에게 주는 것이 맞겠죠.

      제가 생각이 좀 짧았습니다.
      즐거운 하루 보내셔요 :)

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.