[육아 스케줄 어플] STEP 4. 앱 안 봐도 띠링~! 스마트폰 알림(Push) 기능 추가하기

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

 

지난 STEP 3에서는 우리가 만든 스케줄러 웹 사이트를 내 스마트폰 바탕화면에 진짜 앱처럼 설치하는 'PWA' 마법을 경험했습니다.

아내와 제 스마트폰, 그리고 아이들 폰에도 떡하니 자리 잡은 '가족 스케줄러' 아이콘을 볼 때마다 어찌나 뿌듯하던지요.

하지만 며칠 동안 실전에서 이 앱을 써보니, 기획자로서 또 하나의 뼈저린 깨달음이 찾아왔습니다.

 

1. "여보! 나 회의하느라 픽업 시간 놓칠 뻔했어!"

아무리 바탕화면에 앱이 깔려있고 UI가 직관적이어도, 결국 '내가 직접 앱을 켜서 봐야만' 다음 일정을 알 수 있다는 단점이 있었습니다.

회사에서 정신없이 업무를 보거나 연속 회의에 들어가면 시계를 볼 틈도 없습니다. 운전대를 잡고 꽉 막힌 도로에 있을 때도 마찬가지죠.

진짜 스마트한 비서라면, 제가 시간을 묻기 전에 "이제 슬슬 출발하셔야 합니다!"라고 먼저 알려줘야 하는 것 아닐까요?

그래서 바이브코딩 시즌3의 마지막 핵심 기능으로 '스마트폰 푸시(Push) 알림'을 도입하기로 결심했습니다.

2. 코딩은 몰라도 알림 타이밍은 내가 정한다!

스마트폰에 알림을 띄우려면 복잡한 권한 설정과 백그라운드 코딩이 필요하다고 합니다. 하지만 늘 그랬듯, 어려운 코딩은 AI의 몫입니다.

저는 그저 '어떤 상황에서, 어떤 메시지가 오면 좋을지' 명확하게 기획하여 프롬프트를 던졌습니다.

💡 전(全)자동 아빠의 알림 기능 프롬프트

"너는 10년 차 수석 프론트엔드 개발자야. 우리가 STEP 3에서 만든 PWA 스케줄러 앱에 스마트폰 푸시(Push) 알림 기능을 추가하려고 해.

[핵심 요구사항]
1. 알림 타이밍: 구글 시트에서 불러온 다음 스케줄(Next) 시작 시간 딱 10분 전에 알림이 울리게 해 줘.
2. 알림 메시지: 스마트폰 기본 알림창에 '띠링! 10분 뒤 [학원 이름] 픽업 시간입니다 🚗' 라고 직관적으로 뜨게 만들어 줘.
3. 권한 요청: 앱을 처음 켰을 때 사용자에게 '알림을 허용하시겠습니까?'라는 권한 동의 창이 자연스럽게 뜨도록 코드를 추가해 줘.
4. 기존에 만들었던 service-worker.js 코드 어디에 이 알림 로직을 추가해야 하는지 초보자도 알기 쉽게 설명해 줘."

3. 화면 안 봐도 띠링~! 드디어 완성된 궁극의 스케줄러

프롬프트를 입력하자 챗GPT는 알림 권한을 요청하는 자바스크립트 코드와, 10분 전에 알림을 쏴주는 타이머 로직을 뚝딱 만들어 주었습니다. 코드를 복사해 넣고 앱을 다시 켜니, 화면 상단에 반가운 팝업이 뜹니다.

그리고 그날 오후 1시 50분. 주머니 속에 있던 제 스마트폰과, 회사 책상 위에 있던 아내의 스마트폰이 동시에 울렸습니다.

💬 전자동의 스케줄 어플 화면

성공입니다! 이제 픽업 시간을 잊어버릴까 봐 전전긍긍하며 시계를 쳐다볼 필요가 없어졌습니다. 운전 중이든, 회의 중이든 스마트폰이 알아서 10분 전에 진동과 함께 알려주니까요.

직관적인 화면(STEP 1), 실시간 DB 공유(STEP 2), 바탕화면 앱 설치(STEP 3), 그리고 완벽한 알림 기능(STEP 4)까지. 이로써 코딩의 'ㅋ'자도 모르는 아빠가 오직 AI와의 대화(바이브코딩)만으로 만들어낸 '우리 가족 맞춤형 육아 스케줄 어플'이 100% 완성되었습니다.

4. 바이브코딩 시즌3를 마치며

처음 아내의 복직 소식을 듣고 몰려왔던 픽업 전쟁에 대한 두려움은, 이제 제가 직접 기획하고 AI가 만들어준 이 작

은 어플 덕분에 완벽한 평화로 바뀌었습니다.

전문 개발자가 아니어도 좋습니다. '일상의 불편함을 해결하겠다는 기획(아이디어)'과 'AI에게 명확하게 명령을 내리는 프롬프트 엔지니어링'만 있다면, 누구나 자신만의 앱을 만들어 낼 수 있는 시대입니다.

전(全)자동 아빠의 생존형 바이브코딩 시즌3는 여기서 마무리됩니다.

우리 가족의 평화를 지켜줄 다음 시즌, 더 재미있고 기발한 프로젝트로 다시 돌아오겠습니다.

지금까지 응원해 주셔서 감사합니다!