[카테고리:] 워드프레스

워드프레스 속도 개선 글을 찾아보면 대부분 이미지 압축부터 이야기합니다. 틀린 말은 아닙니다. 그런데 제 사이트는 이미지를 이미 다 최적화한 상태에서도 모바일 성능이 68점이었습니다.

결론부터 말하면, 범인은 이미지가 아니라 외부 스크립트였습니다. 구글 애널리틱스, 허브스팟, 쿠키 동의 배너를 Cloudflare Zaraz로 옮긴 것만으로 점수가 99점이 됐습니다.

이미지는 처음부터 최적화되어 있었습니다

저는 사이트에 올리는 이미지를 항상 Squoosh로 직접 변환합니다. WebP로 바꾸고, 실제로 화면에 표시되는 크기에 맞춰 줄이는 것까지가 업로드 전 기본 작업입니다. 그래서 점수가 낮게 나왔을 때 이미지는 의심 대상에서 빼고 시작할 수 있었습니다.

68점의 원인: 브라우저에서 실행되는 외부 스크립트들

당시 사이트에는 세 가지 외부 도구가 붙어 있었습니다.

• 구글 애널리틱스: 방문자 분석
• 허브스팟: 문의 관리와 마케팅 분석
• Cookiebot: 쿠키 동의 배너

셋 다 웹사이트를 운영하다 보면 자연스럽게 붙이게 되는 도구들입니다. 문제는 이 도구들의 스크립트가 모두 방문자의 브라우저에서 직접 다운로드되고 실행된다는 점입니다. 모바일 기기는 PC보다 처리 능력이 낮아서, 이런 스크립트가 여러 개 겹치면 페이지가 그려지는 동안 브라우저가 다른 일을 하느라 바빠집니다.

PageSpeed 진단 항목에서도 외부 스크립트가 차지하는 비중이 크게 나타났습니다. 쿠키 배너는 페이지가 열리자마자 화면에 떠야 하기 때문에 특히 영향이 컸습니다.

보시면 구글 태그 매니저에 넣은 태그가 리소스를 많이 차지하고 있습니다.

해결: Cloudflare Zaraz로 옮기기

Zaraz는 Cloudflare가 제공하는 외부 도구 관리 서비스입니다. 구글 애널리틱스 같은 도구를 브라우저에서 직접 실행하는 대신, Cloudflare 쪽에서 대신 불러오고 처리해줍니다. 방문자의 브라우저가 해야 할 일이 그만큼 줄어드는 셈입니다. 이를 통해 사용자 경험이 개선되고 SEO 개선 효과가 있습니다.

Cloudflare는 Zaraz가 125개국의 335개 도시에 걸쳐 있는 Cloudflare 글로벌 네트워크에서 실행되 사용자의 위치와 관계없이 최소한의 대기 시간으로 타사 도구를 동적으로 배포한다고 소개하고 있습니다.

제가 옮긴 것은 다음과 같습니다.

1. 구글 애널리틱스와 허브스팟을 Zaraz 도구로 등록했습니다. 그리고 사이트에 직접 넣어두었던 추적 코드는 삭제했습니다. 둘 다 남겨두면 데이터가 중복으로 집계되니 꼭 지워야 합니다.
2. Cookiebot을 Zaraz의 동의 관리 기능으로 바꿨습니다. Zaraz에는 쿠키 동의 배너가 내장되어 있어서, 방문자가 동의한 항목에 따라 애널리틱스와 허브스팟 실행 여부가 자동으로 결정됩니다. 별도의 쿠키 배너 플러그인이 필요 없어졌습니다.
3. 적용 후 데이터가 정상적으로 들어오는지 확인했습니다. 구글 애널리틱스 실시간 보고서와 허브스팟에서 방문 기록이 잡히는지 확인했습니다.

결과: 68점에서 99점으로

항목	이전	이후
성능 점수 (모바일)	68	99
First Contentful Paint	2.4초	1.7초
Largest Contentful Paint	7.4초	1.7초
Total Blocking Time	130ms	0ms
Cumulative Layout Shift	0	0

