Neve 폰트 사이즈 설정 / 헤딩 (H1~H6) 사이즈 커스터마이즈

Neve 폰트 사이즈 설정

Neve 테마를 설치한 후 여러가지를 손봐야 하는데 가장 먼저 해야 하는 것이 헤딩(H1~H6) 사이즈를 적절하게 수정하는 것 입니다.

필자는 H1~H3를 많이 사용하는데 SEO적으로 보면 H1은 페이지당 1개 H2를 소주제로 많이 사용하고 H3는 H2 아래의 세분화된 항목으로 쓰면 적절합니다. SEO는 항상 적절하게 사용하는게 좋습니다. 너무 과하지도 너무 애매하게도 쓸 필요가 없지요. 물론 헤딩 태그를 세분화해서 쓰는 방식은 좋습니다만, 개인적으로 H4를 넘어가지 않는 것을 추천합니다. 워드프레스 플러그인으로 목차를 생성하면 (easy table of contents) 이 헤딩들을 모아서 자동으로 생성하는데 이것 하나만 체계적으로 관리해도 다른 블로그 보다 SEO점수에서 앞서 나갈 수 있습니다.

티스토리에서도 일부 목차를 관리하는 블로그들이 있긴 하더군요. 근데 티스토리 자체가 십수년째 이런 기본도 관리를 안하니까... 일부러 찾아서 하기도 좀 그렇습니다. 암튼 또 티스토리 깔려고 한 건 아닌데 헤딩 개념을 잡고 있어야 합니다. 가장 기본적인 것이고 문서라는 개념으로 접근하면 어렵지 않습니다.

>> 포스트를 한다 -> 문서를 작성한다

>> 워드프레스에 글을 쓴다 -> 문서를 만든다

요렇게 멘탈을 잡으면 글을 정말 못쓰는 사람도 쉽게 포스팅을 할 수 있습니다. 회사원들은 다 문서를 작성하는 일을 합니다. 간단한 것 부터 복잡한 것 까지 다양한 문서가 있지요. 그런 것을 적용한다고 보면 됩니다. 쉽고 어려운 차이는 문서 작성의 기술이 아니라 그 주제의 난이도에 달려있습니다. 본인의 관심분야라면 아주 쉬울거고 전혀 문외한인 주제라면 어려울 겁니다. 문서작성의 기술 자체는 똑같습니다.

헤딩 설정

그럼 Neve로 헤딩을 설정해봅니다.

워드프레스 대시보드(알림판)에 가서 '외모 -> 사용자정의하기' 로 들어갑니다.

아래는 Neve 무료버전의 사용자정의 메뉴입니다. 글자를 클릭합니다.

Neve의 폰트 설정은 심플하게 되있습니다. 아래에서 일반부터 보겠습니다.

일반 글자는 Body에 적용하는 기본 폰트 설정입니다. Font Family에는 수많은 폰트가 있습니다만. 기본적으로 Default를 쓰면 System 폰트가 적용되어 폰트 로딩 시간과 트래픽을 줄일 수 있습니다. 뭐 폰트는 개인취향이 맞긴한데 워드프레스로 SEO 최적화 블로그를 만들 때는 뭐든 다 줄이는게 그 목적에 맞습니다. 또 한글 전용 폰트의 경우 영어 폰트에 비해 심각하게 용량이 많습니다. (글자수를 생각하면 당연하다. 영어 알파벳은 대소문자 52개 한글조합은 11,172개 ) 그래서 사용자의 로컬 PC의 Default (윈도의 시스템 폰트)를 그대로 사용하는게 좋습니다. 클라우드 서버를 사용하면 전송량에도 유리한 부분이니 Default가 좋지요. 그래도 개인취향이 중요하다고 생각하면 구글 폰트를 등을 로컬에서 호스트하는 방법도 있습니다. (위 이미지의 Local fonts hosting)

Transform은 영어의 대문자 소문자 등 변환하는 기능으로 영어 사용자에겐 편리합니다만, 한글은 해당이 안되겠네요. Weight는 무게, 폰트 굵기입니다. 사이즈는 크기, 시원시원한 크기가 가독성이 좋지요. 줄간격은 보통 1.7 정도 해주면 위 아래가 떨어져서 가독석이 좋습니다. 기본값을 놔두고 웹사이트의 취향에 맞게 적당히 조절합니다.

다음은 헤딩입니다. 헤딩은 H1부터 H6까지 있는데 자주 쓰는 헤딩을 관리해줘야 합니다. 폰트 페밀리를 inherit으로 해놓으면 일반의 Default값을 이어 받습니다. 이거 헤딩마다 폰트 다르게 하는 사람도 있는데(필자도 예전에 그랬다;;;) 하나의 블로그 페이지를 로드하는데 여러개의 폰트를 받아야 한다면 어떨까요? 사이트 로딩 속도가 느려집니다. 구글 폰트같은 CDN 을 사용해도 마찬가지입니다. 때문에 SEO적으로는 하나의 폰트로 통일하는 것이 좋습니다. 뭐 글자에 개성을 좀 넣고 싶을 때도 있는데 그럴 때는 폰트를 추가하는 것 보다 로고 파일을 쓰는게 좋습니다. 로고 파일이 커봐야 10KB 정도인데 폰트는 아무리 작아도 수백KB가 넘기 때문에 로드에 차이가 나겠지요.

여기 설정 항목도 일반과 같습니다. H1쪽으로 갈 수록 폰트 Weight 무겁고 사이즈가 크지요. 줄간격 같은 경우는 헤딩은 일반 글자와 다릅니다. 헤딩은 글자도 크다 보니까 간격이 너무 많이 벌리면 썰렁합니다. 아까 일반 글자가 1.7~1.8 정도면 헤딩은 1.3~1.4 정도가 좋습니다. 포스트를 하나 쌤플로 만든다음 그걸 보면서 눈에 맞게 수정하면 좋아요. 블로그는 다른 사람들이 보는 거지만 일단 쥔장 눈에 마음에 들어야 합니다. 블로그 포스팅의 전문가는 주인장이기 때문에 일단 본인이 계획한 레이아웃, 배치에 잘 맞아야 됩니다. (마음에 들어야 포스팅도 더 자주한다)

그 다음에 블로그에 들어가보면 이거는 그 페이지 설정 관련된 건데요. Blog Archive는 블로그를 홈화면에 설정해놓으면 포스트의 리스트가 나올 때 거기를 설정합니다. Title은 헤딩 태그를 쓰지만 위에 헤딩 설정을 무시하고 별도로 설정하는 겁니다. Exceprt는 요약내용, Meta는 날짜 글쓴이 같은 메타 디스크립션입니다.

Post 는 블로그 단일글(즉 포스트 한개)의 타이틀을 설정합니다. 단일글에 들어가면 헷갈리는게 타이틀이 H1이지만 그 H1이 먹히지 않고 여기 Post 타이틀에서 설정해줘야 합니다. 참고로 [사용자 정의 -> 레이아웃 -> 홈페이지 설정: 최신 글]로 설정했을 때 이야기 입니다.

Post Meta도 마찬가지 그 포스트의 메타 디스크립션이고 Comments Reply Title은 댓글의 타이틀 폰트 설정입니다.