조회수와 좋아요 버튼 만드는 법
Firebase로 실시간 카운터 구현하기

📖 블로그 글에 조회수와 좋아요를 달았다

글을 쓰고 나면 항상 궁금해진다. 누가 읽었을까. 얼마나 읽었을까. 조회수가 없으면 그냥 혼자 쓴 글처럼 느껴진다.

그래서 달았다. 블로그 글 상단에 조회수, 하단에 좋아요 버튼. 페이지에 접속하면 조회수가 올라가고, 버튼을 누르면 좋아요가 쌓인다. 누군가 읽고 반응을 남길 수 있게.

⚙️ 어떻게 작동하나?

핵심은 Firebase Firestore다. 구글이 만든 실시간 데이터베이스 서비스다. 페이지별로 문서(document)를 하나씩 만들고, 거기에 조회수와 좋아요 숫자를 저장한다.

작동 방식은 단순하다.

• 페이지에 접속할 때마다 Firestore의 views 값에 +1
• 좋아요 버튼을 누르면 likes 값에 +1
• 숫자는 즉시 Firestore에 저장되고 화면에 실시간으로 반영된다
• 새로고침해도 숫자가 유지된다 — 서버 없이 클라우드에 저장되기 때문

별도 서버나 데이터베이스 설치가 필요 없다. Firestore가 그 역할을 대신한다.

📦 준비물

딱 두 가지다.

• Firebase 프로젝트 — 구글 계정이 있으면 무료로 만들 수 있다. firebase.google.com에서 5분이면 생성된다
• 운영 중인 사이트 — Netlify 등에 배포된 HTML 사이트면 충분하다

🪜 만드는 순서

네 단계면 끝난다. AI한테 맡기면 실제 작업은 거의 없다.

🔐 Firebase 보안 규칙 설정

기본 Firestore 규칙은 로그인한 사용자만 읽고 쓸 수 있게 막혀 있다. 조회수와 좋아요는 로그인 없이도 작동해야 하니까 규칙을 수정해야 한다.

Firestore 콘솔 → "규칙" 탭에서 아래처럼 수정한다. 기존 규칙 전체를 지우고 붙여넣으면 된다.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // 기존 규칙 (로그인 필요한 컬렉션)
    match /{document=**} {
      allow read, write: if request.auth != null;
    }

    // blog_stats 컬렉션은 누구나 읽기/쓰기 허용
    match /blog_stats/{docId} {
      allow read, write: if true;
    }
  }
}

🛡️ 중복 방지 — 좋아요는 한 번만

좋아요 버튼을 계속 누를 수 있으면 숫자가 의미 없어진다. localStorage를 이용해서 한 번 누른 사람은 다시 누르지 못하게 처리한다.

원리는 간단하다. 좋아요를 누르면 브라우저에 "이 글 좋아요 눌렀음"이라는 표시를 저장한다. 다음에 다시 방문하면 그 표시를 확인해서 버튼을 비활성 상태로 보여준다.

📋 모든 블로그 글에 한 번에 적용하는 법

글이 여러 개라면 하나씩 넣는 게 번거롭다. AI한테 한 번에 시키면 된다.

주의할 점이 하나 있다. 각 글마다 Firestore 문서 ID가 달라야 한다. 보통 파일명을 그대로 문서 ID로 쓰면 된다. 예를 들어 netlify-free-deploy.html이면 문서 ID는 netlify-free-deploy로 설정한다.

✅ 마무리 — 조회수가 쌓이면 보이는 것들

조회수를 달고 나면 달라지는 게 있다. 어떤 글이 많이 읽히는지 파악할 수 있다. 좋아요가 많은 글이 뭔지도 보인다. 다음에 쓸 글의 주제를 고를 때 참고가 된다.

숫자가 0에서 1로 바뀌는 순간도 나름 뿌듯하다. 누군가 내 글을 읽었다는 증거니까.