이 블로그의 아키텍처: Astro + Firebase Firestore

이 블로그는 **“군더더기 없는 미니멀리즘과 지속 가능한 $0 운영 비용”**을 목표로 설계되었습니다.

전통적인 동적 CMS(WordPress, Ghost)나 상시 VM 기반 서버는 유휴 시간에도 서버 및 DB 비용이 발생하고, 주기적인 보안 패치와 OS 유지보수가 필요합니다. 반면, 이 블로그는 **정적 사이트 생성(SSG)**과 **서버리스 BaaS(Firestore & Auth)**를 결합하여 유지보수 비용 없이 100% 무중단 글로벌 서비스를 실현했습니다.

---

1. 전체 시스템 아키텍처

블로그의 전체적인 데이터 흐름과 인프라 구조는 다음과 같습니다:

flowchart TD
    subgraph Client["Client Browser (방문자)"]
        Browser["Web Browser"]
    end

    subgraph Edge["Global Edge Infrastructure"]
        DNS["FreeDNS (chan.h4ck.me)"]
        CDN["Google Cloud Anycast CDN (Firebase Hosting)"]
    end

    subgraph StaticBundle["Static Site Generation (Build-Time)"]
        Astro["Astro 5 SSG Engine"]
        MD["Markdown / MDX Posts"]
        Dist["dist/ (Pure HTML/CSS/JS)"]
    end

    subgraph Serverless["GCP / Firebase Backend"]
        Auth["Firebase Authentication (Google OAuth)"]
        Firestore["Cloud Firestore (Real-time DB)"]
        Rules["Security Rules (Moderation & Validation)"]
    end

    MD --> Astro
    Astro --> Dist
    Dist -->|"npx firebase deploy"| CDN

    Browser -->|"1. DNS Query"| DNS
    DNS -->|"2. Anycast IP (199.36.158.100)"| Browser
    Browser -->|"3. HTTPS Request (0.1s Fast Serve)"| CDN
    CDN -->|"4. Pure HTML/CSS"| Browser

    Browser -->|"5. Real-time onSnapshot Listener"| Firestore
    Browser -->|"6. 1-Click Social Sign-in"| Auth
    Firestore --- Rules

---

2. 핵심 설계 원칙 및 기술 스택

계층	기술 스택	도입 이유 & 엔지니어링 이점
Frontend Framework	Astro 5	기본 상태에서 자바스크립트를 전혀 전송하지 않는 Zero-JS by Default 원칙. Lighthouse 100점 달성.
Dynamic Islands	React 19	댓글창처럼 동적 인터랙션이 필수적인 컴포넌트만 부분적으로 하이드레이션(client:visible).
Real-time Database	Cloud Firestore	웹소켓 기반 실시간 리스너(onSnapshot)로 신규 댓글을 새로고침 없이 즉시 수신.
Authentication	Firebase Auth	Google OAuth 및 익명 작성을 동시에 지원하여 스팸 방지와 사용자 접근성을 모두 확보.
Hosting & CDN	Firebase Hosting	Google Cloud 글로벌 엣지 캐시 및 자동 SSL(Let’s Encrypt / Google Trust Services) 제공.
Domain & DNS	FreeDNS	A 레코드 및 TXT 레코드 기반 Anycast IP 라우팅.

---

3. 정적 서빙과 아일랜드 아키텍처 (Islands Architecture)

대부분의 현대 웹 프레임워크(Next.js, Remix, Nuxt)는 화면 전체를 자바스크립트 번들로 감싸 브라우저에서 무거운 Hydration 과정을 거칩니다. 이는 블로그와 같은 읽기 중심(Read-heavy) 사이트에서 심각한 성능 저하와 불필요한 번들 다운로드를 유발합니다.

Astro는 아일랜드 아키텍처를 통해 이 문제를 해결합니다:

graph LR
    subgraph HTML_Document["정적 HTML 문서 (Zero JavaScript)"]
        Header["Header (네비게이션)"]
        Article["Article (마크다운 컴파일 본문)"]
        Footer["Footer (링크 및 저작권)"]
        
        subgraph Island["React Island (client:visible)"]
            CommentsWidget["Comments.tsx (Firestore 실시간 댓글)"]
        end
    end

