Mac OSX Sierra 한글 font 문제 회피하기

안녕하세요, 윈도우즈용 한글 폰트를 설치한 맥 OSX 를 Sierra 로 업데이트하고 나면 일부 웹사이트에서 한글의 일정 부분이 흐릿하게 표현되는 이상한 문제가 목격됩니다.

맥에

  1. ‘돋움’,’굴림’ 등 윈도용의 한글 글꼴(TTF)을 설치했고,
  2. 글꼴을 ‘돋움’, ‘굴림’ 등으로 지정한 사이트에 방문하는 경우

문제가 발생합니다.

현재, 10.12.1 버전 업그레이드에서도 동일한 문제가 지속적으로 발생합니다.

물론,MailHoy MailHoy는 문제가 없습니다.

문제가 있는 사이트의 경우의 예를 보시죠. 아래와 같이 특정 몇몇 부분이 흐릿해집니다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-20-%e1%84%8b%e1%85%a9%e1%84%8c%e1%85%a5%e1%86%ab-11-21-42

특이점은 한글 ‘o’ 이응이 포함된 글꼴 중 일부에서 이런 흐릿하게 보이는 현상이 나타납니다.

이에 대한 해결책을 여기저기 찾아보니 특별한 해결책을 못찾겠어서 고민하다 해결책이라기보다는 회피책을 알아내게 되었습니다.

한 가지 단점은 구글 크롬에서만 적용가능합니다. 아래는 구글 크롬을 위한 것이고 거의 비슷한 방법으로 사파리를 위한 것도 추가로 찾아내어 구글 크롬의 경우 아래에 추가합니다.

구글 크롬을 위한 방법

  • 크롬 설정에서 글꼴부분에서 “돋움”,”굴림”등이 기본 글꼴로 설정되어 있다면 이를 다른 글꼴로 대체합니다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-20-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-12-24-48

설정메뉴를 클릭하면 나오는 설정화면 하단에서 “고급설정표시”를 클릭하면 아래와 같이 “웹 콘텐츠” 항목에서 “글꼴 맞춤설정”을 할 수 있습니다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-20-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-12-28-43

위의 “글꼴 맞춤설정”을 클릭하면 아래와 같이 팝업창이 올라오는데요, 각 항목들에 대해 설명하자면

  1. 표준글꼴은 HTML 속성이나 CSS로 설정된 글꼴이 없을 때 이용하는 글꼴을 지정합니다.
  2. Serif 는 삐침이 있는 글꼴을 지정합니다. (명조)
  3. Sans-serif 는 삐침이 없는 글꼴을 지정합니다. (고딕)
  4. 고정폭글꼴은 한글은 2칸, 영/숫자는 1칸 만큼의 공간을 고정적으로 이용하는 글꼴을 지정합니다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-20-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-12-30-52

이 때 주의해야 하는데요,  글꼴에 한글표현문제가 있는 돋움, 굴림 등 한글 위주의 글꼴을 선택하시면 안됩니다.

자, 이제 다음으로 크롬 확장프로그램을 하나 설치합니다. 특정 사이트에 CSS 를 강제로 적용할 수 있는 확장프로그램입니다.

  • 크롬 확장프로그램으로 “userScriptCSS” 를 설치합니다. (https://chrome.google.com/webstore/detail/userscriptcss/pdfbjinabdohnegjnbfgdgohlhegamnm)
  • “userScriptCSS” 설정에 아래와 같이 입력합니다.
    • Enter a URL regexp here 란에는 특정 naver 나 daum 사이트에만 적용하도록 아래와 같이 입력합니다.  문제없는 다른 사이트들(특히 국외의)은 각 사이트별로 지정한 글꼴로 보여지도록 합니다.
      • ^http[s]*://[\w.-]+naver\.com|^http[s]*://[\w.-]+daum\.net
    • Enter your user stylesheet here 란에는 아래와 같이 적어 크롬 설정에서 지정한 Sans-serif 글꼴이 적용되도록 합니다.
      • *{font-family: sans-serif !important;}

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-20-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-5-56-05

이상과 같이 입력하고 “Save” 하신 후 네이버나 다음 페이지를 Refresh 하면 아래와 같이 바뀌어 나옵니다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-20-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-12-19-49

애플 사파리를 위한 방법

사파리의 경우에는 확장프로그램을 하나 설치해서 설정하면 됩니다.

확장프로그램의 이름은 “Stylish”

https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45

설치하고 사파리 상단의 도구막대에서 마우스 보조클릭(=오른쪽 버튼)을 누르면 아래와 같이 “도구막대 사용자화”를 선택할 수 있습니다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-21-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-12-58-09

“Stylish” 항목을 끌어 도구막대에 올립니다.%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-21-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-1-01-49 그리고, “완료”버튼을 눌러 설정을 끝냅니다.

이제 도구막대에서 “Stylish” 버튼을 클릭합니다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-21-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-1-03-08

“Manage” 버튼을 클릭합니다.  이제 아래와 같은 “Stylish”의 설정화면이 나옵니다. 왼쪽창에서 “Edit”를 선택해주세요. 아래와 같은 창이 나옵니다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-21-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-1-10-20

“Title”은 적당히 본인이 원하시는대로 주시고요.

“css”란은 크롬 확장프로그램과 동일하게 입력합니다.

*{font-family:sans-serif !important;}

“Applies to”에 필자는 “Add rule”버튼을 클릭하여 총 3개의 “Rule”을 등록했습니다.

종류는 “Regexp”를 선택해주시고

^http[s]*://[\w.-]+naver\.com

^http[s]*://[\w.-]+daum\.net

^http[s]*://[\w.-]+zum\.com

이상과 같이 입력하고 “Save Style”버튼을 클릭하여 저장하면 “끝”입니다.

맥 시에라에서 글꼴 표현에 문제가 있는 경우, 위와 같이 편법을 써서 회피하도록 해보았습니다.

모두, 해피 컴생활하세요~

광고

Mac OSX Sierra 한글 font 문제 회피하기”에 대한 답글 1개

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중