엘리멘터리로 워드프레스 페이지 만들려면 이렇게 시작하세요
얼마 전 지인 사이트를 봐줬는데, 메인 페이지 하나 고치려고 엘리멘터리 위젯을 40개 넘게 쌓아둔 상태였습니다. 화면은 그럴듯했지만 모바일에서 밀리고, 관리자 화면은 저장 버튼 한 번 누를 때마다 10초씩 멈췄습니다. 엘리멘터리는 잘 쓰면 빠르게 페이지를 만들 수 있지만, 아무 생각 없이 만지면 테마보다 더 무거운 구조가 됩니다.
저는 워드프레스 운영을 오래 하면서 페이지 빌더를 완전히 피하라고 말하진 않습니다. 클라이언트가 직접 문구를 바꾸고, 랜딩 페이지를 자주 갈아엎는 사이트라면 엘리멘터리 같은 빌더가 꽤 현실적인 선택입니다. 다만 처음 설치할 때부터 범위를 정해야 합니다. 모든 페이지를 빌더로 만들지, 일부 핵심 페이지만 쓸지에 따라 속도와 유지보수가 달라집니다.
엘리멘터리를 쓰기 전에 먼저 정할 것
가장 먼저 정할 건 역할입니다. 엘리멘터리를 테마처럼 쓸 건지, 페이지 편집 도구로만 쓸 건지 구분해야 합니다. 초보자들이 많이 하는 실수가 테마, 블록 편집기, 엘리멘터리, 추가 애드온 플러그인을 동시에 섞는 겁니다. 이렇게 되면 어디서 여백이 잡혔는지, 버튼 색상이 어디서 바뀌는지 추적하기가 어려워집니다.
개인 블로그나 정보성 사이트라면 저는 보통 본문 글에는 기본 블록 편집기를 권합니다. 글은 빠르게 열리고, 오래 유지되어야 하기 때문입니다. 엘리멘터리는 메인 페이지, 소개 페이지, 서비스 안내 페이지처럼 레이아웃이 중요한 곳에만 쓰는 편이 안정적입니다. 전체 글 200개를 전부 엘리멘터리로 만들면 나중에 빌더를 바꾸고 싶을 때 거의 이사를 해야 합니다.
- 블로그 글: 기본 블록 편집기 사용
- 메인 페이지: 엘리멘터리 사용 가능
- 랜딩 페이지: 엘리멘터리 사용 가능
- 공지, 약관, 단순 안내: 기본 편집기 권장
설치할 때 같이 보면 좋은 설정
엘리멘터리를 설치한 뒤 바로 템플릿부터 고르는 분들이 많은데, 저는 설정부터 봅니다. 불필요한 기능을 켠 상태로 시작하면 나중에 사이트가 커졌을 때 차이가 납니다. 특히 폰트, 아이콘, CSS 출력 방식은 페이지 속도에 직접 영향을 줍니다.
워드프레스 관리자에서 엘리멘터리 설정으로 들어가면 실험 기능이나 성능 관련 옵션이 보입니다. 버전에 따라 이름은 조금씩 바뀌지만, 사용하지 않는 아이콘 폰트와 외부 폰트 호출을 줄이는 방향으로 맞추는 게 좋습니다. 구글 폰트를 쓰지 않는 사이트라면 기본 폰트 로딩을 막고, 테마에서 지정한 시스템 폰트를 쓰는 편이 더 가볍습니다.
제가 보통 잡는 기준
- 컨테이너 레이아웃 사용: 새 사이트라면 켜는 쪽 권장
- 기본 색상과 기본 글꼴: 테마와 충돌하면 끔
- 아이콘 라이브러리: 필요한 것만 로드
- 애드온 플러그인: 처음에는 설치하지 않음
- 템플릿 키트: 가져온 뒤 안 쓰는 섹션 삭제
여기서 주의할 점이 있습니다. 이미 운영 중인 사이트에서 컨테이너나 CSS 관련 설정을 바꾸면 기존 레이아웃이 깨질 수 있습니다. 특히 오래된 엘리멘터리 섹션 구조로 만든 페이지는 설정 하나로 간격이 달라질 수 있습니다. 운영 사이트라면 바로 적용하지 말고 백업을 먼저 뜨고, 가능하면 스테이징 환경에서 확인하는 게 맞습니다.
테마는 가볍게, 플러그인은 적게
엘리멘터리를 쓸 때 테마 선택은 생각보다 중요합니다. 테마 자체가 무겁고 자체 빌더 기능까지 갖고 있으면 엘리멘터리와 역할이 겹칩니다. 저는 보통 가벼운 기본형 테마를 고르고, 디자인은 엘리멘터리에서 필요한 만큼만 잡습니다. Astra, GeneratePress, Kadence 같은 계열을 많이 쓰는 이유도 이 때문입니다.
플러그인은 더 조심해야 합니다. 엘리멘터리 애드온은 버튼 몇 개, 슬라이더 몇 개 때문에 설치하는 경우가 많은데 실제로는 CSS와 자바스크립트를 사이트 전체에 얹는 일이 있습니다. 무료 애드온 하나로 카드, 탭, 모달, 애니메이션을 다 해결할 수 있어 보여도 운영 관점에서는 부담입니다. 필요한 위젯이 1개뿐이면 기본 위젯으로 비슷하게 만들 수 있는지 먼저 봅니다.
피하는 구성이 좋았던 사례
- 엘리멘터리 애드온을 3개 이상 동시에 쓰는 구성
- 슬라이더 플러그인과 엘리멘터리 슬라이더를 같이 쓰는 구성
- 테마 빌더와 엘리멘터리 프로 템플릿을 섞는 구성
- 팝업 플러그인과 엘리멘터리 팝업을 중복 사용하는 구성
사이트가 느려졌을 때 대부분은 호스팅만 탓하기 쉽습니다. 그런데 실제로 보면 페이지 하나에 이미지 20장, 애니메이션 15개, 애드온 스크립트 여러 개가 붙어 있는 경우가 많습니다. 이런 상태에서는 서버를 올려도 체감이 크게 좋아지지 않습니다. 먼저 페이지 구조를 줄이는 게 순서입니다.
속도 잡을 때는 이미지와 섹션 수부터 본다
엘리멘터리 페이지가 느릴 때 가장 먼저 보는 건 이미지입니다. 가로 1920픽셀짜리 이미지를 모바일 첫 화면에 그대로 넣으면 아무리 캐시를 써도 무겁습니다. 메인 비주얼 이미지는 보통 1600픽셀 안쪽이면 충분하고, 카드나 썸네일 이미지는 표시 크기에 맞춰 더 줄이는 게 좋습니다. WebP를 쓸 수 있다면 용량 차이가 꽤 납니다.
다음은 섹션 수입니다. 초보자 사이트를 보면 여백을 만들려고 빈 섹션을 넣는 경우가 많습니다. 이건 나중에 모바일에서 문제를 만듭니다. 여백은 섹션을 추가해서 만들지 말고 패딩과 마진으로 조절해야 합니다. 그리고 같은 디자인의 박스가 반복된다면 복사해서 조금씩 바꾸기보다 글로벌 스타일이나 템플릿을 쓰는 편이 유지보수에 낫습니다.
- 첫 화면 이미지는 과하게 크게 올리지 않기
- 빈 섹션으로 여백 만들지 않기
- 애니메이션은 중요한 곳 1~2개만 사용
- 모바일 숨김 요소를 남발하지 않기
- 캐시 플러그인은 하나만 사용
캐시 플러그인은 무료로도 충분히 시작할 수 있습니다. LiteSpeed 서버라면 LiteSpeed Cache가 잘 맞고, 일반 호스팅에서는 WP Super Cache나 W3 Total Cache도 선택지가 됩니다. 유료 최적화 플러그인을 바로 살 필요는 없습니다. 다만 캐시 설정을 여러 플러그인에서 동시에 만지면 화면 깨짐이나 관리자 오류가 생길 수 있으니 하나만 책임지게 해야 합니다.
엘리멘터리로 운영할 때 꼭 지킬 기준
운영 기준은 단순해야 오래 갑니다. 첫째, 업데이트를 미루지 않습니다. 엘리멘터리, 테마, 워드프레스 코어는 서로 영향을 많이 받습니다. 몇 달씩 미뤄두다가 한 번에 올리면 어디서 문제가 생겼는지 찾기 어렵습니다. 저는 보통 백업을 먼저 만들고, 플러그인 업데이트, 테마 업데이트, 코어 업데이트 순서로 확인합니다.
둘째, 백업 없이 디자인을 크게 바꾸지 않습니다. 특히 헤더, 푸터, 상품 상세, 게시글 템플릿처럼 사이트 전체에 영향을 주는 영역은 실수하면 방문자가 바로 봅니다. 엘리멘터리 프로의 테마 빌더를 쓴다면 조건 설정도 같이 확인해야 합니다. 특정 템플릿이 전체 사이트에 적용되어 버리는 실수는 생각보다 자주 납니다.
셋째, 사용하지 않는 템플릿과 플러그인을 남겨두지 않습니다. 비활성화된 플러그인도 보안 관리 대상입니다. 안 쓰는 애드온, 예전에 가져온 템플릿, 테스트용 페이지는 주기적으로 지워야 합니다. 운영 사이트는 예쁘게 만드는 것보다 예측 가능하게 유지되는 게 더 중요합니다.
엘리멘터리는 나쁜 도구가 아닙니다. 문제는 대개 너무 많은 역할을 맡길 때 생깁니다. 글은 가볍게 쓰고, 보여줘야 하는 페이지만 엘리멘터리로 만들고, 플러그인은 필요한 만큼만 쓰면 오래 버팁니다. 저는 초보자일수록 기능을 더 넣기보다 지워도 되는 것부터 찾는 쪽을 권합니다. 그게 결국 사이트를 덜 고장 나게 만드는 방식입니다.
