PWA가 무엇인가요?

모바일 어플리케이션의 새로운 개발방식, PWA를 알아보겠습니다.


파트 분:초
네이티브 앱이란? 00:13
웹 앱이란? 02:01
하이브리드 앱이란? 03:29
크로스-플랫폼이란? 04:42
⭐️PWA란? 05:39
PWA 개발하기 07:39

PWA 개발은 아래 링크의 구글 튜토리얼을 기반으로 진행합니다.

🔗 Your First Progressive Web App

위 링크의 코드 설명에는 불충분한 부분들이 있어서 초보자들에게 막막할 수 있어요. 😭

영상의 보충설명을 보시면서 코딩하신다면 어렵지 않게 PWA 앱을 완성하실 수 있을거에요!




🎬 영상 주요 포인트

📱 모바일 앱의 종류

네이티브 앱

네이티브 앱. 스마트폰이란 것이 탄생하면서 있었던 가장 기본적인 형태의 앱이에요. 해당 스마트폰에 깔린 OS 즉 안드로이드 또는 iOS환경에 각각 그 전용으로 개발된 소프트웨인거죠. ... 이처럼 OS 각각의 전용으로 개발되었기 때문에 네이티브 앱은 안드로이드와 iOS 각각에서 주어진 모든 자원과 기능들을 활용할 수가 있어요. iOS나 안드로이드가 새로 나올 때마다 최신 기능들을 얼마든 탑재할 수 있고 스마트폰의 전후 카메라, 각종 센서, 하드웨어 자원, 내부 파일 시스템 등을 각각의 OS가 허용하는 한 얼마든지 직.접. 활용할 수 있는거죠. 스마트폰의 성능을 최대한 활용할 수 있는 고퀄리티의 앱을 만들 수가 있는거에요. 그리고 각각 iOS의 앱스토어, 안드로이드의 플레이스토어에 올려지기 때문에 구글과 애플에게 검증된 방식대로 쉽게 스토어에서 검색해서 찾을 수 있고 원하는 위치에 아이콘으로 추가해서 언제든 간편하게 사용할 수 있죠. 하지만 단점도 있어요. iOS와 안드로이드 각각에서 만들어야 하기 때문에 안드로이드 개발자, iOS 개발자를 따로 두거나 혹은 한 사람이 둘을 다 만들어야 하죠. 개발에 드는 인력과 시간이 늘어나는거에요. ... 우수한 성능의 앱을 만들 수 있지만 개발하고 관리하는 과정이 어렵다는 것이 네이티브 앱의 특징이자 장단점으로 정리될 수 있을거에요.

모바일 웹

모바일 웹은 다른 게 아니라 스마트폰 사용자들을 대상으로 만든 웹사이트에요. ... 스마트폰의 좁은 세로화면에서 보기 편안하도록 만들어진 사이트가 모바일 웹이에요. ... 눈치채셨겠지만, 모바일 웹의 장점이라면 개발하고 운영하기가 훨씬 간편하다는거에요. 모바일용으로 웹사이트만 만들어놓으면 사용자 폰에서 크롬이나 사파리 같은 브라우저로 열 수 있기 때문에 웹 개발만 할 줄 알면 OS에 구분 없이 어느 폰에서든 동작하는 웹앱을 만들 수 있고 내용이 바뀔 때도 이 사이트만 업데이트하면 되니까 스토어의 검수를 기다릴 필요 없이 언제든 원하는 때에 버전업을 할 수 있는거죠. 단점은 기능과 성능이에요. ... 브라우저 화면에 나타날 뿐인 모바일 웹으로는 할 수 있는것들이 제한되어 있어요. 이걸로도 만들 수 있는 유용한 앱이 많지만 스마트폰의 모든 자원과 기능을 활용할 수 있는 고성능 게임이나 그래픽 툴 등의 앱은 어렵겠죠.

하이브리드 앱

이 둘 사이에서 절충점을 찾은게 하이브리드에요. 네이티브로 만들되, 그 앱에 브라우저 창을 둬서 일부 또는 대부분의 기능을 웹 형태로 제공하는거죠. 보다 쉽게 말하자면, 안드로이드나 iOS 전용으로 각각 스토어에 올리는 네이티브 앱을 만드는데 그 앱 안에 크롬이나 사파리같은 브라우저처럼 웹사이트를 보여주는 창을 하나 넣는거에요. ... 이런 앱들은 이 네이티브 기능들에 대해서만 스토어를 이용한 업데이트가 필요하고 웹뷰에 나타나는 컨텐츠들은 웹쪽만 업데이트하면 되기 때문에 네이티브 앱보다 더 유연한 운영이 가능하고 탑재할 수 있는 기능에도 제한이 없을거에요.

