WordPress 홈페이지 랜딩 페이지 리디자인 — GitHub 백업 + Nginx 캐시 트러블슈팅

작업일: 2026-03-05
작업자: 재영 + 대박이 (Claude)

작업 배경

v0.2까지는 홈페이지가 단순 글 목록이었다. 블로그가 3개 카테고리(AI 협업 일지, 작업일지, 실전 가이드)로 나뉘어 있는데, 홈에서는 그 구분이 안 보였다. 랜딩 페이지답게 한눈에 블로그의 정체성과 콘텐츠 구조를 보여주고 싶었다.

추가로, 테마 코드를 GitHub에 백업하는 체계도 필요했다.

1. GitHub 백업 저장소 생성

작업

• SSH 키 생성 후 GitHub에 등록
• private 저장소 생성
• 테마 전체 파일 초기 커밋 (38개 파일)
• .gitignore 설정 (백업 폴더, OS 파일 제외)

트러블슈팅

로컬 Docker 환경에서 git을 직접 사용하는 게 아니라, 호스트 머신의 테마 디렉토리에서 git을 초기화했다. SSH 키가 GitHub에 등록되어 있지 않아 push 실패 → SSH 키 생성 후 GitHub Settings에 등록하여 해결.

2. 홈페이지 리디자인

변경 전

• 홈페이지 = AI 협업 일지 글 목록 (단순 리스트)
• “AI 협업 일지” 탭 클릭 = 홈으로 이동 (동일 페이지)

변경 후

• 홈페이지 = 랜딩 페이지 (히어로 + 통계 + 카테고리별 프리뷰)
• “AI 협업 일지” 탭 클릭 = /blog/ 전용 페이지로 이동

구현 내용

히어로 섹션

• 슬로건: “코드를 몰라도, 코딩할 수 있다.”
• 설명: “AI와 함께 코딩하는 과정을, A부터 Z까지 전부 기록합니다.”

통계 바

• 전체 글 / AI 협업 일지 / 작업일지 / 실전 가이드 — 4칸으로 실시간 글 수 표시
• 앰버(#f59e0b) 포인트 색상, 구분선 레이아웃

카테고리 프리뷰 (3섹션)

• AI 협업 일지 / 실전 작업일지 / 실전 가이드 각각 최신 3개 카드
• 카드에 버전, 날짜, Day 배지, 프로젝트 배지 등 메타 정보 표시
• “전체 보기” 링크로 각 카테고리 페이지 이동

트러블슈팅 — 슬로건 오류

처음에 “코드를 몰라도, 만들 수 있다”로 잘못 넣었다. 정확한 슬로건은 “코드를 몰라도, 코딩할 수 있다.” — 바로 수정.

3. /blog/ 페이지 분리

문제

홈페이지가 AI 협업 일지 목록을 겸하고 있어서, 홈을 랜딩 페이지로 바꾸면 AI 협업 일지 “전체 보기”를 보여줄 곳이 없었다.

해결

• page-blog.php 새로 생성 (Template Name: AI 협업 일지)
• WordPress에 /blog/ 페이지 생성 (slug: blog, 템플릿: page-blog.php)
• header.php 네비게이션에서 “AI 협업 일지” 링크를 /blog/로 변경
• 탭 활성화 조건도 is_page('blog') 기반으로 수정
• functions.php에 after_switch_theme 훅으로 blog 페이지 자동 생성 추가

4. 모바일 네비게이션 줄바꿈 수정

문제

모바일에서 네비 탭 텍스트가 줄바꿈되어 “AI 협업 일n지”, “작업일n지” 식으로 깨져 보였다.

해결

• .site-nav-link에 white-space: nowrap 추가
• .site-nav에 overflow-x: auto + -webkit-overflow-scrolling: touch 추가
• 좁은 화면에서는 가로 스크롤로 대응

5. 서버 배포 + 캐시 이슈

작업

• 로컬에서 5개 파일(index.php, style.css, header.php, functions.php, page-blog.php) tar로 묶어 서버 전송
• 서버에 /blog/ 페이지 WP-CLI로 생성 (ID: 7386)

트러블슈팅 — 모바일에서 통계 안 보이는 문제

배포 후 PC에서는 새 홈페이지가 보이는데 모바일에서는 이전 버전이 계속 나왔다.

• Cloudflare Purge Everything 실행 → 효과 없음
• WordPress 캐시 flush → 효과 없음
• Nginx FastCGI 캐시가 원인이었다: sudo rm -rf /var/cache/nginx/* + sudo systemctl reload nginx
• Nginx 캐시까지 비우니 모바일에서도 정상 표시

수정 파일 목록

다음 할 일

• Git 커밋 (v0.3 변경사항)
• 서버 버전 v0.2 → v0.3 업데이트
• 홈페이지 추가 다듬기 (디자인 피드백 반영)