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

2013. 12. 13. 17:15    작성자: ONE™

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

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

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

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

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

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



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

    
  1. Blog Icon

    비밀댓글입니다

  2. Blog Icon
    육식워리어

    예전에 이런 문제가 있어 겨우 원인을 찾고 그냥 CSS를 지웠었는데요. 오늘 새로운 해결책을 보고 바로 적용했습니다. 고맙습니다 ^^

  3. Blog Icon
    dexion

    관련 포스팅( "국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일 시트")까지 보고 올려주신 css 파일을 적용해 보았습니다. 그런데 국립국어원의 표준국어대사전을 볼 때 문제가 발생하더군요. 어원 등 여러 기호들이 제대로 나타나지 않았습니다. 사실 이것 때문에 일괄적으로 '함초롬 돋음 LVT'로 지정해서 쓰고 있었습니다. 아마도 올려주신 css 내 서체 목록에서 국립국어원 표준국어대사전의 서체에 대한 지정이 없어서일 듯합니다. 그런데 도통 어떤 서체를 썼는지 알 수 없군요. 이전 CD 표준국어대사전에서는 "표준문자.tff"을 깔면 되어서 '표준문자'라는 이름으로 지정해도 변화가 없습니다.

    말이 길어졌습니다. 요약하면,
    back to the Mac.css 파일을 편집해서
    사파리에서 국립국어원의 표준국어대사전을 제대로 보고 싶습니다.
    혹시 해결 방법을 알 수 있을까요?

  4. 본문에 소개한 것과 반대 케이스군요. 이런 경우라면 국립국어원만 함초롱 돋움 LVT를 적용할 수 있도록 http://code.grid.in.th 같은 사파리 확장 프로그램을 써보시는게 어떨까 싶습니다.

  5. Blog Icon
    dexion

    감사합니다. 말씀해 주신 확장 프로그램으로 해결을 했습니다.

  6. Blog Icon
    카쉬냅

    좋은 정보 감사드립니다

    한가지 질문이 있는데요
    본문의 링크로 들어가서 css파일을 받아서 적용해봤는데요
    여기서 폰트 사이즈 조절을 하려면 어떻게 해줘야 할까요?

  7. Blog Icon

    비밀댓글입니다

  8. Blog Icon
    택견꾼

    사파리에서 텀블러 들어갈 때 위 문제가 생겨서 어떻게 해야할지 잘 몰랐는데,
    여기에 그 해결책이 있었군요!

    정말 고맙습니다. :)

  9. Blog Icon
    Duke

    위 내용에서는 !important 부분만 빼줘도 아이콘 폰트가 제대로 적용이 됩니다.

    !important 를 붙여줌으로써, 모든 태그를 무조건 적어둔 폰트로만 출력하라는 정의가 되기 때문입니다.

    해당 부분을 지워서 적용해보고 그래도 마음에 들지 않으면, 다음 단계로 진행해도 될 겁니다.