많은 고민이 있었다.
크롬이나 크롬플러스로 일본 웹사이트에서 글을 읽을 때마다 정말 이걸 어떻게든 해결하고 싶었다.

뭘?
웹페이지 폰트의 가독성을 말이다!!

이상했다.
왜 다른 브라우저와는 달리 크롬에서는 특별히 지정한 일본어 폰트가 없을시 MS Gothic을 불러오는 것이 아닌 굴림에서의 히라가나, 카타카나를 불러오는 것인가..

아래의 비교 이미지를 보면 웹문서의 가독성에 대해서 확연하게 비교가 될 것이다.

파이어폭스에서 일본어 웹페이지를 열었을 때의 화면
파이어폭스에서 일본어 웹페이지를 열었을 때의 화면

파폭의 경우에는 특별히 폰트 지정을 해두지 않았을 경우 기본으로 “MS Gothic”을 불러온다.
“MS Gothic”만 하더래도 특별히 가독성에는 큰 문제가 없다. 오히려 클리어타입이 제대로 지원되지 않는 XP에서는 “MS Gothic”으로 웹페이지를 탐색하는 것이 더 좋을 수도 있다.

IE9에서의 랜더링 화면
IE(에서의 랜더링 화면

이번에 정식판이 출시된 IE9에서도 마찬가지로 “MS Gothic”을 일본어 폰트의 기본 서체로 불러와서 랜더링 시켜준다.

하지만 크롬과 크롬을 기반으로 한 크롬플러스는 아래의 이미지와 같이 랜더링 된다.

크롬 및 크롬플러스로 렌더링된 일본어 웹페이지
크롬 및 크롬플러스로 렌더링된 일본어 웹페이지

차이가 느껴지시는가?

크롬에서는 따로 일본어 폰트가 지정되지 않았을 때는 해당 OS의 기본 폰트 즉 한글판 Window에서는 굴림에서 쓰이는 히라가나, 카나타나 폰트를 불러와 랜더링 시킨다.

딱 보기에도 위의 “MS 고딕”과는 상당한 가독성의 차이를 느낄 수 있다.
하루의 한두 문서도 아니고 여러 페이지를 이런 폰트로 읽다보면 슬슬 뒷골이 땡겨오기 시작하는데…

그동안 계속 눈에 가시로 하지만 크롬의 빠른 속도로 인해 스트레스를 견디면서 계속 쓰고 있었는데 해결방법을 하나 찾았다.

다름 아닌 구글 크롬의 확장 프로그램을 이용해 접속하는 웹페이지의 폰트를 내가 원하는 것으로 지정할 수 있다는 것!!

이 확장프로그램을 이용하면 접속하는 모든 사이트 혹은 원하는 주소의 사이트만 원하는 CSS스타일 및 javascript로 사용자의 스타일에 맞게 웹페이지를 변화 시킬 수 있다.

바로 아래의 동영상 처럼~!!

우왕 굿~!! 하고 이 확장 프로그램을 설치한 후.
일단 모든 사이트의 폰트를 내가 가장 좋아하는 일본어 폰트인 “meiryo”(우리나라 말로 ‘명료’)를 적용시켜 보았다.

하지만..ㅋㅋ
모든 사이트에 meiryo를 적용시키니 우리나라 웹사이트의 레이아웃이 이상야릇하게 변했다.

일단 한글은 굴림으로 표시되지만 기타 영문글자들은 죄다 meiryo에 포함되어 있는 영문폰트를 따라갔다.
하여 레이아웃이 깨지는 부분도 있을 뿐더러 맑은 고딕으로 지정한 부분도 굴림체로 나와버렸다.

헐..

하지만 이 userScriptCSS라는 확장프로그램에는 우선순위를 두고 도메인 별로 적용할 수 있는 옵션이 있었다.
그래..? 그럼 끝이 jp로 끝나는 도메인만 meiryo를 적용해 볼까?

근데 말이다. 어디 jp로 끝나지 않는 일본 웹페이지가 한두곳이란 말인가.
그렇다고 자주 들어가는 곳마다 따로 도메인을 추가시키는 것도 사람이 할일이 아니었다.

그럼 어떻게 하지…T.T 하고 고민했다.
크롬에서는 일본어 사이트 들어가면 번역해주까? 하고 뜨는데 이렇게 웹페이지에 포함된 캐릭터의 정보를 추출해내는 방법을 쓰까?
하지만 결국 방법을 찾아낼 수는 없었고 그렇게 지쳐갔다.

그리곤 한동안 포기하고 살았다.

그냥 구글 캘린더의 맘에 안드는 굴림 8pt를 돋움으로 바꾸고 letter-spacing:만 -1px로 해두곤 그냥 저냥 쓰고 있었는데..

오늘 가능성있는 방법이 하나 떠올랐다.

HTML의 language속성 ja !!!
HTML의 language속성 ja !!!

파이어폭스로 하테나 북마크를 뒤지다가 문득 파폭의 확장기능인 파이어버그로 HTML을 뒤져보니 lang=”ja” 라는 속성이 있었다.

lang=”ja” ~ !!!!!!!

그래 이거였다.
이거라면 일본어로 된 페이지를 추출해낼 수 있는 가능성이 있는 방법이었다.

‘아.. 왜 내가 진작에 이걸 생각해내지 못했지’ 하는 안타까움과 드디어 방법을 찾아낸 기쁨이 공존하는 가운데 이 속성으로 함 테스트해보기로 했다.

다행이 일본에서는 우리나라보다 규격화 된 홈페이지가 많기 때문에 html 속성으로 lang=’ja’를 포함한 곳이 많았다.

또한 내가 돌아댕기는 일본사이트들을 확인해 보니 거의 대부분의 곳에 lang=’ja’속성이 붙어있었다.

그럼 해결방법은 간단해 진다.
html 엘리멘트에서 lang=’ja’ 속성이 있는지 체크하고 있다면 페이지 내부의 font-family를 meiryo로 변화시켜주면 끝~!!

이를 가장 빠른 시간내에 간단하게 해결 할 수 있는 방법은 역시 jquery이다.
그리고 아래는 이를 userScriptCSS에 적용하는 방법이다.

  1. 크롬이나 크롬플러스를 사용하고 있다면 일단 여기로 들어가 userScriptCSS를 설치한다.
  2. 다음 URL입력 박스 오른쪽에 있는 스패너 마크를 클릭하여 열리는 메뉴에서 도구 – 확장프로그램으로 들어간다.
  3. userScriptCSS 설정창이 열리면 아래와 같이 정보를 입력하면 된다.

사용자 삽입 이미지
다른 도메인에 특별히 CSS를 적용시키고 싶지 않다면 첫번째 항목인 “Enter a URL regex here”에는

http://*

CSS 항목은 비워두고
script를 넣는 곳에 아래와 같이 소스코드를 넣고 save버튼을 누르면 끝~!!

var headIDForJQuery = document.getElementsByTagName("head")[0];
var newScriptForJQuery = document.createElement('script');
newScriptForJQuery.type = 'text/javascript';
newScriptForJQuery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js';
headIDForJQuery.appendChild(newScriptForJQuery);
jQuery(document).ready(function(){
if(jQuery('html').attr('lang') == "ja"){
jQuery('*').css('font-family', 'meiryo !important');
}
});

소스를 간단히 설명하자면
먼저 jQuery라는 javascript 라이브러리를 구글에서 불러온 후.
lang=’ja’라는 속성이 있을 때 웹페이지의 전체 폰트를 ‘meiryo’로 바꾸어 준다.

혹시 meiryo 폰트가 아닌 ‘ms gothic’으로 바꾸고 싶다면 위의 소스의 meiryo를 ms gothic으로 바꾸어 주면 된다.

그리고 그 결과가 아래와 같다!

아.. 눈물나..T.T
아.. 눈물나..T.T

눈물나게 아름다운 폰트 meiryo여~~

실제로 실행시켜 보면 페이지가 전체가 로딩된 다음에 웹페이지의 폰트가 바뀌는것을 확인할 수 있을 것이다.

자..
나같이 이렇게 이런거에 민감한 분들이 얼마나 계실지는 모르겠지만도 부디 도움이 되는 자료였으면 싶다.

일본지진도 어떻게 좀 진정좀 되었으면…

 

PS : 몇몇가지 수정할 부분이 생겼다.
설치하고 나서 여러사이트를 돌아다녀보니 아래와 같은 문제점이 있네.

생각보다 폰트가 바뀌지 않는 사이트가 꽤 된다.
이건 jQuery 라이브러리를 삽입시켜 작동하는 방식인데 이 jQuery 라이브러리와 충돌로  인해 다음 및 네이버에서 제대로 동작하지 않는 페이지가 있었다.
하여 lang=’ja’이외에 정규식으로 히라가나에서 자주쓰이는 문자 몇가지를 뽑아 테스트하는 방식도 적용해보니 좀 낫다.
또한 jQuery를 사용하지 않고 그냥 자바스크립으로 전환하는 방법으로 하는 것이 충돌을 피할 수 있을 것 같다.

 

PS2 : 위의 소스보다 아래의 소스를 이용하는 편이 좋다.

if (typeof jQuery == 'undefined') {
var headIDForJQuery = document.getElementsByTagName("head")[0];
var newScriptForJQuery = document.createElement('script');
newScriptForJQuery.type = 'text/javascript';
newScriptForJQuery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js';
headIDForJQuery.appendChild(newScriptForJQuery);
}
jQuery(document).ready(function(){
var rege = /[あいうえおの]/;
if(rege.test(jQuery("p:lt(3)").text()) || rege.test(jQuery("div").text()) || rege.test(jQuery("li:lt(3)").text()) || rege.test(jQuery("li:lt(a)").text()) || rege.test(jQuery("body").text())){
jQuery('*').css('font-family', 'meiryo !important');
return;
}

});

간단하게 설명하자면 기존의 lang 속성을 이용하는 것이 아닌 문서에 히라가나의 아이우에오나 혹은 조사로 쓰여지는 가 존재하면 일본어 문서라고 판단해 폰트를 메이료로 변경해 준다.

이 글의 관련글

Tags:

9 Comments

  1. 답답했던 화면이 탁 트이는 느낌이 나네요. 큰 도움이 됐습니다. 감사합니다. 🙂

    1. 아…. 이게 실행해보시면 아시겠지만 종종 되지 않는 사이트가 있었습니다.
      그래서 소스 좀 수정했는데요.

      아래의 소스를 적용하시면 일본어가 포함되어 있는 사이트라면 엥간하면 작동할겁니다. 웹사이트에서 あいうえお 중 한글자라도 포함되어 있으면 바로 메이료로 변경시키는 구조거든요.

      함 테스트해보시길 바랍니다~

      if (typeof jQuery == ‘undefined’) {
      var headIDForJQuery = document.getElementsByTagName(“head”)[0];
      var newScriptForJQuery = document.createElement(‘script’);
      newScriptForJQuery.type = ‘text/javascript’;
      newScriptForJQuery.src = ‘https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js’;
      headIDForJQuery.appendChild(newScriptForJQuery);
      }

      jQuery(document).ready(function(){
      var rege = /[あいうえおの]/;
      if(rege.test(jQuery(“p:lt(3)”).text()) || rege.test(jQuery(“div”).text()) || rege.test(jQuery(“li:lt(3)”).text()) || rege.test(jQuery(“li:lt(a)”).text()) || rege.test(jQuery(“body”).text())){
      jQuery(‘*’).css(‘font-family’, ‘meiryo !important’);
      return;
      }
      });

      소스부분을 위의 걸로 바꾸어보세요~

  2. 계속 일본윈도우만 쓰다가 이번에 한국윈도우로 바꾸고나서
    일본어 폰트가 참 맘에 안 들었는데 덕분에 보기좋게 바뀌었습니다.
    정말 감사합니다.

    1. 이 방법을 부디 많은 분들이 아셨음 좋겠어요ㅋ
      깔끔한 웹 서핑을 위해서요ㅋ

  3. userScriptCSS를 쓰시고, 다른 것 없이 크롬 화면 글꼴만 바꾸신다면 user stylesheet을 수정하는 것도 한 방법입니다. 참고로 저는 이렇게 설정해 놓고 씁니다.

    *{ font-family : Segoe UI, Meiryo UI, ‘나눔고딕’ !important;}

    영문 및 숫자는 Segoe UI, 일본어는 Meiryo, 그리고 한글은 나눔고딕으로 보여줍니다.

    1. 네 좋은 방법이십니다.

      저도 첨에는 비슷한 방법으로 쓰려고 했는데 일반 홈페이지에서는 그쪽에서 설정한 폰트로 보고 싶은 마음도 있어서요..ㅋ

Leave a Reply

Your email address will not be published. Required fields are marked *