11회 · 앱의 세계: 웹·PWA·네이티브
웹앱, PWA, 네이티브 앱의 차이와 고르는 기준을 알고, 내 웹앱을 휴대폰 홈 화면에 설치되는 PWA로 만듭니다.
“모든 서비스가 스토어 앱일 필요는 없다. 먼저 홈 화면에 올려 보자.”
학습 목표
- 웹앱·PWA·네이티브 앱의 차이와 고르는 기준을 안다
- 내 웹앱을 PWA로 만들어 휴대폰 홈 화면에 설치한다
- 모바일 화면에 맞는 사용성(터치, 글자 크기)을 다듬는다
오늘 만드는 것: 휴대폰 홈 화면에 설치되는 웹앱
실습 진도
—
실습 단계를 체크하면 표시돼요
오늘의 흐름
| 시간 | 내용 | 하는 일 |
|---|---|---|
| 0–10분 | 지난 시간 돌아보기 | 10회에 만든 AI 기능을 휴대폰으로 열어 보기 |
| 10–40분 | 앱의 세 가지 모양 | 웹앱·PWA·네이티브 앱의 차이, 고르는 기준 |
| 40–55분 | 요즘 업계에서는 | 크로스 플랫폼, "웹 먼저" 흐름, 스토어 밖 배포 |
| 55–65분 | 시연 | 강사가 웹앱을 PWA로 바꿔 홈 화면에 설치 |
| 65–75분 | 쉬는 시간 | 휴대폰 충전, 와이파이 확인 |
| 75–110분 | 실습 | 내 웹앱을 PWA로 만들고, 내 휴대폰 홈 화면에 설치 |
| 110–120분 | 정리와 퀴즈 | 핵심 정리, 다음 시간(Expo) 준비 안내 |
오늘부터 과정의 마지막 큰 덩어리인 앱으로 단계가 시작됩니다. 지금까지 만든 "우리 모임" 웹앱은 이미 휴대폰 브라우저에서 열립니다. 그런데 회원들이 매번 브라우저를 열고 주소를 입력하거나 대화방에서 링크를 찾는 것은 번거롭습니다. 오늘은 "앱을 만든다"는 말이 정확히 무슨 뜻인지부터 정리하고, 가장 빠른 방법으로 내 웹앱을 휴대폰 홈 화면에 올려 봅니다.
앱의 세 가지 모양
"앱을 만들고 싶어요"라고 말할 때 사람들이 떠올리는 것은 사실 세 가지 중 하나입니다.
| 모양 | 어떻게 여나 | 어디서 받나 | 예시 |
|---|---|---|---|
| 브라우저에 주소 입력, 링크 누르기 | 받을 필요 없음 | 지금까지 만든 우리 모임 웹앱 | |
| 홈 화면 아이콘 누르기 | 웹사이트에서 "홈 화면에 추가" | 홈 화면에 설치한 우리 모임 | |
| 홈 화면 아이콘 누르기 | 앱스토어, 구글 플레이 | 카카오톡, 은행 앱 |
가게에 비유하면
웹앱은 길가의 가게입니다. 누구나 주소만 알면 들어올 수 있고, 간판을 바꾸면 바로 모두에게 보입니다. PWA는 그 가게의 단골 카드입니다. 지갑(홈 화면)에 넣어 두고 꺼내기만 하면 바로 가게로 연결됩니다. 네이티브 앱은 백화점(앱스토어)에 입점한 매장입니다. 입점 심사를 받고 수수료를 내야 하지만, 백화점이 가진 시설(알림, 카메라, 결제 등)을 깊게 쓸 수 있고 사람들이 찾아오기도 쉽습니다.
웹앱: 이미 가진 것
- 지금 우리가 가진 것입니다. 링크 하나로 열리고, 컴퓨터와 휴대폰 모두에서 됩니다.
- 고치면 배포하는 순간 모두에게 바로 반영됩니다(6회에서 체험했습니다).
- 단점: 휴대폰에서 매번 브라우저를 열어야 하고, 주소창과 메뉴가 화면을 차지합니다. 휴대폰 기능(알림, 잠금 화면 위젯 등)을 쓰는 데 제약이 있습니다.
PWA: 웹앱에 "설치" 기능을 더한 것
PWA는 Progressive Web App의 줄임말입니다. 이름은 어렵지만 하는 일은 간단합니다. 웹앱에 "나를 앱처럼 설치할 수 있어요"라는 신분증을 붙이는 것입니다.
- 이 신분증이 라는 작은 파일입니다. 앱 이름, 아이콘, 시작 화면 색, 주소창을 숨길지 등을 적어 둡니다.
- 설치하면 홈 화면에 아이콘이 생기고, 누르면 주소창 없이 앱처럼 꽉 찬 화면으로 열립니다.
- 속은 여전히 웹앱이라 배포하면 바로 반영되고, 스토어 심사도 등록비도 없습니다.
네이티브 앱: 스토어에 올리는 앱
- 안드로이드와 아이폰이 각각 알아듣는 방식으로 만든 앱입니다. 원래는 안드로이드용과 아이폰용을 따로 만들어야 했습니다.
- 휴대폰 기능을 가장 깊게 씁니다. 푸시 알림, 카메라, 위치, 걸음 수, 블루투스, 위젯 등.
- 스토어에 올리려면 등록비와 심사가 필요합니다. 애플은 애플 개발자 프로그램 연 99달러 (2026-10-22 확인), 구글은 구글 플레이 개발자 등록 1회 25달러 (2026-10-22 확인)입니다.
- 고친 것을 내보내려면 원칙적으로 새로 빌드해서 다시 심사를 받아야 합니다(14회에서 예외인 OTA 업데이트를 배웁니다).
무엇으로 시작할까: 고르는 기준
정답은 "만들고 싶은 것"이 아니라 "꼭 필요한 기능"이 정합니다.
| 질문 | 예라면 | 아니라면 |
|---|---|---|
| 회원이 휴대폰 홈 화면에서 바로 열면 좋은가? | PWA 이상 | 웹앱으로 충분 |
| 휴대폰 기능을 깊게 써야 하나? (걸음 수, 블루투스, 정교한 알림) | 네이티브 앱 | PWA로 충분 |
| 앱스토어·플레이스토어에서 검색되어야 하나? | 네이티브 앱 | PWA로 충분 |
| 일주일 안에 회원들에게 내놓아야 하나? | 웹앱·PWA | 네이티브도 가능 |
| 등록비와 심사 기간을 감당할 수 있나? | 네이티브도 가능 | 웹앱·PWA |
이사보다 리모델링부터
지금 집(웹앱)이 멀쩡한데 새 집(네이티브 앱)을 짓기 전에, 먼저 현관에 문패(PWA)부터 다는 것과 같습니다. 대부분의 작은 서비스는 PWA만으로도 "앱처럼 쓴다"는 목표를 이룹니다. 써 보니 부족한 점이 분명해졌을 때 네이티브 앱으로 가면, 무엇이 필요한지 정확히 알고 시작할 수 있습니다.
우리 모임 서비스에 적용해 보면 다음과 같습니다.
| 기능 | 웹앱 | PWA | 네이티브 앱 |
|---|---|---|---|
| 모임 일정 보기, 참석 신청 | 됨 | 됨 | 됨 |
| 홈 화면 아이콘 | 안 됨 | 됨 | 됨 |
| 주소창 없는 꽉 찬 화면 | 안 됨 | 됨 | 됨 |
| 모임 전날 알림 | 제약 많음 | 휴대폰·브라우저에 따라 다름 | 됨 |
| 스토어 검색 | 안 됨 | 안 됨 | 됨 |
| 고친 것 반영 | 배포 즉시 | 배포 즉시 | 새 빌드(또는 OTA 업데이트) |
그래서 이 과정은 오늘 PWA로 먼저 홈 화면에 올리고, 12–14회에 같은 데이터를 쓰는 네이티브 앱을 Expo로 만들어 출시 준비까지 해 봅니다. 두 길을 다 가 보면 다음에 무엇을 고를지 스스로 판단할 수 있습니다.
내 서비스는 동네 독서 모임의 일정을 알리고 참석 신청을 받는 서비스이야. 웹앱, PWA(홈 화면 설치), 네이티브 앱(스토어 앱) 중 무엇으로 시작하는 게 좋을지 판단해줘. 꼭 필요한 휴대폰 기능, 비용, 출시까지 걸리는 시간, 업데이트 방법을 표로 비교하고, 처음 시작하는 사람에게 추천하는 순서도 알려줘.
자세히PWA는 아이폰과 안드로이드에서 다르게 설치됩니다펼치기
웹 개발 공식 학습 사이트인 web.dev의 PWA 설치 안내에 따르면 두 휴대폰은 방식이 다릅니다.
- 안드로이드(크롬): 크롬이 PWA를 진짜 앱에 가깝게 설치합니다. 메뉴에 "앱 설치" 또는 "홈 화면에 추가"가 보이고, 설치하면 앱 목록에도 아이콘이 생깁니다. 조건이 맞지 않으면 단순한 바로가기로 만들어집니다.
- 아이폰(사파리): 설치 안내 창이 자동으로 뜨지 않습니다. 사용자가 직접 공유 버튼 → 홈 화면에 추가를 눌러야 합니다. 그래서 회원들에게 "이렇게 누르세요"라는 안내가 꼭 필요합니다.
- 아이폰은 아이콘 이미지를 따로 지정하지 않으면 화면을 찍은 사진이 아이콘이 됩니다. 그래서 아이콘 파일을 꼭 넣어 둡니다.
이런 차이는 휴대폰 운영체제와 브라우저가 업데이트되면서 계속 바뀝니다. 실제 회원에게 안내하기 전에는 내 휴대폰에서 직접 해 보는 것이 가장 확실합니다.
휴대폰 화면은 컴퓨터 화면과 다릅니다
PWA로 설치하면 회원들은 이 서비스를 "앱"으로 느낍니다. 그러면 기대도 앱 수준으로 올라갑니다. 휴대폰에서 쓰기 편한지 세 가지만 기억하세요.
| 원칙 | 왜 | 이렇게 |
|---|---|---|
| 손가락 크기 | 마우스보다 손가락이 훨씬 굵습니다 | 버튼은 크게, 버튼 사이는 넉넉하게 |
| 엄지가 닿는 곳 | 한 손으로 쓰는 경우가 많습니다 | 자주 누르는 버튼(참석 신청)은 화면 아래쪽 |
| 읽기 쉬운 글자 | 작은 화면, 다양한 나이의 회원 | 본문 글자를 충분히 크게, 대비는 진하게 |
아쉬운 요청
휴대폰에서 보기 좋게 해줘
무엇이 '보기 좋은' 것인지 AI가 짐작해야 합니다.
좋은 요청
휴대폰에서 손가락으로 쓰기 편하게 다듬어줘. 참석 신청 버튼은 화면 아래쪽에 크게, 글자는 어르신도 읽기 쉬운 크기로. 바꾼 곳을 목록으로 알려줘.
기준을 말해 주고, 바꾼 곳 목록을 받아 하나씩 확인합니다.
요즘 업계에서는
"하나로 만들어 여러 곳에" — 크로스 플랫폼
예전에는 웹, 안드로이드, 아이폰을 각각 다른 언어로, 다른 팀이 만들었습니다. 요즘은 한 번 만들어 여러 곳에 내보내는 방식이 흔해졌습니다.
- 다음 시간에 쓸 는 웹에서 쓰던 React 방식 그대로 안드로이드와 아이폰 앱을 만듭니다. React Native 공식 문서는 새 앱을 시작할 때 Expo 같은 프레임워크를 쓰라고 권합니다 (React Native 시작하기).
- 4회에 배운 Next.js도, 12회에 쓸 Expo도 둘 다 React를 씁니다. 그래서 웹앱을 만들어 본 경험이 앱으로 그대로 이어집니다. Claude Code도 두 쪽을 다 잘 다룹니다.
"웹 먼저, 앱은 나중에"
새 서비스를 시작할 때 웹이나 PWA로 먼저 내놓고, 쓰는 사람이 늘고 필요한 기능이 분명해지면 스토어 앱을 만드는 흐름이 많습니다. 이유는 간단합니다.
- 웹은 고치면 바로 반영됩니다. 처음에는 하루에도 몇 번씩 고치게 되는데, 그때마다 스토어 심사를 기다릴 수는 없습니다.
- 써 보기 전에는 무엇이 필요한지 모릅니다. 2회에 배운 (꼭 필요한 것만 넣은 첫 버전)의 생각과 같습니다.
AI가 바꾼 계산
1회에 소개한 a16z의 "일회용 소프트웨어(Disposable Software)" 이야기를 기억하시나요? 만드는 비용이 크게 줄면서, 작은 모임을 위한 작은 앱처럼 예전에는 만들 엄두를 못 내던 것도 만들어 볼 만해졌습니다. 그렇다고 모든 것을 스토어 앱으로 만들 필요는 없습니다. 만드는 비용이 줄수록 "무엇으로 만들지 고르는 판단"이 더 중요해집니다. 오늘 표로 정리한 기준이 그 판단입니다.
Vercel은 웹을, Expo는 앱을
6회에 쓴 Vercel은 웹사이트와 서버를 올리는 곳입니다. 휴대폰에 설치하는 네이티브 앱 파일을 Vercel이 만들어 주지는 않습니다. 네이티브 앱은 12–14회에 Expo로 만들고, 웹과 앱이 같은 Supabase 데이터를 함께 씁니다. PWA는 웹앱이므로 지금처럼 Vercel에 그대로 배포하면 됩니다.
시연
강사가 우리 모임 웹앱을 Claude Code로 PWA로 바꿉니다. 아이콘과 앱 이름("책 읽는 저녁")을 정하고, GitHub에 푸시해 Vercel에 배포한 뒤, 안드로이드 휴대폰과 아이폰에서 각각 홈 화면에 설치합니다. 설치 전(브라우저 주소창이 보이는 화면)과 설치 후(꽉 찬 화면)를 나란히 비교하고, 비행기 모드를 켜서 인터넷이 끊겼을 때 어떻게 보이는지도 확인합니다.
실습
실습 11-1 · 내 휴대폰에서 지금 상태 점검
약 10분고치기 전에 먼저 써 봅니다. 불편한 점을 적어 두면 무엇을 고칠지 분명해집니다.
6회에 받은 내 배포 주소(….vercel.app)를 휴대폰 브라우저로 엽니다. 주소를 입력하기 번거로우면 Claude Code에게 "내 배포 주소로 QR 코드 이미지를 만들어줘"라고 부탁해 휴대폰 카메라로 찍으세요.
모임 목록 보기, 참석 신청, 로그인을 실제로 해 보고 불편했던 점을 세 가지 적습니다. 예: "참석 신청 버튼이 너무 작다", "글자가 작아 읽기 어렵다", "옆으로 밀린다".
PROMPT휴대폰 화면 점검휴대폰 화면 크기에서 글자가 너무 작거나 버튼이 누르기 어려운 곳, 옆으로 넘치는 곳이 있는지 점검하고 고쳐줘.
실습 11-2 · 웹앱을 PWA로 만들기
약 15분Claude 데스크톱 앱의 Code 탭에서 우리 모임 웹앱 폴더를 엽니다. 새로운 기능을 시작하기 전에는 늘 그렇듯 먼저 계획을 봅니다(플랜 모드).
PROMPT웹앱을 PWA로이 Next.js 웹앱을 PWA로 만들어줘. 휴대폰 홈 화면에 추가했을 때 앱 이름, 아이콘, 시작 화면 색이 제대로 나오게 해줘. 아이콘은 임시로 만들어줘.
이렇게 되면 성공계획1. 웹 앱 매니페스트 추가 (앱 이름: 책 읽는 저녁)2. 앱 아이콘 만들기 (192px, 512px, 아이폰용 아이콘)3. 시작 화면 색, 테마 색 지정4. 주소창 없이 꽉 찬 화면으로 열리게 설정진행할까요?계획이 괜찮으면 진행하라고 합니다. 앱 이름이나 색이 마음에 들지 않으면 이 단계에서 말로 바꾸세요.
실습 11-1에서 적은 불편한 점을 함께 붙여 넣으면 더 정확하게 고쳐 줍니다.
PROMPT손가락으로 쓰기 편하게 다듬기휴대폰에서 손가락으로 쓰기 편하게 화면을 다듬어줘. 버튼은 손가락으로 누르기 충분한 크기로, 자주 쓰는 버튼은 엄지가 닿는 화면 아래쪽에, 글자는 어르신도 읽기 쉬운 크기로. 바꾼 곳을 목록으로 알려줘.
5–6회에 한 것과 같습니다. "지금까지 바꾼 것을 커밋하고 푸시해줘"라고 하면 Vercel이 1–2분 뒤 자동으로 다시 배포합니다.
PROMPT바뀐 내용 커밋하기지금까지 바뀐 내용을 한글 메시지로 커밋해줘.
막혔을 때
실습 11-3 · 내 휴대폰 홈 화면에 설치하기
약 10분- 크롬으로 내 배포 주소를 엽니다. 이미 열려 있었다면 새로 고침합니다.오른쪽 위 점 세 개(⋮) 메뉴를 누릅니다.앱 설치 또는 홈 화면에 추가를 누릅니다. 휴대폰마다 문구가 조금 다릅니다.설치를 누르면 홈 화면(또는 앱 목록)에 "책 읽는 저녁" 아이콘이 생깁니다.이렇게 되면 성공홈 화면에 "책 읽는 저녁" 아이콘이 생겼다.아이콘을 누르면 주소창 없이 꽉 찬 화면으로 열린다.막혔을 때
내 휴대폰과 다른 종류(안드로이드↔아이폰)를 쓰는 사람과 짝을 지어 서로의 서비스를 설치해 봅니다. 다른 휴대폰에서는 어떻게 보이는지 확인하는 것이 진짜 점검입니다.
회원용 설치 안내와 오프라인 화면
약 10분실제 회원에게 내놓으려면 '설치 방법 안내'와 '인터넷이 끊겼을 때'까지 챙겨야 합니다.
- PROMPT회원용 "홈 화면에 설치" 안내
우리 모임 회원들에게 보낼 "휴대폰 홈 화면에 설치하는 방법" 안내문을 써줘. 안드로이드(크롬)와 아이폰(사파리)을 나눠서, 처음 해 보는 어르신도 따라 할 수 있게 번호를 매겨 짧게. 웹앱 안에도 이 안내를 보여 주는 작은 화면을 만들어줘.
- PROMPT인터넷이 끊겼을 때 안내 화면
휴대폰 인터넷이 끊겼을 때 하얀 화면 대신 "인터넷 연결을 확인해 주세요" 안내와 다시 시도 버튼이 보이게 해줘. 무엇을 바꿨는지, 어떻게 시험해 볼 수 있는지도 알려줘.
휴대폰을 비행기 모드로 바꾸고 아이콘을 눌러 확인합니다. 시험이 끝나면 비행기 모드를 꼭 끄세요.
정리
핵심 정리
- 1"앱"에는 세 가지 모양이 있다: 웹앱(주소로 연다), PWA(홈 화면에 설치한 웹앱), 네이티브 앱(스토어에서 받는다).
- 2무엇으로 만들지는 "꼭 필요한 기능"이 정한다. 대부분의 작은 서비스는 웹앱 → PWA로 시작하면 충분하다.
- 3PWA는 웹 앱 매니페스트(이름·아이콘·색)를 붙인 웹앱이다. 배포하면 바로 반영되고, 심사와 등록비가 없다.
- 4아이폰은 사파리의 공유 → 홈 화면에 추가로 직접 설치해야 하므로 회원용 안내가 필요하다.
- 5휴대폰에서는 손가락 크기, 엄지가 닿는 곳, 읽기 쉬운 글자를 챙긴다.
다음 시간에는 같은 우리 모임 서비스를 진짜 네이티브 앱으로 만들어 봅니다. 휴대폰에 Expo Go 앱을 미리 설치해 오세요.
복습
Q1.홈 화면에 아이콘으로 설치되지만, 속은 웹앱이라 배포하면 바로 반영되는 것은?
Q2.아이폰에서는 PWA 설치 안내 창이 자동으로 뜨지 않아, 사파리의 공유 → 홈 화면에 추가를 직접 눌러야 한다.
Q3.다음 중 PWA보다 네이티브 앱을 고를 이유로 가장 알맞은 것은?
Q4.Vercel에 배포하면 안드로이드와 아이폰용 네이티브 앱 설치 파일도 자동으로 만들어진다.
Q5.휴대폰에서 쓰기 편한 화면을 위한 원칙이 아닌 것은?
과제
과제 · 홈 화면 설치 인증과 불편한 점
내 서비스를 휴대폰 홈 화면에 설치한 뒤, 가족이나 친구 한 명에게도 설치 안내를 보내 설치해 보게 하세요. 그 사람이 어디서 헤맸는지 적어 오면 다음 시간에 큰 도움이 됩니다.