안티그래비티(https://antigravity.google)가 나오고 '블로그 만들어줘' 라는 한 문장으로 시작한 프로젝트가 어느덧 배포 3개월이 다되가고 있다.

구글서치콘솔을 몰라서, 검색에 노출조차 되지 않던 시절부터 시작해, 내 앱소개페이지와, 소소하게 '딸깍' 계산기 프로젝트도 이 공간에 덧붙여 시작하게 되었다.

애드센스(https://accounts.google.com/)는 결국 못붙여서, 대신 카카오 애드핏(https://adfit.kakao.com/)을 사용하게 됐다

님들, 그 adblock 한 번만 꺼주시면... 굽신굽신..

무튼, 애드센스를 못붙이고 왜그런건지 찾다가 결국 발견하긴 했는데, 그걸 또 고치려고 하니 현타가 왔다갔다.

이후 claude에게 이 블로그의 기술적인 수정 사항들을 정리해보라고 해봤다.

난리도 아니네.

appgalpi.com 기술 변천사

> 2025년 10월 ~ 2026년 2월, 약 4개월간의 기록

Phase 1: 정적 HTML (2025년 10월)

프로젝트의 시작. "Hello" 메시지 하나와 Firebase Hosting.

스택: 순수 HTML, Firebase Hosting

초기 init부터 잡아주네.

Phase 2: 바닐라 JS 블로그 (2025년 11월)

프레임워크 없이 HTML/CSS/JS로 블로그 전체를 구현.

- EasyMDE 마크다운 에디터로 관리자 대시보드 구축

- (보안사항으로 삭제)

- Firestore에 포스트 저장, Storage에 이미지 업로드

- Cloud Functions로 AI 대화(Claude API), 댓글(Vertex AI 필터링), Telegram 알림

- 찰칵캘린더 랜딩 페이지 추가

스택: HTML5/CSS3/JS, EasyMDE, Firebase (Firestore, Auth, Storage, Functions)

그냥 마구 만들었다.

되는 대로 만들다보니, 뭘 썼는지도 몰랐다.

"어떤 기술 베이스로 구현했어요?"
"몰라요. A.I.한테 다 맡겨서."

딱 이랬다.

Phase 3: React SPA 마이그레이션 (2025년 12월)

바닐라 JS의 한계를 느끼고 React + Mantine UI로 전면 재작성.

- React 19 + TypeScript 5.9 + Vite 7.2

- Mantine UI 8.3 컴포넌트 라이브러리

- EasyMDE → Tiptap 리치 텍스트 에디터 교체

- 다크 모드 지원

- React Router DOM 7 라우팅

- 인포그래픽 시스템 (iframe HTML 뷰어)

- sitemap.xml 동적 생성 Cloud Function

- React Helmet Async로 SEO 메타 태그

- SnowOnMac 랜딩 페이지 (Canvas 눈 애니메이션)

스택: React 19, Vite 7, Mantine UI 8, Tiptap 3, Firebase

검색이 안되는 이유를 블로그 오픈 한 달만에 알았던가.

그리고 글쓰기 에디터도 너무 별로여서, 결국 안좋아하던, 리치텍스트에디터로 이동.

잡다한 것들을 많이 넣었던 때였다.

DOM이 뭔지도 몰랐었고... 디자인은 저런걸 썼는지도 몰랐네.

Phase 4: SEO와의 전쟁 (2026년 1월)

SPA의 근본적 한계 — 빈 <div id="root"></div>만 있는 HTML.

검색 엔진과 광고 플랫폼이 콘텐츠를 인식하지 못하는 문제 발생.

- 시맨틱 slug 시스템 도입 /post/ios-tips 형태)

- Google AdSense 신청 → 정책 위반으로 거절 (빈 페이지 판정)

- 광고 제거, 스크립트 동적 로딩, 경로 가드 등 수차례 시도

- GitHub Actions CI/CD 파이프라인 구축 (조건부 빌드, Telegram 알림)

스택: 동일 + GitHub Actions

아오... X발 애드센스. 이 때부터 시작이었다. 단순히 블로그에 글이 적어서 안보여주는 줄 알았었다.

여기도 자세히는 확인 안해주는데, gemini가 "이렇게 하면 되요. 저렇게 하면 되요." 라고 제안해주면,

"확실해?" "확실합니다" "진행시켜"

하지만 여전히 정책위반.

(대충 오이형 c8짤)

Phase 5: 계산기 시대 + SSR 시도 (2026년 2월 초)

SEO 문제 해결을 위해 Cloud Function 기반 SSR을 도입하고, 계산기 서비스를 확장.

### 계산기 3종 추가

1. 만나이 계산기 (CALC-001) — 만나이/연나이/세는나이/미미법

2. 퍼센트 만능 계산기 (CALC-003) — 6가지 계산 모드

3. BMI 계산기 (CALC-004) — 비만도 + 건강 지표

### 통합 SSR serveApp)

Cloud Function이 모든 요청을 가로채서:

- Bot(크롤러) → 서버에서 HTML 렌더링 (SSR 템플릿 6개)

- 일반 사용자 → React SPA 제공

이 구조의 문제:

- Cloud Function cold start 2~5초

- Hosting과 Functions 배포 동기화 필수

- 일반 사용자에게는 여전히 빈 HTML

- AdSense 계속 거절 → Kakao AdFit으로 전환

스택: React 19 + Cloud Functions SSR(하이브리드) + Kakao AdFit

그것과는 별개로, 차근차근 하고 싶은거, 어디서 주워들은거 계속 개발해나가고 있었다.

애드센스도 여러번 요청하니, '검토 요청 횟수를 다 소모하였습니다' 라며 일정기간 블럭을 먹이더라는 tmi.

Phase 6: Astro SSR 마이그레이션 (2026년 2월 7일)

근본적 해결 — 프레임워크 레벨에서 SSR을 지원하는 Astro로 전환.

왜 Astro인가

- 모든 방문자에게 완성된 HTML 즉시 서빙 (Bot 감지 불필요)

- React Islands 패턴으로 필요한 곳만 JS 로드

- Firebase App Hosting (Cloud Run) 네이티브 지원

### 아키텍처

```

공개 페이지 (SSR) → Astro 컴포넌트 + Tailwind CSS

댓글 (client:visible) → React Island (4.5KB)

관리자 (client:only) → React + Mantine + Tiptap (706KB, /admin만)

계산기 (client:only) → React + Mantine (71KB)

```

핵심 변화

| 항목 | 이전 (React SPA) | 이후 (Astro SSR) |

|------|------------------|------------------|

| 공개 페이지 JS | ~500KB | < 5KB |

| 초기 HTML | 빈 div | 완성된 콘텐츠 |

| TTFB (cold) | 2~5초 | < 500ms 목표 |

| 광고 인식 | 실패 | <ins> 태그 초기 HTML 포함 |

| 배포 | Functions + Hosting 동기화 | App Hosting 자동 |

| SSR 방식 | Cloud Function 수동 | 프레임워크 네이티브 |

백엔드 정리

- 삭제: serveApp, servePost, serveSitemap, processUserInput, generateBlogPost, templates, SPA shell, A/B 테스트, Claude API 연동

- 유지: submitComment (댓글), Telegram 웹훅, Auth 트리거

스택: Astro 5, React 19 Islands, Tailwind CSS, Firebase App Hosting (Cloud Run)

Astro 처음 들어봤다. claude opus 4.6 나온 후 claude code가 홈페이지 근본적인 문제가 있다며 들고 나온 해결방안.

(문서도 claude에게 맡겨놨더니, 지가 했다고 더 꼼꼼히 썼나보다)

얼마나 많은 삽질을 해왔는지, 삭제된 것도, 새로 집을 지은 것도 모르는 것 투성이다.

하나 하나 만들었다면, 이 모든 변경을 위해 얼마나 많은 리소스와 m/m이 필요했을까.

기술 스택 변천 요약

```

2025.10 HTML

↓

2025.11 HTML/CSS/JS + EasyMDE + Firebase

↓

2025.12 React 19 + Vite + Mantine UI + Tiptap + Firebase

↓

2026.01 + GitHub Actions CI/CD + slug SEO

↓

2026.02 + Cloud Functions SSR + 계산기 3종 + Kakao AdFit

↓

2026.02 Astro 5 SSR + React Islands + Tailwind + App Hosting

위에 서술했듯이, 짧은 기간에 정말 많이도 변경했다.

이 모든게 다 애드센스... 부들부들...

덕분에 재미난 경험을 했다 손 쳐야지 뭐.

결국에 광고는 붙였으니까.

그러니 광고해제좀.. 젭알... 굽신굽신...