제품 만들기

제품 만들기 ·

웹앱 · 앱 · PWA 차이: 첫 버전은 무엇으로 만들까요

웹앱, PWA, 스토어 앱은 설치 방법과 심사, 푸시 알림이 달라요. 웹 앱 차이와 PWA 뜻, 아이폰에서 PWA로 되는 것과 안 되는 것, 스토어에 꼭 올려야 하는 경우, 첫 버전을 만드는 순서를 정리했어요.

서비스를 처음 만들 때 가장 많이 하는 질문이 있어요. "앱으로 만들어야 하나요, 웹앱이면 되나요?"

요즘은 선택지가 하나 더 있어요. 웹앱을 휴대폰 홈 화면에 설치해 쓰는 PWA예요.

개발 에이전시를 8년간 운영하며 스토어 앱과 웹앱을 다 만들어 봤어요. 그 경험을 바탕으로 웹사이트 · 웹앱 · PWA · 스토어 앱의 차이와 첫 버전을 만드는 순서를 정리했어요.

웹사이트 · 웹앱 · PWA · 앱, 무엇이 다른가요

먼저 네 가지를 나란히 비교해 볼게요.

구분 웹사이트 웹앱 PWA 스토어 앱
한 줄 설명 정보를 보여 줘요 로그인하고 기능을 써요 웹앱을 홈 화면에 설치해요 앱스토어 · 구글 플레이에서 받아요
여는 방법 브라우저 주소 브라우저 주소 홈 화면 아이콘 홈 화면 아이콘
스토어 심사 없어요 없어요 없어요 있어요
업데이트 서버에 올리면 끝 서버에 올리면 끝 서버에 올리면 끝 심사를 다시 받아요
푸시 알림 안 돼요 안 돼요 조건부로 돼요 돼요
개발자 계정 비용 없어요 없어요 없어요 애플 연 99달러 · 구글 25달러 한 번

웹사이트와 웹앱의 차이는 사용자가 무엇을 하느냐예요. 회사 소개처럼 읽고 끝나는 화면은 웹사이트예요. 예약하고, 글을 쓰고, 결제하는 화면은 웹앱이에요.

웹앱과 PWA의 차이는 설치가 되느냐예요. 두 방식의 프로그램 코드는 거의 같아요. 웹앱에 설치 정보를 담은 파일 하나를 더 붙이면 PWA가 돼요.

스토어 앱은 애플 · 구글의 심사를 거쳐 스토어에 올라가요. 앱을 올리려면 개발자 계정이 필요한데, 비용은 애플 개발자 프로그램이 연 99달러, 구글 플레이가 한 번 25달러예요(2026년 10월 확인).

PWA 뜻은 무엇인가요

PWA는 Progressive Web App의 줄임말이에요. 웹앱이지만 휴대폰 앱처럼 설치해서 쓸 수 있는 방식을 말해요.

설치하면 휴대폰 홈 화면에 아이콘이 생겨요. 아이콘을 누르면 인터넷 주소창 없이 일반 앱처럼 열려요.

웹 표준 안내서인 MDN 문서가 설명하는 설치 조건은 세 가지예요(2026년 10월 확인).

  • https 보안 주소여야 해요. 주소창에 자물쇠가 붙는 보안 연결이 없으면 설치가 안 돼요.
  • 설치 설정 파일(매니페스트 파일)이 있어야 해요. 앱 이름, 아이콘, 처음 열 주소를 적어 둔 파일이에요.
  • 규격에 맞는 아이콘이 있어야 해요. 크롬 계열 브라우저는 192px · 512px 크기 아이콘을 요구해요.

인터넷이 끊겨도 화면이 열리게 돕는 기능(서비스 워커)도 자주 쓰여요. 다만 MDN은 이 기능이 설치의 필수 조건은 아니라고 안내해요.

그래서 이미 웹앱이 있다면 PWA로 바꾸는 일은 크지 않아요. 화면을 새로 만드는 게 아니라 설치 정보를 덧붙이는 작업이에요.

PWA 앱은 아이폰에서도 되나요

돼요. 다만 안드로이드와 작동 방식이 달라서 처음 기획할 때 가장 많이 헷갈려요.

기능 아이폰 · 아이패드 근거
홈 화면에 설치 돼요. 공유 메뉴의 「홈 화면에 추가」로 해요 MDN
사파리 외 다른 브라우저로 설치 iOS 16.4부터 크롬 · 엣지 · 파이어폭스에서도 돼요 MDN
화면 안에 「설치하기」 버튼 넣기 안 돼요. 설치 창을 바로 띄우는 기능을 iOS가 지원하지 않아요 MDN
푸시 알림 iOS 16.4부터 돼요. 홈 화면에 설치한 경우만 돼요 웹킷 블로그
아이콘 숫자 배지 iOS 16.4부터 돼요 웹킷 블로그