크로스오버 플랫폼

리액트 네이티브, 플러터, 자마린 이런 크로스오버는 또 다른 방식의 접근이에요. 하나의 언어, 한 번의 개발로 안드로이드와 iOS 모두에서 동작하는 네이티브 앱을 만들기 위한거죠. 리액트 네이티브의 자바스크립트나 플러터의 다트, 또는 자마린의 C#으로 코딩을 하면 iOS와 안드로이드에서 각각 이해할 수 있는 언어로 변환이 돼서 폰에서 돌아가게 되는거거든요. 웹은 브라우저나 웹뷰가 제공하는 이 영역까지의 기능만 사용할 수 있지만 이 크로스오버 플랫폼들은 양쪽 OS의 더 깊은 영역까지 닿을 수 있도록 만들어졌어요.

⭐️ PWA

PWA는 먼저 설명한 것들을 대체하기 위한 것 또는 그것들의 단점을 다 해결할 수 있는 무언가가 아니라 개발하기 쉽고 사용하기 편리한 앱을 만들기 위한 또 하나의 접근법, 방법론이라고 보시면 돼요. 더 정확히는, 이 모바일 웹의 한계를 브라우저의 발전을 통해 끌어올린거죠. ... 브라우저에서 돌아가는 모바일 웹이 어떻게 이게 다 가능하냐구요? 네, 브라우저들이 이제 이런 기능들을 지원하는거죠. 보다 편리한 PWA의 생태계를 위해 위 기능들 뿐 아니라 여러 다른 것들을 가능하도록 하기 위한 브라우저 기능들이 개발되고 발달해가고 있어요. ... 웹으로 개발 가능한 수준의 앱은 브라우저에서 돌리는 것보다 훨씬 편리하게 그리고 지원되는 더 많은 기능들과 함께 이용할 수 있는거에요. ... 거기다 이제 홈에 아이콘으로 추가까지 되니까 스토어에서 다운받는 이 앱들처럼, 기존 사용자들을 묶어놓는것도 가능해진거구요.

🌟영상에서 예제를 통한 PWA 개발 과정을 살펴보세요!


🍿 더 자세한 내용은 영상에서 보실 수 있습니다.





관련 태그의 다른 영상들

HTML과 CSS를 제대로 알아보는 강좌입니다.
# HTML
# CSS
#
HTTPS가 뭐고 왜 쓰나요?
대칭키와 비대칭키 개념과 함께 HTTPS의 목적과 원리를 간략히 알아봅니다.
# HTTPS
# 대칭키
# 비대칭키
# 공개키
# 개인키
# 보안
#
PWA가 뭔가요?
떠오르는 모바일 트렌드! PWA는 뭐고 어떻게 만드는지 알아보기로 해요.
# PWA
# 네이티브 앱
# 웹앱
# 하이브리드 앱
# 크로스 플랫폼
#
GrqphQL이 뭔가요?
REST API와는 또 다른 신선함! GraphQL의 매력을 알아볼까요?
# GraphQL
# REST API
#
REST API가 뭔가요?
웹 개발자라면 꼭 알아야 할 REST API. 쉽게 설명해드립니다.
# REST API
# api
#
앵귤러, 리액트, 뷰가 뭔가요?
프론트엔드에도 프레임워크가 있다? SPA를 알아봅니다.
# Angular
# React
# Vue
# SPA
# 프론트엔드
#
쿠키, 세션, 캐시가 뭔가요?
어렴풋이 알지만 어떻게 다른지 헛갈리는 세 용어. 확실하게 알아보자구요.
# 쿠키
# 세션
# 캐시
#
왜 익스플로러를 싫어하나요?
웹 개발자들의 철천지 원수 익스플로러! 웹표준을 지키자구요.
# 브라우저
# 웹표준
# 크로스 브라우징
# 익스플로러
#
MVC 웹 프레임워크가 뭔가요?
Model? View? Controller? 코드와 함께 쉽게 알아봅니다.
# MVC
# 동적 웹
# 프레임워크
# 라이브러리
#
정적 웹은 뭐도 동적 웹은 뭔가요?
왜 HTML, CSS, JS로는 부족할까요? 정적과 동적 웹의 차이를 알아봅니다.
# 정적웹
# 동적웹
#
HTML, CSS JavaScript가 뭔가요?
웹사이트 개발의 핵심이 되는 삼총사! '갖다놓고 꾸미고 시킨다'를 기억하세요.
# HTML
# CSS
# 자바스크립트
#
# 브라우저
...
🌏 Why not change the world?