본문으로 바로가기

순수 개발자로 일할 때는 폰트에 대한 관심이 전혀 없었다. 하지만 블로그를 운영하고, 회사에서도 디자인을 포함해서 직접 풀 스택으로 웹사이트 개발을 담당하다 보니 자연스럽게 웹 디자인에 관심이 생기게 되었다. 웹 디자인에 있어서 가장 적은 노력으로 큰 효과를 볼 수 있는 것이 바로 폰트이다. 거디다가 텍스트가 많은 블로그라면 그 효과는 더 클 것이다.


[ 디자인에서 폰트가 가지는 힘과 티스토리 블로그 폰트 변경 방법 : 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을 적용하고, 그 폰트를 적용할 수 없는 문자나 언어일 경우 다음 폰트로 넘어간다. 보통 영문 전용 폰트를 가장 왼쪽에 두고, 그 다음 한글 폰트를 우선순위에 따라 기술한다.


이렇게 알아낸 폰트를 이제 각자의 웹 사이트나 블로그에 적용하면 될 것이다. 티스토리 블로그에 적용하는 방법은 이 글 위쪽에 명시한 링크를 참조 바란다. 이를 응용해서 내 사이트에서 개발자도구를 열고, 알아낸 폰트를 가상으로 적용해 보는 방법도 가능하다.


사실 폰트를 알아내는 정도는 크롬의 개발자 도구로 알아낼 수 있는 수많은 정보들 중 극히 일부이다. 디자인적인 요소 뿐 아니라 네트워크 정보, 통신에서 주고받는 각종 값들에 대한 정보도 알 수 있다. 거기다 직접 개발자도구 콘솔상에서 스크립팅을 하는 것까지 가능하다. 개발자가 아니라면 굳이 알아야 할 필요는 없지만, 이제 시작하는 단계의 웹 개발자나 디자이너라면 개발자도구 사용법은 선택이 아닌 필수이다.

 Other Contents 

댓글을 달아 주세요

  1. 조아하자 2017.03.05 18:34 신고

    아... 저도 한때 웹 프론트엔드 개발로 먹고살았었는데.. ㅠㅠ

    • LeafCat 2017.03.05 19:34 신고

      요즘엔 풀스택으로 OS단부터 서버, DB까지 다 할줄 모르면 먹고살기 힘들더라구요 ㅠㅠ

    • 조아하자 2017.03.05 19:54 신고

      네... 근데 저는 그냥 좀 돈을 못버는 정도가 아니라 4대보험 안되고 근로계약서 없고 월급까지 떼인상태라서요... 물론 회사잘못이지만 진짜 어렵게 들어간 회사고 장애인이라서 다른데 취업하기가 어려웠거든요. 그래서 지금은 공무원공부 합니다. 저같은 장애인에게는 선택의 여지가 별로 없더라구요. 물론 장애때문에 공부하는 데에도 약간의 제약이 있기도 해요.

    • LeafCat 2017.03.05 21:46 신고

      꼭 좋은 결과 있으실 거에요 :) 응원합니다!

티스토리 툴바