[업데이트] 국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일 시트(CSS)

2015.09.12 03:13    작성자: ONE™

블로그에 새소식을 포스팅하는 것을 잠시 뒤로 하고, 예전에 공유했던 소식 하나를 업데이트하려고 합니다.

지금으로부터 3년 전, 백투더맥 블로그를 통해 웹 브라우저용 스타일 시트(CSS) 하나를 소개해 드린 적이 있습니다. 국내 웹 사이트를 돌아다닐 때 OS X 시스템 서체인 '애플 SD 산돌고딕 Neo'체로 한글이 표시되지 않고 명조체나 굴림체 등으로 못생기게 보이는 것을 방지해 주는 스타일 시트였습니다.

▶︎ 국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일 시트(CSS)

포스트를 올린 이후로 꽤 많은 분들이 제 스타일 시트를 이용하고 계신 걸로 알고 있는데요. 스타일 시트가 생소하신 분은 예전에 올린 포스트를 다시 살펴보시기 바랍니다. 왜 이런 스타일 시트를 제작했고, 어떤 장점이 있는지 자세히 정리돼 있습니다.

그런데 3년 간 웹 환경이 많이 바뀌었고, 최근에 업데이트된 사파리에서 웹 폰트를 처리하는 방식이 달라지면서 예전 스타일 시트를 적용했을 때 몇 가지 부작용이 나타나는 것을 확인하였습니다. 꽤나 성가신 문제입니다.

옛 스타일 시트의 문제점

1. 영문 서체에 영향을 끼칩니다

제 스타일 시트는 다른 언어로 된 텍스트는 건드리지 않고 오로지 한글만 OS X 시스템 서체로 바꾸도록 제작했습니다. 하지만 스타일 시트를 적용한 뒤 영문 서체의 종류나 굵기가 달라지거나, 움라우트(액센트나 꺾쇠 표시가 있는 알파벳)를 제대로 표현하지 못하는 문제가 발생하고 있습니다. ▼

2. 다른 언어에 영향을 끼칩니다.

일본어나 중국어 서체의 자간이 커지는 등 영어 뿐만 아니라 다른 언어를 표시할 때도 비슷한 문제가 나타납니다. ▼

새로운 스타일 시트로 업데이트하세요!

위와 같은 문제를 해결하고자 이전에 올린 스타일 시트에서 몇 가지 부분을 수정했습니다.

