20강: 모바일 앱
앱스토어 없이 앱 만들기
앱스토어 없이도 앱을 만들 수 있다고요?
19강에서 우리는 귀찮은 반복 작업을 컴퓨터에게 맡기는 자동화 마법을 배웠어요. 아이디어를 구체화하고, 화면을 그리고, 코드를 짜서 인터넷에 올린 다음 자동화까지 붙였어요. 우리의 웹서비스는 이제 제법 그럴싸한 형태를 갖추게 됐어요.
그런데 주변 친구들이나 동료들에게 서비스를 자랑할 때, 이런 질문을 받아본 적 있으신가요?
"우와 신기하다! 근데 이거 앱으로도 있어? 앱스토어에서 뭐라고 검색해야 해?"
맞아요. 요즘 시대에 '서비스'라고 하면 당연히 스마트폰 앱을 가장 먼저 떠올려요.
하지만 진짜 앱스토어에 앱을 올리는 과정은 정말이지 험난해요. 애플이나 구글의 깐깐한 심사를 통과해야 하고, 매년 개발자 등록 비용도 내야 해요. 무엇보다 아이폰용과 안드로이드용 앱을 따로 만들려면 아주 복잡하고 어려운 전문 기술이 필요해요.
코딩을 1줄도 모르는 우리 바이브 코더들에게는 너무 높은 벽처럼 느껴져요. 하지만 조금도 걱정하지 마세요. 우리가 이미 만든 웹사이트를 그대로 모바일 앱처럼 변신시켜 주는 마법 같은 기술이 준비되어 있어요. 오늘은 앱스토어 없이도, 복잡한 언어 없이도 내 스마트폰 홈 화면에 진짜 앱을 설치하는 방법을 알아볼게요.
이건 뭐예요?
이 마법의 이름은 PWA(Progressive Web App, 프로그레시브 웹 앱)예요. 영어 약자라 조금 어렵게 들릴 수 있지만, 아주 쉽게 말해 **'웹사이트의 탈을 쓴 앱'**이에요.
저는 PWA를 종종 '변신 로봇'에 비유하곤 해요. 평소에 컴퓨터나 스마트폰 웹 브라우저로 접속할 때는 그저 평범한 웹사이트처럼 보여요. 하지만 스마트폰에서 '홈 화면에 추가'라는 버튼을 누르는 순간, 진짜 앱으로 변신해요.
인터넷 주소창이 깔끔하게 사라지고, 바탕화면에 멋진 전용 아이콘이 생겨요. 앱스토어에 앱을 등록할 필요도 없고, 그 지루한 심사 기간을 기다릴 필요도 없어요. 그저 친구에게 웹사이트 주소(URL)만 카카오톡으로 툭 보내주면 누구나 설치할 수 있어요.
PWA의 3가지 슈퍼파워
PWA는 크게 3가지의 엄청난 슈퍼파워를 가지고 있어요.
첫째, 홈 화면 설치예요. 내 스마트폰 바탕화면에 예쁜 앱 아이콘이 생겨요. 이 아이콘을 누르면 사파리나 크롬 같은 웹브라우저가 아니라, 독립된 하나의 앱처럼 전체 화면으로 열려요. 주소창도 없고, 뒤로가기 버튼도 없어요. 카카오톡이나 배달의민족 앱을 열 때와 똑같은 느낌이에요.
둘째, 오프라인 동작이에요. 인터넷이 터지지 않는 지하나 비행기 안에서도 앱이 켜지고 일부 기능을 사용할 수 있어요. 비밀은 '서비스 워커(Service Worker)'라는 비서가 미리 화면과 데이터를 스마트폰 안에 저장해 두기 때문이에요. 마치 출장 가기 전에 필요한 서류를 USB에 담아가는 것과 비슷해요. 인터넷이 끊겨도 USB에 담긴 서류는 볼 수 있잖아요.
셋째, 푸시 알림이에요. 진짜 모바일 앱처럼 새로운 소식이 있을 때 스마트폰 화면에 알림(Push)을 띄울 수 있어요. "새 강의가 올라왔어요!" 같은 메시지를 보낼 수 있다는 뜻이에요. 아이폰에서도 되는데, 조건이 하나 있어요. 사파리 탭으로 열어둔 상태가 아니라 홈 화면에 설치한 다음에야 알림이 옵니다. (물론 알림 기능은 조금 복잡한 고급 기능이니까, 나중에 천천히 적용해도 괜찮아요.)
변신 로봇의 2가지 부품
이 변신 로봇을 움직이게 하려면 우리 프로젝트에 딱 2가지 부품(파일)만 추가하면 돼요.
1. manifest.json (매니페스트) -- 앱의 명함
이 파일은 우리 웹사이트의 '명함'이에요.
앱의 이름은 뭘로 할지, 바탕화면에 깔릴 아이콘은 뭔지, 앱의 테마 색상은 뭔지 꼼꼼하게 적어두는 문서예요.
Next.js에서는 app 폴더 안에 app/manifest.ts(또는 app/manifest.json)로 넣어두면 넥스트가 알아서 명함을 붙여줘요.
실제로 이렇게 생겼어요.
{
"name": "AI Study",
"short_name": "AI Study",
"description": "AI 바이브 코딩 학습 아카이브",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0a0a0a",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
코드를 전혀 이해 못 해도 괜찮아요.
중요한 건 "name"(앱 이름), "theme_color"(테마 색상), "icons"(아이콘 이미지) 정도예요.
나머지는 클로드가 알아서 채워줘요.
2. Service Worker (서비스 워커) -- 오프라인 비서
이 파일은 오프라인에서도 묵묵히 일하는 '성실한 비서'예요.
우리가 인터넷에 연결되어 있을 때 웹사이트의 이미지나 글을 몰래 창고(캐시)에 저장해 둬요.
그리고 인터넷이 끊기면 재빨리 창고에서 꺼내서 보여줘요.
Next.js에서는 보통 public/sw.js 파일로 만들고, 앱이 켜질 때 이 비서를 출근시키는 코드 한 줄을 넣어줘요.
PWA 마법을 작동시키려면 반드시 안전한 보안 연결(HTTPS)이 되어 있어야 해요. 혹시 기억나시나요? 우리는 16강에서 Vercel(버셀)을 통해 웹사이트를 배포하면서 HTTPS를 무료로 자동 설정했어요. 즉, 앱을 만들 모든 준비가 이미 끝난 셈이에요!
우리는 이렇게 쓰고 있어요
디온웍스에서는 이 PWA 기술을 정말 적극적으로 활용하고 있어요. 가장 대표적인 사례가 사내 인사관리 시스템인 **'DGHR'**이에요.
이 시스템은 회사 직원들이 매일 출퇴근을 기록하고 휴가를 신청하는 중요한 도구예요. 처음에는 진짜 네이티브 앱(앱스토어에 올리는 앱)으로 만들까 진지하게 고민했어요. 하지만 곰곰이 생각해 보니, 직원 10명이 쓸 앱을 굳이 앱스토어에 올려서 전 세계 사람들에게 보여주고 까다로운 심사를 받을 이유가 전혀 없었어요.
그래서 DGHR을 일반 웹사이트로 만들고, 거기에 PWA 설정을 덧붙였어요.
출퇴근 기록은 이렇게 동작해요. 매일 아침 직원들은 스마트폰 바탕화면의 DGHR 아이콘을 터치해요. 앱이 열리면 '출근' 버튼을 누르는데, 이때 스마트폰의 GPS(위치 정보) 기능을 사용해요. 회사 건물 반경 100m 안에 있는지 자동으로 확인하고, 범위 안이면 출근 처리가 완료돼요. 앱스토어 근처에도 가지 않았는데, 완전히 진짜 앱처럼 부드럽게 동작해요.
신입사원 설치도 간단해요. 새로운 직원이 입사하면, 저는 사내 메신저로 웹사이트 주소 링크 하나만 보내줘요. 직원은 스마트폰으로 링크에 접속해서 '홈 화면에 추가' 버튼만 한 번 누르면 설치가 끝이에요. 앱스토어 계정도 필요 없고, 다운로드 대기 시간도 없어요.
또한, 지금 여러분이 보고 계신 이 오토프로그 랩스 아카이브 사이트도 PWA로 만들 수 있어요. PWA 설정을 추가해 두면, 출퇴근길 지하철에서 인터넷이 잠깐 끊겨도 이전에 열어봤던 강의를 오프라인으로 계속 읽을 수 있게 돼요.
한번 써볼까요?
그럼 우리가 그동안 만들어 온 Next.js 프로젝트를 멋진 모바일 앱으로 변신시켜 볼게요. 전체 과정은 생각보다 아주 간단해요.
1단계. 준비물 챙기기
바탕화면에 예쁘게 표시될 앱 아이콘 이미지가 하나 필요해요. 정사각형 모양의 깔끔한 로고 이미지를 1장 준비해 주세요. 보통 512x512 픽셀(px) 크기가 좋아요. 아이콘이 없다면 클로드에게 "심플한 로고 이미지를 만들어줘"라고 부탁해도 돼요.
2단계. 클로드에게 부탁하기
우리가 직접 복잡한 manifest.json이나 Service Worker 코드를 짤 필요가 전혀 없어요.
항상 그랬듯이 클로드에게 "내 프로젝트를 PWA로 만들어줘"라고 다정하게 부탁만 하면 돼요.
클로드가 명함 파일과 비서 파일을 알아서 만들어 줄 거예요.
next-pwa는 이제 쓰지 마세요인터넷 예전 글에는 next-pwa라는 패키지를 깔라고 나와요.
그런데 이 패키지는 2022년 8월 이후로 업데이트가 멈췄고, 지금 Next.js에서는 제대로 돌아가지 않아요.
지금은 별도 패키지 없이 넥스트가 기본으로 제공하는 기능만으로 PWA가 됩니다.
오프라인 캐시를 제대로 챙기고 싶을 때만 next-pwa의 후속인 Serwist(서위스트)를 붙이면 돼요.
클로드에게 부탁할 때 "next-pwa는 쓰지 마"라고 한마디 덧붙여 주세요.
Serwist 설명서는 웹팩(webpack)용과 터보팩(Turbopack)용이 따로 있어요. 그런데 11강에서 만든 우리 프로젝트는 터보팩이 기본으로 켜져 있죠. 인터넷 예제를 그대로 복사하면 웹팩용 설정이 딸려 와서 개발 서버가 안 뜨는 일이 생겨요. 클로드에게 부탁할 때 "우리 프로젝트는 Turbopack을 쓰니까 Serwist도 Turbopack 방식으로 붙여줘" 라고 한 줄만 더 적어주세요.
3단계. 배포하고 확인하기
클로드가 작업을 마치면, 코드를 GitHub에 올리고 Vercel을 통해 다시 배포해요. 16강에서 배운 그 과정이에요. 이제 내 스마트폰을 꺼내서 웹사이트 주소로 접속해 봐요.
4단계. 스마트폰에서 설치하기
- 안드로이드 폰 (크롬 브라우저): 사이트에 접속하면 화면 아래쪽에 "홈 화면에 추가"라는 안내가 자동으로 떠요.
- 아이폰 (사파리 브라우저): 화면 하단의 '공유' 버튼(네모 위로 화살표가 솟는 아이콘)을 누르고, "홈 화면에 추가"를 선택해요.
이제 스마트폰 바탕화면으로 나가보세요. 여러분이 직접 고른 아이콘이 진짜 앱처럼 당당하게 자리 잡고 있을 거예요. 터치해서 열어보면, 인터넷 주소창 없이 화면을 꽉 채우며 깔끔하게 열리는 내 서비스를 만나게 돼요.
네이티브 앱 vs PWA, 뭐가 다를까?
이쯤 되면 날카로운 질문이 떠오를 수 있어요. "이렇게 빠르고 좋고 무료라면, 왜 다른 회사들은 굳이 힘들게 앱스토어에 앱을 올리는 걸까요?"
PWA와 네이티브 앱(앱스토어에 등록하는 진짜 앱)은 서로 뚜렷한 장단점이 있어요. 한눈에 비교해 볼게요.
| 비교 항목 | PWA | 네이티브 앱 |
|---|---|---|
| 만드는 난이도 | 쉬움 (웹사이트에 설정 추가) | 어려움 (전문 기술 필요) |
| 앱스토어 심사 | 필요 없음 | 필수 (보통 1~2일, 신규 앱은 더 걸리기도) |
| 개발자 등록 비용 | 무료 | 애플 연 $99 / 구글 $25 (가입 시 1회) |
| 설치 방법 | URL 공유 → 홈 화면 추가 | 앱스토어에서 다운로드 |
| 업데이트 방법 | 웹사이트 수정하면 자동 반영 | 앱스토어에 새 버전 제출 |
| 오프라인 동작 | 가능 (서비스 워커) | 가능 |
| 카메라/GPS | 가능 | 가능 |
| 블루투스/NFC | 제한적 | 완벽 지원 |
| 3D 게임 성능 | 부족 | 뛰어남 |
| 푸시 알림 | 가능 (아이폰은 홈 화면에 설치해야) | 가능 |
결론은 간단해요. 블루투스 정밀 제어나 화려한 3D 게임처럼 스마트폰의 아주 깊은 기능이 필요하면 네이티브 앱을 만들어야 해요. 하지만 그 외 대부분의 서비스는 PWA로 충분해요.
초심자분들께 드리는 저의 추천 전략은 이래요. 처음부터 네이티브 앱을 만들려고 끙끙대지 마세요. 일단 바이브 코딩으로 빠르게 만든 웹사이트에 PWA를 찰싹 붙여서 사람들에게 나눠주세요. 사람들이 더 복잡한 기능을 원하기 시작하면, 그때 네이티브 앱을 고민해도 절대 늦지 않아요.
클로드 코드 터미널에서는 이렇게
클로드 코드(Claude Code)를 열고 PWA 설정을 직접 시켜볼게요.
아래 프롬프트들은 AI에게 말로 시키는 것이기 때문에 ! 없이 그대로 입력하면 돼요.
프롬프트 1: PWA 기본 설정 한방에 시키기
내 Next.js 프로젝트를 PWA(프로그레시브 웹 앱)로 만들어줘.
next-pwa 패키지는 쓰지 마. 2022년에 업데이트가 멈춰서 지금 Next.js에서는 안 돌아가.
Next.js 공식 PWA 가이드 방식 그대로 다음 순서대로 작업해줘:
1. app/manifest.ts 파일을 만들어줘. 앱 이름은 'AI Study',
배경색(background_color)은 흰색 #ffffff, 테마 색상(theme_color)은 검정 #0a0a0a.
2. public/sw.js 서비스 워커 파일을 만들어줘.
3. 앱이 켜질 때 서비스 워커를 등록하는 코드를 넣어줘.
4. 내가 준비한 512x512 로고를 앱 아이콘으로 등록하는 법을 알려줘.
프롬프트 2: 아이콘 여러 사이즈 자동 생성
스마트폰 종류마다 아이콘 크기가 달라요. 512px 큰 이미지 하나만 있으면, 클로드가 여러 크기로 잘라줄 수 있어요.
public/icons/icon-512x512.png 이미지를 기반으로
192x192, 384x384 크기의 아이콘도 자동 생성해줘.
app/manifest.ts의 icons 배열에 모두 등록해줘.
프롬프트 3: 오프라인 페이지 커스터마이징
인터넷이 끊겼을 때 보여줄 예쁜 안내 화면을 만들어달라고 할 수도 있어요.
오프라인 상태일 때 보여줄 fallback 페이지를 만들어줘.
"인터넷 연결이 끊겼어요. 다시 연결되면 자동으로 새로고침됩니다." 라는
메시지가 가운데에 예쁘게 표시되는 페이지로 만들어줘.
캐시(오프라인 저장)까지 제대로 하려면 Serwist를 붙여서 해줘.
우리 프로젝트는 Turbopack을 쓰니까, Serwist도 Turbopack 방식으로 설정해줘.
배포하고 폰에서 확인하기
프롬프트를 다 입력하고 클로드가 작업을 마치면, GitHub에 올려서 배포해요.
클로드 코드 대화창에서 !를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요. 결과가 나오면 클로드가 한마디 덧붙여 주기도 해요.
단, !는 터미널에서 연 클로드 코드에서만 되고, VS Code 확장 프로그램의 채팅 창에서는 안 돼요.
# 변경 사항을 모두 스테이징해요
! git add .
# 커밋 메시지를 남겨요
! git commit -m "PWA 설정 추가"
# GitHub에 올려요 (Vercel이 자동으로 배포해줘요)
! git push origin main
배포가 끝나면 스마트폰으로 내 사이트에 접속해 보세요. 홈 화면에 추가하면 진짜 앱처럼 설치돼요!
이번 강에서 기억할 것
- PWA(Progressive Web App)는 웹사이트를 모바일 앱처럼 쓸 수 있게 해주는 변신 로봇이에요.
- 까다로운 앱스토어 심사나 비용 없이, URL만 전달하면 누구나 설치할 수 있어요.
manifest.json은 앱의 겉모습을 결정하는 명함이에요. Next.js에서는app/manifest.ts로 넣어요.Service Worker는 오프라인에서도 일하는 성실한 비서예요. 보통public/sw.js로 만들어요.next-pwa는 2022년에 멈춘 패키지라 쓰지 마세요. 지금은 별도 패키지 없이 되고, 오프라인 캐시가 필요할 때만 Serwist를 붙여요. 이때 우리 프로젝트는 Turbopack 기준이라고 꼭 알려주세요.- PWA는 HTTPS가 필수인데, 16강에서 Vercel로 배포하면서 이미 해결했어요.
- 바이브 코더는 처음부터 네이티브 앱을 고집하기보다, PWA로 빠르게 검증하는 게 똑똑한 전략이에요.
이런 분께 추천해요
- 내가 만든 웹사이트를 스마트폰 바탕화면에 진짜 앱처럼 설치하고 싶으신 분
- 친구나 동료에게 내 서비스를 써보라고 권하고 싶은데 앱스토어 등록이 막막하신 분
- 인터넷이 끊겨도 작동하는 간단한 사내 도구나 개인 앱을 만들고 싶으신 분
참고 링크
- MDN Web Docs - PWA 시작하기 (PWA의 모든 것을 설명하는 공식 문서)
- web.dev - PWA 학습 경로 (구글이 만든 단계별 PWA 강좌)
- Next.js 공식 PWA 만들기 가이드 (영문) (별도 패키지 없이 만드는 지금의 표준 방법)
- Serwist (영문) (오프라인 캐시가 필요할 때 붙이는 도구 — 멈춰버린
next-pwa의 후속) - 오토프로그 랩스 아카이브 - PWA 기초 문서 (우리 아카이브의 PWA 상세 소개)
20강의 바이브 코딩 스터디를 마치며
여기까지 오신 여러분, 정말 대단해요.
1강에서 "바이브 코딩이 뭔가요?"라고 물었던 분이, 이제 화면을 만들고, 데이터베이스를 붙이고, 로그인을 달고, 에러를 고치고, 인터넷에 배포하고, 모바일 앱으로 확장하는 데까지 왔어요. 코드 한 줄 직접 치지 않고요.
이 스터디에서 걸어온 길을 한번 돌아볼게요.
| PART | 강 | 배운 것 |
|---|---|---|
| PART 1 마인드셋 + 환경 | 1~5강 | 바이브 코딩 이해, 용어, 환경 세팅, VS Code, Git |
| PART 2 기획 + 첫 프로젝트 | 6~9강 | PRD 작성, 프롬프트, 첫 웹페이지 배포, CLAUDE.md |
| PART 3 본격 개발 | 10~14강 | 수직 슬라이싱, 프론트엔드, 백엔드, API, 인증 |
| PART 4 검증 + 배포 | 15~17강 | 디버깅, Vercel 배포, 피드백과 개선 |
| PART 5 실전 + 확장 | 18~20강 | 디자인 레벨업, 자동화, 모바일 앱(PWA) |
여러분은 이미 바이브 코더예요. AI에게 방향을 알려주고, 결과를 확인하고, 피드백을 반영하는 사이클을 스스로 돌릴 수 있는 사람이에요.
다음 여정은 여러분이 정하는 거예요
이 스터디는 끝이지만, 바이브 코딩의 여정은 이제 시작이에요. 앞으로 이런 길들이 열려 있어요.
- 내 서비스 키우기 — 피드백을 받고, 기능을 추가하고, 사용자를 모아보세요
- 새로운 프로젝트 — 전혀 다른 아이디어로 처음부터 다시 만들어 보세요. 두 번째는 훨씬 빠를 거예요
- AI 에이전트 탐험 — MCP, 멀티에이전트, 자동화 파이프라인 같은 다음 레벨도 있어요
- 커뮤니티 참여 — 다른 바이브 코더들과 경험을 나눠보세요
다음 교시 — 만들었으면, 팔아야죠
20강으로 만드는 법은 끝났어요. 그런데 만든 것을 세상에 알리고 첫 고객을 만나는 건 또 다른 기술이에요. 그래서 다음 교시를 책 한 권으로 준비했습니다 — 73쪽 전부 무료예요.
AUTOFROG PRESS · 신간 전자책 · 전부 무료 공개『팔리는 바이브 코딩』 — AI로 제품을 만들고, 첫 고객 100명을 모으는 실전 마케팅웹으로 바로 읽기 + PDF 전권 받기 →궁금한 점이 있으시면 언제든지 연락주세요
강의를 따라하다 막히는 부분, 내 프로젝트에 적용할 때 생기는 질문, 협업 제안 등 무엇이든 환영합니다.
- 이메일: ai@d-onworks.com
- 문의 폼: Profile & 문의하기 페이지에서 바로 보내실 수 있어요
- GitHub: digiwood7 — 이슈나 디스커션으로도 남겨주세요
혼자서 고민하지 마시고, 편하게 물어봐 주세요. 여러분의 피드백이 이 아카이브를 더 좋게 만드는 힘이에요.
20강까지 함께해 주셔서 진심으로 감사합니다. 여러분의 바이브 코딩 여정을 응원할게요!
▸개정 이력4건
- v42026-07-191~20강 공통으로 반복되던 `!` 셸 모드 안내 문구를 하나로 통일 — 실행 결과에 클로드가 한마디 덧붙인다는 현행 동작과, 터미널에서 연 클로드 코드에서만 되고 VS Code 확장 채팅 창에서는 안 된다는 조건을 추가
- v32026-07-19Serwist 설명서가 webpack용·Turbopack용으로 나뉘는데 11강 프로젝트는 Turbopack 기본이라, 웹팩용 예제를 복사하면 개발 서버가 안 뜨는 문제를 주의 박스·프롬프트·요약에 반영. 프롬프트1의 "테마 색상은 하얀색"이 본문 manifest 예시(theme_color
- v22026-07-192022년 이후 업데이트가 멈춘 next-pwa 의존을 걷어내고 Next.js 공식 PWA 방식(app/manifest.ts + public/sw.js, 오프라인은 Serwist)으로 교체. 앱스토어 심사 기간(1~7일→보통 1~2일)·구글 등록비 1회성·아이폰 푸시 알림 조건(홈 화면 설치 필요)을 2026-07 공식 자료 기준으로 정정
- v12026-04-13초판