'생활상식/티스토리블로그 '에 해당되는 글 3건

맑은고딕은 마이크로소프트 윈도우즈7 이상의 운영체제에서 기본으로 설치되있는 폰트입니다. 가독성이 매우 뛰어나며 매우 깔끔하고 우수한 디자인을 자랑하는 폰트죠. 티스토리 블로그를 운영하는 분들이 나눔 고딕과 맑은 고딕을 주로 사용하는데 저는 맑은 고딕이 더 맘에들었답니다. 자 그럼 티스토리 블로그에 맑은 고딕 폰트를 기본으로 설정하는 방법을 알아보도록 할께요

맑은고딕 폰트 예제

티스토리 관리자 메뉴 진입

첫번째로 티스토리 관리자 메뉴로 들어갑니다. ( 티스토리에 로그인된 상태면 블로그 화면에서 키보드 'Q'키를 누르면 관리자 모드로 바로갑니다. ) 왼쪽 메뉴에서 HTML/CSS 편집을 선택합니다.

Ctrl + F : Font

키보드의 Ctrl 키를 누른 상태에서 F를 눌러 웹브라우저의 검색창을 활성화 합니다. 아래의 화면처럼 웹브라우져의 상단에 하나의 바가 더생깁니다. ( 구글 크롬의 경우에는 오른쪽 상단에 작은 검색창이 생깁니다. ) 그리고 찾기 오른쪽 검색칸에 font 라고 입력합니다.

이제 아래의 화면처럼 skin.html의 오른쪽에 있는 화살표를 한번눌러 창을 작게 만들어줍니다. 우리가 수정해야될 부분은 style.css 부분이기때문에 위의 HTML부분은 작게 줄여서 보기 편하게 해주는거죠. 그리고 css 의 오른쪽 화살표도 한번눌러서 style.css 창을 넓게 확장합니다.  

Malgun Gothic , 입력

이제 Style.css화면에서 노란색 형광펜으로 칠한듯하게 표시된 font의 부분을 확인해가면서 글꼴 부분에 Malgun Gothic이라고 입력해줍니다. 아래의 화면을 보면 맨위의 바디 폰트 부분에서 Dotum 등의 글씨체가 표시된 바로 앞에 Malgun Gothic 그리고 콤마 , 를 추가로 입력해줍니다.

다음으로 Ctrl+F를 눌러 불러온 찾기 창을 다시한번 주목하세요 우리가 Font라고 입력한 부분 오른쪽을 보면 '이전', ' 다음' 버튼이 있습니다. 다음 버튼을 눌러서 style.css 부분의  font 나 font-family 부분의 글꼴 리스트 맨앞에 Malgun Gothic을 입력해줍니다.

 

Font 로 검색한 후 아래의 스크린샷처럼 font-family 부분도 변경을 해주셔야합니다. Malgun Gothic , 를 다른글꼴 맨앞부분에 모두 적어주고 '미리보기'를 해보신후 제대로 적용이 안되면 다시한번 font 나 font-family 로 검색하여 모든 글꼴 앞에 Malgun Gothic을 적어주세요

 

기본적으로 폰트패밀리 부분을 보면 위 화면의 나눔고딕은 기록되있지 않습니다. 보통 font-family : dotum , sans-serif ; 등의 글꼴로 표시되있답니다. 어째됬건 폰트패밀리나 폰트로 검색하여 돋움이나 기타 글꼴 앞에 Malgun Gothic , 를 넣어주시면 블로그의 글을 맑은 고딕으로 볼 수 있습니다.

* 이 방법은 시스템에 맑은 고딕이 기본적으로 설치되 있을때 보이는 방식입니다. 윈도우즈7이상의 시스템에서는 기본적으로 설치되는 폰트이기 때문에 잘 표시될꺼에요 혹시 XP를 사용하는 시스템의 경우엔 2013년을 기점으로 MS의 공식지원이 끝난상태의 XP를 윈도우7이나 윈도우8로 업그레이드 할것을 권장합니다. *

* 티스토리의 글쓰기 모드에서는 맑은고딕으로 적용된 상태에도 맑은고딕으로 보이지 않습니다. 미리보기를 항상 눌러서 확인하시거나 혹은 비공개로 저장한 후 블로그에서 제대로 나오나 확인한 후 발행을 해주세요

