GCP 무료 서버에 워드프레스 설치하면서 몇 번의 고비가 있었습니다.
처음부터 작업이 어려웠다면 진즉에 포기했을텐데 초반 GCP e2-micro 인스턴스로 평생 무료서버 구축하고, Google Click to Deploy로 몇 분 만에 워드프레스 설치를 마친 후, 포크번(Porkbun)에서 고심 끝에 도메인 구입하여 워드프레스 숫자 IP에 도메인 연결하여 IP 고정하기까지의 과정은 별 탈 없이 순조로왔습니다.
첫 번째 고비는 보안 관문이라 할 수 있는 SSL 설정이었는데요. SSL 설정을 위해 Really Simple SSL 플러그인 설치해도 해결이 되지 않아 서버 경로 확인과 SSH 권한 설정을 하고 그래도 보안 자물쇠가 설치되지 않아 Certbot 설치와 Let’s Encrypt 인증서 발급하는 길고 긴 삽질 끝에 드디어 워드프레스 현관문이라 할 수 있는 사이트 주소에 보안 자물쇠 철컥 다는데 성공~!
기쁨도 잠시 뒤 이어 두 번째 고비가 들이닥칠 줄이야. 글 발행 시 글 주소가 숫자이기에 이를 영문으로 바꾸려 고유주소 설정을 건드리자마자 500 에러가 출몰한 것입니다. 500에러 해결하려 고군분투하며 또 한 몇 시간 삽질하고, 워드프레스 무료 테마 중 가장 가볍고 심플한 GeneratePress 테마와 워드 프레스 운영에 필요한 최소한의 필수 플러그인 설치까지 끝마쳐서 이제는 좀 워드프레스에 글을 쓸 수 있나 싶었으나 여기서 세 번째 고비를 맞습니다.
세 번째 고비는 워드프레스에 글을 쓰기 전에 글이 올려질 카테고리와 메뉴 만들기였습니다. 아직도 카테고리와 메뉴의 상관관계, 인과관계가 잘 이해가 가지 않지만 한 가지 중요한 사실은 워드프레스는 다른 여타 블로그처럼 글을 쓰기만 한다고 바로 그 글이 블로그에 나오지 않는다는 사실입니다. 글 작성 전에 카테고리와 메뉴 설정 작업이 필수~!
그 다음 워드프레스 폰트, 줄 간격, 로고 및 첫 화면 설정 작업은 위에 작업에 비하면 나름대로 순조로웠습니다. 여기까지 작업하느라 한 달 여가 지났고, 서버 사용비가 나오지나 않을까 노심초사하였으나 다행히 아직까지 비용이 청구되지는 않았습니다. 무료 크레딧 300달러가 끝나는 90일 이후에도 비용이 청구되지 않는다면 GCP 평생 무료 서버 구축은 나름 성공한 셈이 되겠네요~!
이제 애드센스 승인에 필요한 필수 페이지 3개를 워드프레스 화면에 노출시킬 차례인데요.개인정보 처리방침 (Privacy Policy) 페이지, 이용약관 (Terms and Conditions) 페이지, 문의하기 (Contact Us) 페이지를 블로그 하단 (푸터 메뉴(Footer Menu)에 나오게 하고 싶었는데 이게 생각보다 쉽지 않더군요. 워드프레스 진짜 성격 테스트 하는 데 일가견 있다 싶습니다.
이번에는 개인정보 처리방침 (Privacy Policy) 페이지, 이용약관 (Terms and Conditions) 페이지, 문의하기 (Contact Us) 페이지를 블로그 하단에 깔끔하게 정렬하려다 벌어진 삽질기를 정리해보았습니다.
Table of Contents
1️⃣ 애드센스 승인용 필수 페이지 화면 하단 노출 방법
일반적인 방법인 워드프레스 관리자 메뉴 (Dashboard)→외모(Appearance) → 메뉴(Menus)로 들어가 왼쪽 (Pages) 목록에서 개인정보 처리방침 (Privacy Policy) 페이지, 이용약관 (Terms and Conditions) 페이지, 문의하기 (Contact Us) 페이지 3개를 체크하고 메뉴에 추가하기(Add to Menu)를 하면 대부분 ‘자동 추가’ 설정 때문 블로그 상단에 위치하게 됩니다.
✔ 상단 메뉴 자동 추가 해제하는 방법
- 메뉴 설정 이동: 관리자 메뉴 (Dashboard)에서 Appearance(외모) → Menus(메뉴)로 이동합니다.
- 체크 해제: 화면 하단 Menu Settings에서 ‘Auto add pages’ (새 페이지 자동 추가) 체크를 해제합니다.
- 메뉴 정리: 상단 메뉴 구조에서 문의하기, 이용약관, 개인정보 박스 옆 화살표 눌러서 Remove(제거)합니다. ← 페이지가 삭제되는 게 아니라 메뉴판에서만 빼는 것임!
- 저장: Save Menu 클릭합니다.
이렇게 하면 페이지를 추가할 때 상단에 자동으로 배치되는 것을 방지할 수 있습니다.
이미 상단에 메뉴가 다닥다닥 붙어버린 상태라면, ‘자동 추가’ 체크를 해제한다고 해서 이미 올라간 메뉴가 자동으로 사라지지는 않습니다.
체크를 해제한 뒤에도 이미 상단에 올라와 있는 메뉴들은 직접 [Remove]를 눌러서 한 번은 정리해 주어야 합니다.
2️⃣ 위젯(Widget) 설정으로 화면 하단 노출하는 방법
개인정보 처리방침 (Privacy Policy) 페이지, 이용약관 (Terms and Conditions) 페이지, 문의하기 (Contact Us) 페이지가 애드센스 승인용에 꼭 필요하다지만 평소에 자주 이용하는 페이지가 아니다 보니 깔끔한 블로그 디자인을 위해 눈에 잘 띄는 상단에 자리를 차지하는 것 보다는 블로그 우측 사이드나 하단에 배치하고 싶었습니다. 그 방법 중 하나가 위젯(Widget) 설정입니다.
상단이 아닌 좌, 우측 사이드바나 하단에 페이지가 노출되게 메뉴를 넣으려면 메뉴 설정이 아니라 ‘위젯(Widget)’이나 ‘테마 커스터마이징’ 영역에서 설정해야 합니다.
본인이 사용하는 테마에 따라서 위젯 설정 방법이 다를 수 있으며, 제 경우에는 GeneratePress 테마에서 위젯을 설정하는 방법을 기술하였습니다.
3️⃣ GeneratePress 테마에서 위젯(Widget) 설정하는 방법
💡 우선 워드프레스를 설정하는데 있어 꼭 알아야 할 개념이 있습니다.
워드프레스는 [내용물(Pages/Posts)] → [메뉴판(Menus)] → [배치 장소(Locations/Widgets)] 이 3단계로 돌아간다는 개념을 이해하지 않고 진행하면 생각지도 못한 곳에서 발목을 잡힙니다.
🔑 워드프레스 구조
- Pages(내용물): 창고에 쌓아둔 물건 (눈에 안 보임)
- Menus(메뉴판): 손님한테 보여줄 리스트 (골라 담기)
- Widgets/Locations(배치): 메뉴판을 어디에 둘지 정하는 자리 (상단, 하단, 사이드바)
또한, GeneratePress 테마는 generatepress-content-width 에러가 발생해 위젯(Widget) 사이드바 설정이 제대로 작동하지 않을 수 있습니다.
🛠 generatepress-content-width 에러?
The “generatepress-content-width” plugin has encountered an error and cannot be rendered.
generatepress-content-width 에러는 GCP 무료 서버(e2-micro)를 사용하면 필연적으로 만날 수 밖에 없는 증상인데요.
위젯 화면이 너무 무거워서 발생하는 일시적인 렌더링 오류로 GeneratePress 테마에서 사용하는 특정 기능(주로 페이지 레이아웃의 너비를 조절하는 블록이나 스크립트)이 충돌하거나 서버 리소스 문제로 제대로 불러와지지 않았을 때 발생하는 오류입니다.
이게 사실 Gutenberg(블록 편집기)와 서버의 통신 문제인 경우가 꽤 되므로 이 에러가 뜰 때 브라우저를 새로고침(F5) 하거나 잠시 기다렸다가 다시 시도하면 저절로 해결이 되기도 합니다만, GCP e2-micro 환경에서는 서버 리소스 부족으로 자바스크립트가 무거운 블록 기반 위젯 편집기를 감당하지 못할 때가 많습니다.
🅰 무식하지만 확실한 방법: 클래식 위젯 플러그인 설치
블록 방식 형태의 무거운 위젯 화면때문에 GCP 무료 서버(e2-micro) 같은 저사양 서버에서 에러가 나는 경우에는 클래식 위젯 플러그인을 설치해 표시 화면을 옛날 방식으로 바꾸면 훨씬 가벼워지기때문에 서버 부하를 줄여 에러가 생기는 걸 막을 수 있는 가장 효율적인 방법 중 하나입니다.
🔑 [Plugins] -> [Add New] 가서 “클래식 위젯 Classic Widgets” 검색해서 설치하고 활성화(Activate) 합니다.
클래식 위젯 Classic Widgets이 아무 문제 없이 제대로 활성화 한다면, 위젯 화면으로 되돌아 갔을 때 빨간 에러 문구가 사라지고, 드래그 앤 드롭으로 메뉴를 사이드바에 아주 쉽게 넣을 수 있지만 플러그인 설치가 꺼림칙하다면 다른 방법을 활용해야 합니다.
🅱 플러그인 싫으면: ‘사용자 정의하기’에서 수정
GCP 무료 서버(e2-micro)는 용량에 제약이 있기 때문에 무작정 플러그인을 설치하는 게 부담스럽다면 Customize(사용자 정의하기)에서 위젯을 설정할 수도 있습니다.
에러가 나서 위젯 메뉴가 화면에 나타나지 않거나 보이지 않는다면 다음 경로로 들어갑니다.
[Appearance(외모)] → [Customize(사용자 정의하기)] → [Widgets(위젯)] 클릭
여기서 [Right Sidebar(오른쪽 사이드바] 또는 [Leftt Sidebar(왼쪽 사이드바]를 선택하고 [Add a Widget(위젯에 추가)] 버튼을 눌러 Navigation Menu에 추가합니다. 이 화면은 실시간 미리보기가 되므로 블록 위젯화면보다 에러가 덜 나고 훨씬 직관적이라는 장점이 있습니다.
❌ 로고랑 메뉴 간격 문제
블로그 상단에 너무 큰 로고 이미지를 넣으면 메뉴들이 밀려나기도 합니다.
내 블로그를 알리고 싶은 욕심에 너무 거대한 크기의 로고를 넣었더니 메뉴들이 밀려서 2줄로 표시되더라고요. 로고 크기를 줄이는 방밥은 이렇습니다.
※ 로고 크기 줄이는 방법
[Appearance(외모)] → [Customize(사용자 정의하기)] → [Site Identity(사이트 이름)] 가서 Logo Width 로고 폭 더니 바를 왼쪽으로 쭉 당겨서 크기를 줄이면 메뉴들이 다시 블로그 우측 상단에 가지런히 일렬로 정렬됩니다.
※ 모바일 뷰 확인:
구글은 ‘모바일 친화성’도 중요하게 여기므로 상단 메뉴를 정리하고 로고 크기를 줄였을 때, 모바일 화면에서도 깔끔하게 잘 보이는지 확인하는 게 중요합니다.
4️⃣ ‘깔끔한 상단’ 만드는 진짜 방법
위 3가지 방법 중 하나로 generatepress-content-width 에러를 일시적 혹은 영구히 해결했으면, 다시 블로그에 애드센스 승인에 필요한 필수 페이지 배치 과정으로 이어갑니다. 처음엔 우측 사이드바에 넣고 싶었지만 generatepress-content-width 에러가 나타나는 바람에 그냥 블로그 하단에 배치하기로 마음을 굳혔습니다.
블로그 상단에는 깔끔하게 제가 쓴 글을 담고 있는 메뉴가 나타나게 하고, 애드센스 승인 필수 페이지는 블로그 우측 사이드나 하단에 배치하는 게 목표였습니다.
‘깔끔한 상단’ 만드는 진짜 방법은 이렇습니다.
상단에는 안 나오고 사이드바나 하단에만 나오게 하려면 ‘메뉴판’을 세 개 각각 따로 만들어야 합니다.
※ 메뉴 만드는 방법:
- Appearance(외모) → Menus로 가서 상단의 [create a new menu] 파란색 링크 클릭.
- 이름을 “Side Menu” 혹은 하단 메뉴라고 짓고 [Create Menu] 클릭.
- 왼쪽 Pages에서 문의하기, 이용약관, 개인정보 체크해서 [Add to Menu] 하고 저장.
- 메뉴판 A (상단용): WordPress 글 내용이 들어갈 메뉴 딱 하나만 넣고 저장
- 메뉴판 B (사이드바용): 문의하기, 이용약관, 개인정보 다 넣고 저장 or
- 메뉴판 C (하단용): 문의하기, 이용약관, 개인정보 다 넣고 저장
그다음:
- 상단 설정: Manage Locations 탭에서 Primary Menu를 메뉴판 A로 선택.
- 사이드바 설정: Widgets 가서 Navigation Menu 위젯의 대상을 메뉴판 B or C 로 선택.
이제 상단 메뉴판, 하단 메뉴판, 사이드바 메뉴판을 각각 만들었기때문에 상단 메뉴판에서 뭘 지워도 사이드바나 하단 메뉴판은 타격이 없게 됩니다.
5️⃣ 상단, 사이드, 하단 메뉴 삭제 방법
애드센스 승인 필수 페이지인 개인정보 처리방침 (Privacy Policy), 이용약관 (Terms and Conditions), 문의하기 (Contact Us)가 블로그 상단, 우측 사이드바, 블로그 하단에 모두 배치되었을 경우 내가 원하는 위치에만 남겨두고 나머지는 블로그 화면에 나타나지 않게 삭제하면 되는데요. 삭제 방법은 이렇습니다.
- 메뉴 설정 이동: Appearance(외모) -> Menus로 이동합니다.
- 박스 클릭: 오른쪽 Menu Structure에 있는 문의하기 박스 오른쪽에 작은 [▼] 화살표가 나오면 그걸 눌릅니다.
- Remove 클릭: 아래쪽에 빨간색 글씨로 [Remove (제거)]라고 써진 걸 누릅니다.
- 결과: 메뉴 구조에서 그 박스가 사라지지만 Pages(페이지) 메뉴에 가보면 제가 만든 ‘페이지 내용’은 그대로 살아있는 걸 볼 수 있습니다.
- 저장: 마지막에 꼭 오른쪽 아래 [Save Menu] 버튼 눌러야 변경 후 내용이 적용되는 것 잊지마세요.
※ 다시 상단, 하단, 사이드바에 나타나게 하려면?
- 메뉴 설정 이동: Appearance -> Menus로 이동합니다.
- 다시 넣기: 왼쪽 [Pages] 탭에서 만들어 둔 문의하기, 이용약관, 개인정보를 다시 체크하고 [Add to Menu] 누릅니다.
- 저장: 오른쪽 아래 [Save Menu] 클릭.
- 확인: 이제 사이드바나 상단, 하단 등 내가 선택한 곳에 해당 내용이 다시 나타납니다.
데이터 자체를 삭제한 게 아니라 숨김처리한 것으로 이해하면 됩니다. 쉽게 말해 워드프레스 메뉴판에서 항목을 뺀 거고, 사이드바, 하단 위젯이 그 메뉴판을 불러와서 보여주는 방식이라, 메뉴판에서 지우니까 사이드바나 상 하단에서도 안 보이는 것뿐 내용이 날아간 게 아니므로 분노 폭발할 필요 없단거… 사실 워드프레스 자체가 성격 테스트 하는 것이라 시시 때때로 분노가 치밀지만 말입니다.
지금까지 애드센스 승인에 필요한 필수 페이지를 내 블로그 상단, 하단, 사이드바에 위치시키거나 노출된 페이지를 숨긴 처리 하는 방법에 대해 알아보았습니다.
다음에는 드디어 힘들게 만든 워드프레스 블로그를 구글 서치 콘솔에 등록하는 방법에 대한 글로 돌아오겠습니다.
📌 이전 글: 애드센스 승인 필수 3대장 페이지 만들기 (#12)
👉 다음 글: GCP 워드프레스 구글 서치 콘솔 등록하기: Rank Math로 한 번에 끝내기 (#14)