• 글 본문 및 레이아웃: 빌드 타임에 완전한 HTML 문자열로 렌더링되어 브라우저에 JS 코드를 1바이트도 보내지 않습니다.
• 댓글 영역(Comments.tsx): 사용자가 화면을 스크롤하여 댓글 영역에 도달했을 때만(client:visible) React 런타임과 Firebase SDK를 비동기로 로드합니다.

---

4. 실시간 댓글 및 보안/관리(Moderation) 구조

댓글 시스템은 서버 없이 클라이언트와 Firestore의 직접 통신으로 동작하지만, 엄격한 보안 규칙을 통해 남용을 방지합니다.

4.1. Firestore 데이터 모델

interface CommentItem {
  id: string;
  postSlug: string;          // 게시글 고유 식별자 (예: "how-this-blog-works")
  authorName: string;        // 작성자 닉네임 (익명 또는 구글 닉네임)
  authorUid: string | null;  // 구글 로그인 사용자 UID (익명 시 null)
  authorPhotoUrl?: string;   // 구글 프로필 사진
  isAnonymous: boolean;      // 익명 여부 플래그
  content: string;           // 댓글 본문 (최대 1,000자)
  createdAt: Timestamp;      // 서버 타임스탬프
  isDeleted: boolean;        // 관리자 삭제 여부 (Soft Delete)
}

4.2. 실시간 동기화 (onSnapshot)

// Comments.tsx 핵심 로직
const q = query(
  collection(db, 'comments'),
  where('postSlug', '==', postSlug),
  where('isDeleted', '==', false),
  orderBy('createdAt', 'asc')
);

// 실시간 웹소켓 구독
const unsubscribe = onSnapshot(q, (snapshot) => {
  const list = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  setComments(list);
});

4.3. Firestore 보안 규칙 (firestore.rules)

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /comments/{commentId} {
      // 1. 누구나 삭제되지 않은 댓글 읽기 가능
      allow read: if true;
      
      // 2. 작성 검증: 1자 이상 1000자 이하, 유효한 작성자명, 삭제플래그 false 강제
      allow create: if request.resource.data.content is string
                    && request.resource.data.content.size() > 0
                    && request.resource.data.content.size() <= 1000
                    && request.resource.data.authorName is string
                    && request.resource.data.authorName.size() <= 50
                    && request.resource.data.isDeleted == false;
      
      // 3. 수정/삭제: 인증된 사용자 또는 관리자만 가능
      allow update, delete: if request.auth != null;
    }
  }
}

---

5. 비용 분석: 월 0원 ($0.00) 유지 비결

구글 클라우드 플랫폼(GCP)과 Firebase의 Always Free (상시 무료) 티어 내에서 모든 리소스가 충당됩니다:

pie title "월간 무료 제공량 대비 예상 사용률 (%)"
    "Firebase Hosting 전송량 (월 10GB 무료)" : 85
    "Firestore 일일 읽기 (하루 50,000회 무료)" : 10
    "Firestore 일일 쓰기 (하루 20,000회 무료)" : 3
    "Firebase Auth (무제한 무료)" : 2

1. Firebase Hosting: 월 10GB 스토리지 및 월 360MB/일 대역폭 무료.
2. Cloud Firestore: 하루 50,000회 읽기, 20,000회 쓰기, 1GB 저장 공간 무료.
3. FreeDNS: 공용 도메인 네임서버 및 DNS 쿼리 무료.

개인 기술 블로그의 일반적인 트래픽(월 수만 ~ 수십만 페이지뷰) 수준에서는 한 달 운영 비용이 $0.00에 수렴합니다.

---

6. 결론

Astro와 Firebase의 결합은 현대 웹 개발에서 **“최소한의 복잡성으로 최대한의 성능과 안정성을 얻는 방법”**을 잘 보여줍니다.

• 서버 장애나 다운타임에 대한 걱정 Zero
• 데이터베이스 유지보수 및 보안 패치 Zero
• 매월 청구되는 인프라 비용 Zero

가장 단순하고 견고한 엔지니어링 철학 위에 구축된 블로그입니다.