«실전 02»의 신입 온보딩 체크리스트는 신입사원이 30일 동안 매일 여는 앱입니다. 그런데 매번 카톡에서 링크를 찾아 누르게 할 수는 없지요. 앱스토어에 올리지 않고도, 휴대폰 홈 화면에 아이콘을 만들어 앱처럼 열게 하는 방법이 있습니다. 이름은 PWA(프로그레시브 웹 앱). 이번에도 Codex에 우리말로 요청했고, 무엇이 바뀌었는지 실제 화면으로 보여 드립니다.
| 링크로 열기 | PWA(홈 화면 아이콘) | 앱스토어 앱 | |
|---|---|---|---|
| 만드는 수고 | 없음 | AI에게 한 번 요청 | 아이폰·안드로이드 따로 개발, 심사 |
| 설치 | 없음 | «홈 화면에 추가» 한 번 | 스토어에서 내려받기 |
| 열 때 | 카톡·즐겨찾기에서 찾기 | 아이콘 한 번, 주소창 없음 | 아이콘 한 번 |
| 고치면 | 바로 반영 | 바로 반영(다시 설치 필요 없음) | 업데이트 다시 심사 |
| 어울리는 앱 | 한 번 쓰는 설문·신청서 | 몇 주간 자주 여는 사내 앱 | 푸시·카메라를 깊게 쓰는 서비스 |
«PWA 만들어줘»보다 왜 필요한지를 먼저 쓰면 AI가 알아서 챙기는 게 많아집니다. 실제로 보낸 요청입니다.
신입사원들이 이 앱을 30일 동안 매일 열어요. 휴대폰 홈 화면에 앱 아이콘으로 추가할 수 있게(PWA) 만들어 주세요. - 앱 이름은 «온보딩 30», 아이콘은 지금 화면의 초록 새싹 느낌으로 만들어 주세요 - 홈 화면에서 열면 주소창 없이 앱처럼 열리게 - 인터넷이 잠깐 끊겨도 첫 화면과 «연결이 끊겼어요» 안내는 보이게 (체크 기록은 연결되면 저장) - 로그인 화면에 «홈 화면에 추가하는 법»을 아이폰·안드로이드로 나눠 짧게 안내 - HRD 담당자가 오리엔테이션 때 띄울 수 있게 앱 주소 QR 코드 화면도 하나 만들어 주세요 (/qr 주소) 다 되면 빌드와 테스트를 하고, GitHub(main)에 올리고 Cloudflare Pages에 다시 배포해 주세요. 비밀 값이나 test-accounts.md는 GitHub에 올리지 마세요. 끝나면 무엇을 바꿨는지 쉬운 말로 정리해 주세요.
① 앱의 «신분증»(이름 «온보딩 30», 아이콘, «주소창 없이 열기» 설정)을 붙였습니다. ② 화면을 휴대폰에 저장해 두는 일꾼(서비스 워커)을 넣었습니다. ③ 인터넷이 끊긴 사이 누른 체크를 기기에 메모해 두었다가 연결되면 보내게 했습니다. ④ 설치 안내와 QR 화면을 만들었습니다. 파일 25개가 바뀌었고, 빌드·테스트 18개와 배포된 주소에서 오프라인 저장·재연결 검사까지 통과한 뒤 GitHub와 Cloudflare에 올렸습니다.
PWA는 앱이 저절로 깔리지 않습니다. 사용자가 브라우저 메뉴에서 «홈 화면에 추가»를 한 번 눌러야 합니다. 그래서 로그인 화면에 안내를 넣고, 오리엔테이션 때 화면에 띄울 QR을 따로 만들었습니다.
| 휴대폰 | 신입사원이 할 일 | 자주 막히는 곳 |
|---|---|---|
| 아이폰 | Safari로 열기 → 아래 공유 버튼(네모에 화살표) → «홈 화면에 추가» → 추가 | 카톡·네이버 앱 안에서 열면 메뉴가 없음 → «Safari로 열기» 먼저 |
| 안드로이드 | Chrome으로 열기 → 오른쪽 위 ⋮ → «홈 화면에 추가» 또는 «앱 설치» | 삼성 인터넷이면 메뉴 이름이 조금 다름(«현재 페이지 추가 → 홈 화면») |
✅ 배포 주소를 휴대폰 크기로 열고, 인터넷을 끊은 뒤 새로고침해도 화면과 안내가 뜨는 것을 직접 찍었습니다.
✅ «끊긴 사이 체크 → 재연결 후 저장»은 Codex가 배포 주소에서 검사했다고 보고했습니다.
⚠️ 실제 휴대폰에서 «홈 화면에 추가»를 누르는 장면은 확인하지 못했습니다(Codex도 «실제 휴대폰 설치는 미검증, Chrome 설치 조건 검사는 통과»라고 적었습니다). 오리엔테이션 전에 담당자가 본인 휴대폰 두 대(아이폰·안드로이드)로 한 번씩 해 보세요.
이 앱을 휴대폰 홈 화면에 아이콘으로 추가할 수 있게(PWA) 만들어줘. 앱 이름은 «○○», 아이콘은 지금 화면 색과 어울리게 만들어 주고, 아이콘으로 열면 주소창 없이 열리게 해줘. 인터넷이 잠깐 끊겨도 마지막 화면과 «연결이 끊겼어요» 안내는 보이게 해줘. 로그인 화면에 아이폰·안드로이드별 «홈 화면에 추가하는 법»을 짧게 넣어줘.
강의장 화면에 크게 띄울 /qr 페이지를 만들어줘. 앱 주소 QR 코드를 크게, 그 아래 주소 글자와 «카메라로 비춘 뒤 홈 화면에 추가하세요» 안내를 넣어줘. 로그인하지 않아도 볼 수 있게 하고, 빔프로젝터에서도 잘 보이게 글자를 크게 해줘.
배포된 주소에서 이 앱이 «홈 화면에 추가» 조건을 갖췄는지 점검해줘. 아이콘·이름·주소창 없이 열기 설정, 인터넷을 끊고 새로고침했을 때 화면이 뜨는지, 휴대폰 너비에서 글자가 잘리거나 붙는 곳이 없는지 확인하고 결과를 쉬운 말로 알려줘.
| 이어서 읽기 | 무엇을 |
|---|---|
| 실전 02 · 온보딩 체크리스트 | 이번 글의 앱을 처음 만든 과정 |
| 확장 01 · 로그인 | «승인된 계정만» 들어오는 문 |
| 확장 02 · 앱 안에 AI | 열쇠는 주방에, 1분에 한 번 |
| 확장 04 · 운영과 비용 | 쓰는 사람이 늘면 볼 곳 |
2026년 10월 8일 «실전 02» 프로젝트 폴더에서 Codex(같은 ChatGPT 계정의 명령줄 버전 — 데스크톱 앱 입력창이 이날 키보드 입력을 받지 않아 바꿨습니다)에 위 요청을 보냈고, Codex가 GitHub·Cloudflare Pages 배포까지 마쳤습니다. 화면은 배포 주소를 휴대폰 너비(390px)로 열어 찍었고, 오프라인 화면은 브라우저의 인터넷을 실제로 끊고 새로고침해 찍었습니다. 계정은 모두 가상입니다.