[MOBILE-001][입문] 모바일 앱과 웹앱의 차이 이해하기
페이지 정보
작성자 기술팀장 작성일 26-08-29 10:35 조회 261 댓글 0본문
[이번 수업]
이번에는 운영체제에 설치하는 모바일 앱과 브라우저로 여는 웹앱의 실행 방식, 배포, 업데이트, 기기 기능 사용 차이를 비교합니다.
[선수지식]
브라우저로 웹사이트를 열어 본 경험이면 충분합니다.
[학습목표]
1. 모바일 앱과 웹앱이 어디에서 실행되는지 설명한다.
2. 설치·업데이트·기기 기능 관점에서 차이를 비교한다.
3. 간단한 요구사항을 보고 적합한 방식을 고른다.
[핵심개념]
여기서 모바일 앱은 Android나 iOS 같은 운영체제용으로 빌드하고 기기에 설치하는 애플리케이션을 뜻합니다. 운영체제가 제공하는 생명주기, 알림, 카메라, 위치 같은 API를 권한 범위 안에서 사용할 수 있습니다. 보통 앱 마켓이나 조직의 배포 절차를 거치며, 새 버전은 패키지를 다시 배포하고 사용자가 업데이트해야 적용됩니다.
웹앱은 서버 또는 로컬에서 받은 HTML·CSS·JavaScript를 브라우저가 실행하는 애플리케이션입니다. 사용자는 URL로 접근하며, 서버의 파일을 바꾸면 다음 방문이나 새로고침 때 새 버전을 받을 수 있습니다. 하나의 웹 표준 기반 코드를 여러 운영체제에서 활용하기 쉽지만, 이용 가능한 기기 기능과 백그라운드 동작은 브라우저·운영체제 지원과 사용자 권한에 따라 달라집니다.
PWA(Progressive Web App, 점진적 웹앱)는 웹 기술로 만들면서 설치 가능한 모습, 오프라인 지원, 알림 등 앱과 비슷한 경험을 점진적으로 더한 웹앱입니다. W3C Web App Manifest는 이름, 아이콘, 시작 URL, 표시 방식 같은 실행 메타데이터를 JSON 파일에 적는 형식을 정의합니다. 단, manifest 파일 하나만 추가했다고 완성된 PWA가 되는 것은 아니며 기능 지원은 플랫폼마다 확인해야 합니다.
선택할 때는 URL 즉시 접근, 앱 마켓 배포, 오프라인 범위, 카메라·블루투스 같은 기기 기능, 여러 운영체제의 유지 비용을 확인합니다. 크로스플랫폼 앱은 코드를 공유해도 설치 패키지로 배포된다는 점에서 단순 웹앱과 다릅니다.
[따라하기]
아래를 mobile-web.html로 저장합니다. 화면 너비에 맞춰 표시되고 버튼을 누르면 학습 횟수가 늘어나는 한 파일 웹앱입니다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>학습 카운터</title>
<h1>오늘의 학습</h1>
<p id="result">완료 횟수: 0</p>
<button id="add">한 번 완료</button>
<script>
let count = 0;
const result = document.querySelector('#result');
document.querySelector('#add').onclick = () => {
count += 1;
result.textContent = `완료 횟수: ${count}`;
};
</script>
</html>
파일이 있는 폴더에서 Windows는 py -m http.server --bind 127.0.0.1 8000, macOS와 Linux는 python3 -m http.server --bind 127.0.0.1 8000을 실행합니다. 브라우저에서 http://127.0.0.1:8000/mobile-web.html을 여세요. 버튼을 두 번 누르면 ‘완료 횟수: 2’가 보입니다. 이 예제는 휴대폰 크기에도 맞는 웹앱이지만 manifest와 오프라인 처리가 없으므로 설치형 PWA는 아닙니다.
[흔한 실수]
반응형 웹, PWA, 크로스플랫폼 앱을 모두 같은 말로 부르지 마세요. 웹앱도 오프라인 기능을 가질 수 있고 모바일 앱도 서버 연결이 필요할 수 있으므로 인터넷 사용 여부만으로 구분할 수 없습니다. 앱 마켓 등록 여부, 브라우저 API 지원, 유지보수 비용은 목표 플랫폼별로 확인해야 합니다.
[보안 주의]
운영 웹앱은 HTTPS를 사용하고 브라우저 저장소에 비밀번호나 비밀키를 넣지 마세요. 카메라·위치 같은 권한은 기능을 실행하는 시점에 이유를 설명하고 최소한으로 요청합니다. 모바일 앱도 설치되었다는 이유만으로 안전하지 않으므로 입력 검증, 서버 권한 검사, 안전한 업데이트가 필요합니다. 실습 서버는 127.0.0.1에만 묶어 외부에 공개하지 말고 본인 기기에서만 실행하세요.
[직접 해볼 과제]
‘동네 행사 일정 보기’ 서비스를 만든다고 가정하세요. URL 공유, 푸시 알림, 오프라인 일정, 위치 사용, 업데이트 속도를 기준으로 웹앱·PWA·모바일 앱을 비교한 표를 만드세요. 가장 중요한 요구 세 개를 고르고 방식 하나를 선택한 이유를 세 문장으로 적습니다. 실습 화면에는 ‘초기화’ 버튼도 추가해 보세요.
[확인문제]
1. 웹앱의 코드는 주로 무엇이 실행하나요?
2. 반응형 웹과 PWA가 같은 뜻이 아닌 이유는 무엇인가요?
3. 구현 방식을 고르기 전에 확인해야 할 요구사항 두 가지는 무엇인가요?
[다음 학습]
순환 커리큘럼의 다음 수업은 IOT-001 ‘전압·전류·디지털 신호 기초’입니다. 모바일 트랙에서는 MOBILE-002 ‘네이티브·크로스플랫폼 선택’으로 이어집니다.
[공식 참고 자료]
Android Developers 시작 안내
https://developer.android.com/get-started/overview
Apple Developer 앱 배포 안내
https://developer.apple.com/documentation/xcode/distributing-your-app-for-beta-testing-and-releases
W3C Web Application Manifest
https://www.w3.org/TR/appmanifest/
MDN PWA 안내
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
이번에는 운영체제에 설치하는 모바일 앱과 브라우저로 여는 웹앱의 실행 방식, 배포, 업데이트, 기기 기능 사용 차이를 비교합니다.
[선수지식]
브라우저로 웹사이트를 열어 본 경험이면 충분합니다.
[학습목표]
1. 모바일 앱과 웹앱이 어디에서 실행되는지 설명한다.
2. 설치·업데이트·기기 기능 관점에서 차이를 비교한다.
3. 간단한 요구사항을 보고 적합한 방식을 고른다.
[핵심개념]
여기서 모바일 앱은 Android나 iOS 같은 운영체제용으로 빌드하고 기기에 설치하는 애플리케이션을 뜻합니다. 운영체제가 제공하는 생명주기, 알림, 카메라, 위치 같은 API를 권한 범위 안에서 사용할 수 있습니다. 보통 앱 마켓이나 조직의 배포 절차를 거치며, 새 버전은 패키지를 다시 배포하고 사용자가 업데이트해야 적용됩니다.
웹앱은 서버 또는 로컬에서 받은 HTML·CSS·JavaScript를 브라우저가 실행하는 애플리케이션입니다. 사용자는 URL로 접근하며, 서버의 파일을 바꾸면 다음 방문이나 새로고침 때 새 버전을 받을 수 있습니다. 하나의 웹 표준 기반 코드를 여러 운영체제에서 활용하기 쉽지만, 이용 가능한 기기 기능과 백그라운드 동작은 브라우저·운영체제 지원과 사용자 권한에 따라 달라집니다.
PWA(Progressive Web App, 점진적 웹앱)는 웹 기술로 만들면서 설치 가능한 모습, 오프라인 지원, 알림 등 앱과 비슷한 경험을 점진적으로 더한 웹앱입니다. W3C Web App Manifest는 이름, 아이콘, 시작 URL, 표시 방식 같은 실행 메타데이터를 JSON 파일에 적는 형식을 정의합니다. 단, manifest 파일 하나만 추가했다고 완성된 PWA가 되는 것은 아니며 기능 지원은 플랫폼마다 확인해야 합니다.
선택할 때는 URL 즉시 접근, 앱 마켓 배포, 오프라인 범위, 카메라·블루투스 같은 기기 기능, 여러 운영체제의 유지 비용을 확인합니다. 크로스플랫폼 앱은 코드를 공유해도 설치 패키지로 배포된다는 점에서 단순 웹앱과 다릅니다.
[따라하기]
아래를 mobile-web.html로 저장합니다. 화면 너비에 맞춰 표시되고 버튼을 누르면 학습 횟수가 늘어나는 한 파일 웹앱입니다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>학습 카운터</title>
<h1>오늘의 학습</h1>
<p id="result">완료 횟수: 0</p>
<button id="add">한 번 완료</button>
<script>
let count = 0;
const result = document.querySelector('#result');
document.querySelector('#add').onclick = () => {
count += 1;
result.textContent = `완료 횟수: ${count}`;
};
</script>
</html>
파일이 있는 폴더에서 Windows는 py -m http.server --bind 127.0.0.1 8000, macOS와 Linux는 python3 -m http.server --bind 127.0.0.1 8000을 실행합니다. 브라우저에서 http://127.0.0.1:8000/mobile-web.html을 여세요. 버튼을 두 번 누르면 ‘완료 횟수: 2’가 보입니다. 이 예제는 휴대폰 크기에도 맞는 웹앱이지만 manifest와 오프라인 처리가 없으므로 설치형 PWA는 아닙니다.
[흔한 실수]
반응형 웹, PWA, 크로스플랫폼 앱을 모두 같은 말로 부르지 마세요. 웹앱도 오프라인 기능을 가질 수 있고 모바일 앱도 서버 연결이 필요할 수 있으므로 인터넷 사용 여부만으로 구분할 수 없습니다. 앱 마켓 등록 여부, 브라우저 API 지원, 유지보수 비용은 목표 플랫폼별로 확인해야 합니다.
[보안 주의]
운영 웹앱은 HTTPS를 사용하고 브라우저 저장소에 비밀번호나 비밀키를 넣지 마세요. 카메라·위치 같은 권한은 기능을 실행하는 시점에 이유를 설명하고 최소한으로 요청합니다. 모바일 앱도 설치되었다는 이유만으로 안전하지 않으므로 입력 검증, 서버 권한 검사, 안전한 업데이트가 필요합니다. 실습 서버는 127.0.0.1에만 묶어 외부에 공개하지 말고 본인 기기에서만 실행하세요.
[직접 해볼 과제]
‘동네 행사 일정 보기’ 서비스를 만든다고 가정하세요. URL 공유, 푸시 알림, 오프라인 일정, 위치 사용, 업데이트 속도를 기준으로 웹앱·PWA·모바일 앱을 비교한 표를 만드세요. 가장 중요한 요구 세 개를 고르고 방식 하나를 선택한 이유를 세 문장으로 적습니다. 실습 화면에는 ‘초기화’ 버튼도 추가해 보세요.
[확인문제]
1. 웹앱의 코드는 주로 무엇이 실행하나요?
2. 반응형 웹과 PWA가 같은 뜻이 아닌 이유는 무엇인가요?
3. 구현 방식을 고르기 전에 확인해야 할 요구사항 두 가지는 무엇인가요?
[다음 학습]
순환 커리큘럼의 다음 수업은 IOT-001 ‘전압·전류·디지털 신호 기초’입니다. 모바일 트랙에서는 MOBILE-002 ‘네이티브·크로스플랫폼 선택’으로 이어집니다.
[공식 참고 자료]
Android Developers 시작 안내
https://developer.android.com/get-started/overview
Apple Developer 앱 배포 안내
https://developer.apple.com/documentation/xcode/distributing-your-app-for-beta-testing-and-releases
W3C Web Application Manifest
https://www.w3.org/TR/appmanifest/
MDN PWA 안내
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
댓글목록 0
등록된 댓글이 없습니다.