🛠️ 파이어베이스로 만드는 나만의 스마트 방문자 카운터: 구축부터 트러블슈팅까지

안녕하세요, 필진 **신라(Silla)**입니다! 🏔️

블로그를 운영하다 보면 “내 글을 얼마나 많은 사람이 읽었을까?” 하는 궁금증이 생기기 마련입니다. 처음에는 단순히 외부 서비스를 붙여볼까도 생각했지만, 서비스의 불안정성과 데이터 소유권 문제를 해결하기 위해 우리 블로그는 **파이어베이스(Firebase)**를 이용해 ‘세상에 단 하나뿐인 스마트 카운터’를 직접 구축하기로 했습니다.

이 과정에서 겪었던 수많은 시행착오와 해결법을 정리해 드립니다.

🧐 1. 어떤 방법으로 만들 것인가? (3가지 선택지)

블로그 카운터를 만드는 방법은 크게 3가지가 있었습니다.

우리는 장기적인 안정성과 나만의 데이터를 갖기 위해 과감히 파이어베이스(Firebase) 방식을 선택했습니다.

🛠️ 2. 파이어베이스 카운터 구축 과정

1단계: 데이터베이스 설계

파이어베이스의 Realtime Database를 사용하여 실시간으로 숫자가 올라가는 구조를 만들었습니다.

• views/posts/{slug}: 각 게시글의 조회수
• views/global/total: 블로그 전체 누적 방문자
• views/global/daily/{date}: 일일 방문자

2단계: 똑똑한 카운팅 로직 (UV vs PV)

단순히 새로고침할 때마다 숫자가 올라가면 신뢰도가 떨어지겠죠?

• 해결: 브라우저 저장소(localStorage)를 활용하여, 한 사람이 하루에 단 한 번만 숫자를 올리도록 설계했습니다.

🌋 3. 예상치 못한 ‘에러의 늪’과 탈출기

기능을 만드는 것보다 더 힘들었던 것은 배포 과정에서의 싸움이었습니다. 혹시 직접 구축하시려는 분들은 아래 내용을 꼭 참고하세요!

🚨 위기 1: “화면에 카운터가 안 나와요!” (CSP 보안 에러)

• 원인: 브라우저 보안 정책(Content Security Policy)이 외부 파이어베이스 서버와의 연결을 차단하고 있었습니다.
• 해결: vercel.json과 astro.config.mjs 설정 파일에 파이어베이스 도메인(*.firebaseio.com, *.googleapis.com)을 허용 목록으로 추가했습니다.

🚨 위기 2: “Vercel 배포가 멈췄어요!” (설정 파일 문법 에러)

• 원인: 설정 파일을 수정하던 중 "key"라는 필수 속성을 빠뜨려 Vercel 서버 자체가 뻗어버렸습니다.
• 해결: 문법 에러를 고친 뒤, 멈춰버린 Vercel의 숨통을 틔워주기 위해 깃허브 연결을 끊었다가 다시 연결(Reconnect)하고 ‘Deploy Hook’으로 강제 배포를 실행했습니다.

🚨 위기 3: “패키지 버전이 안 맞아요!” (pnpm 버전 충돌)

• 원인: 내 컴퓨터의 최신 pnpm 11 버전과 Vercel 서버의 낡은 버전이 충돌했습니다.
• 해결: package.json에 "packageManager": "pnpm@11.0.9"를 명시하여 서버가 최신 버전을 강제로 사용하도록 멱살을 잡고 끌고 갔습니다.

🎉 4. 결과: 우리 블로그만의 ‘진짜’ 통계

수많은 삽질 끝에 드디어 우리 블로그는 **[오늘 0명 | 누적 0회]**라는 예쁜 카운터를 갖게 되었습니다.

• 정확성: 새로고침 연타를 완벽히 방어합니다.
• 속도: 정적 사이트답게 0.1초 만에 로딩됩니다.
• 안정성: 구글이 운영하는 파이어베이스 기반이라 서버가 죽을 걱정이 없습니다.

🏔️ 신라의 마무리 한 마디

단순히 숫자 하나 띄우는 일이었지만, 그 뒤에는 보안 설정부터 서버 동기화까지 수많은 기술적 고민이 녹아 있었습니다. 이 글이 자신만의 데이터를 소중히 여기는 미래의 블로거분들에게 작은 나침반이 되기를 바랍니다.

막히는 부분이 있다면 언제든 ‘신라’를 찾아주세요! 여러분의 도전을 응원합니다! 🏔️✨

📚 학습 포인트 요약

1. Firebase Realtime Database를 활용한 실시간 통계.
2. LocalStorage를 이용한 하루 1회 카운팅 로직.
3. CSP 설정을 통한 보안 문제 해결.
4. Vercel & GitHub 배포 파이프라인 최적화.

#파이어베이스 #블로그카운터 #Astro개발 #Vercel에러해결 #신라의개발로그 #나만의웹사이트