다른 언어로 된 텍스트에 영향을 끼치는 문제를 해결했고, 네이버와 다음에서 제공하는 서비스(카페∙블로그∙웹툰)를 방문했을 때 굴림체나 명조 계열 서체가 불쑥 등장하는 문제를 해결했습니다. 웹폰트를 이용하는 일부 사이트에서는 효력이 없지만, 대부분의 사이트에서 잘 작동하리라 믿습니다. (트위터와 클리앙을 통해 베타 테스트를 진행했는데 피드백 보내주신 분들께 감사하다는 말씀 드립니다.

새 스타일 시트를 적용하는 방법은 간단합니다.

1. 우선 아래 링크를 통해 새로 작성한 스타일 시트를 내려받습니다.

Download CSS

* 이 글을 올리는 시점 기준으로 'V15'이 가장 최근에 작성한 버전입니다. 버전은 파일명 뒤에 붙은 V**으로 확인할 수 있습니다.

2. CSS 파일을 적당한 폴더로 이동시킨 뒤 사파리 환경설정 ▶︎ 고급 ▶︎ 스타일 시트 메뉴를 통해 해당 CSS 파일을 등록합니다.

새 스타일 시트 테스트

CSS 파일이 잘 적용되었는지 확인하기 위해 여러 사이트를 돌아다녀보세요. 일단 테스트 삼아 접속해 볼 만한 2곳을 추천해 드립니다.

1. 한국어 사이트인 경우 굴림체나 명조체 계열이 애플 SD 산돌고딕 Neo체로 잘 표시되는지 확인!

* http://www.clien.net/cs2/bbs/board.php?bo_table=cm_mac

2. 영문 사이트인 경우 서체 굵기가 바뀌거나 자간이 너무 많이 벌어지지 않는지 확인!

* http://www.apple.com/apple-watch-hermes/

피드백

스타일 시트를 적용했음에도 계속 문제가 있는 사이트가 있을 수 있습니다. 특히 자바스크립트, 웹폰트를 사용하거나 레이어 구조가 복잡한 사이트에서 스타일 시트가 효력을 발휘하지 못할 수 있습니다.

만약 특정 사이트에서 문제가 발생하는 경우 댓글로 현재 사용하고 계신 OS X의 세부 버전(예: OS X 10.10.5)과 사이트 주소를 남겨주세요. 사이트가 어떤 서체를 사용하는지, 또 CSS 파일로 해결할 수 있는 문제인지 확인한 뒤 CSS 파일을 업데이트하거나 경과 사항을 알려드리겠습니다. 더불어 사파리에서 모든 테스트가 완료되면 구글 크롬이나 모질라 파이어 폭스에 해당 스타일 시트를 적용하는 방법을 곁들이겠습니다.

감사합니다.



참조
WebKit - Using the System Font in Web Content

관련 글
• 국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일 시트(CSS)
• 맥용 사파리가 웹 페이지의 아이콘을 제대로 표시하지 못한다면? CSS 설정을 확인하세요
추천 사파리 확장 프로그램(Extension) 30선


저작자 표시 비영리 변경 금지
신고
    
  1. 이전 댓글 더보기
  2. Blog Icon
    kimthun

    이야.. 최고네요. 감사합니다.^^

  3. Blog Icon
    가룡

    V15에서 네이버와 다음에서 일부 명조 계열 글꼴이 보이는 경우가 있습니다.

    네이버 뉴스 검색: http://news.naver.com/main/search/search.nhn?query=ios&ie=MS949&x=0&y=0
    미디어다음 "오늘의 이슈" http://media.daum.net

    요세미티이며, 나눔글꼴과 구글 노토산스 계열이 설치되어 있습니다.

  4. Blog Icon
    가룡

    앨캐피탄 업그레이드 후에 해당 페이지가 잘 보이네요. 사파리 업그레이드 때문인지는 확인하지 못했습니다.

  5. Blog Icon
    김치맨

    감사합니다.
    사용 중 발견한 사이트 피드백 드려요.

    v15버전, 사파리 9.0, 엘 캐피탠 GM 사용하고 있습니다.
    설치 후 잘 나오던 soccerline.co.kr 사이트 전체가 명조체로 나옵니다.

    디시인사이드의 갤러리 목록도 전부 명조체로 나옵니다.

  6. github 같은 곳에 배포해서, contribute 받는 것도 괜찮을거 같아요

  7. Blog Icon
    Two

    OS X 10.10.5 입니다.
    www.itcle.com
    여기 이 사이트의 기사 본문과 제목이 명조체?로 나오는것 갈아요.

    wowbogo.net 여기도 V15 에서는 상단 메뉴들이 고딕체로 잘 나왔는데 최근 바뀐 V16에서는 이상하게 다시 명조체로 나오네요?
    한번 확인 부탁드립니다 :)

  8. Blog Icon
    레티나짱짱맨

    안녕하세요 원님
    잘 사용중인데요.
    글씨체가 아직도 궁서로 나오는곳 발견했습니다.
    클량에서 직접홍보게시판에서 글쓰기 누르면 팝업이 뜨는데,
    그 팝업 내용안이 궁서체로 아주 보기싫게 뜹니다..
    참고로 V16버전 받았으며
    OS는 10.11(15A282a) 입니다. GM 후보버전입니다.

    그럼 추석 잘 보내세요~

  9. Blog Icon
    헤도니스

    x86osx 사이트에서도 궁서체로 보입니다. ^^
    v16 버전 사용중이고 os 는 10.11 정식버전입니다.

  10. 위 세 사이트 모두 점검해 보겠습니다. (제 쪽에선 정상적으로 나와서... 뭐가 문제인지 아직 파악을 못했습니다.)

  11. Blog Icon
    초그민

    http://www.coolenjoy.net/bbs/cboard.php?id=copy_preview&no=13980&page=1&num=12387&board=copy_preview&ss=0&sc=0&sn=0&keyword=&qa=0&ga=&cat=0&vote=0

    쿨엔조이에 들어갈 때 글 제목이 이런식으로 나옵니다.

  12. Blog Icon
    철가면

    이제서야 이거 보고 수년전의 스타일시트를 교체했습니다. 정말로 감사합니다!

  13. Blog Icon
    철가면

    네이버 영어사전에서 윗쪽에 있는 연관검색어 부분 상당수의 일부분이 소위말하는 "전형적으로 보기 않좋은 글꼴"로 나옵니다.

    예제 사이트
    http://endic.naver.com/search.nhn?sLn=kr&isOnlyViewEE=N&query=일정

    아래는 해당 글꼴이 보이는 부분을 캡처한 화면입니다.
    https://www.dropbox.com/s/9zxeyiogf3phous/Screen%20Shot%202015-11-14%20at%209.33.40%20PM.png?dl=0

  14. Blog Icon
    이종협

    http://accessories.ap.dell.com/sna/productdetail.aspx?c=kr&cs=krdhs1&l=ko&s=dhs&sku=391-BCCR&redirect=1

    델 코리아 홈페이지의 서브 페이지가 명조체로 표시되는 부분을 확인하였습니다.

    좋은 정보 공유 항상 감사합니다!

  15. 감사합니다! :)

  16. Blog Icon
    노을러브

    감사합니다.

  17. Blog Icon
    알케

    감사합니다. 클리앙에 글 남겼더니 바로 이 링크를 주시더군요.
    문제가 해결됐습니다.

  18. Blog Icon
    수수

    으와 정말 정말 감사합니다 굴림체때문에 괴로웠는데 바로 해결되었어요 감사합니다!!

  19. Blog Icon
    모두열기

    우아아아아 대박이네요.
    감사합니다. 항상 잘 쓰고 있습니다. ^^///

  20. Blog Icon
    미스터장

    잘 쓰려고 다운을 받았지만, 적용한 사파리와 적용하지 않은 사파리에 대한 속도가 체감될 정도로 느려지네요.. 수정부탁드립니다. ㅠㅠ

  21. Blog Icon
    미스터장

    참고로 현재 저는 엘캐피탄 10.11.6을 사용중에 있습니다. 최신버전입니다

  22. Blog Icon
    PRESS

    감사합니다!

  23. Blog Icon
    아리랑

    저도 즐겨가는 몇 곳에서 아무 변화가 없길래
    한참 헤매다가 전에 올려주신 Back_to_the_Mac_20120805에서

    body { font-family: "Apple SD Gothic Neo" ; } 부분을

    tbody { font-family: "Apple SD Gothic Neo" ; }

    수정하고 추가해 줬더니, 해결됐습니다.
    감사합니다.