본문 바로가기

추천팁/문제해결

맥용 사파리가 웹 페이지의 아이콘을 제대로 표시하지 못한다면? CSS 설정을 확인하세요

웹 페이지의 한글 서체가 마음에 들지 않을 때는 스타일 시트(CSS) 또는 Helvetify 같은 사파리 확장 프로그램을 사용해 웹 페이지의 서체를 일괄 변경하는 방법이 있습니다. 여러 맥 커뮤니티에서 인기리에 소개되는 팁인 만큼 아마 적지 않은 분들이 적용해서 쓰고 계실 듯 합니다. 보통 아래와 같은 코드로 되어 있죠.

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

하지만 이러한 스타일 시트를 적용하면 이미지 파일을 사용하지 않고 오로지 서체(웹폰트, 딩뱃 등)로 아이콘을 구현한 곳에서 아이콘이 정상적으로 표시되지 않는 문제가 발생합니다. 요즘 국내 사용자들로부터도 인기를 끌고 있는 텀블러(tumblr)와 ▼

퀴즐렛(Quizlet) 같은 곳이 아이콘을 구현하는데 서체를 사용한 대표적인 웹사이트입니다. 혹시 동일한 증상이 나타나지 않는지 사이트에 접속해 확인해 보시기 바랍니다. 비교적 용량이 적고, 레티나 지원이 용이하다는 장점 때문에 이 두 사이트 외에도 이러한 방법으로 아이콘을 표시하는 웹 사이트가 점차 늘어나고 있습니다. ▼

아이콘이 제대로 표시되지 않아 불편을 겪고 계신 분들은 사이트마다 스타일 시트를 선택적으로 적용할 수 있는 확장 프로그램을 설치하거나, 사파리 환경설정 > 고급 탭에 들어가 임의로 지정한 "스타일 시트"를 해제해야 합니다. 하지만 전자는 손이 번거롭다는 점이, 후자는 한국어 사이트를 접속할 때 서체가 이쁘지 않게 표시된다는 단점이 있습니다. 벼룩 잡자고 초가삼간을 태워먹는 꼴이죠.

제가 추천해 드리는 방법은 기존의 css 파일을 제거하고 앞서 블로그를 통해 소개해 드린 "국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일 시트"를 적용하는 것입니다. 또 Cypher님이 이 스타일 시트를 확장 프로그램으로 구현한 KoreanFontModifier로도 같은 효과를 보실 수 있습니다. 아이콘을 표시하는데 사용되는 서체는 건드리지 않고 오로지 한글 서체만 바꿔주기 때문에 위와 같은 문제가 발생하지 않습니다. 그러면서도 가독성이 높은 세리프 서체로 영어 텍스트가 표시되는 장점을 동시에 얻을 수 있습니다.



관련 글
• 국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일시트(CSS) - 이제 필요한 서체만 선별적으로 바꿔쓰세요.
• 네이버, 새로운 고딕글꼴 '나눔바른고딕' 무료 배포
• Back to the Mac 선정 - 추천 사파리 확장 프로그램(Extension) 30선