wookss blog

티스토리(TISTORY)에 가독성을 높여라! 티스토리 글씨체 바꾸는 방법! 본문

Blog/블로깅

티스토리(TISTORY)에 가독성을 높여라! 티스토리 글씨체 바꾸는 방법!

wooklab 2013. 10. 9. 01:08
반응형

 

 

 

 티스토리(TISTORY)에 가독성을 높여라! 티스토리 글씨체 바꾸는 방법!

 

- 좋은 블로그의 비결 / 가독성 높이는 방법 / 블로그 글씨체 변경 /  블로그 가독성 / 블로그 나눔고딕 / 티스토리 글씨체 / 티스토리 폰트 / 티스토리 가독성 높이기

 

 

블로그를 시작한지 이제 막 6개월차가 되어가는 시점에서,

글쓴이 나름대로의 노하우를 공개합니다. 많이 부족하겠지만 초보 블로거 분들에겐 도움이 되리라

생각합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 블로그의 가독성?

 

먼저 가독성이란 무엇일까요?

 인쇄물이 얼마나 쉽게 읽히는가 하는 능률의 정도. 활자체, 글자 간격, 행간(行間), 띄어쓰기 따위에 따라 달라진다.

쉽게 말하자면 '블로그의 가독성이 좋다'라는 말은 그만큼 '글 읽기가 쉽다' 라는 말입니다.

 

먼저 이러한 질문들을 예상 해 볼 수 있습니다. <블로그를 하는데 가독성이 필요한가?>

답은 '네' 입니다. 블로그를 운영하는데 있어서 중요한 포인트 중 하나는 얼마나 한 눈에 보기 편한가 입니다.

 

여러 블로그들을 웹서핑을 통해 방문하다 보면 여러가지 글꼴글씨의 크기, 글씨체들을 사용하는 모습을 볼 수 있습니다. 하지만, 글씨체크기, 간격에 따라 깔끔하고 읽기도 쉬운 블로그가 있는 반면에 너무 따닥따닥 붙어있거나, 글씨체가 이쁘다는 이유로 쉽게 보기 힘든 글씨체, 작은 폰트로 컴퓨터 모니터에 얼굴을 바싹 다가가게 하는 블로그가 있습니다. 과연 여러분은 어떤 블로그를 택하시겠습니까?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 블로그의 글씨체를 바꾸는 방법은?

 

글씨체를 바꾸기에 앞서서 가독성 좋은 폰트를 선택하셔야 합니다. 많은 블로거 분들이 추천하는 글씨체는 '네이버-나눔 고딕(free)'과 대부분 컴퓨터에 사용되어지고 있는 '맑은 고딕'이 있습니다.

현재 글쓴이의 블로그의 경우 '맑은 고딕'을 기본으로 사용하고 있으며, '맑은 고딕' 글씨체가 컴퓨터에 없을 시에는 '나눔 고딕' 글씨체를 사용합니다.

 

여기서 이해하기 어려우신 분들도 있을텐데요. PPT를 작성해서 이쁜 글씨체로 만들어 갔는데, 다른 컴퓨터에선 그 글씨체가 없어서 깨지는 경우가 있지요? 마찬가지로 블로그에서도 폰트를 새롭게 설정하여도 그 폰트가 컴퓨터에 설치되어 있지 않은 경우에는 새롭게 설정한 폰트로 보여지지 않습니다.

 

그렇기 때문에 폰트 자체를 티스토리 블로그에 첨부하여 설정하는 방식을 소개 해 드리겠습니다.

이렇게 하는 경우, 글씨체를 컴퓨터에 설치되어 있지 않아도 새로운 글씨체를 사용 할 수 있게 됩니다.

 

 

 

 

 

 

 

자 이제부터 내 블로그의 가독성을 높이기 위하여 가독성 좋은 폰트로 변경하는 방법을 알아보겠습니다. 먼저 글씨체를 다운 받도록 하겠습니다. '맑은 고딕'의 경우 대부분 컴퓨터에 이미 설치되어 있기 때문에 '나눔 고딕' 폰트만 첨부해 드립니다.

나눔 고딕 :  NanumGothic.zip

 

 

 

 

 

 

 

첨부받은 파일을 다운로드 하셨으면, 티스토리 관리자 페이지로 들어 갑니다.

 

관리자 페이지에서 <HTML/CSS 편집>항목을 클릭하여 들어갑니다.

 

 

 

 

 

 

 

 

 

 

 

상단 탭의 <파일업로드>항목을 클릭합니다.

 

 

 

 

 

 

 

 

 

 

 

하단의 <추가>버튼을 클릭하여 앞에서 다운로드 해놓은 첨부파일(압축해제한)을 업로드 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

업로드가 완료되었으면 상단의 <HTML/CSS> 탭으로 이동하여

위와 같은 페이지가 나타나도록 합니다.

 

 

 

 

 

 

 

 

 

 

 

<skin.html>의 부분은 수정 할 필요가 없습니다.

우리가 함께 수정할 부분은 <style.css>부분 입니다. 위의 빨간색으로 ㅁ표시한 부분이 추가된 부분입니다.

 

 

 

새롭게 추가된 부분 1은 앞에서 첨부했던 폰트를 불러와 사용할 수 있도록 설정하는 소스입니다.

(만약 나눔고딕이 아닌 다른 글씨체도 같은 방식으로 폰트를 업로드하신후 위와같은 소스를 삽입하시면 됩니다.)

해당 소스 : 추가소스.txt

 

 

새롭게 추가된 부분 2는 내 블로그의 기본 글씨체를 설정하는 부분입니다. 이곳에 내가 원하는 폰트의 이름을 적어 놓으시면 그 폰트가 기본 글씨체로 설정 됩니다. 폰트설정은 앞에서부터 우선순위가 적용 됩니다. 현재 위의 경우 맨 앞에 <맑은 고딕> 으로 설정해 놓았기 때문에 기본 글씨체는 <맑은 고딕>으로 설정됩니다. 만약 해당 폰트가 컴퓨터가 존재하지 않을 경우 <나눔 고딕>으로 기본 글씨체가 자동 변경됩니다.

(나눔 고딕을 기본으로 설정하길 원하시는 분은 가장 앞에 <나눔 고딕, NanumGothic>을 추가해 놓으셔야 합니다.)

 해당 소스 : 추가소스2.txt 

중요! [body] 안에 <font-family> 부분에 폰트 네임을 삽입하셔야 합니다.

중요! <line-height> 부분을 조절 하여 자신이 보기 좋은 폰트 간격을 설정하셔야 합니다.

 

참고) 맑은 고딕의 경우 따로 폰트를 첨부하지 않았습니다. 대부분의 많은 컴퓨터에 깔려 있는 폰트이기 때문에 그렇게 한 것 입니다.

 

 

위와 같이 소스 삽입이 모두 끝나면 <저장> 버튼을 눌러 마무리 해 주시면 됩니다.

 

 

 

 

 

이상으로 포스팅을 마치겠습니다.

감사합니다.

 

:)

 

 

 

 

 

 

 

반응형