그 동안 운영해오던 블로그를 조금 변화시키기로 마음 먹었다.
이것저것 약간씩 변화를 주려고 하는데 가장 큰 변화는 포스팅 작성 때 부터 <SPAN>으로 고정해서 12pt로 지정하던 글 쓰기 방식을 버리기로 했다. 몇년 동안 이미 그렇게 지정해서 써온 글들을 모두 일일이 바꿀수는 없지만 이 글 이후부터 적용을 하여 폰트 사이즈를 반응형 스킨과 향후 디스플레이 변화에 유동적으로 지정 할 수 있게 할 생각이다.
앞으로는 포스트 내부에서 폰트 사이즈를 지정하지 않고 스킨 HTML 또는 CSS 파일에서 지정하는 방식으로 변화를 주고자 한다.
그 다음은 그 동안 포스트는 존댓말을 사용하는 경어체를 사용해 왔는데 지면상의 글만 길어지고 오히려 표현이 간결하지 않고 늘어진다고 느껴서 이후 글 부터는 평어체를 사용하기로 결정했다. (제 스타일은 경어체가 더 낫다는 주변분의 조언으로 귀 얇은 저는 글 하나 작성 후 경어체로 원복)
이전에도 몇몇 글의 성격에 따라 종종 평어체를 쓰기도 했었는데 이후에도 마찬가지로 일반 글들은 비어체를 쓰고 필요에 따라 경어체를 쓰는 방향으로 변화의 방향을 잡았다.
변화를 주기로 한 사항 중 폰트와 가독성 부분에서는 폰트를 변경하고 사이즈를 비 고정으로 하면서 이 글 이후 글 부터는 가독성을 높이기 위해 PC 화면일때와 모바일 화면일때 폰트 사이즈를 달리 하면 좋겠다는 생각을 하게 되었다.
이미지 출처 – http://switzercreative.com/responsive-web-design-solve-mobile-woes
그 동안 블로그 스킨은 fastboot 반응형 스킨인데 폰트는 고정 12pt로 되어 있다보니 PC 화면에서는 충분해 보였지만 모바일에서는 때때로 글의 양이 많은 경우 갑갑해 보이거나 내가 만족할 만한 가독성 확보가 어려웠다.
그래서 생각한 것이 스킨도 어차피 반응형인데 디스플레이 사이즈에 따라 본문 폰트 사이즈를 변경시키자 였다.
즉, 화면이 큰 PC 모니터일 때는 12pt 폰트 사이즈로 보여주고 모바일 디스플레이 일 때는 14pt로 폰트 사이즈를 키우는 방법이었다.
PC 모니터일때 폰트 사이즈 12pt
복잡하게 구현하기 보다 최대한 단순하고 효율적인 처리를 위해서 JAVA script를 쓰고 단순하게 본문 출력부앞에 화면의 넓이를 구해서 넓이에 따라 <SPAN> 태그로 일괄 폰트 사이즈를 변경하는 방식을 썼다 .즉 window.getWindowCleintWidth()의 값이 768pt 이하이면 모바일 디스플레이로 판단하여 본문의 폰트 사이즈를 14pt로 키우고 화면 넓이가 그 이상이면 폰트 사이즈를 12pt로 지정하게 만들었다.
가로 사이즈가 768 이하의 디스플레이일때 폰트 사이즈 14pt
위의 예시는 PC 모니터에서 브라우저 가로폭을 줄여서 테스트한 화면인데 그러다 보니 실제 모바일 디스플레이에서 보여줄 폰트 사이즈에 비해 상당히 커 보인다.
실제 아이폰X 화면에서 본 폰트 사이즈 14pt
아마도 CSS 와 HTML에 좀 더 해박하신 분들이라면 꼭 이와같은 코드를 쓰지 않고도 더 효율적으로 구현할 방법이 있을 것이지만 개인적으로는 시간을 많이 들이지 않고 아는 한도내에서 빠른 결과를 얻기를 원했다.
비록 이 글 이전 글들은 아예 본문 작성시 <SPAN>으로 폰트 사이즈를 고정해 버렸기 때문에 해당 변경이 적용되지 않겠지만 이 후 작성 글 부터는 PC 모니터와 모바일 디스플레이에서 서로 다른 폰트 사이즈로 포스트 본문을 보여 주게 될 것이다. HTML을 하나하나 고치거나 태그를 찾아서 제거하는 프로그램을 짜서 이전 글 들도 변경을 적용해 볼까 했는데 수정에 들어갈 시간과 노력에 비해 얻는 것은 아마도 자기 만족 뿐일 터라 깔끔하게 포기했다.
더불어 오해를 피하고자 첨언하자면 화면창이 바뀌면 실시간, 동적으로 감지해서 폰트 사이즈를 바꾸는 기능이 아니다. 페이지가 처음 로드시 화면 넓이를 구해서 폰트 사이즈를 결정한다. 개인적으로는 동적으로 폰트 사이즈가 변화하는 기능이 그다지 필요하다고 생각되지 않아서 찾아보거나 애쓰지 않고 알고 있는 아주 기초적이고 단순한 자바 스크립터로만 끝을냈다.
티스토리 본문 표시자인 _article_rep_desc_ 앞뒤로 다음과 같이 코드를 추가했다. 어떤 스킨을 쓰던 해당 부분은 공통이라 CSS애 !important와 같이 폰트 강제 지정이나 본문내 SPAN 태그로 지정하지 않은이상 어떤스킨에서도 동작하리라 생각된다
반응형_본문_폰트_바꾸기.txt
다소 허접한 구현이지만 그래도 디스플에이에 따라 폰트 사이즈가 달리 보이는 기능을 원하는 일부 사람들에게 도움이 되지 않을까 기대해 본다.
더 발전된 방법과 기능을 알고 계신분이 있다면 댓글로 알려주시거나 링크를 달아주시면 이 포스트를 찾은 분들께도 도움이 될 것 같다.
