티스토리 뷰

[ 공지 ]

프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다!

 

현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며,

하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다.

 

(도서 소개 및 실습 미리보기)

https://geundung.dev/106

 

[PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간!

안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대�

geundung.dev

 

 

 

SNS 앱 예제로 배우는 프로그레시브 웹 앱

 

(구매 링크 / 2020.07.31 출간)

[YES24]

[교보문고]

[알라딘]

[인터파크도서]

 

 

프로그레시브 웹 앱의 기본적인 내용부터 시작하여, 서비스 워커, 오프라인 캐싱, 백그라운드 동기화 및 푸시 알림까지

상세한 설명을 통해 프로그레시브 웹 앱에 대해 더 다가갈 수 있을 것입니다.

 

 


 

안녕하세요~

 

오랜만에 새로운 강좌를 작성해보려고 합니다.

 

 

 

요즘 웹 기술 트렌드인 SPA (Single Page Application) 라이브러리/프레임워크 3대장으로 인해 웹 분야가 많이 핫해졌습니다.

3대장이라면 아직까진 React, Vue.js, AngularJS인 것 같습니다.

 

 

 

SPA 라이브러리/프레임워크도 웹 분야에서 손꼽히는 친구들이지만 PWA(Progressive Web App)도 큰 관심을 불러오고 있습니다.

 

 

 

 

이번 강좌에서는 PWA에 대해 알아보고 직접 PWA를 개발하는 실습을 진행할 예정입니다.

 

먼저, 강좌를 학습하시기 전에 미리 알고계셔야할 내용이 조금 있습니다.

 

 

- 기본 HTML, CSS

- 자바스크립트 기초

- 구글 크롬 개발자도구 사용법

 

 

자바스크립트의 경우 웹 개발 경험이 있으시다면 좋습니다.

또한   ES6  문법에 대해 알고계시다면 더 쉽게 따라오실 수 있습니다.

 

 

관련 지식이 없는 분들은 개발하기엔 어려움이 있으니 웹 개발 기초를 익히고 학습하시는게 좋습니다.

저는 아래 강좌를 추천합니다.

 

[생활코딩 웹 애플리케이션 만들기]

https://opentutorials.org/course/1688

 

 

 

그럼 본격적으로 첫 번째 PWA 강좌를 시작하도록 하겠습니다!

 


 

[0. 사전 준비]

 

 

먼저 실습에 필요한 구글 크롬기본 소스코드, 심플서버를 다운로드 받습니다.

 

 

[ 구글 크롬 ]

https://www.google.com/intl/ko_ALL/chrome/

이미 크롬 브라우저를 사용하고 계신다면 최신버전으로 업데이트 한 번 진행해주세요!

 

 

[ 심플서버 ]

https://github.com/leegeunhyeok/simple-server/releases/latest

Assets에 있는 파일 중 exe 파일을 다운로드 받고 설치해주세요

 

 

[ 소스 코드 ]

https://github.com/leegeunhyeok/pwa-example

 

빨간 네모로 표시한 Clone or download를 누른 후 zip 파일을 다운받아주세요!

그리고 적당한 위치에 압축을 풀어주시면 됩니다.

 

풀어주신 후 ch1 폴더를 사용합니다.

매 강좌에 맞는 챕터별로 자료가 준비되어있으니 해당 챕터에 맞는 폴더의 소스코드를 사용하시면 됩니다!

 

압축을 풀어보시면 위와 같은 구조로 되어있습니다.

 

images: 예제에 사용할 이미지들과 PWA 아이콘 파일

scripts: 스크립트 파일이 들어있구요

styles: 스타일시트

index.html: 메인 HTML

manifest.json: PWA 매니페스트 파일

service-worker.js: 서비스워커 스크립트 파일

 

 

웹 개발을 하셨던 분들도 manifest.json과 service-worker.js가 어디에 쓰일지는 아직 모르실겁니다.

PWA에 대해 알아보며 하나씩 배워나가봅시다!

 


 

[1. PWA란?]

 

 

구글 코드랩에 좋은 실습 내용과 설명이 있습니다.

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko

 

PWA는 Progressive Web App의 약자로, 의 장점과 의 장접을 결합한 환경입니다.

 

 

웹이랑 앱이라니..  조금 생소하실 수 있습니다.

그렇다고 해서 네이티브 (리액트 네이티브 등) 앱도 아닙니다.

 

 

브라우저에서 지원하는 앱이라고 생각하시면 조금 이해하기 쉬워집니다.

기존의 앱은 플레이스토어, 앱스토어 등을 통해 다운로드 & 설치를 해야만 했습니다.

 

PWA는 지원하는 웹 브라우저를 통해 설치 없이!

페이지 접속 후 바탕화면에 앱 아이콘을 추가할 수 있고

언제든지 푸시알림을 통해 재참여가 가능합니다!

또한 오프라인에서도 웹 앱에 접근 가능합니다.

 

 

그 외에도 아래와 같은 특징을 가지고 있습니다.

 

 

[ 구글 코드랩 ]

 

 

 

 

무엇보다 사용자들이 편리하게 사용할 수 있다는것이 가장 큰 장점인 것 같습니다.

귀찮은 다운로드와 설치 과정 없이 URL 접속 후 사용자가 원한다면 바탕화면에 앱 아이콘을 추가하고 언제든지 빠르게 접속할 수 있기 때문이죠

 

 

그렇다고 해서 PWA에 장점만 있는것이 아닙니다.

오래된 브라우저들은 PWA를 지원하지 않습니다. (자바스크립트 문법을 생각해보시면 이해가 빠릅니다)

지원하지 않는 브라우저에서는 웹 푸시 알림, 오프라인접속, 앱 셸 캐싱 등 강력한 기능을 사용하지 못할 뿐더러 바탕화면에 웹 앱을 추가할 수 없습니다.

 

최신 브라우저들은 대부분 지원하고 있기 때문에 PWA에 대해 배워두면 큰 도움이 될 것 입니다.

 

 

 

 

 

위 특징 리스트 중 연결 독립적 항목이 있습니다.

서비스 워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 한다 라고 되어있습니다.

 

서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와는 별개로 작동합니다.

스크립트이긴 한데 웹 페이지와 직접적으로 상호작용할 수 없습니다.

 

기존에는 스크립트를 작성하고 DOM 조작, 데이터 요청 등을 통해 웹 페이지를 제어하며 상호작용했지만 서비스워커는 그렇지 않습니다.

서비스워커는 웹 푸시(알림), 백그라운드 동기화, 캐싱 등의 기술적 기반을 제공합니다.

 

 

 

 

위에서 앱 셸, 오프라인 환경, 캐싱 등 이런 내용이 몇 번 언급되었습니다.

기본적으로 오프라인 상태로 웹 브라우저를 통해 URL로 접속을 하면 네트워크가 없어서 접속할 수 없다는 메시지가 뜹니다.

그런데 오프라인 환경에서 접속할 수 있는 이유는 바로 서비스워커의 캐싱 덕분입니다.

 

아래 그림을 봅시다

 

[구글 코드랩]

 

 

위 사진은 평범한 앱처럼 보입니다. 만약 웹으로 위와 같은 디자인의 웹 앱을 구현했다고 가정합시다.

상단바, 메뉴, 배경이미지 등 이런 요소들은 바뀔 필요가 없는 요소입니다.

바뀌고 변화하는 부분은 Content 즉, 블로그로 가정하면 글 목록이 여기에 해당되죠

 

PWA에서는 상단바, 메뉴 등 고정적인 컴포넌트를 앱 셸이라고 말합니다.

이러한 앱 셸들을 브라우저가 캐싱해두면 오프라인 상태라고 해도 앱 셸은 정상적으로 불러올 수 있겠죠.

 

오프라인이기 때문에 새로운 컨텐츠는 불러오지 못하더라도 앱의 기본 요소들은 캐시된 데이터로 로드가 가능합니다.

우리가 원한다면 컨텐츠도 캐싱해두어 오프라인 상태에서 불러올 수도 있습니다.

 

 

 

 

지금까지 알아본 내용을 간단히 요약하자면 아래와 같습니다.

 

1. 웹 브라우저를 통해 실행하는 앱

2. 푸시알림, 오프라인 환경 접속 등 원시 앱과 유사

3. 서비스워커는 독립적으로 실행되며 웹 푸시, 캐싱 등 기능 제공

 

 

실제로 구현해보면 어떤 느낌인지 감이 오실겁니다.

이제 다음 단계를 진행하며 기본 소스를 실행해봅시다!

 


 

 

[2. 심플서버로 예제 서버 띄우기]

 

 

(심플서버는 제가 이전에 개발해두었던 프로그램이며 자유롭게 사용하실 수 있습니다.)

 

 

 

준비단계에서 설치한 심플 서버를 실행시켜줍니다.

 

실행시킨 후 기본설정의 서버 디렉토리 선택 버튼 눌러줍니다.

 

 

 

 

폴더는 예제 소스코드가 위치한 폴더로 지정해줍니다. (index.html 파일이 있는 폴더)

저는 E드라이브에 압축을 풀어놓았기 때문에 위와 같은 경로로 선택했습니다.

 

 

 

맨 위에있는 서버 정보 옆에 있는 스위치를 눌러 서버를 실행시켜줍니다.

 

만약 실행되지 않고 문제가 발생했다면 아래의 포트 8080을 다른 값으로 변경한 후 실행시켜보세요

(8090, 8888 등..)

 

 

 

정상적으로 서버가 실행 되면 서버 상태는 실행 중 초록 표시로 변하게 되고

아래에 있는 서버 URL 부분에 마우스를 올리면 서버 주소가 나옵니다.

주소를 클릭하여 서버에 접속합니다.

 

 

짠!

 

이렇게 예제 페이지가 잘 출력되었다면 서버 띄우는것은 성공한 것 입니다.

 

 

+ 버튼을 누르면 새로운 동물 이미지가 추가되고, - 버튼을 누르면 동물 이미지가 1개씩 사라집니다.

추가, 삭제 상태는 localStorage에 저장되며 웹 페이지 로드시 해당 값을 불러오기 때문에 상태가 그대로 유지됩니다.

 

 

이제 이 기본 소스코드에 서비스워커를 등록하고, 오프라인에서 보여줄 데이터를 캐싱하고,

항상 최신으로 유지하는 PWA의 강력한 기능에 대해 배워나갈 것 입니다.

 

 

아, 참고로 PWA는 로컬호스트HTTPS가 적용된 웹 페이지 외에서는 동작하지 않습니다!!

예외적으로 로컬호스트에선 HTTPS가 아니더라도 PWA를 개발하고 테스트할 수 있으며,

실제 배포시에는 무조건! HTTPS로 배포하셔야합니다.

 

보안상의 이유로 HTTPS 인증이 필요한 것 같습니다.


 

 

 

[3. 기본 코드 분석]

 

 

다운로드 받은 코드를 잠깐 살펴봅시다.

 

scripts/app.js 파일을 열어주세요

이미 작성해둔 코드가 있습니다.

 

 

HTML 파일을 확인해보시면 알겠지만 img 태그가 없는데 실행 결과에는 닭 얼굴을 한 말 사진이 있었습니다.

스크립드 로드 후 app.showImage()를 통해 이미지가 추가된 것 입니다.

 

 

// 이미지 리스트 불러오기, 데이터가 없을 경우 ['images/1.jpg']로 대체
app.images = JSON.parse(localStorage.getItem('images')) || ['images/1.jpg'];
app.saveImageList();
app.showImage();

 

아래쪽에 위와같은 코드가 있는데, 이 부분은 localStorage에서 데이터를 불러오고 데이터가 없는 경우 1.jpg (말 사진)을 새로 저장하는 코드입니다.

그리고 그 아래에서 showImage를 통해 이미지를 HTML에 추가하는 모습입니다.

 

이후에 1.jpg 뿐만 아니라 2.jpg가 저장되어있다면, 웹 페이지 접속 시 두 개의 이미지가 표시될겁니다.

 

 

코드는 이미지 리스트를 불러오고 이미지를 HTML에 추가해주는게 전부입니다.

 

 

 

 

 

한 번 웹 페이지에서 F12를 눌러 개발자 도구를 열어보세요!

 

상단 탭에서 Network를 선택하신 후 빨간 네모로 표시한 Offline에 체크해주세요!

 

그리고 F5를 눌러 웹 페이지를 새로고침해봅시다.

 

 

 

 

아직 기본 웹 페이지는 PWA이 아니기 때문에 오프라인 상태에서 접속할 수 없습니다.

 

앞으로 우리는 서비스워커를 추가하여 오프라인에서도 웹 페이지에 접속하고 이미지를 볼 수 있도록 개발해나갈 것 입니다.

 

 

 

 

 

 

그럼 다음 강좌에서 봅시다!

 

감사합니다~!

 

 

 

댓글
  • 프로필사진 익명자 안녕하세요. PWA에 관심갖는 초보 직장인 입니다. 개발방법에 몇가지 여쭤보고 싶은게 있어서 연락드립니다.
    1. PWA를 사용하여 개발할 경우, 서버쪽 코딩은 보통 어떻게 진행되나요? eclips+java로 진행하게 되나요? 아니면 어떻게 진행되는지 궁금합니다.
    2. PWA 개발 진행시 개발툴은 보통 어떠 어떠한 것들이 사용되는지 궁금합니다.
    3. DB는 서버쪽 코딩과 연결하여 mysql같은걸 그대로 사용하면 되는지요..?
    4. pwa예제 사이트를 보면 모두 보여주기만 하는 사이트라서 그런데, 해당 사이트에서 crud가 가능한지 궁금합니다..
    5. pwa를 사용하면 모바일이 아닌, pc브라우저에서도 구동시킬 수 있나요?
    예제라던지 책이 많이 없어서 전반적인 이해가 부족한것 같아가지구요..
    2019.06.18 21:45
  • 프로필사진 BlogIcon 이근둥 PWA는 기존 웹 환경에 "추가"된 다양한 기술의 집합체라고 보시면 될 것 같습니다.

    1. PWA 개발이라고 해서 서버가 특별한것은 아닙니다. 적절한 환경에 따라 서버 구성을 다양하게 진행할 수 있습니다. (기존 서버를 그대로 사용하고 프론트단만 PWA로 리팩토링 가능.. 등)

    2. 개발툴은 개발자 취향이라 다양합니다. IDE같은 경우에는 원하는것을 사용하면 되고, 브라우저의 경우 PWA 디버깅을 위해 PWA를 적극 지원하는 브라우저를 통해 개발하시면 될 것 같습니다. (현재는 크롬 추천)

    3. 위에서 말씀드린것과 같이 기존 웹 + PWA의 신기술이기 때문에 CRUD는 당연히 가능합니다. 대부분의 PWA가 보여주기만 하는 사이트인 이유는 PWA 페이지 접속 시 필요 데이터를 서버로부터 Fetching하고 이후 접속시엔 캐시된 데이터만 보여주는 등 설치형 "앱"과 느낌이 비슷할 수 있습니다. 이와 같은 사이트가 PWA의 장점을 잘 살린 사례라고 볼 수 있습니다.

    아직 신기술이고 낮은 버전의 브라우저에선 PWA 기술을 지원하지 않기 때문에 섣불리 개발하지 못하는 상황이긴 합니다. 개인적으로 시간이 흐를수록 많은 유명 서비스들도 PWA 방식으로 점차 변화하지 않을까라는 생각을 하고 있습니다.
    2019.06.18 21:55 신고
  • 프로필사진 익명자 정말 감사합니다. 무언가를 처음 받아들이면 막연하고 막막한 생각이 많이 드는데, 상세하게 답변 달아주셔서 정말 감사드리며 자신감이 생기네요! 2019.06.18 22:21
  • 프로필사진 익명자 안녕하세요. 약 1달전에 질문올렸던 사람입니다.
    제가 아직 감을 못잡았는지, 여러가지 궁금증이 생기네요..ㅎㅎ
    1. 지난번에 답변해주셨던 1번 내용 중, 프론트단만 pwa로 리팩토링 가능.. 이라고 적어주신 부분이
    혹시 일반 웹개발 (Vue.js + Spring)으로 개발된 사이트에 나중에 pwa를 적용시켜도 되는건지 궁금합니다.
    2. pwa가 데스크톱, 모바일 모두 ui가 이쁘게 적용된다고 하는데, 처음 Vue.js+Spring으로 데스크톱 웹사이트를 개발하고
    나중에 pwa를 적용하면서 모바일에서도 예쁘게 나오는지 확인하면 되는건가요? 아니면 처음부터 데스크톱과 모바일 ui를 신경쓰고 pwa는 단지
    푸쉬알림이나 오프라인 접속가능 같은 기능이 추가되는건가요? pwa가 모바일 ui까지 잡아주는 역할을 하는지 궁금합니다..
    2019.07.08 01:00
  • 프로필사진 BlogIcon 이근둥 1. PWA는 추후 서비스워커 등록만으로 구현 가능하기 때문에 일반적인 웹 페이지 개발 후 고려하셔도 됩니다. 다만 PWA 구조에 적절하게 개발하려면 사전에 미리 설계를 하시는게 좋습니다.

    2. PWA라고 UI가 바뀌는건 아닙니다. HTML + CSS가 페이지 레이아웃과 UI를 담당하고 PWA는 서비스워커를 통해 캐싱, 푸시 등 기술적인 기반만 제공합니다
    2019.07.08 08:20 신고
  • 프로필사진 눈눈 안녕하세요. 좋은 글 정말 감사합니다. 이 시리즈 덕분에 많이 배우고 있어요.
    저는 취미로(?) 웹사이트를 만들고 있는 사람입니다. 사전 비슷한 기능을 하는 웹앱인데, 사이트 특성상 오프라인에서도 구동 가능하면 좋을 것 같아서 electron을 공부하다 배경지식이 전무한 일반인이 공부하기엔 너무 힘들어서(Node.js라든가.. 백엔드쪽은 정말 하나도 모르겠더라구요. 인스톨러도 그렇고ㅠㅠ) PWA쪽으로 노선을 틀었는데, 제 사이트에는 이쪽이 더 잘 맞는듯하고, 저로서도 훨씬 접근하기가 쉬워서 의욕이 생기네요. 모두 이 시리즈 덕분입니다.
    다름이 아니라, 혹시 PWA 관련해서 자유롭게 질문할 수 있는 커뮤니티가 있을까 해서 여쭤봅니다. 제가 생각한 캐싱 전략이 현실성이 있는지, 더 괜찮은 방법은 없는지, 이런 이야기들을 나눠보고 싶은데 개발자가 아니다보니 어디서 이런 얘기를 해야할지 잘 모르겠네요.
    2019.08.29 13:36
  • 프로필사진 BlogIcon 이근둥 PWA에 대해 중심적으로 토론하는 커뮤니티는 잘 모르겠습니다..ㅜ 페이스북이나 슬랙 등 다양한 SNS 환경에 웹 기술 관련 커뮤니티가 많으니 이러한 공간에서 의견 나눠보시면 좋을 것 같습니다! PWA 외에 다양한 웹 기술도 알아볼 수 있습니다 2019.08.29 14:01 신고
  • 프로필사진 모노 블로그만 운영하시나요? 2019.08.30 10:24
  • 프로필사진 BlogIcon 이근둥 넵 블로그만 운영하고 있습니다 2019.08.30 12:52 신고
  • 프로필사진 비밀댓글입니다 2019.10.08 13:09
  • 프로필사진 BlogIcon 이근둥 PWA는 네이티브 기능을 사용하기엔 적합하지 않습니다. (앞으로 기능이 추가될지는 모르겠으나 현재 iOS 사파리 상황만 보더라도 푸시 기능을 지원하지 않으며 실질적인 네이티브 기능 제어가 불가능한 상태. 앞으로 네이티브 기능을 제어할 수 있을지는 모르겠으나.. 브라우저를 사용하는 플랫폼이 많아 구현될지는 잘 모르겠네요..)

    하이브리드 앱은 결국 네이티브 앱의 "웹 뷰"에서 페이지를 띄워주는 방식이기 때문에 PWA와는 성격이 조금 다른 것 같습니다. 네이티브 앱 위의 웹 뷰에서 동작하기 때문에 네이티브 API를 통해 기능을 어느정도 활용할 수 있습니다.

    다만 PWA는 기존 웹에 "서비스 워커"를 통해 동작하며 서비스 워커는 "브라우저"가 이 동작을 담당합니다. 브라우저의 확장 기능이라고 생각하시면 더 쉽게 이해하실 수 있습니다. PWA는 브라우저를 통해 동작하기 때문에 네이티브의 기능을 활용할 수 없습니다.

    결론을 정리하자면 아래와 같습니다.
    하이브리드 웹: 네이티브 앱의 웹 뷰에서 구동 (네이티브 기능을 어느정도 사용 가능)
    PWA: PWA를 지원하는 브라우저를 통해 구동 (브라우저에 구현된 기능만 사용 가능)
    2019.10.08 14:33 신고
  • 프로필사진 rafa simple-server를 우분투에서 실행하는 방법이 있나요? 2019.11.16 15:43
  • 프로필사진 BlogIcon 이근둥 simple server는 윈도우 전용으로 개발한 프로그램입니다.

    아래의 크롬 확장프로그램을 설치하신 후 진행하셔도 됩니다
    https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ko
    2019.11.16 17:00 신고
  • 프로필사진 rafa 감사합니다! 소스코드 npm install build 하니 우분투에서도 가능하네요! 2019.11.18 15:00
  • 프로필사진 BlogIcon 이근둥 앗.. 조만간 리눅스, 맥 배포용 파일도 빌드해서 올려두어야겠네요 2019.11.18 22:05 신고
  • 프로필사진 비밀댓글입니다 2019.12.03 12:11
  • 프로필사진 비밀댓글입니다 2019.12.24 22:44
  • 프로필사진 BlogIcon 이근둥 전반적인 웹 개발에 대한 지식이 필요합니다(HTML, CSS, Javascript)

    툴의 경우 선호하시는것을 추천드립니다. 저는 주로 VSCode를 사용하고 있습니다
    2019.12.27 17:33 신고
  • 프로필사진 나그네 미니서버는 현재 다운로드 못받네요~ 아파치 서버에서 구동하거나 다른 http 서버에 넣어서 구동해도 되나요? 2019.12.27 17:26
  • 프로필사진 BlogIcon 이근둥 앗 윈도우 빌드파일을 업로드하지못했네요.. 조만간 수정하여 업로드하도록 하겠습니다

    자체 서버나 아래의 크롬 확장프로그램을 설치하신 후 진행하셔도 무방합니다!
    https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ko
    2019.12.27 17:31 신고
  • 프로필사진 BlogIcon 이근둥 윈도우 버전도 빌드하여 업로드했습니다~ 2019.12.27 23:58 신고
  • 프로필사진 hihi 안녕하세요. 실습까지 너무 잘 정리해주셔서 감사합니다! 많은 도움이 되었어요. :) b
    궁금한 점이 있는데 질문해도 될까요?
    1. PWA가 앱으로 동작하는 원리는 어떻게 되나요? 찾아봐도 잘 안나와서요..
    그냥 브라우저에서 동작하는 것인데 보이는 것만 앱처럼 보이게 되는 건가요?
    2. PWA에서 Service Worker가 중요한 개념으로 많이 언급이 되고, 그 중에서도 오프라인 상황을 위한 캐싱은 특히 강조되더라구요.
    캐싱을 해놓는 것은 성능적이나 사용자 측면에서 장점이 있을 것이라고 생각이 됩니다.
    그런데 PWA에서 Service Worker를 강조하고 필수라고 말하는 이유가 있나요?
    Service Worker는 PWA를 하지 않더라도 사용할 수 있는 기술이고, 모바일 앱이나 컴퓨터 앱으로 사용한다고 했을 때 캐싱이 그렇게 중요한 요소인가 싶더라구요.
    2020.06.28 23:31
  • 프로필사진 BlogIcon 이근둥 먼저 두 질문에 대해 답변 드리기 앞서, PWA는 웹 앱의 개선된 모습으로 볼 수 있으며, 점진적인 웹 앱이라는 것에 대한 명확한 정의를 내세우긴 조금 어렵다고 생각합니다. 점진적인 향상을 고려하고 새로운 기술을 사용하여 개발된 웹 앱을 의미하거나, 또는 이와 같이 개발하는 방법 등 어떠한 관점으로 보냐에 따라 조금씩 다르게 해석될 수 있다고 봅니다.

    하지만 결론적으론, 위와 같이 웹 앱을 구현하게 된다면 웹의 편리한 접근성을 유지하면서, 점진적으로 개선된 기능을 제공할 수 있는 웹 앱이 될 것이고 이를 PWA라고 부르는 것이 일반적이라고 볼 수 있겠습니다.



    (1) - 첫 번째 질문에 대한 답변은 PWA는 "점진적인 향상"을 고려하여 개발된 웹 페이지(웹 앱)이며, 다양한 웹 기술과 구성 요소가 추가된 웹 페이지일 뿐입니다.
    웹 페이지이기 때문에 브라우저를 통해 동작하고, 브라우저에 구현된 API를 사용하여 기능을 개발했을 뿐, PWA도 일반적인 웹 페이지와 동일하게 동작합니다.
    다만, 웹 워커 중 하나인 서비스 워커는 브라우저의 백그라운드 프로세스에서 동작하고, 이로 인해 지금까지 없던 새로운 기능을 사용자에게 제공할 수 있게 되는 것입니다.
    겉으로 보이는 모습은 웹 페이지를 어떻게 디자인하고 CSS를 어떻게 작성하냐에 따라 달라지는 문제이기 때문에 PWA와는 큰 관련이 없다고 봅니다.



    (2) - 두 번째 질문은 지금까지의 브라우징 환경을 먼저 생각해보면 좋을 것 같습니다. 지금까지의 웹 사용 경험은 네트워크 상태에 "의존"하던 경험이 99% 이상일 것입니다.
    네트워크가 느리면 페이지가 답답하게 로드되고, 오프라인 상태인 경우엔 웹 페이지의 글자 하나조차 로드 할 수 없다는 사용성 측면에서의 치명적인 단점이 있었습니다.
    2015년, 처음으로 PWA라는 개념을 고안했던 알렉스 러셀에 의하면, 웹 페이지를 구성하기 위해 필요한 앱 셸(HTML, CSS, JS 등)을 미리 캐싱하고 이후 제공하는 방식을 이야기했었고, 이를 위해 탄생한 것이 서비스 워커라고 볼 수 있습니다.
    서비스 워커를 통해 캐싱된 앱 셸을 제공하여 "네트워크 상태(빠르던 느리던 오프라인이던)에 관계 없이" 빠른 로드가 가능해졌으며, 이는 곧 네이티브 앱에서만 누릴 수 있던 경험을 웹 상에서도 경험할 수 있도록 합니다.
    결국, 이러한 기능을 구현하기 위해서는 서비스 워커가 필수로 존재해야 합니다.




    글을 작성하다보니 조금 길어졌는데, 추가적으로 궁금한 사항이 있다면 답변 주세요 :)
    2020.06.29 15:37 신고
  • 프로필사진 hihi 자세한 설명 감사합니다!!!!!!!! 이해가 잘 되었어요 ㅎㅎ 2020.06.29 19:07
댓글쓰기 폼