블로그가 막 시작되던 시점에는 PC의 브라우저에서 보이는 모습을 위주로 블로그를 꾸미고 만들었다면 이제는 모바일에서 어떻게 보이는가도 무시 할 수가 없는 시대가 되었습니다.
제 경우에도 구글 서치 콘솔이나 애널리틱스 등으로 기기별 유입 현황을 확인을 해 보면 평균적으로 약 40%가 PC의 웹브라우저를 통하고 있고 약 60%는 모바일 기기를 통해서 보고 있습니다.
불과 4~5년 전만 해도 블로그 방문자의 70%가 PC이고 30% 정도가 모바일이었지만 이제는 시대가 변해서 그 상황이 역전되었습니다. 날씨가 좋은 주말에는 모바일을 통한 유입이 70%에 달하는 날도 있습니다.
이 때문에 티스토리 블로그도 많은 경우 반응형 스킨을 도입하여 PC에서도 모바일에서도 가독성 있고 보기 좋은 블로그를 만들려는 경우가 많습니다. 그럼에도 아직 많은 블로그들이 PC 화면은 열심히 꾸미지만 모바일 화면에 대해서 큰 관심을 가지지 않은 경우를 종종 보게 됩니다.
출처 : pxhere 무료이미지
반응형 스킨을 적용했더라고 제 개인적인 생각에 많은 블로그들이 폰트 사이즈에 전혀 관심을 기울이지 않는 케이스도 많은 것 같습니다.
그저 단순히 자신이 보기에 정갈해서 작은 폰트 사이즈를 유지하거나 아니면 PC에서 보기에는 적합한데 모바일에서 보기에는 현저히 가독성이 떨어지는 폰트 사이즈나 폰트를 선택해서 사용하고 있는 블로그도 보입니다. (폰트 사이즈가 8px나 9px 또는 필기체라든가...)
태클 차단용으로 말씀 드리자면 물론 제 블로그의 방문자는 이런 이야기를 할 만큼 충분히 많지 않고 영향력도 미미합니다. 거기다 한국의 경우는 워낙에 일반적인 SEO를 잘 적용한다고 해도 검색 순위에는 다른 요인이 워낙 많이 작용하므로 방문자 수는 이런 부분에 크게 영향이 없어 보이기도 합니다.
다만 그럼에도 이 이야기는 일반론을 전달드리는 부분이고 적어도 구글 서칭의 경우에는 영향을 주는 것으로 판단됩니다.
제가 제시 드릴 직접적인 증거는 없으나 제 경우에 블로그에 부착된 애드센스의 수익이 모바일 뷰와 폰트 사이즈에 신경을 쓰고 개선을 한 시점부터 분명 더 증가하기는 했습니다. (자신의 사이트가 모바일에 적합한지는 구글 서치 콘솔에 블로그를 등록하고 2, 3일이 지나면 모바일에 적합하지 않은 페이지는 개별 포스트별로 모바일 적합도가 낮다는 경고를 확인할 수 있습니다.)
전체 900여개 페이지 중 52개 페이지가 모바일 부적합 판정
구글 서치 콘솔의 가이드에는 이와 같이 명확하게 작은 폰트 사이즈도 모바일 부적합 페이지에 해당 된다고 가이드 합니다.
한국에서 절대적인 점유율을 가진 네이버 검색도 그러리라고 짐작하지만 대부분의 검색엔진은 블로그 글의 노출 순위를 결정할 때 이른바 블로그 포스트에 진입한 후 머무르는 시간인 이탈 시간과 다른 글을 더 읽는지 또는 바로 이탈하는지에 많은 관심을 기울입니다.
가뜩이나 글보다는 사진만 본다는 디지털 텍스트 난독의 시대에 방문한 블로그의 폰트가 색상도 희미하고 크기도 작아서 잘 보이지 않고 눈이 피로하다도 느낀다면 방문자가 바로 이탈을 하는 경우가 빈번할 것은 분명합니다.
우리는 이런 부분을 텍스트를 읽히는 것을 지상의 과제로 삼는 다른 매체의 사례들로도 유추해 볼 수 있습니다. 네이버 뉴스나 언론사의 뉴스 페이지를 보면 대부분의 경우 예상했던 것보다 큰 폰트 사이즈를 가지고 있습니다.
이런 매체들은 대부분 텍스트를 웹에서 읽을 때 가장 편안한, 가독성 높은 레이아웃을 유지하는데 많은 노력을 기울이기에 폰트와 레이아웃만은 참고할만합니다.
예시 이미지는 동아 일보의 모바일 기사 화면 이지만, 각 페이지를 확인해 보면 네이버 뉴스의 폰트 사이즈가 가장 적절해 보입니다
이러한 매체들의 기사 페이지들의 폰트는 대개 2개의 공통점을 가지고 있습니다. 폰트가 너무 작지 않고 적절하게 읽기 좋은 사이즈를 유지한다는 것과 폰트 색상을 완전 BLACK(rgb #000000 이 아닌 회색 계열로 사용한다는 점입니다.
혹 자신의 블로그를 모바일로 볼 때 해당 매체들 보다 폰트 사이즈가 작다면 적어도 해당 사이즈 정도로 확대하는 것을 한번 고려해 보시기 바랍니다. 콘텐츠의 기본 폰트 색상은 개인적으로는 rgb #353535, #212121이나 #141414 정도의 짙은 회색 계열을 추천드립니다.
주의할 것은 너무 연한 회색은 바탕색이 밝은 계열이면 글을 인식하기 어려울 수도 있습니다. 개인적인 생각으로는 기본 스킨의 폰트 색상은 PC에서는 괜찮은데 모바일에서 볼 때는 좀 연합니다.(아이폰 기준)
주제인 폰트 사이즈 이야기로 돌아와서 그렇다면 이번에 배포된 신규 티스토리 반응형 스킨에서 폰트를 어떻게 조정하면 좋을까요?
최근에 제 블로그는 티스토리에서 제공한 신규 스킨 중 poster 스킨으로 스킨을 변경하였습니다.
티스토리 블로그 스킨 교체, Poster 스킨 일부 수정
일반적으로 신규 스킨의 CSS 파일의 body 항목에 지정된 font-size의 em 단위를 수정해 늘리게 되는데 문제는 모바일에서 보기 좋게 맞추면 PC에서 보는 폰트가 너무 커지고 PC에 적절한 사이즈를 맞추면 모바일에서 보기에 너무 작아집니다.
티스토리 Poster 스킨에서 디바이스별 폰트 사이즈 설정
이 문제는 CSS의 '@media screen' 부분을 일부 수정하여 해결할 수 있습니다. 이 부분은 꼭 Poster 스킨이 아니라도 이번에 발표된 신규 반응형 스킨은 모두 유사할 것이라 생각됩니다.
* 단 이방법은 본문내에 대표적으로 <SPAN> 태그와 같이 강제로 FONT의 속성을 주지 않은 경우에만 해당 됩니다.
제 경우에는 PC 화면에서도 약간 큰 폰트를 선호해서(워낙 장문을 주르륵 붙여 쓰는 쓰기 습관 때문에... 이걸 조금이나마 보기 좋으시라고) 디폴트인 0.9375 대신 1.08em으로 올렸습니다, ('entry-count p'를 스킨 편집창에서 찾기로 찾으시면 됩니다.)
.entry-content p { /* 본문 폰트 수정 */
margin-bottom: 24px;
/*font-size: 0.9375em;*/ /* 스킨 디폴트 폰트 사이즈 */
font-size: 1.08em;
line-height: 1.6;
color: #141414;
}
기본 스킨의 디폴트에는 모바일의 경우에 별도로 폰트를 지정하지 않았지만 위의 사항을 복사해서 넣어줄 수 있습니다.
@media screen으로 모바일 화면 설정을 찾습니다.
해당 문구의 의미는 가로폭이 767px 보다 작은 화면일 때, 즉 모바일 디바이스로 화면을 볼 때입니다.
/* Media Screen - Mobie */
@media screen and (max-width:767px) {
해당 @media의 아래 { } 이에적당한 위치에 다음과 같이 모바일에서 사용할 폰트 사이즈를 고쳐서 넣으면 됩니다. 제 경우에는 약간 크게 1.206 정도로 설정하였습니다. 너무 큰 폰트가 싫으시다면 1.12이나 1.15 이하의 값 정도를 추천드립니다.
.entry-content p { /* 모바일 본문 폰트 수정 */
margin-bottom: 24px;
font-size: 1.206em;
line-height: 1.6;
color: #141414;
}
마우스 우 클릭 복사가 막혀 있어 복사해서 적용하실 분을 위해 txt 파일을 첨부합니다.
아래는 디폴트 사이즈 일 때의 모바일의 폰트 사이즈 화면 예시 입니다. 폰트의 색상은 원래는 연회색인데 조금 짙은 회색으로 기 변경한 상태입니다.
폰트를 확대한 후의 스크린샷입니다.
위와 같이 설정을 해 주면 PC 화면에서는 1.08em 사이즈가 적용되며 모바일이면 1.206em 폰트 사이즈가 적용 되어 각각의 환경에서 적당한 사이즈의 폰트 사이즈를 적용 할 수 있습니다.
explorer 폰트 문제, 나눔 바른고딕 폰트 적용
이렇게 적용한 후 explore에서 보면 신규 스킨의 Noto Sans Kr 폰트가 제대로 적용되지 않는 경우가 종종 보입니다. woff 형태 웹 폰트는 explorer 10부터는 지원을 한다고 알고 있었는데 제 explorer은 버전이 11인데도 뭔가 제대로 표시가 되지 않습니다.
사파리, 크롬, 파이어폭스 모두 해당 폰트를 표현해 주는데 유독 explorer만 들쭉날쭉 다른 폰트가 표시됩니다.
* 추가 확인해 보니 최신의 WOFF2 형식은 엣지 14 부터 지원한다고 합니다. explorer에 표시가 되지 않는게 정상인것 같습니다.
이 문제는 2가지로 해결할 수 있는데 기존의 Noto Sans Kr 웹폰트로 import된 css 대신,
"@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&subset=korean');"
를 추가하면 됩니다.
적어도 explorer에서는 동일한 폰트가 출력되는데 기존 'Noto Sans Kr' 과 미묘하게 다른 폰트 형태로 모든 종류의 브라우저에서 모양이 바뀝니다.
그래서 대안으로 explorer에서만 사용할 폰트를 찾아보았는데 나눔 바른고딕 폰트가 'Noto Sans Kr' 폰트와 모양이 가장 비슷했습니다. 기본 폰트가 적용되지 않을때는 나눔 바른고딕 폰트를 적용되게 했습니다.
링크 : 나눔 바른고딕 웹폰트 적용
링크 : 나눔 바른고딕 eot
이것도 두 가지 방식이 있는데 저는 구 버전 explorer를 고려하여 eot를 직접 블로그에 업로드하는 방식을 적용하였습니다. 나눔 바른고딕 설치 파일(eot)은 해당 링크한 블로그 두번째에서 다운로드할 수 있습니다.
다만 저는 전체 폰트를 나눔 바른고딕으로는 변경할 마음이 없어 css 파일을 만들어 @import 방식으로 로 처리하였습니다.
NanumBarunGothic1.css 파일
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 400;
src: url(./NanumBarunGothic.eot);
src: local('Nanum Barun Gothic'),
local('NanumBarunGothic'),
url(./NanumBarunGothic.eot?#iefix) format('embedded-opentype'),
url(./NanumBarunGothic.woff2) format('woff2'),
url(./NanumBarunGothic.woff) format('woff'),
url(./NanumBarunGothic.ttf) format('truetype');
}
필요하시다면 아래 파일을 다운받아 적용하시면 됩니다.
그리고 티스토리 CSS 편집에서 서두에 다음의 css 파일의 경로를 추가합니다.
@import url('./images/nanumbarungothic1.css');
최종적으로 font-fmaily를 찾아서 'Nanum Barun Gothic' 을 'Noto Sans Kr' 다음에 추가해 주었습니다. 이러면 explorer가 'Noto Sans Kr' 폰트를 찾지 못한 경우 자동적으로 나눔 바른 고딕으로 표시하게 됩니다.
body {
font-weight: 400;
font-family: 'Noto Sans KR', 'Nanum Barun Gothic', 'Nanum Gothic Coding', 'Nanum Gothic', 'Malgun Gothic', dotum, sans-serif; /*나눔고딕 추가*/
font-size: 1em;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}....
input, select, textarea, button {
font-family: 'Noto Sans KR', 'Nanum Barun Gothic', 'Nanum Gothic Coding', 'Nanum Gothic', 'Malgun Gothic', dotum, sans-serif; /*나눔고딕 추가*/
font-size: 100%;
border-radius: 0;
}
이 폰트 사이즈 및 폰트 교체 과정은 어떤 분에게는 굉장히 쉽고 CSS에 지식이 없으면 어려울 수도 있습니다. 해당 글을 포스팅하는 이유는 꼭 이런 부분이 필요한 분이 있으실듯해서 입니다.
다만 일부의 지인들 중에 이런 부분을 너무 어려워하거나 스트레스를 받는 분들고 있었습니다. 솔직히 덧 붙이자면 블로그에서 가장 중요한 것은 꾸미는 스킨도 아니고 겉보기에 좋은것도 아닙니다. 역시 가장 중요한 핵심은 내용, 바로 콘텐츠 입니다.
이런 내용은 저처럼 뭔가 눈에 보이는 거슬리는 걸 도저히 참지 못하는 일종의 환자(?)를 위한 포스팅입니다.
뭐, SEO 최적화에서도 가장 중시하고 다른 것에 우선시하는 것은 역시 콘텐츠이니 이런 부분을 지나치게 걱정할 필요는 없다는 말씀을 드리고 싶습니다.