특히 Total Blocking Time이 0ms가 됐다는 점이 중요합니다. 브라우저가 외부 스크립트를 처리하느라 멈춰 있던 시간이 사라졌다는 뜻입니다. 사이트 디자인이나 콘텐츠는 하나도 바꾸지 않았습니다.

적용 전에 알아둘 점

Zaraz가 모든 사이트에 바로 맞는 해결책은 아닙니다.

• Cloudflare를 써야 합니다. 도메인의 DNS를 Cloudflare로 옮기고, 프록시를 켠 상태여야 Zaraz를 쓸 수 있습니다.
• 모든 도구를 옮길 수 있는 건 아닙니다. Zaraz가 지원하는 도구 목록을 먼저 확인해야 하고, 일부 기능은 직접 설치할 때와 다르게 동작할 수 있습니다.
• 요금제를 확인하세요. 무료로 시작할 수 있지만 사용량에 따라 한도가 있으니, 방문자가 많은 사이트라면 Cloudflare의 최신 요금 정책을 확인하는 게 좋습니다.

정리: 이미지 다음엔 외부 스크립트를 보세요

이미지 최적화는 기본입니다. 하지만 이미지를 다 처리했는데도 점수가 안 오른다면, 사이트에 붙어 있는 외부 도구들을 확인해보세요. 애널리틱스, 마케팅 도구, 쿠키 배너, 채팅 위젯처럼 “하나쯤은 괜찮겠지” 하고 붙인 스크립트들이 생각보다 큰 영향을 주고 있을 수 있습니다.

워드프레스를 최근에 설정했다면 사이트를 디자인하는 방식이 두 가지라는 걸 느꼈을겁니다. 어떤 테마는 사용자 정의(Customizer)로 이동합니다. 실시간 미리보기가 있는 설정 패널이죠. 다른 테마는 사이트 편집기(Site Editor)로 이동해요. 여기서 블록으로 헤더, 푸터, 페이지 레이아웃을 만들수 있습니다.

둘 다 워드프레스 테마이고, 둘 다 멋진 사이트를 만들 수 있어요. 하지만 작동 방식이 많이 달라서 잘못 고르면 시간을 낭비할 수 있어요. 이 글에서는 클래식 테마와 블록 테마의 차이, 각각의 장점, 그리고 선택하는 방법을 설명합니다.

클래식 테마란?

클래식 테마는 PHP 템플릿 파일로 사이트 모습을 결정합니다. index.php, single.php, header.php 같은 파일이 페이지의 각 부분을 제어합니다. PHP는 워드프레스가 실행되는 프로그래밍 언어입니다.

클래식 테마에는 다음 도구가 함께 제공됩니다.

• 사용자 정의: 색상, 글꼴, 로고, 메뉴를 실시간 미리보기와 함께 바꾸는 패널입니다.
• 위젯: 사이드바와 푸터에 배치하는 작은 콘텐츠 상자입니다.
• 메뉴: 내비게이션을 만드는 별도 화면입니다.
• 테마 파일 편집기: 대시보드에서 테마 코드를 직접 수정하는 곳입니다.

워드프레스는 2005년부터 이 방식을 지원해 왔고, 지금도 완전히 지원합니다. 워드프레스를 오래 써 왔다면 익숙한 방식입니다.

블록 테마란?

블록 테마는 사이트 전체를 블록으로 만듭니다. 글을 쓸 때 이미 블록을 쓰고 있어요. 문단, 이미지, 버튼, 컬럼이 모두 블록입니다. 블록 테마에서는 헤더, 푸터, 내비게이션, 페이지 템플릿도 블록으로 만듭니다.

블록 테마는 워드프레스 5.9(2022년)에서 처음 나왔습니다. 테마 파일은 대부분 HTML이고, theme.json 파일에 색상, 글꼴, 간격 같은 전역 설정을 저장합니다. 디자인 작업은 주로 사이트 편집기에서 합니다. 사이트 제목, 태그라인, 로고처럼 블록으로 설정할 수 있는 항목이 많아서 사용자 정의는 기본적으로 숨겨져 있습니다.

