우리 가족만을 위한 무료 메신저 만들기 (Firebase + Netlify + Cloudinary)

[개발기] 우리 가족만을 위한 무료 프라이빗 메신저 만들기

아이들이 집에서 안전하고 프라이빗하게 대화할 수 있는 환경을 고민하다가 직접 메신저를 구축하게 되었습니다. 기성 메신저를 사용할 수도 있지만, 불필요한 외부 노출을 차단하고 오직 우리 가족만의 전용 공간을 만들고 싶었거든요.

웹 기술과 무료 클라우드 서비스들을 조합하여 비용 부담 없이 실시간 알림까지 구현한 과정을 정리해 봅니다.

1. 프로젝트 개요

• 목적: 외부인 접근이 철저히 차단된 가족 전용 대화 공간 구축
• 핵심 요구사항: 유료 요금제 없이 사진/동영상 전송 가능
• 알림 기능: 앱이 꺼져 있어도 모바일 푸시 알림이 올 것
• 보안: 가족 외의 접근을 차단하는 2중 보안 장치

2. 기술 스택

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Backend: Netlify Functions (Node.js) - 알림 발송 서버
• Database: Firebase Realtime Database - 실시간 메시징
• Storage: Cloudinary - 무료 미디어 스토리지 (Unsigned Upload 활용)
• Push: Firebase Cloud Messaging (FCM)

3. 핵심 구현 기능

3.1. 2중 보안 시스템

먼저 프론트엔드 진입 시 가족 암호(Passcode)를 입력해야 접속이 가능하도록 했고, Firebase 보안 규칙을 설정하여 고유한 roomId를 모르면 외부에서 데이터를 읽거나 쓸 수 없도록 차단했습니다.

3.2. 무료 미디어 스토리지 연동

Firebase Storage의 유료 전환 한계를 피하기 위해 Cloudinary를 선택했습니다. 서버를 거치지 않고 프론트엔드에서 직접 업로드하는 Unsigned Upload 방식을 사용하여 사진과 동영상을 자유롭게 공유합니다.

3.3. 무료 푸시 알림 서버 (Netlify Functions)

Firebase Cloud Functions는 카드 등록이 필수지만, Netlify Functions는 무료 티어에서도 서버리스 기능을 제공합니다. 메시지 전송 시 이 함수를 호출하여 백그라운드에 있는 가족들에게 실시간 푸시를 발송합니다.

3.4. PWA 적용

모바일 홈 화면에 앱처럼 설치할 수 있도록 manifest.json을 설정했습니다. 특히 iOS 16.4 이상에서 웹 푸시를 받기 위해 PWA 요건 충족은 필수였습니다.

4. 주요 트러블슈팅

• FCM API 업데이트: Legacy 방식 중단으로 인한 404 에러를 sendEachForMulticast() (HTTP v1) 방식으로 마이그레이션하여 해결했습니다.
• 중복 알림 이슈: FCM 자동 알림과 서비스 워커의 명령이 겹치는 현상을, 알림 대신 Data-only 메시지로 보내 서비스 워커가 제어하게끔 수정했습니다.
• 다중 기기 관리: 한 사용자가 폰, 태블릿 등 여러 기기를 쓸 때를 대비해 기기별 고유 토큰을 객체 형태로 저장하는 로직을 설계했습니다.

5. 프로젝트 구조 및 샘플 코드

my-family-chat/
 ┣ netlify/functions/sendPush.js  # 알림 발송 서버리스 함수
 ┣ index.html                    # 메인 채팅 UI
 ┣ firebase-messaging-sw.js      # FCM 서비스 워커
 ┗ manifest.json                 # PWA 설정
    

서버리스 함수 샘플 (sendPush.js)

const admin = require('firebase-admin');

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.SAMPLE_PROJECT_ID,
      clientEmail: process.env.SAMPLE_CLIENT_EMAIL,
      privateKey: process.env.SAMPLE_PRIVATE_KEY.replace(/\\n/g, '\n'),
    }),
    databaseURL: "https://sample-project-rtdb.firebaseio.com"
  });
}

exports.handler = async (event) => {
  // FCM HTTP v1 API를 활용한 발송 로직 구현
};
    

6. 마치며

단순히 파일을 올리는 것에서 시작해 서버리스 함수와 PWA 기술까지 접목하며 우리 가족만을 위한 완벽한 도구를 만들 수 있었습니다. Netlify의 무료 범위 내에서 충분히 운영 가능하며, 무엇보다 아이들이 이 앱을 통해 즐겁게 소통하는 모습에 큰 보람을 느낍니다.

직접 나만의 메신저를 만들어보고 싶은 분들께 이 글이 작은 도움이 되기를 바랍니다. 궁금한 점은 언제든 댓글로 남겨주세요!