순수 개발자로 일할 때는 폰트에 대한 관심이 전혀 없었다. 하지만 블로그를 운영하고, 회사에서도 디자인을 포함해서 직접 풀 스택으로 웹사이트 개발을 담당하다 보니 자연스럽게 웹 디자인에 관심이 생기게 되었다. 웹 디자인에 있어서 가장 적은 노력으로 큰 효과를 볼 수 있는 것이 바로 폰트이다. 거디다가 텍스트가 많은 블로그라면 그 효과는 더 클 것이다.
[ 디자인에서 폰트가 가지는 힘과 티스토리 블로그 폰트 변경 방법 : http://www.leafcats.com/88 ]
티스토리나 워드프레스 같이 직접 HTML과 CSS를 꾸밀 수 있는 블로그를 운영하는 분들의 경우, 자연스럽게 웹 서핑을 하다가 예쁜 폰트를 발견하면 내 블로그에도 적용해 보고 싶은 욕심이 생길 것이다. 하지만 웹 디자이너나 개발자가 아닌 이상 알아낼 방법을 몰라 고민하는 분들이 있을 것이다.
모르면 어렵지만 코딩에 대한 지식이 전혀 없더라도 쉽게 알 수 있는 내용이기 때문에 방법을 소개한다.
구글 크롬을 이용한 방법이지만 인터넷 익스플로러도 비슷한 도구를 제공하기 때문에 유사한 방법으로 확인할 수 있다.(하지만 크롬을 더 추천한다.)
1. 크롬에서 원하는 웹 사이트를 열어둔 상태에서 F12 버튼을 눌러 개발자 도구(Develpoer Tools)를 실행한다.
2. 아래 사진에서 동그라미 친 버튼을 클릭해 엘리먼트 선택 기능을 활성화 한다. 이제 마우스를 크롬에 열려있는 페이지에 가져다 대면 무언가 선택할 수 있게끔 변경된 것을 볼 수 있을 것이다.
3. 개발자도구의 엘리먼트 선택 기능이 활성화된 상태에서, 폰트를 알아내기 원하는 곳을 클릭해 선택한다.
4. 그 상태에서 Developer tools의 오른쪽 Styles탭 영억을 보면 무언가가 쭉 선택된 것을 볼 수 있을 것이다. 아래로 스크롤 하다 보면 아래처럼 font-family를 찾을 수 있을 것이다.
많은 경우, 여러개의 font-family가 있는 것을 볼 수 있을텐데 그 중 활성화된 것은 하나일 것이다. 위 사진의 경우에는 "font-family: Arial, "Noto Sans KR", 돋움, Dotum, AppleGothic, sans-serif" 라고 되어있는 폰트가 적용되어 있는 것을 확인 할 수 있다.
이렇게 하나의 font-family 내부에 여러 개의 폰트가 적용되어 있는 것은 왼쪽에 있는 폰트부터 우선 적용 하라는 의미이다. 가장 왼쪽에 있는 Arial을 적용하고, 그 폰트를 적용할 수 없는 문자나 언어일 경우 다음 폰트로 넘어간다. 보통 영문 전용 폰트를 가장 왼쪽에 두고, 그 다음 한글 폰트를 우선순위에 따라 기술한다.
이렇게 알아낸 폰트를 이제 각자의 웹 사이트나 블로그에 적용하면 될 것이다. 티스토리 블로그에 적용하는 방법은 이 글 위쪽에 명시한 링크를 참조 바란다. 이를 응용해서 내 사이트에서 개발자도구를 열고, 알아낸 폰트를 가상으로 적용해 보는 방법도 가능하다.
사실 폰트를 알아내는 정도는 크롬의 개발자 도구로 알아낼 수 있는 수많은 정보들 중 극히 일부이다. 디자인적인 요소 뿐 아니라 네트워크 정보, 통신에서 주고받는 각종 값들에 대한 정보도 알 수 있다. 거기다 직접 개발자도구 콘솔상에서 스크립팅을 하는 것까지 가능하다. 개발자가 아니라면 굳이 알아야 할 필요는 없지만, 이제 시작하는 단계의 웹 개발자나 디자이너라면 개발자도구 사용법은 선택이 아닌 필수이다.
