[육아 스케줄 어플] STEP 3. 앱스토어 없이 내 폰에 앱 깔기! PWA의 마법

안녕하세요! 전(全)자동입니다!

 

지난 STEP 2에서는 구글 스프레드시트와 GAS를 이용해 온 가족이 실시간으로 스케줄을 공유할 수 있는 무료 데이터베이스(DB)를 구축했습니다. 이제 아내가 회사에서 일정을 바꾸면, 제 폰과 아이들 폰에도 즉각 반영되는 완벽한 동기화 시스템이 완성되었죠.

하지만 매일매일 써야 하는 이 어플, 치명적인 단점이 하나 남아있었습니다.

1. 운전 중에 언제 인터넷 켜고 주소 치고 앉아있나?

급하게 다음 픽업 장소로 이동해야 하는데, 스마트폰을 켜서 ➔ 크롬이나 사파리 브라우저 앱을 열고 ➔ 즐겨찾기 해둔 주소를 누르거나 직접 타이핑해서 들어가는 과정... 이거 은근히 사람 속 터지게 만듭니다.

 

"진짜 앱처럼 바탕화면에 아이콘 하나 딱! 누르면 1초 만에 전체 화면으로 켜지면 안 되나?"

 

그래서 폭풍 검색 끝에 알아낸 기술이 바로 PWA(Progressive Web App)입니다. 쉽게 말해 '웹 사이트를 진짜 앱처럼 변신시켜 내 폰 바탕화면에 설치해 주는 기술'입니다. 앱스토어나 플레이스토어의 그 까다롭고 오래 걸리는 심사 과정을 거칠 필요도 없죠!

2. 코딩은 몰라도 PWA 기획은 내가 한다!

PWA를 적용하려면 manifest.json 이라는 설정 파일과 service-worker.js라는 스크립트가 필요하다고 합니다.

네, 저도 무슨 소린지 하나도 모릅니다. 하지만 우리는 바이브코딩의 대가 아닙니까?

AI에게 제 기획 의도를 정확히 전달하기만 하면 됩니다.

💡 전(全)자동 아빠의 PWA 바이브코딩 프롬프트

"너는 10년 차 수석 프론트엔드 개발자야. 내가 만든 '육아 데일리 스케줄러' 웹 사이트를 스마트폰 바탕화면에 앱처럼 설치할 수 있게 PWA(Progressive Web App)를 적용하려고 해.

[핵심 요구사항]
1. 독립적인 앱 화면: 앱을 실행했을 때 상단에 인터넷 주소창이 안 보이고 완전한 전체 화면(Standalone)으로 열리게 해 줘.
2. 앱 아이콘 설정: 바탕화면에 설치될 때 예쁜 아이콘이 적용될 수 있게 설정 파일(manifest.json)을 짜 줘. (앱 이름은 '가족 스케줄러'로 해줘)
3. 오프라인 캐싱: 인터넷이 아주 잠깐 끊겨도 화면이 하얗게 뜨지 않도록 기본적인 서비스 워커(service worker) 코드를 작성해 줘.
4. 이 파일들을 내 HTML 구조 어디에 어떻게 연결해야 하는지, 기획자도 이해할 수 있게 가장 쉬운 단계별로 설명해 줘."

3. 마침내 내 폰에 깔린 '아빠표 어플'의 위엄

AI가 시키는 대로 코드를 두어 개 추가하고 새로고침을 했더니, 스마트폰 브라우저 하단에 "홈 화면에 추가하시겠습니까?"라는 반가운 팝업이 떴습니다. 떨리는 마음으로 [추가] 버튼을 눌러보았습니다.

 

결과는 대성공! 스마트폰 바탕화면에 당당하게 '가족 스케줄러'라는 아이콘이 생겼습니다. 아이콘을 꾹 누르니 인터넷 주소창도 없이 아주 깔끔한 전체 화면으로 우리가 만든 스케줄러가 1초 만에 켜집니다.

• 아내의 반응: "헐! 이거 진짜 구글 플레이스토어에서 다운받은 거 아냐?!"
• 아이들의 반응: "아빠 최고! 내 폰에도 이거 깔아줘!"

기획자 아빠의 어깨가 남산만 해지는 순간입니다.

무료로 코딩 한 줄 안 짜고 우리 가족만의 진짜 어플을 내 폰에 심는 데 성공했습니다.

4. 다음 STEP 4 예고: "화면 안 봐도 알게 해 줄게!" 강력한 알림(Push) 기능

자, 이제 바탕화면에 앱도 깔았고 실시간 공유도 됩니다. 그런데 며칠 이 어플을 쓰며 직접 운전대를 잡아보니, 기획자로서 또 하나의 뼈저린 깨달음이 왔습니다.

 

"아니, 바빠 죽겠는데 매번 앱을 켜서 언제인지 확인하고 있어야 해?"

 

맞습니다. 진짜 스마트한 어플이라면 제가 묻기 전에 먼저 알려줘야죠. 그래서 다음 STEP 4에서는 픽업 시간이 다가오면 스마트폰에 "띠링! 10분 뒤 미술학원 픽업 시간입니다!" 하고 진동과 함께 알림 팝업(Push)을 띄워주는 기능을 개발해 보겠습니다. 화면을 계속 쳐다보지 않아도 어플이 제비처럼 타이밍을 물어다 주는 마법! 아빠의 생존형 바이브코딩, 다음 편도 기대해 주세요!

---

💡 왜 앱스토어 대신 'PWA(웹앱)'를 선택했을까? (3대 핵심 장점)

스마트폰 앱을 만든다고 하면 흔히 구글 플레이스토어나 애플 앱스토어에 등록하는 것부터 떠올립니다. 하지만 직장인 아빠가 가족용 앱을 만들 때는 PWA(Progressive Web Apps) 방식이 압도적으로 유리합니다.

• 1. 까다로운 앱스토어 심사 및 등록비 무료
  애플 개발자 계정은 1년에 약 13만 원($99), 구글은 25달러의 등록비가 듭니다. 게다가 심사 통과까지 며칠씩 걸리지만, PWA는 코드 작성 즉시 단 1초 만에 스마트폰에 배포할 수 있습니다.
• 2. 실시간 자동 업데이트 (수정 즉시 반영)
  기존 앱은 오타 하나만 고쳐도 앱스토어에 다시 제출하고 가족들이 일일이 '업데이트' 버튼을 눌러야 합니다. 반면 PWA는 깃허브 코드만 수정하면 온 가족 스마트폰에 실시간으로 즉시 적용됩니다.
• 3. 폰 용량을 전혀 차지하지 않는 가벼움
  일반 앱들은 수십~수백 MB의 용량을 차지해 스마트폰 저장 공간을 갉아먹지만, 웹 기술 기반의 PWA는 1MB도 되지 않아 아이들 스마트폰에도 부담 없이 가볍게 깔립니다.

📱 아이폰(Safari) & 갤럭시(Chrome) 홈 화면 추가 초간단 팁

• 아이폰: Safari 브라우저에서 주소 접속 ➔ 하단 중앙 [공유(네모+화살표)] 아이콘 ➔ [홈 화면에 추가] 터치

• 갤럭시: Chrome 브라우저에서 주소 접속 ➔ 우측 상단 [점 3개(⋮)] ➔ [앱 설치] 또는 [홈 화면에 추가] 터치