목차
블로그를 시작한 지 한 달이 안 된 블린이에게는 하고 싶은 것들도 많고 그에 비해 모르는 것들도 많다. 처음 블로그를 시작하려고 티스토리에 가입을 하고 한 달 동안 어떤 스킨을 쓸지 스킨 적용만 하고 맘에 드는 타입의 블로그에 방문해서 어떻게 꾸몄을까만 염탐했다. 핑크팬더의 블로그 글쓰기에 대한 '무조건 써라'는 조언은 이미 무색해진 지 오래다. 막상 포스팅을 하니깐 스킨의 형태는 의미 없었고, 누군가 방문했을 때를 대비해 깔끔한 것을 유지하도록 되더라.
1. 폰트에 대한 생각
스킨을 내 집의 인테리어라면 폰트는 음식에 들어가는 향신료라 할 수 있겠다. 폰트는 맛있는 음식(글 내용)을 더욱 맛깔스럽게 해주는 역할을 해준다. 회사에서는 범용의 폰트나 회사에서 권장하는 폰트를 사용하는 것이 일반적이다. 보고자료에 필기체를 쓰지 않는 것처럼 말이다. 블로그에서는 나만의 톤을 찾아야 한다. 그래서 폰트는 나의 톤과 비슷한 것을 골라야 한다. 이모티콘의 글자들도 그 캐릭터에 어울리는 폰트를 사용한다. 최근에 내가 폰트 사이트들을 들락거리는 이유다. 블로그를 하면서 눈누(noonnu.cc)와 구글폰트(fonts.google.com)를 자주 방문했다.
지금까지 사용한 폰트는 대략적으로 10가지 정도다. 처음에는 내가 쓴 글씨처럼 보고 싶어서 리디북스 페이퍼 프로에 적용 중인 교보손글씨 2019를 사용했다. 교보손글씨가 이북리더기에서는 가독성이 좋았는데 티스토리에서는 너무 작게 보이는 단점이 있었다. 이거 저거 적용해 보다가 결국 웰컴체 Regular를 선택하게 됐다. 블로그 타이틀에서 사용한 폰트는 쿠키런 Regular고 본문에 사용하기도 좋았으나, 모니터의 해상도 문제로 작게 보이면 깨지는 현상이 있었다. 폰트는 결국 자신이 맘에 들 때까지 계속적으로 변경하면 확인해 보면 된다.
최종 폰트를 선정하기까지 꽤 오랜 시간과 결정에 대한 고민이 많았다. 그러면서 티스토리 스킨 편집의 CSS도 건드리게 되었다. 어떨 때는 잘 변경이 되고 어떤 경우에는 기존에 쓴 글들은 반영이 안 되는 이슈가 생겼다. 이를 정리해 보고자 한다.
2. 기존 폰트 변경 방법
지금까지 내가 알아낸 폰트변경방식은 총 3가지다.
1. 에디터 내 편집기를 이용한 폰트 변경
2. CSS code 수정을 통한 폰트 변경 : 전체 반영
3. HTML 수정을 이용한 폰트 변경 : 문단별 반영
2-1. 티스토리 편집기를 이용한 폰트 변경
티스토리 글쓰기에 진입하면 그림 1과 같이 편집기가 위쪽에 항상 따라다닌다. 굳이 사용법을 얘기하지 않아도 블로그를 할 정도의 컴퓨터 실력이면 충분이 클릭해 가면서 그 기능을 확인할 수 있을 것이다.
2-2. CSS를 이용한 Font 변경
웹사이트는 프로그램 코딩을 통해 사용자가 보기 편하게 나타낸다. 폰트나 스킨 변경을 위해 해당 source code를 수정해주는 방식으로 CSS 수정을 진행한다. 다만, CSS는 개별 코드라기보다 전체 스타일을 꾸며주는 역할이라 생각하면 된다. 블로그의 관리모드로 들어가면 왼쪽 카테고리 쪽에 스킨 편집 메뉴를 확인할 수 있다.
스킨편집을 클릭하면 오른쪽 위쪽에 아래와 같은 html 편집을 볼 수 있고, html 편집 버튼을 누르면 프로그램 코드들이 가득한 새로운 화면으로 전환될 것이다.
지금까지 티스토리를 가꿀 때 html에서 뭔가 수정한 경험은 없었다. 단지 CSS만 가지고 논게 끝이었다. CSS를 클릭해서 아래와 같이 web font load 밑에 구글이나 눈누에서 얻은 코드를 붙여 넣기 한다. 눈누에서 얻는 코드는 @font-face{}와 같은 모습이고 구글폰트에서 얻은 코드는 @import url(); 형태로 되어 있다.
이렇게 코드들을 import하고 나서 실제 사용하는 곳(body 구문)에 등록을 해야 한다. 폰트를 import 한 위치에서 조금만 내려가면 body { } 코드를 확인할 수 있으며 그 안에 font-family 구문을 찾을 수 있다. 그 안에는 여러 개의 폰트명들이 있는데, font-family에 등록하는 font명들이 많은 이유는 처음 폰트가 적용이 안 될 경우 두 번째, 두 번째가 안 될 경우 세 번째 것을 쓰겠다는 의미다. import 할 때 실수로 코드 변경이 있어 코드에 오류가 있다면 font-family에 등록하더라도 해당 폰트가 적용이 안된다. 그럴 경우 다음 폰트로 대체한다는 것이다.
여기까지가 일반적으로 폰트를 변경하는 방식이다. 사실 위의 내용들은 타 블로그에서 쉽게 찾아볼 수 있다. 혹시나 하는 마음에서 다시 정리한 것이고 보다 자세한 내용을 확인하고 싶다면 구글에서 티스토리 폰트 변경을 찾아보면 된다.
3. CSS 수정 이후에도 글 보기에서 폰트 변경이 안 되는 문제 해결책
내가 이번 포스팅에서 주력으로 남기고 싶은 내용은 이제부터다. 폰트 변경을 위해 어려운 코드들을 타 사이트에서 업어 와서 내 집 안방에 고이 모셔왔는데, 적용을 누르고 새로고침도 해 보아도 글 읽기를 들어가면 반영이 안 되는 현상이 며칠간 지속되었다. 여러 검색을 통해서 확인을 했음에도 결국 해결하지 못했다. 글 읽기의 source code 보기(Ctrl + Shift + i)를 해서 내가 쓴 글의 html source를 확인해 보았는데 여기서 힌트를 얻어 해결책을 얻을 수 있었다.
원인부터 확인해 보자. 글쓰기 에디터에 들어가서 폰트 타입을 기본서체로 놓고 작성하게 될 경우 내가 CSS에서 설정해 놓은 font가 그대로 적용된다. 이럴 경우에는 문제가 없다. 글쓰기 에디터에 진입해서 폰트 타입을 기본서체가 아닌 다른 것을 설정해서 글을 쓸 경우에는 CSS 폰트 설정이 반영이 안 된다. 그 이유는 글쓰기 모드를 기본모드에 HTML 모드로 변경하면 알 수 있다. 일반적으로 에디터에서 기본모드-기본서체 상태에서 글을 작성하게 되면 아래와 같이 html code가 자동 생성된다. 하지만, 기본서체가 아닌 다른 서체를 선택하게 된다면 그림 8과 같이 변경한 폰트에 대한 코드가 자동으로 추가된다.
이제 모든 의문은 다 풀렸다. 결국 <span style="........'>은 그다음에 나오는 글을 꾸며주는 html 구문인 것이다. 이것이 없다면 CSS에서 세팅한 값으로 전체 반영이 될 것인데, 그림 8과 같이 추가 코드가 생성되었다면 더 이상 CSS 설정이 영향을 미칠 수 없다는 것이다. CSS설정한 폰트 타입을 적용하고 싶다면 html 모드에서 <span style =" "> 부분을 삭제해 주면 된다. 만일 색상과 크기를 변경했다면 font-size와 font-color에 대한 항목도 삭제해야 한다.
댓글