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

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

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

크롬의 대약진

내가 주로 사용하는 브라우저는 구글 크롬(Google Chrome)이다. 크롬은 2008년에 처음 출시됐다. 아울러 크롬(Chrome)을 보자 마자 크롬이 구글 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판에는 앞에서 이야기한 것처럼 글이 깨지는 문제가 발생하지 않았다. 즉, 크롬에 대한 불만을 쏟아낸 사람들은 모두 크롬 개발자판(크롬 까나리, 크로미움) 사용자가 아닐까 하는 생각이 든다. 아무튼 문제를 해결하기 위해 일단      크롬의 실험실 기능 부터 확인해 봤다. 크롬 실험실은 크롬의 기능을 미리 볼 수 있지만 대신에 사용하는 종종 여러 가지 문제를 발생했기 때문이다.

크롬(Chrome)을 실행할 때 --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는 나중에 따로 소개하겠지만 이외에도 쓰임새가 상당히 많은 확장이다. 나는 이 확장을 이용해서 구글+에서      가운데 스트림만 스크롤되도록 해서 사용하고 있다. 이외에 광고 차단도 이 확장으로 하고 있으며, 트위터에서 불필요한 항목도 이 확장으로 제거해서 사용하고 있다. 과거      구글+ 트윅 확장(Google+ Tweaks)으로 구현한 기능 중 상당수는 이 확장으로 구현 가능하다. 이 부분은 나중에 따로 글을 올릴 생각이다.

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

  2. Personalized Web 확장의 옵션을 클릭한 뒤 다음처럼 설정하고 저장 단추를 클릭한다주5.

    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. 참고로 이 확장은 자주 사용하는 확장이라 한글화해서 사용하고 있다. 따라서 항목의 이름은 실제 확장의 옵션과 다를 수 있다.
2011/09/24 15:47 2011/09/24 15:47
글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
오늘의 이슈 다음에서 새롭게 서비스하고 있는 소셜픽입니다. OpenAPI로 구현한 것이 아니라 가끔 사라질 때도 있습니다. 또 10분에 한번 갱신하기 때문에 실제 소셜픽과 약간 차이가 있습니다.
  1. 1
    검색: 120,188 트윗: 3,124 댓글: 6,250
    14일 300만 원을 납부합니다. 무슨 이유였을까요? 바로 추징금 시효를 연장하기 위한 목적이었습니다. 당시 전두환의 추징금 시효는 2010년까지였으며, 시효가 지나면 추징금을 못 받기 때문에 일반적으로 시효 만료를 앞두고 검찰이 압류
  2. 2
    검색: 146,345 트윗: 2,170 댓글: 4,871
    아니다"라며 일축했다. 회사 측은 21일 < 김광현의 탕탕평평 > 과 메인뉴스인 < 채널A종합뉴스 > 에서 사과방송을 했다. 이광표 채널A 기획홍보팀장은 "이번 사과의 핵심은 이번 방송으로 인해 마음이 다친 광주 민주화 운동 피해자와 시청자여
  3. 3
    검색: 68,118 트윗: 1,477 댓글: 5,180
    강남구청의 한 과장급 공무원이 박원순 서울시장이 불법 사찰을 했다며 검찰에 고소했다. 김청호 강남구 지역경제과장은 "박 시장이 서울시 암행감찰반을 시켜 구청 직원을 감시, 미
  4. 4
    검색: 31,283 트윗: 1,658 댓글: 2,145
    독립 인터넷 언론 뉴스타파가 조세피난처에 법인이나 계좌를 보유한 한국인 명단을 공개하기로 했습니다. 뉴스타파는 오늘 오후 2시 기자회견을 열고 국제탐사보도언론인협회, ICIJ와의 공동 취재 결과를 공개할 계획이라고 밝혔습니다.
  5. 5
    검색: 25,427 트윗: 1,062 댓글: 2,131
    무소속 안철수 의원이 22일 싱크탱크 성격의 정책네트워크 '내일'의 창립을 공식화했다. 안 의원은 '내일' 이사장에 진보성향의 원로학자인 최장집 고려대 명예교수를,
  6. 6
    검색: 1,091,624 트윗: 895 댓글: 2,232 수면제 한 통이 발견됐다. 손호영의 소속사인 CJ E & M 22일 새벽 이번 사건과 관련해 공식 입장을 발표했다. 아래는 전문이다. 손호영 소속사 CJ E & M 공식입장 지난 21일 밤 10시부터 12시까지 손호영씨는 강남경찰서에서
  7. 7
    검색: 36,046 트윗: 777 댓글: 1,888 탈세한 의혹과 관련해 국세청을 압수수색했다. 검찰은 이날 오전부터 서울지방국세청 조사4국에 대한 압수수색을 통해 2008년 이후 CJ그룹에 대한 세무조사 관련 자료를 임의제출 형식으로 전달받았다. 서울국세청 조사4국을 검찰이 압수수색한
  8. 8
    검색: 28,953 트윗: 424 댓글: 2,088 12-4로 앞서던 5회초, 두 팀 선수들이 모두 더그아웃을 박차고 나와 마운드 앞에서 대립하는 벤치클리어링이 나왔다. 넥센 유한준과 김민성이 두산 투수 윤명준의 공에 연달아 몸을 맞자 일촉즉발의 상황이 연출됐다. 거듭된 사구는 앞선 1사
  9. 9
    검색: 113,405 트윗: 387 댓글: 1,827 그룹 리쌍이 건물 임차인에 계약해지를 통보한 것을 두고 '갑의 횡포' 논란에 휩싸였다. 멤버 길과 개리가 각자의 트위터에 해명글을 남기며 억울함을 호소했다. 그러자 임차인 서 씨가 관련 사항에
  10. 10
    검색: 19,673 트윗: 486 댓글: 1,673 '이효리쇼'가 성공적으로 마무리됐다. 5월 22일 방송된 Mnet '2HYORI SHOW'에서는 이효리의 정규5집 '모노크롬' 첫 무대가 공개됐다. 타이틀곡 '배드걸'을 비롯 '사랑의 부도수표' '풀문' '아모르미오' '미스코리아'
오늘의 글
인기있는 글
컴퓨터 팁&텍
트랙백 많은 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: http://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를 사용할 수 있습니다.