AI와 함께 홈페이지 리디자인하는 방법 — GitHub 백업 + WordPress 랜딩 페이지 구조 개선
블로그를 운영하다 보면 어느 순간 이런 고민이 생긴다.
- 방문자는 들어오는데 이탈률이 높다
- 글은 쌓이는데 홈페이지 구조가 정리가 안 된다
- 디자인이 블로그형이라 콘텐츠 찾기 어렵다
나도 같은 문제를 겪었다. 애드센스 심사를 넣고 나서 “이 블로그, 이대로 괜찮은가?” 하는 생각이 들었다.
그래서 AI(대박이)와 협업해서 홈페이지를 리디자인하고, GitHub 백업 시스템까지 구축했다. 이번 글에서는 그 실제 작업 과정을 정리한다.
블로그 활성화를 위해 먼저 해야 할 것
애드센스 심사를 넣고 나니 고민이 시작됐다. “심사 기다리는 동안 뭘 해야 하지?”
대박이한테 물어봤다.
대박이 TIP: “애드센스 심사 넣었는데 기다리는 동안 뭐 하면 좋을까?” 라고 물어보면 된다. 글 쓰기 + 구조 개선을 추천해준다.
대박이가 말해준 핵심은 두 가지였다.
- 글 계속 쓰기 — 최소 20~30개는 있어야 검색 반응이 온다
- 홈페이지 구조 개선 — 들어온 사람이 글을 찾을 수 있어야 한다
글은 이미 쌓고 있었으니, 구조 개선부터 시작하기로 했다.
기존 홈페이지의 문제점
기존 홈페이지는 이랬다.
| 항목 | 기존 구조 | 문제 |
|---|---|---|
| 레이아웃 | 헤더 → 글 목록 나열 | 블로그 성격이 안 보임 |
| 카테고리 | 구분 없음 | 뭘 읽어야 할지 모름 |
| 첫인상 | 그냥 글 리스트 | 방문자가 바로 이탈 |
실제로 GA 데이터를 보면 홈페이지 이탈률이 **78%**였다. 10명 중 8명이 홈에 들어오자마자 나갔다.
GitHub 백업부터 먼저 — 코드 날리면 끝이니까
홈페이지를 뜯어고치기 전에 먼저 한 게 있다. 코드 백업.
왜냐하면, 서버에서 직접 작업하다가 코드가 날아가면 복구할 방법이 없기 때문이다.
GitHub이 뭔데?
쉽게 말하면 이렇다.
| 서비스 | 역할 |
|---|---|
| Google Drive | 문서 백업 |
| GitHub | 코드 백업 + 변경 기록 |
GitHub에 올려두면 서버가 날아가도 코드를 복구할 수 있고, 언제 뭘 바꿨는지 기록도 남는다.
Git이 먼저 필요하다
GitHub를 쓰려면 Git이라는 프로그램이 먼저 설치되어 있어야 한다. Git은 코드 변경 사항을 추적하는 도구고, GitHub는 그걸 온라인에 저장하는 서비스다.
먼저 Git이 설치되어 있는지 확인한다.
git –version
버전이 나오면 설치된 거고, “command not found”가 나오면 설치해야 한다.
- Ubuntu 서버: sudo apt install git
- Mac: brew install git
- Windows: git-scm.com 에서 다운로드
대박이 TIP: “Git이랑 GitHub 차이가 뭐야?” 라고 물어보면 쉽게 설명해준다. Git = 도구, GitHub = 저장소라고 생각하면 된다.
SSH 키 등록 — 이거 안 하면 push가 안 된다
처음에 GitHub에 코드를 올리려고(push) 했는데 안 됐다. 이유는 SSH 키 등록을 안 해서였다.
SSH 키는 내 컴퓨터와 GitHub 사이의 “신분증” 같은 거다. 이걸 등록해야 GitHub가 “이 사람이 주인이 맞구나” 하고 코드를 받아준다.
터미널을 연다. VS Code를 쓰고 있다면 Ctrl+` (백틱)을 누르면 하단에 터미널이 열린다. 서버에서 작업한다면 SSH로 접속한 화면이 터미널이다.
- SSH 키 생성
ssh-keygen -t ed25519 -C “내이메일@example.com”
엔터 3번 치면 된다. (저장 위치, 비밀번호 전부 기본값)
- 생성된 공개키 확인
cat ~/.ssh/id_ed25519.pub
- 나온 내용을 복사해서 GitHub에 등록
- GitHub → Settings → SSH and GPG keys → New SSH key → 붙여넣기
주의: 처음에 나는 id_rsa.pub을 찾았는데 없었다. ed25519로 만들었으면 id_ed25519.pub을 봐야 한다. 키 이름이 다르다는 걸 몰라서 한참 헤맸다.
저장소 만들고 코드 올리기
GitHub에서 저장소(repository)를 만든다.
| 설정 | 값 |
|---|---|
| Repository name | daebakcode |
| Visibility | Private (코드 비공개) |
만든 후 터미널에서:
git init git remote add origin git@github.com:계정명/daebakcode.git git add . git commit -m “v0.2 초기 백업” git push -u origin main
대박이 TIP: 이 명령어들을 외울 필요 없다. “GitHub 저장소 만들었는데 코드 올리는 방법 알려줘”라고 하면 상황에 맞게 알려준다.
홈페이지 리디자인 — AI한테 디자인을 맡겨봤다
백업을 끝내고 본격적으로 홈페이지를 뜯어고쳤다.
대박이한테 “랜딩 페이지 구조 잡아줘”라고 했더니 이런 구조를 제안했다.
새로운 홈페이지 구조
| 섹션 | 역할 |
|---|---|
| Hero 섹션 | 슬로건 + 블로그 소개 |
| 통계 섹션 | 전체 글 / AI 협업 일지 / 작업일지 / 가이드 숫자 |
| AI 협업 일지 | 최신 3개 카드 |
| 실전 작업일지 | 최신 3개 카드 |
| 실전 가이드 | 최신 3개 카드 |
핵심은 방문자가 홈에 들어오면 어떤 콘텐츠가 있는지 한눈에 보이게 하는 것이었다.
반응형 대응도 필수
PC에서 잘 보여도 모바일에서 깨지면 소용없다. CSS 미디어쿼리로 반응형을 추가했다.
| 디바이스 | 기준 |
|---|---|
| 태블릿 | 768px 이하 |
| 모바일 | 480px 이하 |
주의: 서버에 배포하고 모바일로 확인했는데 디자인이 안 바뀌어 있었다. 원인은 Nginx 캐시였다. 서버에서 캐시를 삭제하고 새로고침하니까 바로 적용됐다. 배포 후에는 반드시 캐시를 비워야 한다.
Before & After
| 항목 | Before (v0.2) | After (v0.3) |
|---|---|---|
| 구조 | 글 목록 나열 | 랜딩 페이지 |
| 카테고리 | 구분 없음 | 3개 카테고리 카드 |
| 통계 | 없음 | 글 수 한눈에 표시 |
| 홈 이탈률 | 78.6% | 56.9% |
실제로 리디자인 후 이탈률이 22% 떨어졌다. 숫자로 증명된 개선이다.
AI와 소통하는 법 — 설명한 만큼 결과가 나온다
이번 작업을 하면서 확실히 느낀 게 있다.
AI는 설명한 만큼 결과가 나온다.
“홈페이지 이쁘게 만들어줘” → 결과가 애매하다
“Notion 스타일, 앰버 포인트 색상, Hero 섹션 + 통계 + 카테고리 카드 3개, 반응형” → 원하는 결과가 나온다
대박이 TIP: 디자인을 맡길 때는 “참고 사이트 URL + 원하는 색상 + 섹션 구조”를 같이 알려주면 한 번에 나온다. 대충 말하면 대충 나온다.
정리
이번 작업에서 한 것:
- GitHub 코드 백업 시스템 구축 — 서버 날아가도 복구 가능
- 홈페이지 랜딩 페이지 리디자인 — 글 목록 → 카테고리 카드 구조
- 반응형 CSS 추가 — PC/태블릿/모바일 대응
- 실제 결과: 홈 이탈률 78.6% → 56.9%
코드를 몰라도 AI와 대화하면서 하나씩 만들어갈 수 있다. 중요한 건 내가 원하는 걸 정확하게 설명하는 것이다.