코딩 없이 앱 만들기(App)를 했다고 앱스토어에 올리는 것은 아닙니다. 앱스토어 심사도 없고, 서버 설치도 없고, 개발자 계정도 필요 없습니다. HTML 파일 하나를 인터넷에 올렸을 뿐인데, 스마트폰 홈 화면에 아이콘이 생기고 앱처럼 실행됩니다. 3편에서는 마음 공유 앱이 실제로 어떻게 배포되었는지, 그 전체 과정을 공개합니다.
PWA란 무엇인가
PWA(Progressive Web App)는 웹사이트인데 앱처럼 동작하는 기술입니다. 카카오톡이나 인스타그램처럼 앱스토어에서 설치하는 것이 아니라, 브라우저에서 주소를 열고 “홈 화면에 추가”를 누르면 됩니다. 그러면 홈 화면에 아이콘이 생기고, 다음부터는 그 아이콘을 눌러 앱처럼 바로 실행할 수 있습니다.
| 구분 | 일반 앱 | PWA |
|---|---|---|
| 설치 방법 | 앱스토어 | 브라우저에서 바로 |
| 개발 비용 | 수백~수천만원 | 무료 |
| 심사 기간 | 1~2주 | 즉시 |
| 운영 서버 | 필요 | 불필요 (Netlify 무료) |
| 업데이트 | 앱스토어 재심사 | 파일 교체 즉시 반영 |
마음 공유 앱의 기술 구조
이 앱은 단 두 가지 서비스로 구동됩니다. 코딩도 서버도 없이, AI와의 대화만으로 설계된 구조입니다.
| 역할 | 서비스 | 설명 | 비용 |
|---|---|---|---|
| 호스팅 + 도메인 | Netlify | 앱 파일을 인터넷 주소로 제공 | 무료 |
| 데이터베이스 | Firebase | 일기, PIN, 기도댓글 저장 | 무료 (3인 기준) |
Netlify는 건물 외벽과 간판, Firebase는 건물 안의 창고입니다. 둘 다 없으면 앱이 동작하지 않고, 둘 다 무료입니다.
배포 과정 전체 공개
1단계 — Firebase 프로젝트 만들기
Google 계정으로 console.firebase.google.com에 접속합니다. “프로젝트 만들기”를 누르고 이름을 입력하면 됩니다. Google Analytics는 비활성화해도 됩니다. 프로젝트가 생성되면 Realtime Database를 만들고 위치를 싱가포르(asia-southeast1)로 선택합니다.
💡 포인트 — Firebase는 가족 3명이 매일 써도 무료 한도의 1%도 안 됩니다. 수천 명이 동시에 써야 유료가 됩니다.
2단계 — Firebase 설정 코드 받기
프로젝트 설정에서 웹 앱을 추가하면 아래와 같은 설정 코드가 나옵니다. 이 코드를 그대로 AI에게 붙여넣으면 AI가 앱과 Firebase를 연결해줍니다.
const firebaseConfig = {
apiKey: “AIza…”,
authDomain: “프로젝트명.firebaseapp.com”,
databaseURL: “https://프로젝트명.firebasedatabase.app”,
projectId: “프로젝트명”,
…
};
3단계 — Firebase 보안 규칙 설정
Realtime Database → 규칙 탭에서 아래 규칙을 입력하고 게시합니다. 최상위를 막고 필요한 경로만 여는 것이 핵심입니다.
{
“rules”: {
“.read”: false,
“.write”: false,
“scores”: { “.read”: true, “.write”: true },
“diaries”: { “.read”: true, “.write”: true },
“settings”: { “.read”: true, “.write”: true }
}
}
💡 포인트 — scores는 온도계용 점수만 저장 (비로그인도 읽기 가능), diaries는 일기 내용 (PIN 로그인 후에만 앱에서 표시), settings는 PIN 번호 저장입니다.
4단계 — Netlify에 파일 올리기
Google 계정으로 netlify.com에 가입합니다. 로그인 후 AI가 만들어준 HTML 파일을 index.html로 이름을 바꾸고 드래그앤드롭합니다. 30초 후 아래와 같은 주소가 생깁니다.
https://amazing-name-123456.netlify.app
이 주소를 가족 단톡방에 공유하면 됩니다. 설치도 필요 없습니다. 브라우저에서 바로 열립니다.
💡 포인트 — 업데이트할 때도 같은 방법입니다. 새 파일을 드래그하면 주소는 그대로 유지되면서 내용만 바뀝니다.
5단계 — 홈 화면에 아이콘 추가 (PWA 설치)
이제 앱을 스마트폰 홈 화면에 아이콘으로 설치할 수 있습니다.
| 기기 | 방법 |
|---|---|
| 아이폰 (iOS) | 사파리에서 주소 열기 → 하단 공유 버튼 → “홈 화면에 추가” |
| 안드로이드 | 크롬에서 주소 열기 → 주소창 오른쪽 설치 아이콘 → 설치 / 또는 앱 내 “홈에 추가” 배너 탭 |
설치 후 홈 화면에서 🏡 아이콘을 누르면 주소창 없이 앱처럼 실행됩니다.
보안 설계 — 가장 중요한 부분
앱을 만들면서 가장 많은 시간을 쏟은 부분이 보안입니다. 가족의 솔직한 감정이 담기는 공간이기 때문입니다. 최종적으로 완성된 보안 구조는 이렇습니다.
| 상태 | 볼 수 있는 것 | 볼 수 없는 것 |
|---|---|---|
| 비로그인 | 실내온도 (4단계) | 일기 내용, 달력, 기도댓글 |
| PIN 로그인 후 | 전체 일기, 달력, 기도댓글 | — |
| 아들 일기 | 가족만 열람 | 어떤 경우에도 외부 공개 불가 |
💡 핵심 원칙 — PIN을 입력하기 전까지는 Firebase에서 일기 데이터를 아예 읽지 않습니다. PIN 입력 성공 순간에만 데이터를 불러옵니다. 코드 레벨의 차단만으로는 부족하고, 데이터 접근 자체를 막아야 합니다.
완성된 기능 목록
| 카테고리 | 기능 |
|---|---|
| 일기 작성 | 오늘의 말씀 직접 입력 |
| 오늘의 기도문 작성 | |
| 감정 이모지 + 이벤트 태그 + 일기 본문 | |
| 공유 | 오늘 가족 3명의 일기 한 화면에 모아보기 |
| 가족 기도 댓글 남기기 | |
| 달력 | 가족 달력 — 날짜별 색깔 점으로 작성 여부 표시 |
| 기도편지 — 내가 써준 기도댓글 날짜별 모음 | |
| 온도계 | 실내온도 — ❄️잠잠 → 🌱따뜻 → ☀️활발 → 🔥뜨거움 |
| 비로그인에서도 그룹 현황 가시적으로 확인 | |
| 보안 | 개인별 PIN 설정 및 변경 |
| PIN 입력 성공 후에만 데이터 로드 |
AI와 함께 만든다는 것의 의미
이 앱을 만드는 데 걸린 시간은 하루입니다. 개발자에게 의뢰했다면 수백만 원과 수개월이 걸렸을 일입니다. 그런데 더 중요한 것은 비용이나 시간이 아닙니다.
처음 아이디어를 낼 때 “마인드 공유”, “실내온도”, “기도편지” — 이 단어들은 개발 용어가 아닙니다. 목회 현장에서 나온 언어입니다. AI는 그 언어를 이해하고 기술로 구현해줬습니다. 코딩을 배운 것이 아니라 목회적 상상력이 기술을 이끈 것입니다.
앞으로 이 앱은 한 가정을 넘어 교회 소그룹 전체로 확장될 예정입니다. 각 가정의 실내온도를 목회자가 한눈에 파악하고, 심방과 기도의 우선순위를 정하는 도구가 될 것입니다.
다음 편 예고
4편에서는 실제로 가족이 이 앱을 사용한 후기를 나눕니다. 어떤 날의 일기가 가족 대화를 시작했는지, 말로는 못 했던 감정이 어떻게 공유되었는지 — 기술이 아닌 관계의 이야기를 담습니다.
📌 온컨택트 목회 프로젝트 시리즈
1편 — 초연결 시대의 소그룹과 마음 공유 (보러가기)
2편 — 마음 공유 프롬프트 설계 과정 (보러가기)
3편 — PWA 앱으로 구현한 방법 (현재 글)
4편 — 목회 현장 적용 후기 (공개 예정)
PWA앱배포, Netlify호스팅, Firebase데이터베이스, 마음공유프로젝트, 온컨택트목회, AI목회도구, 비개발자앱개발, 소그룹목회, 실천신학