본문으로 건너뛰기

20강: 모바일 앱

v1
작성 2026-04-13읽는 시간 8분

앱스토어 없이 앱 만들기

모바일 앱 인포그래픽

앱스토어 없이도 앱을 만들 수 있다고요?​

19강에서 우리는 귀찮은 반복 작업을 컴퓨터에게 맡기는 자동화 마법을 배웠어요. 아이디어를 구체화하고, 화면을 그리고, 코드를 짜서 인터넷에 올린 다음 자동화까지 붙였어요. 우리의 웹서비스는 이제 제법 그럴싸한 형태를 갖추게 됐어요.

그런데 주변 친구들이나 동료들에게 서비스를 자랑할 때, 이런 질문을 받아본 적 있으신가요?

"우와 신기하다! 근데 이거 앱으로도 있어? 앱스토어에서 뭐라고 검색해야 해?"

맞아요. 요즘 시대에 '서비스'라고 하면 당연히 스마트폰 앱을 가장 먼저 떠올려요.

하지만 진짜 앱스토어에 앱을 올리는 과정은 정말이지 험난해요. 애플이나 구글의 깐깐한 심사를 통과해야 하고, 매년 개발자 등록 비용도 내야 해요. 무엇보다 아이폰용과 안드로이드용 앱을 따로 만들려면 아주 복잡하고 어려운 전문 기술이 필요해요.

코딩을 1줄도 모르는 우리 바이브 코더들에게는 너무 높은 벽처럼 느껴져요. 하지만 조금도 걱정하지 마세요. 우리가 이미 만든 웹사이트를 그대로 모바일 앱처럼 변신시켜 주는 마법 같은 기술이 준비되어 있어요. 오늘은 앱스토어 없이도, 복잡한 언어 없이도 내 스마트폰 홈 화면에 진짜 앱을 설치하는 방법을 알아볼게요.

이건 뭐예요?​

이 마법의 이름은 PWA(Progressive Web App, 프로그레시브 웹 앱)예요. 영어 약자라 조금 어렵게 들릴 수 있지만, 아주 쉽게 말해 **'웹사이트의 탈을 쓴 앱'**이에요.

저는 PWA를 종종 '변신 로봇'에 비유하곤 해요. 평소에 컴퓨터나 스마트폰 웹 브라우저로 접속할 때는 그저 평범한 웹사이트처럼 보여요. 하지만 스마트폰에서 '홈 화면에 추가'라는 버튼을 누르는 순간, 진짜 앱으로 변신해요.

인터넷 주소창이 깔끔하게 사라지고, 바탕화면에 멋진 전용 아이콘이 생겨요. 앱스토어에 앱을 등록할 필요도 없고, 그 지루한 심사 기간을 기다릴 필요도 없어요. 그저 친구에게 웹사이트 주소(URL)만 카카오톡으로 툭 보내주면 누구나 설치할 수 있어요.

PWA의 3가지 슈퍼파워​

PWA는 크게 3가지의 엄청난 슈퍼파워를 가지고 있어요.

첫째, 홈 화면 설치예요. 내 스마트폰 바탕화면에 예쁜 앱 아이콘이 생겨요. 이 아이콘을 누르면 사파리나 크롬 같은 웹브라우저가 아니라, 독립된 하나의 앱처럼 전체 화면으로 열려요. 주소창도 없고, 뒤로가기 버튼도 없어요. 카카오톡이나 배달의민족 앱을 열 때와 똑같은 느낌이에요.

둘째, 오프라인 동작이에요. 인터넷이 터지지 않는 지하나 비행기 안에서도 앱이 켜지고 일부 기능을 사용할 수 있어요. 비밀은 '서비스 워커(Service Worker)'라는 비서가 미리 화면과 데이터를 스마트폰 안에 저장해 두기 때문이에요. 마치 출장 가기 전에 필요한 서류를 USB에 담아가는 것과 비슷해요. 인터넷이 끊겨도 USB에 담긴 서류는 볼 수 있잖아요.

셋째, 푸시 알림이에요. 진짜 모바일 앱처럼 새로운 소식이 있을 때 스마트폰 화면에 알림(Push)을 띄울 수 있어요. "새 강의가 올라왔어요!" 같은 메시지를 보낼 수 있다는 뜻이에요. (물론 알림 기능은 조금 복잡한 고급 기능이니까, 나중에 천천히 적용해도 괜찮아요.)

변신 로봇의 2가지 부품​

이 변신 로봇을 움직이게 하려면 우리 프로젝트에 딱 2가지 부품(파일)만 추가하면 돼요.

1. 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 (서비스 워커) -- 오프라인 비서

이 파일은 오프라인에서도 묵묵히 일하는 '성실한 비서'예요. 우리가 인터넷에 연결되어 있을 때 웹사이트의 이미지나 글을 몰래 창고(캐시)에 저장해 둬요. 그리고 인터넷이 끊기면 재빨리 창고에서 꺼내서 보여줘요.

