웹앱이란, 앱과 무엇이 다르고 언제 웹앱으로 만드나
웹앱은 설치 없이 주소로 여는 프로그램이라 사내 도구와 예약·관리 화면에 잘 맞습니다. 앱과의 차이, 고르는 다섯 질문, 홈 화면 아이콘과 오프라인 질문을 정리했습니다.
웹앱은 스토어 설치 없이 브라우저에 주소를 넣어 여는, 앱처럼 쓰는 프로그램입니다. 한 번 만들면 휴대폰 · 태블릿 · 컴퓨터에서 같은 주소로 열리고, 고치면 대개 다음에 열 때 바뀐 화면이 보입니다. 사내 업무 도구 · 관리자 화면처럼 쓰는 사람이 정해진 프로그램, 예약 · 주문처럼 링크로 들어와 잠깐 쓰는 프로그램은 웹앱으로 시작하는 편이 빠릅니다.
웹앱이란 무엇인가요
웹앱 뜻은 웹사이트와 나란히 놓으면 분명해집니다. 웹사이트는 읽으러 들어가는 곳이고, 웹앱은 로그인해서 입력하고 저장하고 처리하는 곳입니다. 둘 다 크롬이나 사파리 같은 브라우저에서 열리지만, 웹앱은 화면 뒤에서 서버와 데이터를 주고받으며 일을 처리합니다. 서버 · API 같은 말은 개발 회의 용어에 한 줄씩 풀려 있습니다.
웹앱이란 스토어를 거치는 설치 단계가 없는 앱입니다. 쓰는 사람은 주소와 계정만 있으면 되고, 만드는 쪽은 한 벌로 모든 기기를 맞춥니다. 화면 폭에 따라 배치를 바꾸는 방식은 반응형 홈페이지와 같습니다. 예를 들어 재고 입력 화면을 웹앱으로 만들면 창고 직원은 휴대폰으로, 관리자는 컴퓨터로 같은 주소에 들어가 같은 숫자를 봅니다.
웹앱을 홈 화면에 설치할 수 있게 만들고, 필요하면 오프라인 동작과 알림까지 더한 것을 PWA(프로그레시브 웹 앱)라고 부릅니다. 웹 기술로 만들지만 기기에 설치한 앱처럼 쓰게 한 형태입니다.
웹앱·하이브리드 앱·네이티브 앱은 무엇이 다른가요
네이티브 앱은 아이폰과 안드로이드 각각의 개발 방식으로 만들어 스토어에서 내려받는 앱입니다. 하이브리드 앱은 웹으로 만든 화면을 앱 껍데기에 넣어 스토어에 올린 앱이고, 껍데기 안에서 웹페이지를 띄우는 창을 웹뷰라고 부릅니다.
| 항목 | 웹앱 | 하이브리드 앱 | 네이티브 앱 |
|---|---|---|---|
| 설치 | 스토어 설치 없음 — 주소로 열고, 원하면 홈 화면에 추가 | 스토어에서 설치 | 스토어에서 설치 |
| 업데이트 | 서버에 올리면 반영 | 화면은 바로, 껍데기를 고치면 스토어 심사 | 스토어 심사 뒤 사용자가 업데이트 |
| 푸시 알림 | 브라우저 알림 — 아이폰은 홈 화면에 추가한 웹앱만 | 됩니다 | 됩니다 |
| 카메라 같은 기기 기능 | 사용자 허락을 받아 일부 사용 · 보안 연결(HTTPS) 필요 | 껍데기를 거쳐 넓게 | 가장 넓게 |
| 스토어 심사 | 없음 | 있음 | 있음 |
| 개발 비용 구조 | 한 벌 — 화면 수로 계산 | 한 벌에 껍데기 · 스토어 등록이 붙음 | 운영체제별 두 벌, 또는 한 코드로 두 운영체제 앱을 만드는 도구에 스토어 등록 |
웹앱과 앱은 설치 · 심사 · 쓸 수 있는 기기 기능 세 가지에서 갈립니다. 아이폰 · 아이패드는 iOS · iPadOS 16.4부터 홈 화면에 추가한 웹앱이 알림을 받을 수 있게 됐고, 이때도 사용자가 구독 버튼 같은 것을 직접 눌러 허락해야 합니다. 브라우저에서 카메라를 쓰려면 보안 연결 주소여야 하고 사용자의 허락이 필요합니다.
화면 수가 같다면 비용은 대체로 웹앱이 가장 적게 듭니다. 앱은 같은 화면을 운영체제마다 확인하고 스토어 심사에 대응하는 일이 붙습니다 — 계산하는 틀은 앱 개발 비용 계산하는 틀에 있습니다.
웹앱과 앱 중 무엇으로 만들지 어떻게 정하나요
다섯 질문에 차례로 답하면 형태가 정해집니다.
- 쓰는 사람 — 사내 직원처럼 정해진 사람이면 웹앱이 먼저입니다. 주소와 계정만 나눠 주면 되고 스토어 계정도 필요 없습니다. 불특정 고객이 쓰는 서비스라면 다음 질문으로 넘어갑니다.
- 필요한 기기 기능 — 사진 첨부 정도의 카메라는 웹앱으로도 됩니다. 예약 확인처럼 알림톡 · 문자로 보낼 수 있는 알림도 앱이 없어도 됩니다. 화면이 꺼진 상태에서 위치를 계속 기록하는 것처럼 기기에 깊이 붙는 기능일수록 앱 쪽으로 기웁니다.
- 업데이트 빈도 — 화면과 규칙을 자주 고칠 프로그램일수록 웹앱이 유리합니다. 심사를 기다리지 않고 올린 날 바로 반영됩니다.
- 스토어에 있어야 하나 — 고객이 스토어에서 검색해 찾아야 하는 서비스인지 봅니다. 링크로 들어오는 고객이 대부분이라면 스토어가 없어도 됩니다. 스토어에 올리면 앱 설명 · 화면 캡처 · 개인정보 처리 안내 같은 등록 자료와 심사 대응이 일정에 더해집니다.
- 예산 — 같은 예산이면 웹앱은 화면을 더 만들 수 있습니다. 처음에는 웹앱으로 열고, 쓰는 사람이 늘어 알림이나 기기 기능이 꼭 필요해지면 앱으로 옮기되 알림 · 카메라처럼 앱에서 쓰는 기능을 함께 넣습니다.
어떤 프로그램이 웹앱에 맞나요
| 프로그램 | 웹앱이 맞는 이유 | 앱을 검토할 신호 |
|---|---|---|
| 사내 업무 도구 | 설치 안내 없이 컴퓨터와 휴대폰에서 같이 쓰고, 권한으로 볼 수 있는 화면을 나눕니다 | 인터넷이 자주 끊기는 현장에서 하루 종일 입력할 때 |
| 예약과 주문 | 고객이 링크 하나로 들어와 설치 단계 없이 신청합니다 | 알림톡 · 문자로 대신하기 어려운 알림을 자주 보내야 할 때 |
| 대시보드 | 큰 화면에서 보고 휴대폰으로도 확인하며, 데이터는 서버 한 곳에 모입니다 | 대부분 필요 없습니다 |
| 관리자 화면 | 입력 · 수정 화면이 많고 자주 바뀝니다 | 대부분 필요 없습니다 |
| 사내 공지 · 게시판 | 글을 올리고 읽는 일이 중심입니다 | 공지를 모든 직원이 반드시 받아야 할 때 |
다섯 경우 모두 기기 기능보다 화면과 데이터가 일의 중심입니다. 사내 도구는 계정으로 들어와 쓰고, 예약 · 주문은 링크 하나로 들어와 설치 없이 끝납니다. 예약처럼 규칙이 많은 프로그램은 형태보다 규칙을 먼저 정합니다 — 예약 시스템 만들기의 여덟 줄이 그 순서입니다.
웹앱 만들기는 화면 목록과 사용자 권한 두 가지를 적는 데서 시작합니다. 이 두 가지가 있으면 직접 만들든 사내 웹앱 개발을 맡기든 작업량을 같은 기준으로 셀 수 있습니다.
자주 묻는 질문
웹앱도 홈 화면에 아이콘을 둘 수 있나요
둘 수 있습니다. 브라우저 메뉴의 홈 화면 추가나 앱 설치를 누르면 아이콘이 생기고, 설치 정보 파일(웹 앱 매니페스트)을 갖춘 웹앱은 주소창 없이 앱처럼 열립니다. 이렇게 설치할 수 있게 만든 웹앱이 PWA입니다. 메뉴 이름은 브라우저마다 달라서, 사내에 배포할 때는 기기별 화면 캡처 두세 장을 붙인 안내문을 함께 보냅니다.
나중에 앱으로 바꿀 수 있나요
바꿀 수 있습니다. 서버와 데이터는 그대로 두고 화면을 앱 껍데기에 넣는 하이브리드 방식이 가장 짧은 길이고, 기기 기능을 깊이 써야 하면 화면을 네이티브로 다시 만듭니다. 처음부터 서버와 화면 사이의 창구(API)를 나눠 두면 어느 쪽으로 가도 서버를 다시 만들지 않습니다.
다만 애플 심사 지침은 웹사이트를 다시 포장한 수준을 넘는 기능과 화면을 요구합니다. 앱으로 옮길 때는 알림 · 카메라처럼 앱에서 쓰는 기능을 함께 계획합니다.
인터넷이 끊겨도 되나요
기본 웹앱은 연결이 끊기면 멈춥니다. 서비스 워커를 넣으면 달라집니다. 서비스 워커는 브라우저와 네트워크 사이에서 화면과 데이터를 저장해 두는 장치로, 이미 열었던 화면을 보여 주고 입력을 기기에 모아 두었다가 다시 연결될 때 보내도록 만들 수 있습니다. 다만 아이폰의 사파리는 백그라운드 동기화를 지원하지 않아, 연결된 뒤 웹앱을 다시 열 때 보내도록 만듭니다.
두 사람이 끊긴 상태에서 같은 자료를 고치면 어느 쪽을 남길지 규칙이 필요해 설계할 일이 늘어납니다. 그래서 끊긴 상태에서 보기만 되면 되는지, 입력까지 되어야 하는지를 먼저 정합니다.
사내 웹앱은 주소만 알면 누구나 들어올 수 있나요
주소를 알아도 계정이 없으면 들어올 수 없게 만듭니다. 로그인을 거치게 하고, 역할별로 볼 수 있는 화면을 나누고, 누가 언제 무엇을 바꿨는지 기록을 남깁니다. 퇴사자 계정은 그날 바로 끌 수 있어야 하고, 휴대폰을 잃어버렸을 때 그 기기의 로그인을 끊는 기능도 화면 목록에 넣습니다. 보안 연결(HTTPS)은 기본으로 둡니다.
오늘 할 일
만들 프로그램 이름 아래에 카메라 · 푸시 알림 · 오프라인 세 칸을 그리고, 꼭 필요한 칸에 필요한 수준을 적으십시오. 카메라는 사진 첨부인지 실시간 스캔인지, 알림은 알림톡 · 문자로 충분한지 앱 알림이어야 하는지, 오프라인은 보기만인지 입력까지인지. 뒤쪽에 해당하는 칸이 있으면 앱을 함께 검토하고, 없으면 웹앱으로 시작합니다.
만들 프로그램을 누가 쓰는지와 꼭 필요한 기능을 적어 문의로 보내 주시면, 웹앱과 앱 중 맞는 형태와 화면 수를 정리해 회신드립니다.
이어서 읽기 — 앱 개발 업체, 고르는 기준 7가지·견적 비교표
