블로그에 새소식을 포스팅하는 것을 잠시 뒤로 하고, 예전에 공유했던 소식 하나를 업데이트하려고 합니다.
지금으로부터 3년 전, 백투더맥 블로그를 통해 웹 브라우저용 스타일 시트(CSS) 하나를 소개해 드린 적이 있습니다. 국내 웹 사이트를 돌아다닐 때 OS X 시스템 서체인 '애플 SD 산돌고딕 Neo'체로 한글이 표시되지 않고 명조체나 굴림체 등으로 못생기게 보이는 것을 방지해 주는 스타일 시트였습니다.
▶︎ 국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일 시트(CSS)
포스트를 올린 이후로 꽤 많은 분들이 제 스타일 시트를 이용하고 계신 걸로 알고 있는데요. 스타일 시트가 생소하신 분은 예전에 올린 포스트를 다시 살펴보시기 바랍니다. 왜 이런 스타일 시트를 제작했고, 어떤 장점이 있는지 자세히 정리돼 있습니다.
그런데 3년 간 웹 환경이 많이 바뀌었고, 최근에 업데이트된 사파리에서 웹 폰트를 처리하는 방식이 달라지면서 예전 스타일 시트를 적용했을 때 몇 가지 부작용이 나타나는 것을 확인하였습니다. 꽤나 성가신 문제입니다.
옛 스타일 시트의 문제점
1. 영문 서체에 영향을 끼칩니다
제 스타일 시트는 다른 언어로 된 텍스트는 건드리지 않고 오로지 한글만 OS X 시스템 서체로 바꾸도록 제작했습니다. 하지만 스타일 시트를 적용한 뒤 영문 서체의 종류나 굵기가 달라지거나, 움라우트(액센트나 꺾쇠 표시가 있는 알파벳)를 제대로 표현하지 못하는 문제가 발생하고 있습니다. ▼
2. 다른 언어에 영향을 끼칩니다.
일본어나 중국어 서체의 자간이 커지는 등 영어 뿐만 아니라 다른 언어를 표시할 때도 비슷한 문제가 나타납니다. ▼
새로운 스타일 시트로 업데이트하세요!
위와 같은 문제를 해결하고자 이전에 올린 스타일 시트에서 몇 가지 부분을 수정했습니다.
다른 언어로 된 텍스트에 영향을 끼치는 문제를 해결했고, 네이버와 다음에서 제공하는 서비스(카페∙블로그∙웹툰)를 방문했을 때 굴림체나 명조 계열 서체가 불쑥 등장하는 문제를 해결했습니다. 웹폰트를 이용하는 일부 사이트에서는 효력이 없지만, 대부분의 사이트에서 잘 작동하리라 믿습니다. (트위터와 클리앙을 통해 베타 테스트를 진행했는데 피드백 보내주신 분들께 감사하다는 말씀 드립니다.
새 스타일 시트를 적용하는 방법은 간단합니다.
1. 우선 아래 링크를 통해 새로 작성한 스타일 시트를 내려받습니다.
* 이 글을 올리는 시점 기준으로 'V15'이 가장 최근에 작성한 버전입니다. 버전은 파일명 뒤에 붙은 V**으로 확인할 수 있습니다.
2. CSS 파일을 적당한 폴더로 이동시킨 뒤 사파리 환경설정 ▶︎ 고급 ▶︎ 스타일 시트 메뉴를 통해 해당 CSS 파일을 등록합니다.
새 스타일 시트 테스트
CSS 파일이 잘 적용되었는지 확인하기 위해 여러 사이트를 돌아다녀보세요. 일단 테스트 삼아 접속해 볼 만한 2곳을 추천해 드립니다.
1. 한국어 사이트인 경우 굴림체나 명조체 계열이 애플 SD 산돌고딕 Neo체로 잘 표시되는지 확인!
* http://ift.tt/1eE3EDE
2. 영문 사이트인 경우 서체 굵기가 바뀌거나 자간이 너무 많이 벌어지지 않는지 확인!
* http://ift.tt/1OdmjMo
피드백
스타일 시트를 적용했음에도 계속 문제가 있는 사이트가 있을 수 있습니다. 특히 자바스크립트, 웹폰트를 사용하거나 레이어 구조가 복잡한 사이트에서 스타일 시트가 효력을 발휘하지 못할 수 있습니다.
만약 특정 사이트에서 문제가 발생하는 경우 댓글로 현재 사용하고 계신 OS X의 세부 버전(예: OS X 10.10.5)과 사이트 주소를 남겨주세요. 사이트가 어떤 서체를 사용하는지, 또 CSS 파일로 해결할 수 있는 문제인지 확인한 뒤 CSS 파일을 업데이트하거나 경과 사항을 알려드리겠습니다. 더불어 사파리에서 모든 테스트가 완료되면 구글 크롬이나 모질라 파이어 폭스에 해당 스타일 시트를 적용하는 방법을 곁들이겠습니다.
감사합니다.
참조
• WebKit - Using the System Font in Web Content
관련 글
• 국내 웹 환경을 위한 보다 스마트한 웹브라우저용 스타일 시트(CSS)
• 맥용 사파리가 웹 페이지의 아이콘을 제대로 표시하지 못한다면? CSS 설정을 확인하세요
• 추천 사파리 확장 프로그램(Extension) 30선
from Back to the Mac http://ift.tt/1O5X7rY
via IFTTT