HTTPS가 필수예요

PWA 마법을 작동시키려면 반드시 안전한 보안 연결(HTTPS)이 되어 있어야 해요. 혹시 기억나시나요? 우리는 16강에서 Vercel(버셀)을 통해 웹사이트를 배포하면서 HTTPS를 무료로 자동 설정했어요. 즉, 앱을 만들 모든 준비가 이미 끝난 셈이에요!

우리는 이렇게 쓰고 있어요​

디온웍스에서는 이 PWA 기술을 정말 적극적으로 활용하고 있어요. 가장 대표적인 사례가 사내 인사관리 시스템인 **'DGHR'**이에요.

이 시스템은 회사 직원들이 매일 출퇴근을 기록하고 휴가를 신청하는 중요한 도구예요. 처음에는 진짜 네이티브 앱(앱스토어에 올리는 앱)으로 만들까 진지하게 고민했어요. 하지만 곰곰이 생각해 보니, 직원 10명이 쓸 앱을 굳이 앱스토어에 올려서 전 세계 사람들에게 보여주고 까다로운 심사를 받을 이유가 전혀 없었어요.

그래서 DGHR을 일반 웹사이트로 만들고, 거기에 PWA 설정을 덧붙였어요.

출퇴근 기록은 이렇게 동작해요. 매일 아침 직원들은 스마트폰 바탕화면의 DGHR 아이콘을 터치해요. 앱이 열리면 '출근' 버튼을 누르는데, 이때 스마트폰의 GPS(위치 정보) 기능을 사용해요. 회사 건물 반경 100m 안에 있는지 자동으로 확인하고, 범위 안이면 출근 처리가 완료돼요. 앱스토어 근처에도 가지 않았는데, 완전히 진짜 앱처럼 부드럽게 동작해요.

신입사원 설치도 간단해요. 새로운 직원이 입사하면, 저는 사내 메신저로 웹사이트 주소 링크 하나만 보내줘요. 직원은 스마트폰으로 링크에 접속해서 '홈 화면에 추가' 버튼만 한 번 누르면 설치가 끝이에요. 앱스토어 계정도 필요 없고, 다운로드 대기 시간도 없어요.

또한, 지금 여러분이 보고 계신 이 AI//STUDY 아카이브 사이트도 PWA로 만들 수 있어요. PWA 설정을 추가해 두면, 출퇴근길 지하철에서 인터넷이 잠깐 끊겨도 이전에 열어봤던 강의를 오프라인으로 계속 읽을 수 있게 돼요.

한번 써볼까요?​

그럼 우리가 그동안 만들어 온 Next.js 프로젝트를 멋진 모바일 앱으로 변신시켜 볼게요. 전체 과정은 생각보다 아주 간단해요.

1단계. 준비물 챙기기

바탕화면에 예쁘게 표시될 앱 아이콘 이미지가 하나 필요해요. 정사각형 모양의 깔끔한 로고 이미지를 1장 준비해 주세요. 보통 512x512 픽셀(px) 크기가 좋아요. 아이콘이 없다면 클로드에게 "심플한 로고 이미지를 만들어줘"라고 부탁해도 돼요.

2단계. 클로드에게 부탁하기

우리가 직접 복잡한 manifest.json이나 Service Worker 코드를 짤 필요가 전혀 없어요. 항상 그랬듯이 클로드에게 "내 프로젝트를 PWA로 만들어줘"라고 다정하게 부탁만 하면 돼요. 클로드가 필요한 도구(next-pwa 패키지)를 알아서 설치하고, 설정 코드를 전부 작성해 줄 거예요.

3단계. 배포하고 확인하기

클로드가 작업을 마치면, 코드를 GitHub에 올리고 Vercel을 통해 다시 배포해요. 16강에서 배운 그 과정이에요. 이제 내 스마트폰을 꺼내서 웹사이트 주소로 접속해 봐요.

4단계. 스마트폰에서 설치하기

  • 안드로이드 폰 (크롬 브라우저): 사이트에 접속하면 화면 아래쪽에 "홈 화면에 추가"라는 안내가 자동으로 떠요.
  • 아이폰 (사파리 브라우저): 화면 하단의 '공유' 버튼(네모 위로 화살표가 솟는 아이콘)을 누르고, "홈 화면에 추가"를 선택해요.

이제 스마트폰 바탕화면으로 나가보세요. 여러분이 직접 고른 아이콘이 진짜 앱처럼 당당하게 자리 잡고 있을 거예요. 터치해서 열어보면, 인터넷 주소창 없이 화면을 꽉 채우며 깔끔하게 열리는 내 서비스를 만나게 돼요.

네이티브 앱 vs PWA, 뭐가 다를까?​

이쯤 되면 날카로운 질문이 떠오를 수 있어요. "이렇게 빠르고 좋고 무료라면, 왜 다른 회사들은 굳이 힘들게 앱스토어에 앱을 올리는 걸까요?"

