워드프레스 필수 플러그인 세팅 : 백업, 최적화, SEO, 통계 | 블로그 구축 #06

안녕하세요, 생산적 회계사(PROCPA) 입니다.

이번 글은 블로그 마지막 편입니다. 잘 지어진 건물도 관리가 되지 않으면 금방 노후화되듯, 워드프레스 블로그 역시 지속적인 관리와 최적화가 필요합니다. 특히 ‘플러그인’ 은 워드프레스의 강력한 무기이자 양날의 검입니다. 너무 많으면 사이트가 무거워지고, 없으면 기능이 부족해집니다.

오늘은 제가 직접 블로그를 구축하며 정립한 플러그인 최소화 전략과 블로그를 안정적으로 운영하기 위한 최적화 및 관리 노하우를 공유하려 합니다.

1. 9단계 : 플러그인 세팅

워드프레스를 처음 접하면 수많은 플러그인의 유혹에 빠지기 쉽습니다. “이 기능도 있으면 좋겠는데?” 하고 하나둘 설치하다 보면 어느새 사이트 속도는 느려지고 관리는 어려워집니다. 저는 ‘반드시 필요한 것만 설치한다’ 는 원칙을 세웠습니다.

1.1. 플러그인이 블로그 성능에 미치는 영향

플러그인은 편리하지만, 각각의 플러그인은 서버 리소스를 잡아먹고 추가적인 CSS나 자바스크립트 파일을 로드합니다. 이는 곧 사이트 로딩 속도 저하로 이어집니다.

실제로 GTmetrix나 PageSpeed Insights로 속도를 측정해보면, 무거운 플러그인 하나가 점수를 깎아먹는 주범인 경우가 많습니다. 저는 functions.php로 구현 가능한 기능은 과감히 플러그인을 삭제하고 코드로 대체하는 방식을 택했습니다.

1.2. 실전 필수 플러그인 4선

저는 현재 다음 4가지 플러그인을 핵심으로 운영하고 있습니다.

1.2.1. 백업: UpdraftPlus

아무리 좋은 서버라도 사고는 예고 없이 찾아옵니다. 직접 코드를 수정하다가 사이트를 먹통으로 한 번 만들어본 이후에 백업의 중요성을 새삼 다시 실감했습니다.

UpdraftPlus는 설치 후 구글 드라이브(Google Drive)와 연동해두면 매일/매주 자동으로 백업본을 클라우드에 저장해줍니다. 문제가 생겼을 때 버튼 한 번으로 복원할 수 있다는 심리적 안정감은 무엇과도 바꿀 수 없습니다.

1.2.2. 최적화: LiteSpeed Cache

제가 사용하는 Cafe24 호스팅은 LiteSpeed 웹 서버를 지원합니다. 이와 찰떡궁합인 플러그인이 바로 LiteSpeed Cache입니다.

복잡한 설정 없이 ‘Preset’ 기능을 통해 최적화 수준을 선택할 수 있습니다. CSS/JS Minify(압축) 설정과 이미지 최적화, 그리고 Lazy Load(지연 로딩) 기능만 켜둬도 사이트 속도가 체감할 수 있을 정도로 빨라집니다.

1.2.3. SEO: Rank Math SEO

과거엔 Yoast SEO를 많이 썼지만, 요즘 대세는 Rank Math입니다. 가볍고 직관적입니다.

포스트를 작성할 때마다 우측 사이드바에서 SEO 점수를 실시간으로 확인하고, 어떤 부분을 개선해야 할지 가이드를 줍니다. 구글 서치 콘솔과 연동하여 색인 생성 요청을 자동화할 수 있는 점도 큰 장점입니다.

1.2.4. 통계: Site Kit by Google

구글이 직접 만든 공식 플러그인입니다. 복잡한 코드 삽입 없이 로그인만으로 Google Analytics 4와 Search Console, AdSense까지 한 번에 연동됩니다.

단, 무겁다는 평이 있어 대안으로 Koko Analytics 같은 경량 플러그인도 고려해볼 만합니다. 저는 편의성을 위해 당분간 Site Kit을 유지하기로 했습니다.

1.3. 플러그인 최소화 전략

저의 플러그인 관리 원칙은 간단합니다.

1. 테마 기능 우선: 사용 중인 테마(저의 경우 직접 구축했지만)나 워드프레스 코어 기능으로 해결 가능한지 먼저 확인합니다.
2. 코드 대체: 간단한 기능(예: 구글 폰트 로드, 특정 스크립트 삽입)은 functions.php에 코드로 작성합니다.
3. 정기 점검: 매달 1일, 사용하지 않는 플러그인은 비활성화 후 삭제합니다.

2. 10단계 : 최적화

구축이 끝났다고 끝이 아닙니다. PC에서는 완벽해 보여도 모바일에서는 디자인이 꼬이는 경우도 많이 발생하고 그 외에도 성능 최적화를 위한 작업이 필요했습니다.

2.1. 반응형 디자인 최적화

요즘 트래픽의 절반 이상은 모바일에서 발생합니다. Chrome 개발자 도구(F12)의 모바일 뷰를 켜고 페이지 하나하나를 점검했습니다.

특히 Tailwind CSS의 Breakpoint(md:, lg:)를 활용하여 모바일에서는 사이드바를 숨기고 햄버거 메뉴를 노출하는 등의 조정이 필요했습니다. 폰트 크기 역시 PC에선 적당해도 모바일에선 너무 클 수 있어, text-base md:text-lg 와 같이 디테일하게 조정했습니다.

2.2. Tailwind CSS 로컬 빌드 전환

초기 개발 단계에서는 편의성을 위해 Tailwind CSS의 Play CDN을 사용했습니다. <script> 태그 한 줄이면 복잡한 설정 없이 바로 디자인을 입힐 수 있어 매력적이었죠. 하지만 이는 어디까지나 ‘개발용’입니다.
CDN 방식은 방문자가 페이지를 열 때마다 전체 CSS 엔진을 다운로드하고 브라우저가 이를 해석해야 하므로, 특히 모바일 환경에서 치명적인 속도 저하를 일으킵니다.

저는 안정화 단계에서 이를 로컬 빌드 방식으로 전면 교체했습니다.

1. NPM 프로젝트 설정: 로컬 PC에 Node.js 환경을 구성하고 npm install -D tailwindcss로 라이브러리를 설치했습니다.
2. 빌드 파이프라인 구축: npx tailwindcss -i ./src/input.css -o ./style.css --watch 명령어를 통해, 제가 작성한 PHP 파일들을 스캔하고 **’실제로 사용된 클래스’**만 쏙쏙 뽑아내어 초경량 CSS 파일을 만들도록 했습니다.
3. 워드프레스 연동: 기존 CDN 스크립트를 제거하고, functions.php에서 빌드된 style.css 파일을 정식으로 로드(wp_enqueue_style)하도록 변경했습니다.

3. 마치며

장장 6편에 걸친 워드프레스 구축기가 마무리되었습니다.

맨땅에 헤딩하듯 시작했지만, AI(Antigravity, Gemini) 라는 든든한 파트너 덕분에 개발자가 아닌 회계사임에도 저만의 블로그를 운영할 수 있게 되었습니다.

앞으로 블로그를 운영하며 공유할 만한 새로운 인사이트나 팁이 생기면 지속적으로 업데이트하도록 하겠습니다.

그동안 긴 연재글을 읽어주셔서 진심으로 감사드리며, 저의 시행착오가 담긴 이 기록이 나만의 블로그를 구축하려는 분들께 조금이나마 도움이 되기를 바랍니다.