웹디자인에서 폰트의 사용은 아주 중요합니다. 글을 읽을때의 가독성과 글자의 생김새로 인한 디자인에 많은 영향을 미치게 되기 때문이죠. 그래서 글을 작성할때 굴림체인지 돋움체인지를 선택을 하게 됩니다. 한글은 완성형의 폰트는 숫자가 많지만 가장 많이 쓰는 글자가 2350개이므로 대부분의 폰트는 이 숫자의 갯수로 만들게 됩니다. 그런데 웹상에 가독성이나 디자인 측면에서 좋은 폰트를 선택하기란 쉽지 않습니다. 왜냐하면 내 컴퓨터에 설치된 폰트가 방문자의 컴퓨터에도 설치되어 있다는 보장이 없기 때문이죠. 내 컴퓨터에 있는 폰트를 CSS 스타일시트에 포함시켜서 굴림체로 글을 작성하더라도 글을 저장하고 나면 설정된 폰트로 보이게 되는데 방문자의 컴퓨터에 설정된 폰트가 없다면 CSS에서 설정한 대로 모든 컴퓨터에 기본적으로 설치된 굴림체와 돋움체로만 보이게 됩니다.
그렇다면 내가 열심히 디자인한 블로그의 웹페이지가 다른 사람에게는 다르게 보인다는 것인데 하나마나한 디자인을 하게 된 것입니다. 요즘은 좋은 폰트들이 무료로 공개되어서 다음체나 나눔체 등 웹폰트로 사용할 수 있는 것이 있습니다. 하지만 이것도 방문자의 컴에 설치되어있어야 가능합니다.
웹폰트는 방문자의 컴퓨터에 폰트가 설치되지 않았어도 웹폰트 사이트에 링크를 걸어놓고 CSS로 인식을 시켜주면 어느 컴퓨터에서나 내가 선택한 폰트로 보이게 되는 아주 훌륭한 역할을 합니다. 또한 그것이 개인적인 웹사이트인 블로그에서는 무료로 사용할 수 있다면 누구든 사용하고 싶어질 것입니다.
이번 글에서는 개인용 블로그에서 무료로 사용할 수 있는 모빌리스의 웹폰트 사용법을 알아봅니다. 영문은 구글 웹폰트를 사용하면 아주 많은 유료폰트를 웹폰트로 무료로 사용이 가능합니다.
우선 HTML이나 CSS에 대해서 전혀 모르시는 분들도 가능하도록 이 두가지에 대해 간단한 설명을 드립니다. 블로그에서 글을 작성하면 워드나 한글에서 문서작성하듯이 글자를 치고 엔터를 치고 스페이스바 누르고 하는 작업이 이루어지지만 티스토리의 경우 우측상단에 있는 HTML글자 옆의 체크박스에 체크하면 HTML코드로 보여지게 됩니다. 웹은 단순한 워드프로세서와는 다르게 어떤 형식을 갖춰야 하는 규칙이 있습니다. 이 규칙을 지키지 않으면 웹에서는 단순한 글자로만 보이게 됩니다. 편하게 글자를 쳐도 블로그 프로그램이 자동으로 HTML코드를 만들어서 CSS까지 웹에 올려주는 것입니다.
HTML은 이러한 단순한 글자를 웹에서 볼 수 있도록 태그라는 것을 사용합니다. 제목에는 h1부터 h6까지의 태그를 사용하고 문장은 <p>라는 태그를 사용해야 제대로 보여집니다. 이런 태그를 사용하지 않아도 보여지지만 글자의 크기나 복잡한 웹페이지 작성을 못하게 됩니다.
예전에는 CSS라는 것이 있었어도 잘 사용하지 않았는데 지금은 웹표준이 강조되기에 필수요소가 되었는데 아직 한국에서는 그 바람이 세지는 않지만 어느정도 CSS가 자리잡아가고 있습니다. 이런 상황인데도 CSS3가 HTML5와 함께 두각을 나타내고 있습니다.
CSS란 HTML코드에 의해 만들어진 글이나 이미지를 모양좋게 배치하는 배치도구입니다. 이것도 HTML과 마찬가지로 이미 스킨파일에서 정해진대로 블로그에 나타나도록 되어있습니다. 티스토리가 다른 블로그와 다른 점은 이 CSS를 조정해서 디자인을 마음대로 바꿀 수 있다는 것입니다.
이제 본론으로 들어가서 웹폰트를 사용하기 위해서 가장먼저해야할 것이 모빌리스 웹사이트를 방문해서 폰트의 링크를 따오는 것입니다.
위 링크를 클릭해서 모빌리스 사이트의 웹폰트 페이지에 보면 아래와 같은 폰트 리스트가 있습니다.
각 폰트의 탭을 선택하면 여러종류의 폰트를 볼 수 있습니다. 여기서는 나눔고딕을 사용해보겠습니다. 1을 클릭하면 코드를 복사할 수 있는 페이지로 이동합니다.
하나의 폰트를 사용하려면 1에서 클릭드래그하여 2까지 온 다음 Ctrl+C키를 눌러 복사합니다.
블로그의 코드를 수정하려면 항상 먼저해야할 것이 현재상태의 스킨 저장입니다. 관리자(Admin)페이지에서 스킨을 선택하고 2의 아이콘을 클릭하면 현재사용중인 스킨이 나옵니다. 스킨저장버튼을 클릭하면 작은 창이 나옵니다. 적당한 이름을 넣거나 오늘날짜를 입력하고 엔터치면 저장됩니다. 나중에 잘못되었을 때 다시 이곳에 와서 5의 보관함탭을 선택하면 저장된 스킨이 있고 적용버튼을 클릭하면 바로 적용됩니다.
모빌리스에서 복사한 것이 아직 클립보드에 저장되어있으므로 스킨페이지로 이동합니다. 1의 HTML/CSS메뉴를 선택하면 코드를 수정할 수 있는 창이 나옵니다. 복사해온 코드는 <head>태그 안에 붙여넣기를 합니다. 코드를 보면 <head>만 보이는데 아래로 내려가면 </head>도 나타납니다. HTML 태그는 이처럼 두개를 한쌍으로 되어있고 그 사이에 코드가 들어갑니다. 위치도 중요한데 다른곳에서 폰트 소스를 불러오는 경우 내 스타일시트인 3의 style.css도 폰트 소스를 인식해야하므로 이 링크소스 이전에 선언되어야합니다. 파란색의 블럭설정한 것이 모빌리스의 폰트 소스이고 그 아래 두번째 줄이 내 스타일시트를 웹페이지에 불러오는 링크입니다. 그러니 아무곳에 삽입하면 안됩니다. 제 경우는 세개의 폰트를 링크했습니다. 하나만 복사해오고 그 아래 다시 붙여넣고 2의 폰트이름만 고치면 됩니다. 이렇게 하면 내 블로그와 모빌리스 폰트저장 서버와 연결이 완료됩니다.
연결은 되었는데 정작 웹페이지에 폰트를 사용하려면 스타일시트에서 지정해 줘야합니다. 이부분이 좀 복잡한데, 왜냐하면 어떤 부분에 어떤 폰트를 사용하겠다고 선언한 곳이 스킨에 따라 다르고 아주 여러곳에 있기 때문입니다.
제 스킨에서 돋움체가 얼마나 사용되고 있는지 알아보기 위해서 Ctrl+F키를 누르면 단어 검색창이 나옵니다. 여기에 dotum이라고 입력하니 18개가 나옵니다. 코드 수정을 한번도 안해본 분이라면 하나라도 수정하는데 아주 주의를 해야하는데 18개면 아주 어려워집니다. 그래서 한꺼번에 고칠 수 있는 방법은 코드 에디터를 사용합니다. 윈도우즈에 기본으로 깔려있는 메모장으로도 가능하지만 전문적인 무료 에디터를 사용하는 것도 좋습니다. 노트패드 플러스플러스로 제경우에는 메모장 대신에 사용합니다. 다운받아 설치하면 한글로 설치됩니다.
우선 스타일시트 창에 클릭한 다음 Ctrl+A키를 누르면 코드 전체가 선택됩니다. Ctrl+C를 누르면 복사가 됩니다.
메모장을 열고 빈곳에 클릭하여 Ctrl+V키를 누르면 복사됩니다. 2의 스크롤바를 올려서 상단에 놓고 상단의 줄에 클릭합니다. 다른 편집기는 알아서 위에서부터 검색하는데 이 메모장은 복사해서 붙여넣기하고 나면 커서가 마지막줄의 맨 끝에 위치하므로 꺼꾸로 검색해야하는 단점이 있습니다.
제경우에 이미 있는 폰트이름에 추가했으니 두개의 폰트이름이 나옵니다.
블로그 스타일시트 창에오면 블럭설정이 되어있다면 그대로 Ctrl+V키를 누르면 되지만 안되어 있다면 Ctrl+A키를 눌러 다시 전체를 블럭설정한 다음 Ctrl+V키를 눌러야 기존 코드와 전체가 교체됩니다. 이제 저장버튼을 누른 다음 블로그 페이지로 가서 폰트가 바뀌었는지 확인합니다.
그렇다면 내가 열심히 디자인한 블로그의 웹페이지가 다른 사람에게는 다르게 보인다는 것인데 하나마나한 디자인을 하게 된 것입니다. 요즘은 좋은 폰트들이 무료로 공개되어서 다음체나 나눔체 등 웹폰트로 사용할 수 있는 것이 있습니다. 하지만 이것도 방문자의 컴에 설치되어있어야 가능합니다.
웹폰트는 방문자의 컴퓨터에 폰트가 설치되지 않았어도 웹폰트 사이트에 링크를 걸어놓고 CSS로 인식을 시켜주면 어느 컴퓨터에서나 내가 선택한 폰트로 보이게 되는 아주 훌륭한 역할을 합니다. 또한 그것이 개인적인 웹사이트인 블로그에서는 무료로 사용할 수 있다면 누구든 사용하고 싶어질 것입니다.
이번 글에서는 개인용 블로그에서 무료로 사용할 수 있는 모빌리스의 웹폰트 사용법을 알아봅니다. 영문은 구글 웹폰트를 사용하면 아주 많은 유료폰트를 웹폰트로 무료로 사용이 가능합니다.
우선 HTML이나 CSS에 대해서 전혀 모르시는 분들도 가능하도록 이 두가지에 대해 간단한 설명을 드립니다. 블로그에서 글을 작성하면 워드나 한글에서 문서작성하듯이 글자를 치고 엔터를 치고 스페이스바 누르고 하는 작업이 이루어지지만 티스토리의 경우 우측상단에 있는 HTML글자 옆의 체크박스에 체크하면 HTML코드로 보여지게 됩니다. 웹은 단순한 워드프로세서와는 다르게 어떤 형식을 갖춰야 하는 규칙이 있습니다. 이 규칙을 지키지 않으면 웹에서는 단순한 글자로만 보이게 됩니다. 편하게 글자를 쳐도 블로그 프로그램이 자동으로 HTML코드를 만들어서 CSS까지 웹에 올려주는 것입니다.
HTML은 이러한 단순한 글자를 웹에서 볼 수 있도록 태그라는 것을 사용합니다. 제목에는 h1부터 h6까지의 태그를 사용하고 문장은 <p>라는 태그를 사용해야 제대로 보여집니다. 이런 태그를 사용하지 않아도 보여지지만 글자의 크기나 복잡한 웹페이지 작성을 못하게 됩니다.
예전에는 CSS라는 것이 있었어도 잘 사용하지 않았는데 지금은 웹표준이 강조되기에 필수요소가 되었는데 아직 한국에서는 그 바람이 세지는 않지만 어느정도 CSS가 자리잡아가고 있습니다. 이런 상황인데도 CSS3가 HTML5와 함께 두각을 나타내고 있습니다.
CSS란 HTML코드에 의해 만들어진 글이나 이미지를 모양좋게 배치하는 배치도구입니다. 이것도 HTML과 마찬가지로 이미 스킨파일에서 정해진대로 블로그에 나타나도록 되어있습니다. 티스토리가 다른 블로그와 다른 점은 이 CSS를 조정해서 디자인을 마음대로 바꿀 수 있다는 것입니다.
이제 본론으로 들어가서 웹폰트를 사용하기 위해서 가장먼저해야할 것이 모빌리스 웹사이트를 방문해서 폰트의 링크를 따오는 것입니다.
위 링크를 클릭해서 모빌리스 사이트의 웹폰트 페이지에 보면 아래와 같은 폰트 리스트가 있습니다.
각 폰트의 탭을 선택하면 여러종류의 폰트를 볼 수 있습니다. 여기서는 나눔고딕을 사용해보겠습니다. 1을 클릭하면 코드를 복사할 수 있는 페이지로 이동합니다.
하나의 폰트를 사용하려면 1에서 클릭드래그하여 2까지 온 다음 Ctrl+C키를 눌러 복사합니다.
블로그의 코드를 수정하려면 항상 먼저해야할 것이 현재상태의 스킨 저장입니다. 관리자(Admin)페이지에서 스킨을 선택하고 2의 아이콘을 클릭하면 현재사용중인 스킨이 나옵니다. 스킨저장버튼을 클릭하면 작은 창이 나옵니다. 적당한 이름을 넣거나 오늘날짜를 입력하고 엔터치면 저장됩니다. 나중에 잘못되었을 때 다시 이곳에 와서 5의 보관함탭을 선택하면 저장된 스킨이 있고 적용버튼을 클릭하면 바로 적용됩니다.
모빌리스에서 복사한 것이 아직 클립보드에 저장되어있으므로 스킨페이지로 이동합니다. 1의 HTML/CSS메뉴를 선택하면 코드를 수정할 수 있는 창이 나옵니다. 복사해온 코드는 <head>태그 안에 붙여넣기를 합니다. 코드를 보면 <head>만 보이는데 아래로 내려가면 </head>도 나타납니다. HTML 태그는 이처럼 두개를 한쌍으로 되어있고 그 사이에 코드가 들어갑니다. 위치도 중요한데 다른곳에서 폰트 소스를 불러오는 경우 내 스타일시트인 3의 style.css도 폰트 소스를 인식해야하므로 이 링크소스 이전에 선언되어야합니다. 파란색의 블럭설정한 것이 모빌리스의 폰트 소스이고 그 아래 두번째 줄이 내 스타일시트를 웹페이지에 불러오는 링크입니다. 그러니 아무곳에 삽입하면 안됩니다. 제 경우는 세개의 폰트를 링크했습니다. 하나만 복사해오고 그 아래 다시 붙여넣고 2의 폰트이름만 고치면 됩니다. 이렇게 하면 내 블로그와 모빌리스 폰트저장 서버와 연결이 완료됩니다.
연결은 되었는데 정작 웹페이지에 폰트를 사용하려면 스타일시트에서 지정해 줘야합니다. 이부분이 좀 복잡한데, 왜냐하면 어떤 부분에 어떤 폰트를 사용하겠다고 선언한 곳이 스킨에 따라 다르고 아주 여러곳에 있기 때문입니다.
제 스킨에서 돋움체가 얼마나 사용되고 있는지 알아보기 위해서 Ctrl+F키를 누르면 단어 검색창이 나옵니다. 여기에 dotum이라고 입력하니 18개가 나옵니다. 코드 수정을 한번도 안해본 분이라면 하나라도 수정하는데 아주 주의를 해야하는데 18개면 아주 어려워집니다. 그래서 한꺼번에 고칠 수 있는 방법은 코드 에디터를 사용합니다. 윈도우즈에 기본으로 깔려있는 메모장으로도 가능하지만 전문적인 무료 에디터를 사용하는 것도 좋습니다. 노트패드 플러스플러스로 제경우에는 메모장 대신에 사용합니다. 다운받아 설치하면 한글로 설치됩니다.
우선 스타일시트 창에 클릭한 다음 Ctrl+A키를 누르면 코드 전체가 선택됩니다. Ctrl+C를 누르면 복사가 됩니다.
메모장을 열고 빈곳에 클릭하여 Ctrl+V키를 누르면 복사됩니다. 2의 스크롤바를 올려서 상단에 놓고 상단의 줄에 클릭합니다. 다른 편집기는 알아서 위에서부터 검색하는데 이 메모장은 복사해서 붙여넣기하고 나면 커서가 마지막줄의 맨 끝에 위치하므로 꺼꾸로 검색해야하는 단점이 있습니다.
Ctrl+F키(노트패드 플러스도 같은 단축키)를 누르면 찾기창이 나옵니다. 검색어를 입력하고 아래로를 선택해서 다음찾기 버튼을 클릭하면 블럭설정된 폰트이름이 나옵니다. 취소버튼을 클릭하여 닫습니다.
다음에는 Ctrl+H키를 누르면 바꾸기 창이 나옵니다. dotum은 블럭설정이 되어있으니 자동입력되어 있습니다. 바꿀내용에 위와같이 나눔고딕웹과 돋움폰트 이름을 같이 입력합니다. 바꾸는게 아니고 나눔고딕을 추가하는 것입니다. 모빌리스 서버가 연결이 안되면 돋움이라도 써야하거든요. 두개의 폰트 사이에 콤마는 반드시 넣어야 합니다. 모두 바꾸기를 클릭하면 전체가 교체됩니다. 노트패드플러스는 몇개가 바뀌었는지 메시지도 나와서 편리합니다.
제경우에 이미 있는 폰트이름에 추가했으니 두개의 폰트이름이 나옵니다.
이제 블로그로 이동복사하기 위해 Ctrl+A키를 눌러 전체를 선택한 다음 Ctrl+C키를 눌러 복사합니다.
블로그 스타일시트 창에오면 블럭설정이 되어있다면 그대로 Ctrl+V키를 누르면 되지만 안되어 있다면 Ctrl+A키를 눌러 다시 전체를 블럭설정한 다음 Ctrl+V키를 눌러야 기존 코드와 전체가 교체됩니다. 이제 저장버튼을 누른 다음 블로그 페이지로 가서 폰트가 바뀌었는지 확인합니다.
더보기
'부트스트랩.CSS.JS/CSS2.1' 카테고리 관련글