PWA와 네이티브 앱(앱스토어에 등록하는 진짜 앱)은 서로 뚜렷한 장단점이 있어요. 한눈에 비교해 볼게요.

비교 항목PWA네이티브 앱
만드는 난이도쉬움 (웹사이트에 설정 추가)어려움 (전문 기술 필요)
앱스토어 심사필요 없음필수 (보통 1~7일 소요)
개발자 등록 비용무료애플 연 $99 / 구글 $25
설치 방법URL 공유 → 홈 화면 추가앱스토어에서 다운로드
업데이트 방법웹사이트 수정하면 자동 반영앱스토어에 새 버전 제출
오프라인 동작가능 (서비스 워커)가능
카메라/GPS가능가능
블루투스/NFC제한적완벽 지원
3D 게임 성능부족뛰어남
푸시 알림가능 (아이폰도 지원)가능

결론은 간단해요. 블루투스 정밀 제어나 화려한 3D 게임처럼 스마트폰의 아주 깊은 기능이 필요하면 네이티브 앱을 만들어야 해요. 하지만 그 외 대부분의 서비스는 PWA로 충분해요.

초심자분들께 드리는 저의 추천 전략은 이래요. 처음부터 네이티브 앱을 만들려고 끙끙대지 마세요. 일단 바이브 코딩으로 빠르게 만든 웹사이트에 PWA를 찰싹 붙여서 사람들에게 나눠주세요. 사람들이 더 복잡한 기능을 원하기 시작하면, 그때 네이티브 앱을 고민해도 절대 늦지 않아요.

클로드 코드 터미널에서는 이렇게​

클로드 코드(Claude Code)를 열고 PWA 설정을 직접 시켜볼게요. 아래 프롬프트들은 AI에게 말로 시키는 것이기 때문에 ! 없이 그대로 입력하면 돼요.

프롬프트 1: PWA 기본 설정 한방에 시키기​

내 Next.js 프로젝트를 PWA(프로그레시브 웹 앱)로 만들어줘.
다음 순서대로 작업해줘:
1. next-pwa 패키지를 설치해줘.
2. public 폴더에 manifest.json을 만들어줘. 앱 이름은 'AI Study', 테마 색상은 하얀색.
3. next.config.js에 PWA 설정을 추가해줘.
4. Service Worker 기본 세팅을 구성해줘.
5. 내가 준비한 512x512 로고를 앱 아이콘으로 등록하는 법을 알려줘.

프롬프트 2: 아이콘 여러 사이즈 자동 생성​

스마트폰 종류마다 아이콘 크기가 달라요. 512px 큰 이미지 하나만 있으면, 클로드가 여러 크기로 잘라줄 수 있어요.

public/icons/icon-512x512.png 이미지를 기반으로
192x192, 384x384 크기의 아이콘도 자동 생성해줘.
manifest.json의 icons 배열에 모두 등록해줘.

프롬프트 3: 오프라인 페이지 커스터마이징​

인터넷이 끊겼을 때 보여줄 예쁜 안내 화면을 만들어달라고 할 수도 있어요.

오프라인 상태일 때 보여줄 fallback 페이지를 만들어줘.
"인터넷 연결이 끊겼어요. 다시 연결되면 자동으로 새로고침됩니다." 라는
메시지가 가운데에 예쁘게 표시되는 페이지로 만들어줘.

배포하고 폰에서 확인하기​

프롬프트를 다 입력하고 클로드가 작업을 마치면, GitHub에 올려서 배포해요.

클로드 코드 대화창에서 !를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

# 변경 사항을 모두 스테이징해요
! git add .

# 커밋 메시지를 남겨요
! git commit -m "PWA 설정 추가"

# GitHub에 올려요 (Vercel이 자동으로 배포해줘요)
! git push

배포가 끝나면 스마트폰으로 내 사이트에 접속해 보세요. 홈 화면에 추가하면 진짜 앱처럼 설치돼요!

이번 강에서 기억할 것​

  • PWA(Progressive Web App)는 웹사이트를 모바일 앱처럼 쓸 수 있게 해주는 변신 로봇이에요.
  • 까다로운 앱스토어 심사나 비용 없이, URL만 전달하면 누구나 설치할 수 있어요.
  • manifest.json은 앱의 겉모습을 결정하는 명함이에요.
  • Service Worker는 오프라인에서도 일하는 성실한 비서예요.
  • PWA는 HTTPS가 필수인데, 16강에서 Vercel로 배포하면서 이미 해결했어요.
  • 바이브 코더는 처음부터 네이티브 앱을 고집하기보다, 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강까지 함께해 주셔서 진심으로 감사합니다. 여러분의 바이브 코딩 여정을 응원할게요!

▸개정 이력1건
  • v12026-04-13초판

이 글이 도움이 되었나요?