워드프레스 설치형 블로그 제작기 – handlove.net

네이버 블로거가 워드프레스 설치형 블로그를 직접 만들었습니다 — handlove.net 제작기



네이버 블로그(blog.naver.com/handlove)를 운영을 꽤 오랜 시간 해왔습니다. 실상 개인 블로그는 개인의 아카이브로 활용하기 위한 목적이 컸습니다.

그런데 욕심이 좀 생겨서요. 구글 애드센스를 노려보고 설치형 블로그를 셋팅하기로 결정했습니다. 호스팅 회사에서 호스팅 계정을 얻은 것이 아니라, 개인 서버에 워드프레스로 설치형 블로그를 처음부터 만들었습니다.

왜 네이버가 아니라 설치형인가.

네이버 블로그는 편합니다. 에디터가 잘 되어 있고, 링크만 붙여도 썸네일이 자동으로 생기며, 이웃이라는 관계망이 이미 갖춰져 있습니다. 그럼에도 설치형을 택한 이유는 세 가지입니다.

첫째, 디자인과 구조를 온전히 제 뜻대로 정하고 싶었습니다. 나름 아무래도, 전 개발자니깐요.

둘째, 네이버의 폐쇄적 환경과 구글 자연어 검색을 비교하고 싶었습니다. 쉽게 구글 검색 유입과, 네이버 검색 유입을 비교하고 싶었습니다.

셋째, 네이버 애드포스트와 구글 애드센스를 비교하고자 합니다.

서버와 워드프레스 설치

호스팅은 개인 서버에 구성했고, PHP는 8.3을 사용했습니다. 제 서버는 이번에 우분투(Ubuntu 22.04)를 OS로 골랐습니다. 아, PHP는 제가 여러 사이트들을 관리하기에 5.X대 부터 8.X대까지 셋팅 가능한 멀티PHP로 준비했습니다. 이렇게 보면 말로는 좋아보이지만, 단일 PHP가 낫습니다. 운영면에서는. 기존 서버는 Linux Redhat Cent OS 였습니다. 여기에 네이버 블로그로 포워딩 해놨던 도메인 handlove.net을 설치형 블로그로 연결하고 워드프레스를 설치하였습니다.

Handlove.net의 변천사

그러고보니 handlove.net 도메인은 고등학교 때는 perl 언어로, CGI 웹프로그래밍 기반 홈페이지 였습니다. 그 다음에는 지금은 찾기도 힘든 Yasu Board로, 그 다음은 Zero Board로, 그 다음에는 GnuBoard로 리뉴얼 과정을 거쳤습니다.

기성 테마 대신, 테마를 직접 만들다

워드프레스에는 완성된 테마가 수없이 많습니다. 그럼에도 직접 만든 이유는, 네이버 블로그의 느낌을 제 방식으로 옮기고 싶었기 때문입니다. 남의 틀에 맞추기보다 제 구조를 세우는 편이 낫다고 판단했습니다.

디자인 방향

디자인은 따뜻한 종이색 배경에 파스텔 톤으로 정리했습니다. 본문은 Pretendard, 히어로의 손글씨는 나눔손글씨 펜을 썼습니다. 세 카테고리에는 각각 고유한 색을 입혔습니다. 투자는 초록, 교육은 파랑, 프로그래머는 모브 계열입니다.

레이아웃 구조

홈은 위에서부터 상단 이미지, 최신글, 그리고 투자·교육·프로그래머 순의 카테고리 섹션으로 흐릅니다.
여기에 네이버처럼 왼쪽에 카테고리 사이드 메뉴를 두어, 어느 페이지에서든 분류를 한눈에 볼 수 있게 했습니다.

폰트와 자체 호스팅

폰트에서 한 번 막혔습니다. 손글씨체가 화면에 나오지 않는 문제였습니다. 원인은 일부 환경에서 구글 폰트 요청이 차단되는 데 있었습니다. 그래서 나눔손글씨 펜 파일을 woff2로 변환해 테마 안에 직접 넣고, 외부 의존 없이 불러오도록 바꿨습니다. 이렇게 자체 호스팅하면 어떤 환경에서도 손글씨가 안정적으로 나옵니다.

네이버의 ‘서로이웃’을 대신할 구독 기능

네이버의 서로이웃, 이웃 새글 알림을 설치형에서 대신할 방법으로 이메일 구독을 택했습니다. MailPoet 플러그인으로 구독 폼을 만들어 사이드바에 붙였고, 새 글이 올라오면 구독자에게 메일로 알릴 수 있게 준비했습니다.

검색 유입과 애드센스를 위한 준비

구글 검색과 애드센스를 염두에 두고 기본기를 갖췄습니다. 소개, 개인정보처리방침, 문의 세 페이지를 만들고, 정책 페이지는 화면 맨 아래 푸터에서 접근할 수 있게 했습니다. 개인정보처리방침에는 광고 쿠키 안내를 반드시 넣었습니다. 카테고리 구조를 세워 글이 분류되게 하고, 이제 실제 콘텐츠를 채우는 일이 남았습니다.

썸네일이 잘리지 않게 — 크롭 안전 영역

설치형 블로그에서 흔히 겪는 문제가 대표 이미지가 목록에서 잘리는 현상입니다. 목록 뷰마다 이미지 비율이 달라서, 핵심 요소를 가장자리에 두면 잘려 나갑니다. 그래서 대표 이미지를 만들 때는 제목 같은 핵심 요소를 늘 화면 중앙, 즉 1:1로 잘라도 살아남는 안전 영역에 배치합니다.

마치며

앞으로 이 집에 투자와 교육과 프로그래밍의 기록을 차곡차곡 쌓겠습니다.

워드프레스 테마파일 공개

제 블로그에 쓰인 이미지는 정읍 구절초 사진입니다. 이 사진을 제외한 테마파일입니다.