애플 사파리 개발팀이 운영하는 웹킷 블로그에 푸시 알림 조건이 나와요(2026년 10월 확인).

  • 사용자가 먼저 홈 화면에 추가해야 해요. 사파리 브라우저 탭에서 그냥 보는 상태로는 알림을 못 받아요.
  • 사용자가 버튼을 누른 순간에만 알림 허락을 물을 수 있어요. 화면을 열자마자 알림 허용 창을 띄우는 건 안 돼요.

그래서 아이폰 사용자에게 알림을 보내려면 설치 안내 화면을 따로 만들어야 해요. 안드로이드처럼 버튼 하나로 바로 설치시킬 수 없기 때문이에요.

"공유 버튼을 누르고, 홈 화면에 추가를 고르세요." 같은 안내를 그림과 함께 보여 줘야 해요.

이 과정에서 사용자가 꽤 빠져나가요. 푸시 알림이 서비스의 핵심이라면 이 이탈을 미리 계산에 넣어야 해요.

안드로이드에서는 어떻게 설치되나요

안드로이드는 훨씬 간단해요. 웹 화면 안에 「앱 설치」 버튼을 직접 둘 수 있어요.

MDN에 따르면 구글 서비스가 깔린 휴대폰의 크롬과 삼성 인터넷은 PWA를 실제 앱처럼 설치해요. 설치하면 휴대폰의 앱 목록과 설정 화면에도 들어가요. 그 외 브라우저는 홈 화면에 바로가기 아이콘만 만들어요.

스토어에 꼭 올려야 하는 경우는 언제인가요

PWA만으로 충분하지 않은 경우는 네 가지예요.

  1. 사람들이 스토어에서 검색해 찾는 서비스예요. 앱스토어 검색이 주요 유입 통로라면 스토어에 올라가 있어야 해요.
  2. 아이폰 사용자에게 알림이 꼭 가야 해요. 홈 화면 추가라는 단계를 넘기기 어려운 사용자층이라면 스토어 앱이 확실해요.
  3. 휴대폰 기기 기능을 깊게 써야 해요. 앱을 꺼 둔 상태에서의 위치 추적(백그라운드 위치 추적)이나 블루투스 기기 연결 같은 기능이 대표적이에요. 만들려는 기능이 웹 브라우저에서 작동하는지 먼저 확인하세요.
  4. 거래처나 투자자가 스토어 앱을 요구해요. 사업상 "스토어에 등록된 앱"이 꼭 필요한 경우예요.

이때 웹앱에 앱 껍데기를 씌워 스토어에 올리는 방법도 있어요. 다만 웹사이트를 그대로 감싸기만 한 앱은 애플 심사에서 거절될 수 있어요.

애플 심사 지침 4.2는 앱이 "다시 포장한 웹사이트"를 넘어서는 기능과 화면을 갖춰야 한다고 적고 있어요(2026년 10월 확인). 그래서 웹앱을 감싸더라도 화면 전환, 알림, 기기 기능처럼 앱다운 요소를 같이 넣어야 해요.

반면 구글 플레이는 PWA를 그대로 올리는 공식 방법이 있어요. 트러스티드 웹 액티비티(TWA)라는 방식을 쓰면, 내 웹앱을 안드로이드 앱 안에서 전체 화면으로 열 수 있어요.

스토어 앱을 어떤 개발 방식으로 만들지는 네이티브 · 하이브리드 · 크로스플랫폼 비교에 따로 정리했어요.

웹앱 배포는 어떻게 하나요

웹앱과 PWA는 서비스를 세상에 공개하는 배포 과정이 단순해요. 서버에 프로그램을 올리고 인터넷 주소(도메인)만 연결하면 끝나요.

  • 심사가 없어요. 오늘 고친 화면이 오늘 바로 사용자에게 보여요.
  • 따로 업데이트를 받을 필요가 없어요. 사용자가 다음에 열 때 알아서 바뀐 화면이 나와요.
  • 링크 하나로 공유돼요. 카카오톡으로 주소를 보내면 누르자마자 바로 열려요.

반면 스토어 앱은 고칠 때마다 심사를 다시 받아요. 첫 버전은 하루에도 몇 번씩 고치게 되는데, 그때마다 심사를 기다리는 시간이 생겨요.

서버를 어디에 두고 매달 얼마가 드는지는 바이브코딩 서비스, 내 서버에 올리기에 적었어요.

첫 버전은 무엇으로 만들까요

처음 서비스를 만들 때 추천하는 순서는 이래요.

  1. 모바일 웹앱으로 시작해요. 휴대폰 브라우저에서 편하게 쓰이도록 만들어요. PC에서도 그대로 열려요.
  2. 재방문이 중요하면 PWA를 붙여요. 홈 화면 아이콘과 안드로이드 푸시 알림이 생겨요. 아이폰 사용자를 위한 설치 안내 화면도 같이 만들어요.
  3. 스토어가 필요해지면 그 웹앱을 앱으로 감싸요. 화면을 새로 만들지 않고 같은 코드로 스토어에 올려요.

이 순서의 가장 큰 장점은 버리는 코드가 없다는 거예요. 1단계에서 만든 화면이 3단계 스토어 앱 안에서도 그대로 쓰여요.

서비스 종류별로 알맞은 첫 버전은 이래요.

