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

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

이상했다.
왜 다른 브라우저와는 달리 크롬에서는 특별히 지정한 일본어 폰트가 없을시 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 속성을 이용하는 것이 아닌 문서에 히라가나의 아이우에오나 혹은 조사로 쓰여지는 가 존재하면 일본어 문서라고 판단해 폰트를 메이료로 변경해 준다.

최근 한달간 인기글

이 글의 관련글

REPLY AND TRACKBACK RSS http://blog.nemesys.co.kr/tt/rss/response/902
REPLY AND TRACKBACK ATOM http://blog.nemesys.co.kr/tt/atom/response/902
TRACKBACK ADDRESS
이 글에는 트랙백을 보낼 수 없습니다
REPLY RSS http://blog.nemesys.co.kr/tt/rss/comment/902
REPLY ATOM http://blog.nemesys.co.kr/tt/atom/comment/902
meguri 
wrote at 2011/05/03 17:26
답답했던 화면이 탁 트이는 느낌이 나네요. 큰 도움이 됐습니다. 감사합니다. :)
Nes 
wrote at 2011/05/03 17:48
아.... 이게 실행해보시면 아시겠지만 종종 되지 않는 사이트가 있었습니다.
그래서 소스 좀 수정했는데요.

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

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

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;
}
});


소스부분을 위의 걸로 바꾸어보세요~
peterpan 
wrote at 2011/08/04 03:24
계속 일본윈도우만 쓰다가 이번에 한국윈도우로 바꾸고나서
일본어 폰트가 참 맘에 안 들었는데 덕분에 보기좋게 바뀌었습니다.
정말 감사합니다.
 
wrote at 2011/09/10 17:38
お陰様でありがとうございます。
Nes 
wrote at 2011/09/15 09:18
どういたしまして~
와우 
wrote at 2011/11/03 12:49
감사합니다!저도 이 문제 때무에 고생 좀 했는데 ^^
Nes 
wrote at 2011/11/11 13:02
이 방법을 부디 많은 분들이 아셨음 좋겠어요ㅋ
깔끔한 웹 서핑을 위해서요ㅋ
amour fou 
wrote at 2011/12/06 08:59
userScriptCSS를 쓰시고, 다른 것 없이 크롬 화면 글꼴만 바꾸신다면 user stylesheet을 수정하는 것도 한 방법입니다. 참고로 저는 이렇게 설정해 놓고 씁니다.

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

영문 및 숫자는 Segoe UI, 일본어는 Meiryo, 그리고 한글은 나눔고딕으로 보여줍니다.
Nes 
wrote at 2011/12/09 11:29
네 좋은 방법이십니다.

저도 첨에는 비슷한 방법으로 쓰려고 했는데 일반 홈페이지에서는 그쪽에서 설정한 폰트로 보고 싶은 마음도 있어서요..ㅋ
이름 / Name : *
비밀번호 / Password : *
홈페이지 / Homepage :
비밀글 / Secret :
*1  ... *436  *437  *438  *439  *440  *441  *442  *443  *444  ... *1128 
SNS + RSS Links
rss
다음 일간 이슈 검색어
Since 2006 Nes's Random Blogz
Total 11159331 T2409 Y2994

4006

1583

google chart api graph

-30 days

today : 2409

전체 (1128)
Nes이야기 (123)
하드웨어이야기 (260)
소프트웨어이야기 (27)
외국어이야기 (12)
IT/웹이야기 (248)
연예계/방송이야기 (140)
게임이야기 (96)
광고/제품이야기 (58)
여행/먹거리이야기 (45)
세상이야기 (98)
최근에 쓴 글
구글 딥마인드 알파고가 이세돌을 꺾은날, 애드센스로 ...
구글 설문지(구글 폼)에서 정규식으로 입력 내용 사전 ... (1)
유플러스 tv g 4k uhd 셋톱박스를 신모델인 tvg 우퍼2... (9)
신장의 야망 창조 전국입지전 - 삼국지 13의 재미를 뛰... (2)
구글 애널리틱스(Google Analytics) 보고서 및 대시보...
그래픽카드 견적을 뺀 이번 조립컴퓨터, 스카이레이크 ... (1)
기어s 웨어러블 요금제로도 올레 맴버쉽 포인트 사용이...
안드로이드 롤리팝 포팅 버전 기어s 3g 요금제 가입 후... (2)
tasker http post 기능을 활용해 스마트폰 이벤트를 sl...
삼국지13 간단 후기 - 역대 장수제 시리즈의 정점을 찍...
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10...
네이버 웹마스터도구 개편이 불러온 검색로직 및 트래...
삼성 갤럭시 기어s 롤리팝 포팅 후기 및 앱 사용기 (1)
삼성 갤럭시 기어s에 안드로이드 롤리팝 올리기 성공! (3)
CPU 잡아먹는 어베스트 avast mft utility(mftutil.exe...
유플러스 TVG 롤리팝 업데이트 후기(via 기기교체!!) (1)
블로그 포스팅이 점점 줄어드는 이유
u+ tv g 롤리팝 업데이트를 하릴없이 기다리며 써본 간... (9)
허니버터칩은 과연 꼬꼬면의 숙명을 피할 수 있을 것인가? (3)
LG유플러스 U+ tvg 4K UHD 간단 사용기 및 신구형 셋톱... (2)
구글 애널리틱스 웹로그 분석 공인 전문가 자격 인증 ...
스마트폰 사용 패턴 통계 및 분석 with Tasker & Googl... (5)
갤럭시 기어1 - 루팅 및 안드로이드 null롬 올린 후 두... (1)
옵티머스G프로 킷캣 업데이트 후 폰트변경 - 나눔바른...
갤럭시 기어1 - 루팅 및 안드로이드 커스텀 롬 사용기 ... (5)
구글 애널리틱스 UA 업그레이드 이후 애드센스 통계 안...
스마트폰 화면 밝기 어둡게해 야밤에 시력 보호하는 방법 (1)
블루투스 휴대용 스피커 로지텍 UE Boom 간단 리뷰 및 ...
구글 스프레드시트가 canvas를 활용해 만들어졌다니!! (1)
구글 드라이브 스프레드시트(엑셀)의 놀라운 기능 impo...