클래식 테마 vs 블록 테마: 핵심 차이

	클래식 테마	블록 테마
템플릿 파일	PHP(index.php, single.php)	블록 마크업이 들어간 HTML(templates/index.html)
주요 디자인 도구	사용자 정의하기	사이트 편집기
헤더와 푸터	코드, 사용자 정의하기, 위젯으로 설정	블록으로 편집하는 템플릿 파트
위젯	지원	블록으로 대체
전역 색상과 글꼴	사용자 정의하기 또는 코드	theme.json과 스타일 패널
필수 파일	style.css, index.php	style.css, templates/index.html
필요한 코드	기본 PHP, HTML, CSS	기본 변경에는 거의 필요 없음
적합한 사용자	맞춤 로직이 필요한 개발자	시각적 제어가 필요한 사이트 운영자

구성 요소는 어떻게 연결되나요?

블록 테마는 사이트를 여러 구성 요소로 나눕니다. 각 요소의 역할은 다음과 같습니다.

• 페이지 또는 글: 직접 작성하는 콘텐츠입니다.
• 템플릿: 특정 유형의 콘텐츠에 쓰는 레이아웃이에요. 예를 들어 단일 글, 페이지, 404 오류 페이지가 있습니다.
• 템플릿 파트: 헤더나 푸터처럼 여러 템플릿에서 재사용하는 부분입니다. 한 번만 수정하면 이를 사용하는 모든 템플릿에 반영됩니다.
• 패턴: 콘텐츠에 바로 삽입할 수 있도록 미리 만들어 둔 블록 묶음입니다.
• 블록: 템플릿과 콘텐츠를 채우는 요소입니다.
• 스타일: 색상, 글꼴, 간격이에요. 워드프레스 기본값, 테마의 theme.json 파일, 스타일 패널에서 바꾼 내용에서 와요. 사용자가 바꾼 내용이 가장 우선됩니다.

이 요소들은 함께 작동합니다. 독자가 블로그 글을 열면 워드프레스는 단일 글 템플릿(Single Posts)을 선택합니다. 그다음 헤더와 푸터 파트를 추가하고, 글 내용으로 블록을 채운 뒤, 스타일을 적용합니다. 그래서 글이 사이트의 색상과 글꼴에 맞게 보입니다.

테마의 파일 구조를 간단히 비교하면 다음과 같습니다(간략화한 예시).

클래식 테마

my-classic-theme/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── single.php
├── page.php
└── sidebar.php

블록 테마

my-block-theme/
├── style.css
├── theme.json
├── functions.php
├── templates/
│   ├── index.html
│   ├── single.html
│   └── page.html
├── parts/
│   ├── header.html
│   └── footer.html
├── patterns/
└── styles/

편집 방식 비교

클래식 테마에서는 보통 single.php를 수정하거나 사용자 정의에서 CSS를 추가해서 블로그 글 레이아웃을 바꿉니다. 사용자 정의하기 미리보기로 색상과 글꼴은 쉽게 확인할 수 있습니다. 레이아웃을 바꿀 때는 대개 코드나 플러그인이 필요합니다.

블록 테마에서는 편집기를 열고 단일 글 템플릿을 선택합니다. 헤더를 클릭해서 수정하고, 스타일에서 버튼 스타일을 바꿉니다. 변경 사항은 모든 글에 적용됩니다. 특정 페이지만 다른 레이아웃이 필요하다면 사용자 지정 템플릿을 만든 뒤, 페이지 설정에서 그 템플릿을 선택하면 됩니다.

블록 방식은 더 시각적이에요. 다만 블록, 패턴, 템플릿 파트가 어떻게 맞물리는지 배워야 합니다.

코드, 플러그인, 호환성

클래식 테마는 개발자에게 더 많은 자유를 줘요. PHP로 맞춤 로직을 실행하고, 워드프레스의 훅(hook, 코드를 특정 시점에 끼워 넣는 지점)에 연결해서 거의 무엇이든 만들 수 있어요. 대부분의 기존 플러그인이 이 구조에 맞춰 만들어져서 보통 잘 작동합니다.

