[웹앱 실무 29] PWA - PWA란 무엇인가 - TheNullPage(널페이지)

브라우저에서 잘 돌아가던 웹사이트를 스마트폰 홈 화면에 아이콘으로 딱 깔고, 주소창 없이 앱처럼 전체 화면으로 열고, 인터넷이 잠깐 끊겨도 화면이 뜨게 만들 수 있다면 좋겠죠? 그걸 해주는 게 바로 PWA(Progressive Web App, 점진적 웹 앱)예요. 저도 처음엔 무슨 거창한 프레임워크(framework, 개발 뼈대 도구)인 줄 알았거든요. 알고 보니 PWA는 새 언어도 새 도구도 아니고, 우리가 이미 아는 HTML, CSS, 자바스크립트로 만든 사이트에 몇 가지 규칙을 더 지켜주면 앱처럼 동작하게 되는 웹 기술의 묶음이더라고요. 오늘은 이 PWA가 왜 필요하고, 무엇으로 이루어지는지 하나씩 풀어볼게요.

29.1 PWA가 대체 뭔가요?

한 문장으로 하면, PWA는 웹사이트인데 앱처럼 쓸 수 있는 것이에요. 우리가 만든 사이트가 있다고 쳐요. 평소엔 크롬이나 사파리 같은 브라우저에서 열죠. 그런데 이 사이트에 PWA 규칙을 적용하면, 사용자가 홈 화면에 설치할 수 있게 되고 그때부터는 앱 아이콘을 눌러 여는 독립된 앱처럼 굴어요.

중요한 건 앱스토어를 거치지 않는다는 점이에요. 보통 앱은 스토어에 올리고 심사받고 사용자가 내려받죠. PWA는 그냥 웹 주소만 있으면 돼요. 사용자가 사이트에 들어오면 브라우저가 알아서 "이거 설치할래요?"하고 물어봐요. 배포와 업데이트가 웹처럼 이뤄진다는 게 가장 큰 매력이에요. 코드를 고쳐 올리면 다음 방문 때 최신 버전이 바로 반영되거든요.

29.2 왜 굳이 PWA를 쓰나요?

상황을 하나 그려볼게요. 작은 메모 서비스를 웹으로 만들었어요. 사용자가 매일 쓰는데, 그때마다 브라우저 열고 주소 치고 즐겨찾기에서 찾아 들어가야 해요. 조금 번거롭죠. 여기에 PWA를 입히면 홈 화면 아이콘 한 번으로 열려요. 앱을 따로 개발하지 않고도 앱 같은 접근성을 얻는 거예요.

정리하면 이런 이점들이 있어요. 첫째, 설치가 가볍다는 점이에요. 수십 메가바이트짜리 앱을 받을 필요 없이 아이콘만 생겨요. 둘째, 화면이 넓다는 점이에요. 주소창과 탭이 사라져서 콘텐츠에 집중돼요. 셋째, 한 번의 코드로 여러 기기를 커버해요. 안드로이드 앱, 아이폰 앱을 따로 만들 필요 없이 웹 하나로 되니까요. 넷째, 인터넷이 불안정해도 최소한의 화면은 띄울 수 있어요. 이건 뒤에 나오는 서비스 워커 덕분이에요.

지하철에서 신호가 끊긴 상황을 떠올려 볼게요. 평범한 웹사이트라면 "인터넷에 연결할 수 없음" 하는 공룡 그림 화면만 덩그러니 뜨죠. 그런데 PWA로 만들어두면, 서비스 워커가 미리 저장해둔 화면을 대신 보여줘요. 적어도 사용자가 마지막으로 본 메모나 안내 문구는 읽을 수 있는 거예요. "연결이 안 되면 아무것도 안 보인다"와 "연결이 안 돼도 뭔가는 보인다"는 사용자 경험에서 꽤 큰 차이랍니다.

29.3 그냥 웹사이트랑 뭐가 다른가요?

겉보기엔 같은 웹사이트인데 뭐가 다르냐고요? 핵심은 브라우저가 이 사이트를 앱 후보로 대접하느냐예요. 평범한 사이트는 아무리 예뻐도 브라우저가 "설치"를 권하지 않아요. 그런데 PWA 조건을 갖추면 브라우저가 태도를 바꿔요.

