코피야

조이의 AI 작업 매뉴얼
← 홈
💰 개인 웹앱

다인이의 모임장부

여러 모임의 회비 장부를 한 곳에서 관리하는 웹앱. Firebase(Firestore)로 실시간 동기화되고, 멤버에게 링크를 공유하면 로그인 없이 "보기 전용"으로 볼 수 있어.

1Firebase 프로젝트 만들기 (5분)
  1. Firebase 콘솔 접속 → 프로젝트 추가
  2. 프로젝트 이름 입력 (예: moim-jangbu) → 계속 진행 (Google Analytics는 꺼도 됨)
  3. 왼쪽 메뉴 빌드 > Firestore Database → 데이터베이스 만들기 — 위치는 asia-northeast3 (서울) 추천, 보안 규칙은 일단 아무거나 선택 (3단계에서 교체)
  4. 왼쪽 메뉴 빌드 > Authentication → 시작하기 → Sign-in method 탭 → 이메일/비밀번호 사용 설정 켜기 (이 방식으로 총무 계정을 만듦)
  5. 왼쪽 메뉴 프로젝트 설정(톱니바퀴) > 일반 → 아래로 스크롤 → 웹 앱 추가(</> 아이콘) → 닉네임 입력 → 앱 등록
  6. 화면에 나오는 firebaseConfig 객체 값을 복사해둔다
총무 계정은 사파리에서 로그인하든 홈 화면 앱에서 로그인하든 항상 같은 계정 = 같은 총무 권한이 유지돼.
2이 프로젝트에 설정 붙여넣기
  1. js/firebase-config.js 파일을 연다
  2. 방금 복사한 firebaseConfig 값으로 apiKey · authDomain · projectId · storageBucket · messagingSenderId · appId를 전부 교체한다
3Firestore 보안 규칙 적용하기
  1. Firebase 콘솔 → Firestore Database > 규칙 탭으로 이동
  2. 이 프로젝트의 firestore.rules 파일 내용을 그대로 복사해서 붙여넣는다
  3. 게시 버튼을 누른다
이 규칙이 하는 일 — 장부 데이터는 누구나 읽을 수 있음(링크만 있으면 멤버가 로그인 없이 조회), 쓰기(추가·수정·삭제)는 총무 계정으로 로그인한 사람만 가능.
4표지 사진 저장소(Storage) 설정하기
  1. Firebase 콘솔 왼쪽 메뉴 빌드 > Storage → 시작하기 (요금제 안내가 나와도 무료 Spark 요금제로 충분)
  2. 위치는 Firestore와 같은 asia-northeast3 (서울) 추천
  3. Rules 탭 → 이 프로젝트의 storage.rules 파일 내용을 그대로 붙여넣고 게시
5로컬에서 확인하기 (선택)
  1. 폴더 전체를 정적 서버로 열면 확인 가능. 예: 터미널에서 npx serve .
  2. 또는 VS Code의 "Live Server" 확장 사용
  3. 파일을 더블클릭해서 여는 file:// 방식은 모듈 로딩이 막혀서 동작하지 않으니 피한다
6Cloudflare Pages에 배포하기
  1. Cloudflare 대시보드 → Workers & Pages > 애플리케이션 만들기 > Pages > 직접 업로드
  2. 프로젝트 이름 입력 후, zip 파일의 내용물(폴더 안의 파일들)을 업로드 — index.html이 최상위 경로에 바로 있어야 함 (zip을 풀어서 그 안의 파일/폴더를 통째로 드래그)
  3. 배포가 끝나면 https://프로젝트이름.pages.dev 주소가 생김. 이게 앱 기본 주소
7총무 계정 최초 생성 (처음 한 번만)
  1. Firebase 콘솔 → Authentication > Users 탭 → 사용자 추가
  2. 이메일 chongmu@moim-jangbu.local과 원하는 비밀번호로 계정 생성
  3. 그 다음부터는 앱에서 "총무 로그인" → 그 비밀번호로 로그인하면 됨
  4. 각 환경(사파리 / 홈 화면 앱)에서 처음 한 번씩만 로그인하면 그 뒤로는 로그인 상태 유지
사용 방법
  1. 내역 추가 — 장부 화면 우측 상단의 ＋ 버튼
  2. 수입/지출에 멤버 연결 — 내역 추가 시 멤버를 선택하면 목록에 그 멤버 이름이 함께 표시됨
  3. 이달 회비 받기 — 홈 탭 → "이달 회비 받기" → 실제로 낸 멤버만 선택 후 "등록" (안 낸 멤버는 다음에 다시 받을 수 있음)
  4. 장부 공유하기 — 장부 안 우측 상단 🔗 아이콘 또는 설정 탭 → "공유 링크 보기" → 링크 복사 → 멤버에게 전달
  5. 멤버 — 받은 링크로 들어오면 로그인 없이 바로 내역 조회 (수정/추가 불가)
  6. 여러 장부 관리 — 로그인하면 내가 만든 모든 장부가 홈 화면에 자동 나열 (기기/브라우저 무관)
  7. 표지 사진 — 장부 만들 때 또는 설정 탭 → "장부 정보 수정"에서 업로드 (안 올리면 색상 그라데이션으로 표시)
파일 구조
  1. index.html — 앱 진입점
  2. manifest.json — PWA 설정 (홈 화면 추가용)
  3. css/style.css — 전체 스타일
  4. js/firebase-config.js — ⚠️ 여기에 본인 Firebase 값 입력
  5. js/app.js — 앱 로직 전체
  6. icons/ — 앱 아이콘
  7. firestore.rules — Firebase 콘솔에 붙여넣을 Firestore 보안 규칙
  8. storage.rules — Firebase 콘솔에 붙여넣을 Storage(표지 사진) 보안 규칙
🙋 총무 권한, 꼭 알아두기
총무 권한은 비밀번호 하나로 관리돼 (화면엔 안 보이지만 내부적으로는 고정된 이메일로 Firebase 로그인을 씀 — 신경 안 써도 됨). 사파리에서도 홈 화면 앱에서도 같은 비밀번호로 로그인하면 항상 총무 권한을 쓸 수 있어.
이 방법으로 작업하면서 남긴 메모야. "다인이의 모임장부" 기록은 다른 카드와 별도로 저장돼서, 여기서 지워도 다른 곳엔 영향 없어.
기록 목록
불러오는 중…
＋ 새 기록 추가
예전에 어떻게 했는지 헷갈릴 때 이 순서대로 따라가면 돼.