윈도 XP 이하 한글 윈도우 운영 체제는 기본 글꼴이 "굴림"이었습니다. 이후에 나온 윈도 비스타나 윈도 7은 기본 글꼴이 "맑은 고딕"으로 바꾸었습니다. 아직도 많은 PC에서 OS를 윈도 XP로 쓰고 있기 때문에 많은 웹페이지에서 글꼴을 "굴림"을 기본으로 하고 있습니다.
웹 페이지에서 "굴림" 글꼴을 사용할 때의 장점은 대부분의 PC에서 제공하기 때문에(맥과 같은 환경에서는 제공하지 않음) 웹 페이지의 내용이 다른 사람의 PC에서도 동일한 글꼴로 보인다는 겁니다. 대신에 글꼴이 미려하지 못하여 웹 페이지를 볼 때 모양이 이쁘지 않다는 단점이 있습니다.
그래서 웹 페이지를 볼 때에는 웹 페이지 설정에서 기본 글꼴을 "맑은 고딕"이나 "나눔고딕"으로 바꾸고, 홈페이지나 블로그에서는 "나눔고딕"이나 "맑은 고딕"으로 웹 페이지의 글꼴을 바꾸고 있습니다.
대부분 아는 내용이겠지만 혹시나 모르는 분들을 위해 간단하게 소개해 드립니다. 방명록에 어느 분이 웹 페이지에서 누구나 다 "맑은 고딕"이나 "나눔고딕"으로 보이게 해 달라고 올리셨는데 이제서야 글을 쓰네요.
내 PC의 IE나 크롬에서 맑은 고딕이나 나눔고딕으로 웹 페이지 보기
웹 페이지는 자기가 만든 것이 아니기 때문에 홈페이지나 블로그 운영자가 지정한 글꼴로 화면에 표시됩니다. 때문에 내가 마음에 들지 않은 글꼴로 화면에 표시되는 페이지들도 있습니다. 특히 네이버 블로그나 카페를 사용하다보면 그런 경우가 많습니다. 글을 쓰거나 댓글을 달 때 자기만의 특성 있는 글꼴로 설정하여 달 수 있는데 모양을 이쁜 것을 많이 선호들 합니다. 그런데 이런 글꼴을 사용하면 모양은 이쁠지 모르지만 읽기가 매우 불편합니다. 어떤 것은 글자 크기까지 더 작게 표현되니 읽기가 매우 고됩니다.
그래서 웹 페이지의 기본 글꼴을 임의로 바꾸어 표시되게 하고 있습니다.
I. IE에서 맑은 고딕이나 나눔고딕으로 웹 페이지 보기
IE에서 적용 방법은 비교적 간단합니다. 인터넷 옵션의 일반 탭을 누르면 하단에 글꼴이 나오는데 글꼴을 눌러 "맑은 고딕"이나 "나눔고딕"과 같은 글꼴로 지정해 주면 됩니다.
그런데 글꼴을 바꾸었다고하여 모든 글꼴이 다 변경되는 것은 아닙니다. 웹 페이지에서 아무 설정도 안한(글꼴을 지정하지 않은) 부분만 기본 글꼴로 변합니다. 임의로 지정한 글꼴은 위의 방법으로 지정해도 지정한 글꼴로 나타납니다.
임의로 지정한 글꼴도 내가 보고 싶은 맑은 고딕이나 나눔고딕으로 나오게하려면 설정을 한 가지 더 해야 합니다.
접근성 단추를 누르면 사용자 서식이 있는데 "웹 페이지에 지정된 글꼴 스타일 무시"를 체크해야 합니다. 웹 폰트 등으로 쓰여진 글꼴 때문에 읽기 불편했다면 여길 체크하면 됩니다. 그러면 어떤 글꼴이 사용되었던지 위의 글꼴에서 지정한 글꼴로 표시됩니다. 단점은 웹 페이지에서 특정한 글꼴에 맞게 홈페이지를 만든 경우 글꼴이 변경되면서 레이아웃이 달라질 수 있습니다.
2. 크롬에서 맑은 고딕이나 나눔고딕 사용하기
크롬에서 맑은 고딕이나 나눔 고딕 사용하는 방법은 별도로 글을 올린 적이 있습니다. 아래 글을 참고하면 됩니다.
구글 크롬에서 모든 글꼴을 내가 원하는 글꼴인 맑은 고딕이나 나눔고딕으로 지정하기
구글 크롬에서 내가 원하는 맑은 고딕이나 나눔고딕 글꼴로 지정하기
티스토리 블로그에서 맑은 고딕이나 나눔고딕으로 나오게 설정하기
위에서 설정한 방법은 내 PC에서만 맑은 고딕이나 나눔고딕으로 나오게하는 방법입니다. 티스토리와 같이 자기 블로그를 운영하는데 다른 사람이 내 블로그를 방문하였을 때 미려하지 않은 굴림 대신에 맑은 고딕이나 나눔고딕으로 표시하고자할 때에는 개인 PC가 아닌 운영하는 웹 페이지 설정을 바꾸어야 합니다.
여기서는 OSNews가 티스토리(Tistory)의 서비스형 블로그이므로 티스토리를 기준으로 설명합니다.
티스토리의 경우에 네이버나 다음 등의 다른 블로그에 비해 변경할 수 있는 항목이 많습니다. 거의 새로 만들듯이 만들 수 있습니다.
티스토리 블로그에서 글꼴은 스타일 파일에서 변경할 수 있습니다. 티스토리에서 글꼴이나 글자 크기, 글자 간격 등은 다른 블로그나 홈페이지처럼 CSS(Casacding Style Sheet)에서 지정할 수 있습니다. 스킨 자체에서 변경할 수 있지만 여기서 지정해야 깔금합니다.
관리자 페이지로 가면 좌측 부분에 HTML/CSS 편집에서 Style.css를 편집하면 됩니다.
방법은 크게 어렵지 않습니다.
Style.css를 보면 다음과 같은 형태로 되어 있습니다. 사용하는 스킨에 따라 달라질 수 있습니다만 거의 비슷합니다.
기본적인 스타일 파일
@charset "utf-8";
/* CSS Document */
body{
margin:0;
background-color: #EEE;
font:13px Dotum, "돋움", Gulim, "굴림", Verdana, Arial, "Trebuchet MS";
color:#3f3f3f;
text-align: center;
}
지금 사용하고 있는 스타일에서 글꼴 설정 관련된 부분은 위와 같습니다.
body{ } 안에 있는 부분이 본문에 관련된 설정을 하는 부분입니다. 파란색으로 된 부분이 글꼴 설정하는 부분입니다. Dotum, "돋움", Gulim, "굴림", Verdana, Arial, "Trebuchet MS"으로 설정되어 있네요.(영문 등 다른 윈도에서 인식하게 영문 이름을 먼저 사용해 2번 반복표현한 것입니다.) 돋움이 있으면 돋움으로 나오고, 없으면 굴림을 사용하고, 굴림도 없으면 Verdana로 사용하게 되어 있네요.
나눔고딕, 맑은 고딕 사용하게 설정하기
@charset "utf-8";
/* CSS Document */
body{
margin:0;
background-color: #EEE;
font:13px NanumGothic, "나눔고딕", "Malgun Gothic", "맑은 고딕", Dotum, "돋움", Gulim, "굴림", Verdana, Arial, "Trebuchet MS";
color:#3f3f3f;
text-align: center;
}
본문을 읽기 편하게 하기 위해서 나눔고딕과 맑은 고딕을 사용하게 하는 방법은 돋움 앞에 나눔고딕과 맑은 고딕을 써 넣어 주면 됩니다. 위에서 빨간 색으로 표시한 것처럼 추가하면 됩니다.
티스토리에서 운영하는 내 블로그를 방문하면 먼저 PC에 있는 글꼴을 체크합니다.
1. 나눔고딕이 있는지 살펴보고 나눔고딕이 있으면 나눔고딕이 나오고
2. 나눔고딕이 없으면 그 다음 맑은 고딕을 찾아 맑은 고딕이 있으면 맑은 고딕이 나옵니다.
3. 맑은 고딕도 없으면 다음 돋움이 나오고..... 형태입니다.
나눔고딕보다 맑은 고딕이 먼저 나오게하려면 글꼴 순서를 바꾸면 됩니다.
누구나 나눔고딕, 맑은 고딕이 나오도록 티스토리에서 웹 폰트 설정하기
위에서 나눔고딕이나 맑은 고딕을 사용해도 어떤 사람은 나눔고딕이나 맑은 고딕이 아닌 돋움체가 나오게 됩니다. 그 이유는 그 분 PC에는 나눔고딕이나 맑은 고딕이 설치되어 있지 않기 때문입니다. 없기 때문에 다른 글꼴로 나오게 되는 것이지요.
없는 PC에서 나오게하려면 웹 폰트를 써야합니다. 웹 폰트는 글꼴(폰트)가 웹 서버에 있어서 내용을 볼 때 웹에서 글꼴을 내려 받아 보게됩니다. 글꼴이 없어 내려 받기 때문에 내려 받는데 약간의 시간이 걸립니다. 글꼴을 통째로 받는게 아니라 사용한 것만 받기 때문에 많이 걸리지는 않습니다.
호스팅을 받는 홈페이지의 경우 트래픽에 제한이 있는데 자기가 쓰는 호스팅 서버에 웹 폰트를 올려놓고 쓰면 트래픽이 많이 나갈 수 있습니다.
구글이나 다른 업체에서 웹폰트를 서비스하고 있습니다. 이걸 이용하면 트래픽도 늘지 않고 서버 자체가 좋기 때문에 속도 차이도 나지 않습니다.
방법도 아주 간단합니다. 여기서는 구글에서 제공하는 웹 폰트를 사용합니다.
티스토리 블로그에서 웹 폰트를 부가적으로 사용하기
@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/* CSS Document */
body{
margin:0;
background-color: #EEE;
font:13px NanumGothic, "나눔고딕", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, "돋움", Gulim, "굴림", Verdana, Arial, "Trebuchet MS";
color:#3f3f3f;
text-align: center;
}
1. 먼저 나눔고딕 웹 폰트를 부가적으로 사용해 보도록 하지요.
구글에서 웹 폰트 서비스를 제공하므로 구글에서 제공하는 나눔고딕을 웹 폰트로 사용할 수 있게 설정합니다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 가 Style.css의 처음 부분에 설정되어 있어야 합니다. /* Css Document */ 앞에 이 내용을 추가해 줍니다.
해당 스타일 시트가 어디에 있는지 선언해 주는 것입니다.
스타일 시트에서 나눔고딕의 글꼴 이름을 Nanum Gothic으로 지정해 두었기 때문에 저렇게 쓴 것입니다. PC에 있는 것에서는 공백이 없는데 공백이 들어간게 차이입니다.
2. 나눔 고딕 글꼴 설정하기
다음과 같이 설정했습니다.
NanumGothic, "나눔고딕", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, "돋움", Gulim, "굴림", Verdana, Arial, "Trebuchet MS";
PC에 나눔고딕이나 맑은 고딕이 설정되어 있으면 PC의 나눔고딕이나 맑은 고딕을 이용해 표시하고 없을 땐 나눔고딕 웹 폰트를 쓰게 합니다.
PC에 있는 걸 쓰니 조금 더 빠르겠으나 어떤 PC에서는 나눔고딕으로, 어떤 곳에서는 맑은 고딕으로 표시가 됩니다.
티스토리 블로그에서 웹 폰트를 주 글꼴로 사용하기
body{
margin:0;
background-color: #EEE;
font:13px "Nanum Gothic", NanumGothic, "나눔고딕", "Malgun Gothic", "맑은 고딕", Dotum, "돋움", Gulim, "굴림", Verdana, Arial, "Trebuchet MS";
color:#3f3f3f;
text-align: center;
}
위에서는 PC의 나눔고딕과 맑은 고딕을 우선 찾았으나 "Nanum Gothic"을 먼저 찾기 때문에 무조건 웹 폰트 나눔고딕이 사용되게 됩니다. 대신 약간 느려질 수는 있겠지요. 뒤에 있는 글꼴들은 굳이 쓰지 않아도 되겠네요.
추가적으로 살펴보면 글자가 13px이네요. 글자를 키우고 싶다면 13보다 더 큰 수를 쓰면 됩니다.
구글에서 제공하는 보다 많은 웹 폰트 : http://www.google.com/webfonts/
추가적으로 http://www.google.com/webfonts/earlyaccess 로 가면 다음과 같은 웹 폰트를 사용할 수 있습니다. Nanum Gothic (Korean)이 위에서 설명한 웹 폰트입니다.
Nanum Brush Script (Korean)
Nanum Gothic (Korean)
Nanum Gothic Coding (Korean)
Nanum Myeongjo (Korean)
Nanum Myeongjo (Korean)
구글 이외에 모빌리스라는 곳에서 웹 폰트 서비스를 하고 있습니다. (http://api.mobilis.co.kr/webfonts/)
나눔고딕뿐만 아니라 나눔명조, 나눔 손글씨 붓, 나눔 손글씨 펜 등 나눔 글꼴
태나무 등의 수십 가지 태 글꼴, 혜움 글꼴, 렉시글꼴, 은글꼴, 백묵글꼴, 은진글꼴, 드로이드 등의 글꼴도 제공합니다.
디자인 용도로 사용하려면 모빌리스 웹폰트 서비스를 이용하는 것도 좋습니다.
설명은 글꼴을 선택하면 해당 글꼴을 적용하는 방법이 자세히 나옵니다.