서비스 종류 첫 버전 추천
예약 · 신청 · 견적 받기 모바일 웹앱
회원 커뮤니티 · 게시판 웹앱 + PWA
사내 업무 도구 · 관리자 화면 웹앱 (PC 위주)
매일 여는 습관형 서비스 웹앱 + PWA, 반응 보고 스토어 앱
기기 센서 · 블루투스가 핵심 처음부터 스토어 앱 검토

처음부터 스토어 앱으로 만들면 개발비와 기간이 함께 늘어나요. 아낀 돈과 시간을 첫 사용자를 만나는 데 쓰는 편이 나아요.

웹앱이면 사용자가 안 쓰지 않나요

"앱이 아니면 사람들이 신뢰하지 않아요."라고 걱정하는 분이 많아요.

하지만 첫 버전에서 중요한 건 사용자가 문제를 해결했는지예요. 예약이 되고, 결제가 되고, 알림이 잘 오면 사용자는 그게 웹인지 앱인지 크게 신경 쓰지 않아요.

오히려 앱 설치는 진입 장벽이 돼요. 광고를 보고 들어온 사람에게 "앱부터 받으세요"라고 하면 그 자리에서 떠나기도 해요. 링크를 누르자마자 바로 쓸 수 있는 건 웹앱만의 장점이에요.

스토어 앱이 필요해지는 시점은 사용 데이터가 알려 줘요. 다시 찾아오는 사용자가 늘고 알림 요청이 많아지면 그때 앱으로 감싸도 늦지 않아요.

헤이제임스는 어떻게 만드나요

(주)헤이제임스는 빠른 웹 서비스 제작 도구인 루비온레일즈로 모바일 웹앱을 먼저 만들어요. 이후 스토어 등록이 필요해지면 같은 웹앱을 앱으로 감싸 스토어에 올려요.

  • 4시간 실시간 제작으로 만들어요. 23년차 개발자와 화면을 공유하며 한 세션(4시간) 안에 제작부터 실서버 배포까지 끝내요.
  • 한 세션은 550만 원(부가세 포함)이에요. 한 세션에 다 들어가지 않으면 세션을 나누어 진행하고 단가는 같아요.
  • 모든 권리와 계정을 넘겨 드려요. 소스코드 · 저작권 · 서버 · 도메인 계정을 모두 대표님 명의로 이전해요.

화면을 먼저 보며 개발 범위를 줄이는 방법은 외주 개발 맡기기 전에, 기획서가 두꺼울수록 위험한 이유에 적었어요.

정리하면

  • 웹앱과 PWA는 코드가 거의 같아요. PWA는 홈 화면 설치 기능이 더해진 웹앱이에요.
  • 아이폰도 iOS 16.4부터 PWA 푸시 알림이 돼요. 단, 홈 화면에 추가한 사용자만 받을 수 있어요.
  • 스토어 검색 유입, 확실한 아이폰 알림, 깊은 기기 기능이 필요하면 스토어 앱을 검토해요.
  • 첫 버전은 모바일 웹앱 → PWA → 앱으로 감싸기 순서로 만들면 버리는 코드가 없어요.

내 서비스가 화면 몇 장인지, 웹앱으로 시작하면 얼마인지 궁금하면 셀프 견적에 서비스 설명을 넣어 보세요. AI가 화면 프로토타입과 견적을 바로 그려 줘요.

자주 묻는 질문

웹앱과 앱의 차이를 한 줄로 말하면 뭔가요?

웹앱은 브라우저 주소로 바로 열고, 앱은 스토어에서 내려받아 설치해요. 웹앱은 심사 없이 바로 고칠 수 있고, 앱은 스토어 검색과 기기 기능 연결에 강해요. 둘 사이에 홈 화면 설치가 되는 PWA가 있어요.

PWA로 만들면 나중에 스토어 앱으로 바꿀 수 있나요?

네. 이미 만든 웹앱을 앱으로 감싸서 스토어에 올릴 수 있어요. 구글 플레이는 PWA를 그대로 올리는 공식 방법이 있어요. 애플은 웹사이트를 감싸기만 한 앱을 거절할 수 있어서, 앱다운 기능을 같이 넣어야 해요.

아이폰에서 PWA 푸시 알림이 안 와요. 왜 그런가요?

iOS 16.4 이상이어야 하고, 사용자가 홈 화면에 추가한 뒤 알림을 허락해야 해요. 사파리 탭에서 그냥 열어 둔 상태로는 알림이 오지 않아요. 알림 허락 요청도 사용자가 버튼을 누를 때만 띄울 수 있어요.


쓴 사람 — 제임스
연세대 컴퓨터과학을 전공한 23년차 개발자예요. 개발 에이전시를 8년간 운영하며 스타트업 플랫폼 350개를 만들었고, 연매출 100억 원 커머스 기업의 CTO를 지냈어요. 정부지원사업을 받아도 봤고 심사위원도 해 봤어요. 최근 2년은 AI로 개발을 효율화하는 데 집중하고 있어요.

제품 만들기 다른 글