본문으로 바로가기
반응형

디자인에서 폰트가 가지는 힘


보기 좋은 떡이 먹기도 좋은 법이다. 아무리 양질의 컨텐츠로 무장한 블로그라도 디자인적으로 이목을 사로잡지 못하거나 웹 사용성 자체가 떨어지는 경우에는 알맹이에 비해 사람들을 끌어당기는 힘이 부족하게 된다. 나 혼자만을 위한 정리용 블로그가 아닌 이상 블로그에도 디자인적인 요소가 매우 중요하다고 생각한다.

블로그의 디자인을 결정하는 요소들은 일반적인 웹 사이트들과 크게 다르지 않다. 하지만 블로그 특성상 텍스트가 페이지 전체에서 차지하는 비중이 매우 크기 때문에 다른 웹사이트들에 비해 "폰트"가 차지하는 비중이 매우 크다.

디자인 작업이 된 폰트를 사용한 블로그와 기본 폰트를 사용한 블로그는 다른 모든 조건이 동일하다고 할 때에도 엄청난 심미적 차이를 보인다. 또한 가독성이 좋은 폰트는 사람들을 내 블로그에 머물게 하는 것에도 큰 역할을 할 것이다.

특히, 한글 자체가 보기에도 예쁜 문자이기 때문에 잘 디자인된 폰트는 효과를 극대화 시킬 수 있다.

또한 폰트 변경 만으로도 사이트 전체의 분위기를 바꿔 줄 수 있기 때문에, 무언가 변화를 주고자 할 때에 가장 쉬운 노력으로 큰 효과를 볼 수 있는 방법이기도 하다.


아래 두 사진을 비교해 보자.

먼저 그나마 기본폰트 중 웹에서 볼 때 가장 가독성이 좋다는 돋움을 사용한 화면이다. 딱딱한 공대감성 웹 문서 느낌을 팍팍 받을 수 있다.


이번에는 무료 디자인 폰트 중 하나인 노토산스를 적용한 화면이다. 무료 폰트임에도 폰트 변경 만으로도 뭔가 "디자인 된" 효과를 보여줄 수 있다.




티스토리 폰트 변경


티스토리에서 기본적으로 제공하는 한글 폰트는 안타깝게도 고딕, 굴림, 바탕, 돋움, 궁서 다섯 종류이다. 그 밖에 사용하는 스킨마다 기본적으로 폰트를 import 해서 쓰고 있을 것이다. 현재 운영하는 블로그의 폰트를 변경하고 싶다면 먼저 폰트를 하나 골라보자. 구글 폰트 사이트에서 고르거나, 검색을 통해 다른 사람들이 추천하는 폰트를 사용 하는 것도 좋다. 또는 다른 사람의 블로그나 사이트에서 예쁜 마음에 드는 폰트를 발견 했을 때 어떤 폰트를 사용하는지 알아낼 수 있는 방법도 있다. 이는 별도로 포스팅 하려고 한다.


[ 웹 사이트, 다른 블로그 폰트 알아내는 방법 : http://www.leafcats.com/89 ]


1. 마음에 드는 폰트를 찾았으면, Google Fonts 등의 사이트에서 폰트 import 링크를 찾을 수 있을 것이다.

(https://fonts.google.com/earlyaccess 에서 cntr+f 키를 통해 원하는 폰트를 검색 해 보자)

이런 화면을 볼 수 있을 것이다.

위 화면에서 Link와 Example을 복사해서 메모장에 붙여 둔다.


2. 티스토리 HTML/CSS편집 화면에 들어간다.

3. CSS탭을 선택해 가장 위에 Link부분에서 복사한 내용을 그대로 붙여넣는다.

4. CSS탭 내에서 font-family로 검색한다.

5. 검색된 부분 중 대부분 가장 위에 있는 부분에 있는 것이 전체 영역에 대한 기본 처리를 담당하는 코드가 있을 것이다. 그 부분 중 맨 앞 영문 폰트 다음으로 위 사진의 Example에 있는 내용을 붙여넣어준다.


글로 이해가 어렵다면 아래 캡처 화면을 참고하면 쉬울 것이다.



나는 영문 폰트인 Arial 다음에 Noto Sans KR을 넣어 줬다. 만약 영문폰트 변경을 원한다면 맨 앞에 넣어 줘야 한다. css는 기본적으로 맨 앞에 있는 폰트부터 적용하고, 해당 폰트를 적용할 수 없을 경우 다음 폰트로 넘어가는 구조이기 때문이다. 영문폰트는 한글을 지원하지 않기 때문에 맨 앞에 넣어 주고, 한글을 만나면 자동적으로 다음에 위치한 한글 폰트를 적용할 것이다.



폰트 추천


1. Noto Sans KR - 노토산스(본고딕)

지금 이 블로그에도 적용 되어 있는 폰트이다. 구글과 어도비의 합작으로 만들어진 폰트로 어떤 환경에서도 볼만한 디자인을 제공한다. 산돌에서 작업했기 때문에 애플의 산돌 고딕이랑 비슷한 느낌이기도 하다. 여러 가지 굵기를 제공하기 때문에 다양한 상황에서 다양한 방법으로 적용할 수 있을 것이다.

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

font-family: ‘Noto Sans KR’ ;


2. 나눔고딕

기본적으로 고딕체를 변형한 깔끔한 폰트이다. 나는 다 싫고 기본이 최고다 싶은 분들에게 추천한다. 큰 글씨에 조금 안어울리는 느낌이긴 하다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

font–family: ‘Nanum Gothic’ ;


3. 한나체

글자 사이의 간격이 조금 넓어보여서 시원한 느낌을 준다. 사이트 전체의 모든 글자에 적용하기 보다는 적절한 장소에 적용하기에 좋다.

@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);

font-family: ‘Hanna’ ;

반응형

 Other Contents