사파리 한글 폰트 문제 해결 Gridth 확장

Gridth는 사파리 브라우저에서 사이트 별 사용자 CSS를 적용하기 위한 확장이다. 오해의 여지가 있는데, 제목처럼 한글 폰트 문제를 해결하기 위한 전문적인 확장은 아니다.

사파리가 6버전으로 올라오면서 폰트 설정이 아예 사라져 버렸다. 그렇다보니 발생하는 문제가 특정 사이트에서 CSS를 이용해 특정 폰트를 사용하는 경우 보기 싫은 PC명조체가 나타난다는 점이다. 이 폰트는 가독성면에서도 최악이고 간혹 가로폭이 좁은 곳에서 글자가 잘리는 어이없는 문제까지 나타나기도 한다.

그래서 일반적으로 아래와같은 사용자 CSS를 만들어서 사파리에서 로딩하도록 함으로써 문제를 해결하기도 한다.

* {
    font-family: Helvetica, AppleSDGothicNeo, Apple SD 산돌고딕 Neo !important;
}

하지만 이 CSS를 사용하게 될 경우 github.com 등 특수 웹폰트를 이용하는 사이트의 이미지가 깨져보이는 등 의도하지 않는 문제가 나타나게 된다.

이런 폰트 문제 해결을 하다 다른 폰트 문제가 나타난 경우 Gridth 확장을 이용할 수 있다.

http://code.grid.in.th

Gridth는 사이트별로 CSS를 사용하거나 특정 사이트만을 배제하고 CSS를 적용하는 기능을 제공한다.

설치방법은 단순하게도 다운로드 받아서 그냥 더블클릭해서 실행시키면 사파리에 확장으로 설치가 된다.

설치가 되면 툴바에 'A'라는 글자가 쓰여진 버튼이 생성된다.

이 버튼을 누르면 CSS를 설정 할 수 있는 창이 나타난다.

최초에는 아무것도 없이 새로운 CSS를 하나 만들 수 있는 화면이 뜬다. 중요한 것은 URL의 Includes와 Excludes 항목이다. 이 두 항목은 각자 어떤 사이트에서 CSS를 적용 할 것인가, 그리고 어떤 사이트에는 이 CSS를 사용하지 않겠느냐이다. 하단의 Styles에는 위에서 언급한 CSS를 적으면 된다.

사이트 URL에는 와일드카드를 적용해서 사용 할 수 있다. 위의 스크린샷 처럼 Excludes에 http://github.com/* 를 적어두면 github 사이트에는 CSS가 적용되지 않는다. Includes에는 그냥 * 를 적어놨는데 Excludes를 제외하고 모든 사이트에 CSS를 적용한다는 의미이다.

물론 반대로 Excludes에 비워놓고 Includes에 원하는 사이트 주소만 적는 것도 방법이다. 어차피 자주 가게되는 사이트는 얼마 없을 테니 말이다.

어쨌든 이제 사파리에서 한글 폰트를 보면서도 Github 화면이 깨지지 않아서 좋은 것 같다. 행복하다. ;ㅅ;