블록 테마는 HTML과 JSON을 주로 씁니다. 기본적인 변경에는 코드가 필요 없어요. 하지만 사용자 정의하기 설정을 추가하거나, 위젯 영역에 의존하거나, PHP 템플릿에 연결하는 플러그인은 다르게 작동하거나 아예 작동하지 않을 수 있습니다. 전환하기 전에 호환성을 확인해 보세요.

테마 선택이 SEO에 영향을 줄나요?

기본적으로는 어떤 테마 유형도 순위를 자동으로 올려주지 않습니다. 구글은 콘텐츠 품질, 페이지 속도, 모바일 환경, 명확한 페이지 구조를 보기 때문이에요. 테마는 이런 요소에 영향을 주므로 다음 세 가지에 집중하세요.

• 속도: 홈페이지와 중요한 글 하나를 Google PageSpeed Insights로 테스트해 보세요. 무거운 테마와 플러그인이 많으면 페이지가 느려집니다.
• 제목 구조: 페이지마다 H1 제목은 하나만 쓰세요. 일부 블록 템플릿은 제목을 추가로 넣기도 하니, 전환 후 사이트 제목과 템플릿 제목을 확인해 보세요.
• 모바일 레이아웃: 휴대폰에서 사이트를 미리 보세요. 두 테마 모두 반응형으로 만들 수 있지만, 설정이 잘못되면 레이아웃이 깨질 수 있습니다.

어떤 테마를 선택해야 할까?

블록 테마를 고르면 좋은 경우:

• 새 사이트를 시작하는 경우
• 코드 없이 헤더, 푸터, 레이아웃을 바꾸고 싶은 경우
• 블록 편집기가 익숙한 경우
• 필요한 플러그인이 블록 테마를 지원하는 경우

클래식 테마를 고르면 좋은 경우:

• 맞춤 PHP 로직이나 깊은 테마 훅이 필요한 경우
• 위젯, 사용자 정의하기, 또는 클래식 테마에서만 작동하는 플러그인에 의존하는 경우
• 지금 쓰는 클래식 테마가 잘 작동하고 계속 관리되는 경우. 블록 테마가 새것이라는 이유만으로 바꿀 필요는 없습니다.

일부 테마는 두 방식을 섞습니다. 이런 “하이브리드” 테마는 클래식 PHP 템플릿과 theme.json, 템플릿 파트 같은 블록 기능을 함께 씁니다.

나중에 바꿀 수 있을까?

바꿀 수는 있지만 계획이 필요합니다. 글, 페이지, 댓글은 데이터베이스에 저장되어 있어서 전환 후에도 그대로 남습니다. 이미지는 미디어 라이브러리에 그대로 남아요. 보통 다시 작업해야 하는 부분은 다음과 같습니다.

• 위젯: 블록으로 다시 만들어야 합니다.
• 사용자 정의하기 설정: 스타일 패널에서 다시 설정해야 합니다.
• 맞춤 PHP 템플릿: 블록 템플릿으로 다시 만들어야 합니다.
• 테마 전용 숏코드: 이를 사용한 레이아웃은 새 블록이나 패턴으로 바꿔야 합니다.

전환 전에 사이트를 백업하고, 실제 사이트를 건드리기 전에 스테이징 사이트에서 먼저 테스트해 보세요.

결론

워드프레스 개발자 핸드북은 블록 테마를 “워드프레스 프로젝트의 미래”라고 소개합니다. 그렇다고 클래식 테마가 사라지는 건 아니입니다. 여전히 작동하고 완전히 지원합니다. 결국 선택은 어떻게 작업하고 싶은지에 달려 있습니다. 블록으로 시각적으로 제어하고 싶다면 블록 테마를 고르세요. 코드 수준의 제어가 필요하거나 이미 잘 작동하는 클래식 환경이 있다면 클래식을 유지하세요.

어느 쪽을 고르든, 결정하기 전에 꼭 테스트해 보세요.