--- title: "PWA (프로그레시브 웹 앱)" id: "2390" type: "post" slug: "pwa-%ed%94%84%eb%a1%9c%ea%b7%b8%eb%a0%88%ec%8b%9c%eb%b8%8c-%ec%9b%b9-%ec%95%b1" published_at: "2020-01-05T15:59:14+00:00" modified_at: "2026-07-29T22:34:21+00:00" url: "https://creative-band.com/article/wordpress/pwa-%ed%94%84%eb%a1%9c%ea%b7%b8%eb%a0%88%ec%8b%9c%eb%b8%8c-%ec%9b%b9-%ec%95%b1/" markdown_url: "https://creative-band.com/article/wordpress/pwa-%ed%94%84%eb%a1%9c%ea%b7%b8%eb%a0%88%ec%8b%9c%eb%b8%8c-%ec%9b%b9-%ec%95%b1.md" excerpt: "고객사의 요구가 없더라도 모든 웹사이트를 PWA로 패키징합니다." taxonomy_category: - "워드프레스" --- 프로그레시브 웹 앱(PWA, Progressive Web App, 이하 PWA)은 HTML, CSS 그리고 JavaScript와 같은 표준 웹 기술을 이용하여, 네이티브 앱처럼 보이는 웹 앱을 만들 수 있게 해주는 최신 기술입니다. PWA는 다른 웹 앱과 마찬가지로 디바이스에 설치 가능하며 홈스크린의 아이콘을 통해서 웹사이트에 접속할 수 있습니다. 그 외에 웹 푸시 알림, 오프라인 접속 등 네이티브 앱의 주요 기능들을 사용할 수 있습니다. 쉽게 말해서 웹사이트를 스마트폰의 앱처럼 사용할 수 있게 해주는 기술입니다. CB의 웹사이트도 PWA를 적용했기 때문에 직접 테스트해 볼 수 있습니다. 설치 프로세스를 정리한 아래 이미지를 보고 테스트 해보시기 바랍니다. 푸시 알림도 받아보고 싶은 분들은 소통 가능한 CB의 여러 채널을 통해 요청해주시기 바랍니다. 참고로 PWA는 웹 앱이기 때문에 스마트폰 뿐만 아니라 데스크톱에도 어플리케이션의 형태로 설치가 가능합니다. ![Image](https://creative-band.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-07-at-9.02.10-AM-1024x101.png) 크롬 브라우저를 통해 설치한 웹 앱을 Dock에 위치시킨 모습 #### PWA Process – Android OS ![PWA, Android 프로세스 - 크리에이티브밴드](https://creative-band.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-06-at-7.09.16-PM.png) ![PWA, Android 프로세스 - 크리에이티브밴드](https://creative-band.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-06-at-7.09.21-PM.png) #### PWA Process – iOS ![PWA, iOS 프로세스 - 크리에이티브밴드](https://creative-band.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-06-at-7.12.46-PM.png) CB는 최근 진행한 모든 웹사이트를 PWA로 패키징 하고 있습니다. 고객사의 요구가 없더라도 말이죠. 요즘은 반응형 웹사이트를 별도로 요청하는 경우가 없습니다. 당연히 해야하는 것이니까요. 이처럼 PWA도 당연히 갖춰야 하는 옵션 중에 하나라고 생각합니다. 물론 PWA를 지원해서 얻는 효용은 어떤 서비스를 제공하는가에 따라서 다를 수 있습니다. 또한 국내 콘텐츠 소비 패턴을 봤을 때 그 효용이 그리 높지 않을 것이라고 생각합니다. 하지만 적절한 프로모션과 다양한 혜택을 제공한다면 의미있는 채널로 활용할 수 있습니다. 좋은 사례를 만들어내기 위해 CB 사이트 외에도 PWA를 지원하는 여러 사이트에서 다양한 시도를 해보고 있습니다. **PWA를 지원하는 웹 사이트 by CB** - 크리에이티브밴드(CB) [https://creative-band.com](https://creative-band.com) - 임볼든 [https://imboldn.com/](https://imboldn.com/) - 디지털인사이트(Di) [https://ditoday.com](https://ditoday.com) - 아뜰리에 440 [https://atelier440.co.kr](https://atelier440.co.kr) PWA로 패키징 하기 위해서는 보안서버 구축이 필수입니다. 요즘에는 보안서버 구축이 기본이기도 하고, Let’s Encrypt가 제공하는 무료 SSL/TLS 인증서를 사용할 수기 때문에 큰 문제는 없습니다. 단, Let’s Encrypt의 인증서를 사용하는 경우 3개월에 한 번씩 인증서를 갱신해야 합니다. 한 가지 아쉬운 점은 아직까지 iOS가 웹 푸시를 지원하지 않는다는 것입니다. 그리고 앞으로도 지원하지 않을 가능성이 높아 보입니다. 하지만 안드로이드 OS를 사용하는 디바이스와 데스크톱의 최신 브라우저(IE 11 제외한 크롬, 엣지, 사파리 등)에서는 웹 푸시 사용이 가능합니다. [프로젝트 의뢰하기 →](/project-inquiry/) [카카오톡 채팅으로 문의하기 →](https://pf.kakao.com/_MwJKxl/chat) [☺ 문단 디자인 해보기 →](/paragraph/) [☺ 잘되는 웹사이트 자가진단 →](/self-check/) - [https://creative-band.com/article/wordpress/permalink-setting-for-blog/](https://creative-band.com/article/wordpress/permalink-setting-for-blog/) - [워드프레스](https://creative-band.com/article/wordpress/) **[기업 웹사이트의 블로그 주소 체계](https://creative-band.com/article/wordpress/permalink-setting-for-blog/)**워드프레스로 기업 웹사이트를 구축하고 블로그도 운영할 계획이라면, 콘텐츠를 발행하기 전에 고유주소 체계부터 정해야 합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-09-06 - [https://creative-band.com/article/wordpress/all-about-search-asset-management-system/](https://creative-band.com/article/wordpress/all-about-search-asset-management-system/) - [워드프레스](https://creative-band.com/article/wordpress/) **[크리에이티브밴드 검색자산 관리 시스템은 어떻게 작동하나요?](https://creative-band.com/article/wordpress/all-about-search-asset-management-system/)**웹사이트와 내부 자료를 분석해 콘텐츠를 기획·생성·점검하는 크리에이티브밴드 검색자산 관리 시스템의 작동 원리를 설명합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-09-02 - [https://creative-band.com/article/search/what-is-a-search-asset/](https://creative-band.com/article/search/what-is-a-search-asset/) - [검색](https://creative-band.com/article/search/) - [워드프레스](https://creative-band.com/article/wordpress/) **[검색자산이란 무엇인가? AI 검색 시대에 웹사이트를 자산으로 만드는 방법](https://creative-band.com/article/search/what-is-a-search-asset/)**검색자산은 기업의 정보와 콘텐츠를 웹사이트에 축적·분류·연결한 정보 체계입니다. AI 검색 시대에 왜 필요하고 어떻게 구축·운영하는지 설명합니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-09-01 - [https://creative-band.com/article/wordpress/search-asset-management-system/](https://creative-band.com/article/wordpress/search-asset-management-system/) - [검색](https://creative-band.com/article/search/) - [워드프레스](https://creative-band.com/article/wordpress/) - [유지관리 및 운영](https://creative-band.com/article/maintenance/) **[워드프레스 안에서 분석부터 발행까지, 검색자산 관리 시스템](https://creative-band.com/article/wordpress/search-asset-management-system/)**사이트와 내부 자료를 분석하고 콘텐츠 기획, 생성, SEO·GEO 점검, 내부 연결과 발행까지 지원하는 검색자산 관리 시스템을 소개합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-08-29 - [https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/](https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/) - [워드프레스](https://creative-band.com/article/wordpress/) **[좋은 웹 타이포그래피는 하나의 문단에서 시작합니다](https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/)**좋은 웹 타이포그래피는 잘 읽히는 하나의 문단에서 시작합니다. 콘텐츠의 성격에 맞춰 서체를 선택하고 글줄 길이, 글자 크기와 행간의 균형을 찾은 뒤 제목과 여백으로 확장하는 크리에이티브밴드의 타이포그래피 설계 방법을 소개합니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-08-22 - [https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/](https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/) - [워드프레스](https://creative-band.com/article/wordpress/) **[페이지 빌더 사용자를 위한 워드프레스 콘텐츠 구조 설계 가이드](https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/)**페이지 빌더를 사용하기 전에 웹사이트의 콘텐츠 구조 설계가 필요합니다. 이 구조가 만들어져야 페이지 빌더도 제대로 활용할 수 있습니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-08-18 - [https://creative-band.com/article/wordpress/wordpress-page-builder-experience/](https://creative-band.com/article/wordpress/wordpress-page-builder-experience/) - [워드프레스](https://creative-band.com/article/wordpress/) **[워드프레스 페이지 빌더, 직접 사용해보고 생각이 달라졌다](https://creative-band.com/article/wordpress/wordpress-page-builder-experience/)**워드프레스 페이지 빌더를 실제 프로젝트에 사용하면서 경험한 장점과 한계를 정리했습니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-08-15 - [https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/](https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/) - [워드프레스](https://creative-band.com/article/wordpress/) **[웹사이트 제작 의뢰 전에 준비하면 좋은 것](https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/)**웹사이트 제작은 기업의 정보를 구조화하는 작업입니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-22 - [https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/](https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/) - [워드프레스](https://creative-band.com/article/wordpress/) **[헷갈리는 웹사이트 용어 정리](https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/)**웹사이트, 홈페이지, 웹페이지, 랜딩페이지, 메인 내비게이션, 메인 메뉴, 카테고리, 탭 등 ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-16 - [https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/](https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/) - [워드프레스](https://creative-band.com/article/wordpress/) **[CSS의 display: flex와 Figma의 Auto Layout](https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/)**display: flex 를 알면 figma와 워드프레스 페이지빌더가 더 쉽습니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-14