조건은 크게 세 가지예요. 첫째, 앱 정보를 담은 매니페스트 파일이 연결돼 있어야 해요. 둘째, 백그라운드에서 도는 서비스 워커가 등록돼 있어야 해요. 셋째, 사이트가 HTTPS(보안 연결)로 제공돼야 해요. 이 세 가지가 갖춰지면 브라우저는 비로소 "아, 이건 앱이 되고 싶은 사이트구나"하고 인정하고 설치 안내를 띄워줘요.

29.4 PWA는 뭐로 이루어져요?

PWA를 떠받치는 기둥은 두 개의 파일이라고 기억하면 편해요. 하나는 매니페스트(manifest, 앱 정보 파일)고, 다른 하나는 서비스 워커(service worker, 백그라운드 스크립트)예요. 여기에 HTTPS라는 바닥 조건이 깔려요. 우리가 만든 사이트의 head 안에 딱 이런 줄을 넣는 것부터 시작해요.

이 중 link rel="manifest" 한 줄이 브라우저에게 "내 앱 정보는 저 파일에 있어"라고 알려주는 신호예요. 이 줄을 넣고 조건이 맞으면, 브라우저 주소창에 설치 아이콘이 생기거나 화면 아래에 설치 안내가 떠요. 아직 매니페스트 내용을 안 채웠으니 지금은 이런 연결 고리가 있다는 것만 봐두면 돼요.

29.5 매니페스트는 무슨 역할이에요?

매니페스트는 브라우저에게 건네는 앱 소개서예요. "내 앱 이름은 이거고, 아이콘은 이거고, 열 때는 이렇게 열어줘"를 적어두는 JSON(제이슨, 데이터를 키와 값으로 적는 형식) 파일 한 장이죠. 가장 작은 형태는 이래요.

{
"name": "오늘의 메모",
"short_name": "메모",
"start_url": "/",
"display": "standalone"
}

여기서 name은 설치 안내 창에 뜨는 앱 이름이고, display를 standalone(독립 실행)으로 두면 앱을 열 때 주소창과 탭이 사라진 앱 창으로 열려요. 이 값 하나로 "웹사이트"가 "앱"처럼 보이느냐가 갈려요. 각 필드가 화면에서 어떻게 보이는지는 매니페스트를 본격적으로 다룰 때 자세히 뜯어봐요.

29.6 서비스 워커는 또 뭔가요?

두 번째 기둥인 서비스 워커는 페이지 뒤에서 조용히 도는 자바스크립트 파일이에요. 화면을 직접 그리지는 않고, 대신 네트워크 요청을 가로채서 "이건 저장해둔 걸로 보여줄게" 같은 판단을 해요. 덕분에 인터넷이 끊겨도 저장해둔 화면을 띄울 수 있는 거죠. 등록은 이렇게 해요.

if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}

navigator.serviceWorker.register에 서비스 워커 파일 경로를 넘기면 브라우저가 그 파일을 백그라운드에 등록해요. 앞의 if 문은 이 기능을 지원하는 브라우저에서만 실행하라는 안전장치예요. 등록이 잘 됐다면 개발자 도구의 Application(애플리케이션) 탭에서 서비스 워커가 activated(활성) 상태로 떠 있는 걸 볼 수 있어요. 서비스 워커의 저장 전략은 그 자체로 깊은 주제라 여기서는 "이런 파일이 뒤에서 돈다"까지만 알아두면 충분해요.

29.7 오늘 정리

PWA는 우리가 아는 웹 기술로 만든 사이트를 앱처럼 쓰게 해주는 규칙의 묶음이었어요. 앱스토어 없이 웹 주소만으로 설치되고 업데이트된다는 게 핵심 매력이었죠. 평범한 사이트와의 차이는 매니페스트, 서비스 워커, HTTPS라는 세 조건을 갖췄느냐에 있었고요. 매니페스트는 앱 이름과 아이콘, 열리는 방식을 적는 소개서, 서비스 워커는 네트워크를 가로채 오프라인을 가능케 하는 뒷일꾼이라고 기억하면 돼요. 이 두 기둥과 link rel="manifest", display standalone 같은 핵심 단어만 손에 쥐면, 여러분의 웹사이트도 홈 화면에 사는 앱으로 한 걸음 다가선 거예요.