Nov 5, 2020
Safari(사파리) 에서 폰트가 이상하게 보일경우 해결법 / CSS font-family 속성 총정리
일단은 웹서핑 하시는 비 개발자 여러분을 위한 해결법을 알려 드리겠습니다. 개발자 분께서는 ‘개발자 관점에서의 해결법’ 항목을 읽어주세요.
비 개발자 관점에서의 해결법
Safari 로 웹서핑 하다보면 간혹가다 특정 사이트에서 이상한 명조체 같은 글꼴로 되어있어 어색하고 가독성이 떨어지는 것을 볼 수 있습니다.
이와같이 빨간색 네모로 표시된 글꼴처럼 말이죠. 이럴때는 css 파일을 사파리 설정에 적용시키면 되는데요, 아래의 파일을 다운받아주세요.
받았으면, 사파리 창을 활성화 시킨 상태에서 ⌘ + ,(comma) 를 눌러 환경설정으로 가고, '고급' 메뉴에서 '스타일 시트' 를 클릭한 후 'Other...' 를 눌러 다운받은 파일을 적용해주시면 완료됩니다.
개발자 관점에서의 해결법
아래의 두 스크린샷 중 첫번째는 Safari, 두번째는 Chrome 의 화면입니다.
이걸 보고 사파리가 이상하다, 표준을 안 지킨다고 생각들 수도 있는데요, 사실은 Safari 에서는 전혀 오류가 없습니다. 결론부터 말씀드리자면 웹사이트 개발자의 부주의로 웹브라우저의 default font 까지 적용되었기 때문이라고 말씀드릴 수 있겠습니다. 즉, 웹 브라우저 마다 default font 가 다르다는 말입니다. 당연히 지금은 무슨말인지 이해가 가지 않을겁니다. CSS의 font-family 의 동작원리와 그와 관련된 환경을 제대로 알아야 하는데요, 그럼 이제부터 CSS 의 font-family 속성에 관한 모든것을 최대한 알기쉽게 설명드리며, 프론트엔드 개발자라면 어떤 컨벤션을 가지고 폰트를 적용시켜야 하는지 말씀드리는 시간을 가지도록 하겠습니다.
개발자는 일반인 관점에서의 해결법의 형태로 스타일을 적용하여 해결해서는 절대 안됩니다. 다수 사람들의 기본 설정을 고려하고 똑같은 환경에서 모니터링 해야하므로 스타일시트 설정은 그대로 둡니다.
font-family 의 원리
보통 우리는 font-family: [1순위], [2순위], [3순위], [...] 와 같은 원리로 현재 OS 에 있는 폰트가 적용된다고 알고 있습니다. 하지만 이렇게만 알면 안되고 정확한 알고리즘을 알아야 합니다. 알고리즘은 다음과 같습니다.
- [1순위]의 폰트가 OS 에 있는지 확인한다. 있으면 그것을 바로 적용한다.
- 없으면 웹서버에 정의된 웹폰트가 있는지 확인한다.
- 웹서버에 웹폰트가 있으면 다운을 받고, 없으면 [1순위]의 폰트는 없다 간주하고 [2순위]의 폰트를 검사하기 시작한다.
- 1~3의 작업을 반복한다.
작업을 계속 반복 해도 폰트를 찾지 못한 경우, 비로소 브라우저 설정에 정의된 default font 가 사용되는데요, 그 종류는 serif(명조체), sans-serif(고딕체, 명조체에서 삐져나온부분을 산~하고 잘라 반듯한 고딕체로 만들었다고 외웠습니다. -.-^), monospace(너비가 동일한 문자), standard(앞의 3가지에 해당 안되는경우) 4가지가 있습니다.
저 4가지 중 하나를 font-family 속성의 마지막 요소로 적어줘야 default font 를 어느 성격의 문자로 쓸 것인지 정해주게 되는 것입니다. 따라서 브라우저 환경설정에서 미리 설정된 OS 폰트를 따라가기 때문에 절대 폰트가 누락될 일은 없는 것이지요. 우리가 개발할 때, 해당 폰트가 명조체인지 고딕체인지 보면 알게 되는데요, 뭔 종류의 폰트인지 판단하여 반드시 마지막에 serif, sans-serif, monospace 중 하나를 적어주시기 바랍니다. 혹시나 모를 네트워크 문제로 상위 우선순위 폰트가 다운받아지지 않으면, 기본 OS 폰트라도 받아와 명조체인지 고딕체인지 구분돼야 하니까요(물론 요즘 한글의 대세는 나눔고딕 같은 고딕체이지만요..). standard 는 뭐냐고요? font-family 속성의 마지막 아이템이 serif, sans-serif, monospace 가 아니라면 standard default font 를 적용하는 겁니다. 보통 사이트를 보면 디폴트를 제대로 명시 안해주니 standard 를 따라왔던 것이지요.
default font 설정
그럼 이제 브라우저의 default font 설정을 찾아봅시다. 크롬브라우저 에서는 chrome://settings/ 으로 가셔서 아래 스크린샷 같이 Customize fonts 를 클릭해 줍니다.
표시한 부분을 보시면, 아까 배웠던 익숙한 표현들이 보이죠?? 저기서 세팅한 대로 default font 가 적용되는 겁니다. Fixed-width font 는 monospace 입니다.
language-script 별 default font 설정
근데 여기까지만 알고 끝내면 안됩니다!!! HTML 태그의 lang 속성에 따라 default font 가 제각각 설정돼있는데요, 위에서 봤던 스크린샷에서 보고있는 설정은 HTML 태그에서 lang 속성이 없을때 따르는 기본 설정입니다. default font 의 default language-script 설정 이라고 할 수 있겠지요. lang 속성이 무엇이냐에 따라 default font 는 얼마든지 달라질 수 있습니다.
Chrome 에서의 설정
다른 language-script 의 설정을 보려면? 현재 브라우저에선 볼 수 없고요, Advanced Font Settings 라는 크롬 확장 프로그램을 설치해야 합니다. 설치 후 확장프로그램에서 Options를 클릭해보면 아래와 같이 나옵니다.
Script 에서 language-script 를 설정해야 합니다(계속 language-script 라고 말씀드리는데, 한 언어에서는 여러 글자가 있는데요, 디폴트 폰트 설정 단계는 언어가 아닌 ISO 15924 표준에 기반된 글자차원의 language-script 를 따르게 됩니다.). default 는 아까 말씀 드렸다시피 현재 크롬의 설정과 동일합니다. default 말고 hangul 을 선택해봅시다.
HTML 에 lang=”ko” 라고 설정돼있을 경우 이 디폴트 폰트를 따르게 되는데요, 아까와는 다르죠?? 이러한 부분에서도 lang의 존재를 모른다면 한끗차이로 예상치 못한 변화가 발생할 수 있습니다. 나는 크롬 설정에서 default font 를 바꾸고 싶은데 웹사이트의 폰트가 안 변하네? 알 수 없는 의문을 가지게 됩니다. 그럴땐 lang 속성을 인지하고 Advanced Font Settings 크롬 익스텐션을 깔아서 그곳에서 변경해야지요.
Safari 에서의 설정
Safari 같은 경우엔 간단합니다. 원래는 설정에서 디폴트 폰트를 바꿀 수 있었지만, 이제는 사라졌고요, https://trac.webkit.org/browser/trunk/Source/WebCore/Resources/DefaultFonts.plist.in?rev=114895 의 내용을 따르게 됩니다. default, japanese, korean 설정 다 적혀 있으니까 한번 쭉 보세요. 역시 언어에 따라 디폴트 폰트는 다릅니다.
정리
참~ 많은 길을 걸어왔습니다. 다시 처음 봤던 스크린샷을 꺼네봅시다.
브라우저마다 왜 다른지 이제는 알 수 있을겁니다. 실제로 저 두 요소는 CSS로 font-family: '굴림',Gulim; 가 적용돼 있습니다. OS 에 없는 글꼴이라 쳐도 웹서버에서 웹폰트를 제공해 줬다면 브라우저별로 보이는 폰트는 통일됐을 겁니다. 하지만 이 사이트에서는 웹폰트를 제공하지 않았습니다. 따라서 마지막 요소까지 읽어, serif, sans-serif, monospace 도 아닌 standard 로 정의된 디폴트 폰트를 따르게 되는 것입니다. 이 디폴트 폰트가 Safari, Chrome 에 다르게 설정돼있어서 그런 것입니다(또한 이 사이트는 <html lang="ko"> 로 시작하므로 한글쪽 디폴트폰트를 불러옵니다).
그럼 이제 개발자는 어떻게 개발해야할 것인지 감이 섭니다. 이제 다음과 같은 컨벤션이 나옵니다.
font-family: A, B, C, [serif, sans-serif, monospace, X];
- A, B, C 각각을 웬만하면 아래와 같은 방식으로 웹폰트로 정의한다.
2. 가급적 A, B, C 폰트의 성격에 따라 마지막에 default font 를 기입해주도록 하자(웬만하면 standard가 아니도록)
이렇게 하면 이제 브라우저마다 폰트가 달라 보일리는 없을겁니다.
결론
저희가 바꿀건 없고 바꿀수도 없고, 해당 사이트의 웹개발자가 잘못했네~ 하고 넘어가시면 됩니다. 다만 내가 웹프로그램을 만들땐 위에서 배운 정확한 컨벤션으로 합시다. :)
넋두리
이틀간의 삽질로 인해 얻은 값진 결과입니다. 제가 왜 삽질 시간이 길었는지 성찰해가며 다음엔 더욱 효과적으로 Trouble Shooting 이 가능하도록 개선하고자 합니다. 삽질시간이 길어진 이유는, 간단하게 만들려고 노력하지 않아서 그런것 같습니다. 테스트를 할 때에는 간단하게 최대한 변수를 알아보기 쉬운 환경을 만들었어야 했습니다. 저는 이미 있는 복잡한 코드로된 사이트에서 속성만을 변경시키며 규칙의 변화를 감지하려 했습니다. 그렇게 하지 말고 간단하게 해결하기 위해서는, Body 를 날린 후 body 의 컨텐츠로 간단한 문장 하나만 놓고 head 를 하나하나 지워가며 어디에서 문제가 발생하는지 알아봐야합니다. 마지막 head 까지 지워도 변화는 없더군요.. 절망적이었는데 혹시나 <html> 의 lang 속성이 문제였나 생각해서 지워봤는데 그것이 맞았습니다. 테스트 환경을 단순화하지 않았다면 해결하기 힘들었을 겁니다. 다음부턴 처음부터 어떻게하면 단순하게 할 수 있는지 생각을 먼저하는 습관을 들여야 겠습니다.