어떻게 하면 나의 티스토리 블로그 가독성을 높일 수 있을까요?

블로그를 운영하면서 드는 고민 중 하나가 내 블로그의 글들을 모든 사람들이 편하게 읽을 수 있을지 의문이 듭니다. 

사람들이 편안하게 긁을 읽는 조건은 어떤 것들이 있을까요?

무조건 폰트크기를 크게 한다고 해서 잘보이는 것은 아니겠죠.
블로그의 디자인 컨셉에 맞는 폰트선택 줄간격, 글자간격, 폰트색상등 많은 요소들이 맞아 들어가야지 긁을 읽는데

피로감 없이 편안하게 읽을 수 있는 것 같습니다.

티스토리에서 기본적으로 제공하는 글의 줄간격, 글자간격은 조금 가깝에 붙어 있기 때문에 글을 보는데 조금 
불편합니다. 기본값을 왜 이렇게 설정해 놨는지 모르겠군요.

그럼 티스토리 본문 글속성 변경방법을 알려 드리겠습니다.
*제 블로그는 폰트는 맑은고딕,  줄간격 210% , 폰트사이즈 10px, 글자색 #353535, 글자간격은 기본값을 사용하였습니다.

티스토리 관리자 모드에서 HTML/CSS 편집에 들어갑니다.

티스토리폰트 나눔고딕으로 바꾸기

폰트를 변경하는 이유는 미관상 보기에도 좋지만 가독성을 높이기 위한 이유가 가장크다.

가독성이란 글이 얼마나 쉽게 읽히는가 하는 능률의 정도로 블로그를 방문한 사람에게 조금 더 쉽게 이해시키고 읽기 편하게 하기 위한 블로그의 중요한 요소중 하나이다. 요즘은 모바일로 블로그를 많이 보기 때문에 글의 가운데 정렬보다는 양쪽정렬이나 왼쪽정렬로 읽기 쉽게 하는것도 가독성을 높이는 좋은 방법이다.

HTML/CSS의 파일업로드 창으로 들어간 후 다운받은 위 파일을 추가해준다.

그리고 다시 HTML/CSS 수정창으로 들어와 아래쪽의 style.css창의 맨 윗부분에 아래소스를 추가해주면 된다.

미리보기 확인은 필수

일단 여기까지가 내가 적용한 방법(블로그 전체 폰트 변경)인데, 스킨마다 블로그마다 적용이 되는게 있고 안되는게 있는듯하다. 나도 처음 빨간색 나눔고딕부분을 한글로 적었을 때는 폰트가 적용이 안되어서 혹시하고 영문으로 바꾸어 주니 변경이 되었고 어떤분은 Nanum과 Gothic사이를 붙였을 땐 안되다가 띄어쓰기를 하니 적용이 되었다고 한다. 혹시라도 변경이 안된다면 아래 방법으로 해보는것도 좋을듯하다.

나눔고딕 폰트로 변경하는 두번째 방법은 구글 웹폰트 적용하기. 이전블로그에서 사용했던 방법이다.

구글 웹폰트:: http://www.google.com/fonts/earlyaccess 

1. 위 사이트로 들어가 찾기(Ctr+F)로 'Nanum' 혹은 'Korean'으로 검색한다.

2. 먼저 ①소스를 그대로 복사한 다음 내 블로그 관리자로 돌아온다.

3. 관리자 - HTML/CSS 편집 - Style.css 맨 윗부분 @charset "utf-8"; 와 body 사이에 복사한 ① 을 붙인다.

4. Ctr+F(찾기) -  모든 font-family를 찾아서 뒤에 ② Nanum Gothic을 붙여넣기 해준다.

(구글 웹폰트에 나온 예시를 보고 그대로 따라 붙이기 하면 된다.)

그냥 복사해서 붙이기하면 나눔고딕 폰트로 변경 끝.

＊변경된 폰트를 적용했을 때, 기존 포스팅에 다른 폰트설정을 했었다면 폰트가 바뀌지 않는다.

＊블로그 메인화면 폰트는 티에디션으로 메인 설정을 다시 해주면 나눔고딕으로 적용된다