Offcanvas

PWA

생산성에 단비··· '프로그레시브 웹 앱(PWA)' 가이드

크롬, 윈도우, 맥 심지어는 모바일에서도 ‘프로그레시브 웹 앱(Progressive Web App; PWA)’을 사용하면 부담 없이 더 많은 작업을 할 수 있다.   ‘프로그레시브 웹 앱(Progressive Web App; PWA)’이라고 하면 대부분의 사람은 (심지어 기술을 잘 안다고 하는 전문가조차도) 멍한 표정으로 바라보다가 어색한 침묵으로 이어지는 반응을 보일 것이 뻔하다. PWA는 지난 몇 년 동안 ‘앱’과 관련돼 발전된 것 중 가장 유망한 기술에 속하지만 여전히 흔하지 않고 혼란스럽기 때문에 결과적으로 상당한 오해를 받고 있다. 우선, 오해를 받는 이유에는 브랜딩 문제가 있다. ‘PWA’라는 몹시 투박한 이름이 일반 사용자보단 개발자를 위한 것처럼 보이기 때문이다.   여기에 더해 PWA의 기능이 프로그램마다 크게 달라지는 일관성 문제, 그리고 제공 방식 측면에서 PWA를 찾아 설치하는 방법이 명확하지 않다는 문제도 있다. 사용 가능한 옵션을 살펴보거나 품질을 평가할 수 있는 통합 온라인 스토어도 없다. 하지만 본인의 용도에 적합한 프로그램을 찾는다면 PWA는 매우 유용한 생산성 도구가 될 수 있다. 최고의 PWA는 모든 기능을 갖추고 있으며, 앱 같은 인터페이스를 제공한다. 오프라인에서도 작동하며, 기존 앱 인터페이스와 사실상 구별되지 않는다.  또한 가볍고, 자동 업데이트되며, 대부분의 일반적인 컴퓨팅 플랫폼에서 동일한 방식으로 작동한다. 이는 크롬 OS(Chrome OS) 설정의 중요한 요소가 될 수 있으며, 윈도우, 맥, 리눅스 시스템은 물론 심지어는 안드로이드나 iOS 기기에서도 유용할 수 있다. PWA를 찾아서 실제로 쓸 만한지 파악하기만 하면 되는데, 여기서는 그 요령을 자세하게 소개한다. 프로그레시브 웹 앱(PWA)이란? 먼저, 대체 PWA란 정확히 무엇인지 간단하게 살펴보자. 앞서 언급했던 것처럼 PWA가 매우 혼란스럽기 때문이다. PWA를 이해하는 간단한 방법은 웹 사이트와 로컬에 설치된 ...

프로그레시브 웹 앱 PWA 크롬 윈도우 모바일 브라우저 애플리케이션 사파리 파이어폭스 안드로이드 iOS 투두이스트 구글 킵 심플노트 포토피 포토스택 크롬 캔버스

2021.06.28

크롬, 윈도우, 맥 심지어는 모바일에서도 ‘프로그레시브 웹 앱(Progressive Web App; PWA)’을 사용하면 부담 없이 더 많은 작업을 할 수 있다.   ‘프로그레시브 웹 앱(Progressive Web App; PWA)’이라고 하면 대부분의 사람은 (심지어 기술을 잘 안다고 하는 전문가조차도) 멍한 표정으로 바라보다가 어색한 침묵으로 이어지는 반응을 보일 것이 뻔하다. PWA는 지난 몇 년 동안 ‘앱’과 관련돼 발전된 것 중 가장 유망한 기술에 속하지만 여전히 흔하지 않고 혼란스럽기 때문에 결과적으로 상당한 오해를 받고 있다. 우선, 오해를 받는 이유에는 브랜딩 문제가 있다. ‘PWA’라는 몹시 투박한 이름이 일반 사용자보단 개발자를 위한 것처럼 보이기 때문이다.   여기에 더해 PWA의 기능이 프로그램마다 크게 달라지는 일관성 문제, 그리고 제공 방식 측면에서 PWA를 찾아 설치하는 방법이 명확하지 않다는 문제도 있다. 사용 가능한 옵션을 살펴보거나 품질을 평가할 수 있는 통합 온라인 스토어도 없다. 하지만 본인의 용도에 적합한 프로그램을 찾는다면 PWA는 매우 유용한 생산성 도구가 될 수 있다. 최고의 PWA는 모든 기능을 갖추고 있으며, 앱 같은 인터페이스를 제공한다. 오프라인에서도 작동하며, 기존 앱 인터페이스와 사실상 구별되지 않는다.  또한 가볍고, 자동 업데이트되며, 대부분의 일반적인 컴퓨팅 플랫폼에서 동일한 방식으로 작동한다. 이는 크롬 OS(Chrome OS) 설정의 중요한 요소가 될 수 있으며, 윈도우, 맥, 리눅스 시스템은 물론 심지어는 안드로이드나 iOS 기기에서도 유용할 수 있다. PWA를 찾아서 실제로 쓸 만한지 파악하기만 하면 되는데, 여기서는 그 요령을 자세하게 소개한다. 프로그레시브 웹 앱(PWA)이란? 먼저, 대체 PWA란 정확히 무엇인지 간단하게 살펴보자. 앞서 언급했던 것처럼 PWA가 매우 혼란스럽기 때문이다. PWA를 이해하는 간단한 방법은 웹 사이트와 로컬에 설치된 ...

2021.06.28

"MS, 윈도우 10에 '오피스 PWA' 기본 설치 추진"

마이크로소프트가 오피스 PWA를 윈도우 인사이더로 추가하는 것을 검토하고 있다는 보도가 나왔다. PWA가 앱을 사용하는 주류가 되기는 쉽지 않겠지만, 오피스 PWA가 무엇이고 왜 유용한지 정도는 알아둘 필요가 있다. 윈도우 레이티스트(Windows Latest)는 최근 여러 가지 윈도우 인사이더 베타 프로그램에 PWA(Progressive Web Apps) 방식의 다양한 윈도우 앱이 기본 탑재되고 있다고 보도했다. 인사이더라는 베타 프로그램은 기본적으로 사용자의 선택해 설치하는 방식이다. 이 보도가 맞는다면 사용자의 선택 과정이 생략된 채 PWA가 배포되는 셈이다. 단, 윈도우 레이티스트에 따르면, 이들 PWA가 인사이더의 하위 항목으로 추가되고 있다. 즉, 단기간에 현실화할 가능성은 크지 않다는 의미다.     PWA란? PWA는 기본적으로 앱으로 저장된 웹페이지로, 윈도우 10 시작 메뉴에도 노출할 수 있다. 마이크로소프트 365 앱(이전까지 오피스 365로 불렸다)은 2가지 방식으로 사용할 수 있는데, 하나는 PC에서 직접 실행하는 전용 앱 방식, 다른 하나는 클라우드에서 실행되는 오피스 서비스(오피스 온라인이라고도 부른다) 방식이다. 아마도 많은 사용자가 크게 신경 쓰지 않고 온라인과 로컬 앱을 왔다 갔다 하며 사용할 것이다. 필자도 새 벤치마크 스프레드시트를 하드 드라이브에 엑셀 로컬 카피로 만들고, PC월드 템플릿과 다른 스프레드시트는 엣지 북마크에 저장한다. 이런 방식으로 쓰는 사용자에게 두 앱은 기본적으로 같다. PWA의 최대 장점은 클라우드에서 실행되므로 아무것도 다운로드하거나 설치하지 않는다는 점이다. 마이크로소프트 365 라이선스는 여전히 필요하지만, 1~2초 만에 바로 실행할 수 있다. 보도를 보면, 현재 마이크로소프트가 검토하는 것은, 이들 PWA나 웹페이지를 PC에 추가해 이미 시작 메뉴에 자리 잡은 전용 오피스 앱과 나란히 두겠다는 것으로 보인다. 맞다, 불필요하게 혼란을 줄 가능성이 있다. 그러나 이는 ...

PWA

2020.10.19

마이크로소프트가 오피스 PWA를 윈도우 인사이더로 추가하는 것을 검토하고 있다는 보도가 나왔다. PWA가 앱을 사용하는 주류가 되기는 쉽지 않겠지만, 오피스 PWA가 무엇이고 왜 유용한지 정도는 알아둘 필요가 있다. 윈도우 레이티스트(Windows Latest)는 최근 여러 가지 윈도우 인사이더 베타 프로그램에 PWA(Progressive Web Apps) 방식의 다양한 윈도우 앱이 기본 탑재되고 있다고 보도했다. 인사이더라는 베타 프로그램은 기본적으로 사용자의 선택해 설치하는 방식이다. 이 보도가 맞는다면 사용자의 선택 과정이 생략된 채 PWA가 배포되는 셈이다. 단, 윈도우 레이티스트에 따르면, 이들 PWA가 인사이더의 하위 항목으로 추가되고 있다. 즉, 단기간에 현실화할 가능성은 크지 않다는 의미다.     PWA란? PWA는 기본적으로 앱으로 저장된 웹페이지로, 윈도우 10 시작 메뉴에도 노출할 수 있다. 마이크로소프트 365 앱(이전까지 오피스 365로 불렸다)은 2가지 방식으로 사용할 수 있는데, 하나는 PC에서 직접 실행하는 전용 앱 방식, 다른 하나는 클라우드에서 실행되는 오피스 서비스(오피스 온라인이라고도 부른다) 방식이다. 아마도 많은 사용자가 크게 신경 쓰지 않고 온라인과 로컬 앱을 왔다 갔다 하며 사용할 것이다. 필자도 새 벤치마크 스프레드시트를 하드 드라이브에 엑셀 로컬 카피로 만들고, PC월드 템플릿과 다른 스프레드시트는 엣지 북마크에 저장한다. 이런 방식으로 쓰는 사용자에게 두 앱은 기본적으로 같다. PWA의 최대 장점은 클라우드에서 실행되므로 아무것도 다운로드하거나 설치하지 않는다는 점이다. 마이크로소프트 365 라이선스는 여전히 필요하지만, 1~2초 만에 바로 실행할 수 있다. 보도를 보면, 현재 마이크로소프트가 검토하는 것은, 이들 PWA나 웹페이지를 PC에 추가해 이미 시작 메뉴에 자리 잡은 전용 오피스 앱과 나란히 두겠다는 것으로 보인다. 맞다, 불필요하게 혼란을 줄 가능성이 있다. 그러나 이는 ...

2020.10.19

카페24, 차세대 웹 기술 적용한 ‘스마트웹앱’ 서비스 출시

전자상거래 플랫폼 카페24가 웹(Web)을 앱(App)처럼 사용할 수 있는 차세대 웹기술 PWA(Progressive Web Apps)를 적용한 ‘스마트웹앱’ 서비스를 출시했다고 12일 밝혔다.  PWA는 구글, MS 등 글로벌 IT 기업들이 차세대 웹 환경을 이끌어가는 핵심기술 중 하나로, 설치형 애플리케이션 수준의 환경 구현을 목표로 한다고 업체 측은 설명했다. 이미 인스타그램, 트위터 등 해외 유수의 기업들이 도입하고 있다. 쇼핑몰 운영자들은 스마트웹앱을 통해 IOS, 안드로이드 등 운영체제 어디에서나 별도 개발 작업이 없이 모바일 쇼핑 환경을 최적화할 수 있다. 앱 제작을 위한 별도 비용이나 시간 투자 없이 운영 효율을 높일 수 있다. 뿐만 아니라 쇼핑몰 업데이트시 별도 코딩 작업 없이도 사이트 변경 사항을 실시간으로 반영할 수 있어 충성고객 확보 효과까지 기대할 수 있다. 스마트웹앱을 통해 구현된 쇼핑몰에 접속하는 온라인 소비자들은 간단한 설정만으로 모바일 접속 아이콘을 생성할 수 있다. 또 앱장터에서 별도 애플리케이션을 설치하지 않고도 기존 설치형 앱과 유사하게 모바일 환경에 최적화된 쇼핑 경험이 가능하다. 카페24 이재석 대표이사는 “온라인 쇼핑 성숙도가 높아지면서 소비자들에게 보다 편리하고 쾌적한 쇼핑 환경을 제공하는 것이 쇼핑몰의 경쟁력이 되고 있다”며 “온라인 쇼핑몰들이 더욱 성장할 수 있도록 최신 기술을 지속적으로 적용해 나갈 것”이라고 말했다. ciokr@idg.co.kr

카페24 PWA

2019.02.12

전자상거래 플랫폼 카페24가 웹(Web)을 앱(App)처럼 사용할 수 있는 차세대 웹기술 PWA(Progressive Web Apps)를 적용한 ‘스마트웹앱’ 서비스를 출시했다고 12일 밝혔다.  PWA는 구글, MS 등 글로벌 IT 기업들이 차세대 웹 환경을 이끌어가는 핵심기술 중 하나로, 설치형 애플리케이션 수준의 환경 구현을 목표로 한다고 업체 측은 설명했다. 이미 인스타그램, 트위터 등 해외 유수의 기업들이 도입하고 있다. 쇼핑몰 운영자들은 스마트웹앱을 통해 IOS, 안드로이드 등 운영체제 어디에서나 별도 개발 작업이 없이 모바일 쇼핑 환경을 최적화할 수 있다. 앱 제작을 위한 별도 비용이나 시간 투자 없이 운영 효율을 높일 수 있다. 뿐만 아니라 쇼핑몰 업데이트시 별도 코딩 작업 없이도 사이트 변경 사항을 실시간으로 반영할 수 있어 충성고객 확보 효과까지 기대할 수 있다. 스마트웹앱을 통해 구현된 쇼핑몰에 접속하는 온라인 소비자들은 간단한 설정만으로 모바일 접속 아이콘을 생성할 수 있다. 또 앱장터에서 별도 애플리케이션을 설치하지 않고도 기존 설치형 앱과 유사하게 모바일 환경에 최적화된 쇼핑 경험이 가능하다. 카페24 이재석 대표이사는 “온라인 쇼핑 성숙도가 높아지면서 소비자들에게 보다 편리하고 쾌적한 쇼핑 환경을 제공하는 것이 쇼핑몰의 경쟁력이 되고 있다”며 “온라인 쇼핑몰들이 더욱 성장할 수 있도록 최신 기술을 지속적으로 적용해 나갈 것”이라고 말했다. ciokr@idg.co.kr

2019.02.12

칼럼 | MS와 구글이 '프로그레시브 웹 앱'에 올인하는 이유

프로그레시브 웹 앱(Progressive web apps, PWAs)이 마침내 현실이 됐다. 프로그레시브 웹 앱은 주로 구글의 주도 하에 약 3년 전에 시작됐고, 최근 구글이 크롬 70을 출시하면서 큰 전환점을 맞았다. 이 구글 웹 브라우저의 새 버전에는 여러 가지 신기능이 들어 있지만 가장 큰 뉴스는 데스크톱 윈도우에서 실행되는 PWA 지원 기능이다(맥 및 리눅스는 크롬 72부터 지원할 예정이다).  구글과 마이크로소프트는 여러 부문에서 경쟁하지만 PWA에 관해서는 완벽하게 협력한다. 그 이유는 알아보기 전에 먼저 PWA가 정확히 무엇인지 살펴보자. 모든 사람에게 더 쉽다 PWA는 웹사이트이지만, 스마트폰, 태블릿, 노트북, 데스크톱에 설치된 애플리케이션과 같은 외형과 느낌을 가졌다. 에셋을 저장하고 성능을 높이는 서비스 워커라는 백그라운드 실행 스크립트(자바스크립트 파일)를 이용한다. 서비스 워커는 오프라인 실행 및 오프라인 스토리지 접근이 가능하고, 팝업 알림도 표시할 수 있다. PWA는 이용자에게는 사소한 이점이지만 개발자와 기업에는 거대한 이익이다. CSS3, 자바스크립트를 비롯해 여러 표준 툴을 사용하므로 다른 브라우저와 플랫폼에 간단히 이식할 수 있기 때문이다. 또한, 모바일 우선 설계 전략을 지원하거나 실질적으로 대체할 수 있다. 예를 들어 모바일용 PWA를 한번 개발하면 이를 다른 모든 기기에 배포할 수 있다. PWA는 앱 스토어를 우회하기 때문에 '앱 피로' 문제에도 해법을 제시한다. 즉, 한번 써본 후 잊어버릴 앱을 찾아 앱스토어를 어쩔 수 없이 방문하지 않아도 된다. PWA는 이용자가 사이트를 방문할 때 설치를 즉시 제공할 수 있고, 방문할 때마다 해당 사이트에서 이를 시작할 수 있다. 대형 소매업체 대다수는 로열티와 할인 기능을 지원하고, 쇼핑 경험을 향상하는 앱을 제공한다. 그러나 고객 대부분은 이런 앱을 다운로드 하는 데 관심이 없다. 이럴 때 PWA를 사용하면 매장을 방문할 때 실행할 수 있고, 정식...

구글 마이크로소프트 MS 프로그레시브 웹 앱 PWA

2018.10.23

프로그레시브 웹 앱(Progressive web apps, PWAs)이 마침내 현실이 됐다. 프로그레시브 웹 앱은 주로 구글의 주도 하에 약 3년 전에 시작됐고, 최근 구글이 크롬 70을 출시하면서 큰 전환점을 맞았다. 이 구글 웹 브라우저의 새 버전에는 여러 가지 신기능이 들어 있지만 가장 큰 뉴스는 데스크톱 윈도우에서 실행되는 PWA 지원 기능이다(맥 및 리눅스는 크롬 72부터 지원할 예정이다).  구글과 마이크로소프트는 여러 부문에서 경쟁하지만 PWA에 관해서는 완벽하게 협력한다. 그 이유는 알아보기 전에 먼저 PWA가 정확히 무엇인지 살펴보자. 모든 사람에게 더 쉽다 PWA는 웹사이트이지만, 스마트폰, 태블릿, 노트북, 데스크톱에 설치된 애플리케이션과 같은 외형과 느낌을 가졌다. 에셋을 저장하고 성능을 높이는 서비스 워커라는 백그라운드 실행 스크립트(자바스크립트 파일)를 이용한다. 서비스 워커는 오프라인 실행 및 오프라인 스토리지 접근이 가능하고, 팝업 알림도 표시할 수 있다. PWA는 이용자에게는 사소한 이점이지만 개발자와 기업에는 거대한 이익이다. CSS3, 자바스크립트를 비롯해 여러 표준 툴을 사용하므로 다른 브라우저와 플랫폼에 간단히 이식할 수 있기 때문이다. 또한, 모바일 우선 설계 전략을 지원하거나 실질적으로 대체할 수 있다. 예를 들어 모바일용 PWA를 한번 개발하면 이를 다른 모든 기기에 배포할 수 있다. PWA는 앱 스토어를 우회하기 때문에 '앱 피로' 문제에도 해법을 제시한다. 즉, 한번 써본 후 잊어버릴 앱을 찾아 앱스토어를 어쩔 수 없이 방문하지 않아도 된다. PWA는 이용자가 사이트를 방문할 때 설치를 즉시 제공할 수 있고, 방문할 때마다 해당 사이트에서 이를 시작할 수 있다. 대형 소매업체 대다수는 로열티와 할인 기능을 지원하고, 쇼핑 경험을 향상하는 앱을 제공한다. 그러나 고객 대부분은 이런 앱을 다운로드 하는 데 관심이 없다. 이럴 때 PWA를 사용하면 매장을 방문할 때 실행할 수 있고, 정식...

2018.10.23

"네이티브 앱만큼 강력한 웹 앱"··· 구글, 크롬 베타에서 PWA 지원

크롬 사용자들은 좋아하는 웹사이트를 홈 화면에 단축 아이콘으로 표시해서 북마크를 탐색하지 않고도 해당 웹사이트로 빠르게 이동할 수 있었다. 러나 이 기능은 ‘멋진 링크’ 수준이라는 기능적인 한계가 있었다. 구글은 최신 크롬 베타에서 PWA(Progressive Web Apps)를 지원하면서, 이를 조금 더 발전시킬 계획이다. PWA는 구글 플레이 스토어에서 다운로드하거나 업데이트하는 과정이 없는 웹 앱이지만, 네이티브 앱과 같은 수준의 경험을 제공한다. 구글은 “네트워크 상태가 좋지 않아도 빠르게 로드할 수 있고, 관련 푸시 알림을 받을 수 있으며, 홈 화면에 전용 아이콘으로 표시되고, 상위 레벨로 로딩되며, 전체 화면 경험을 할 수 있다”고 설명했다. 이 개념은 2015년부터 등장했으나, 안드로이드용 크롬 베타 버전에서 이제 막 현실화됐다. 작동 방식은 간단하다. 사용자가 PWA를 방문하면 이것을 홈 화면 단축키 추가하듯 홈 화면에 아 저장할 수 있다. 다만, 과거처럼 단순 링크에 그치는 것이 아니다. 앱 서랍에 다른 플레이 스토어에서 다운로드받은 앱들과 함께 표시되며, 설정과 알림, 구독 등 네이티브 앱처럼 작동한다. 사용자는 심지어 이 앱이 크롬에서 동작한다는 것도 모를 수 있다. 설치 후에는 PWA이 독립적으로 실행되며, 인터넷 연결이 없어도 이용할 수 있기 때문이다. 업데이트는 백그라운드에서 진행되며, 모든 종류의 화면 크기에 맞춰지고, 네이티브 앱과 같은 느낌을 준다. 구글은 이에 대해서 다음과 같이 설명했다. “이 새로운 홈 화면에 추가하기 기능은 개발자들이 사용자들을 위한 최고의 경험을 구축할 수 있도록 하기 위한 우리의 여정이 한 발자국 더 나아간 것이며, PWA 설치 메커니즘이 안드로이드의 모든 브라우저에 적용될 것이다.” 테스트를 원한다면, 구글 크롬의 베타버전인 크롬 카나리(Chrome Canary)를 플레이 스토어에서 다운로드한다. 그리고 ...

구글 안드로이드 크롬 웹앱 PWA

2017.02.07

크롬 사용자들은 좋아하는 웹사이트를 홈 화면에 단축 아이콘으로 표시해서 북마크를 탐색하지 않고도 해당 웹사이트로 빠르게 이동할 수 있었다. 러나 이 기능은 ‘멋진 링크’ 수준이라는 기능적인 한계가 있었다. 구글은 최신 크롬 베타에서 PWA(Progressive Web Apps)를 지원하면서, 이를 조금 더 발전시킬 계획이다. PWA는 구글 플레이 스토어에서 다운로드하거나 업데이트하는 과정이 없는 웹 앱이지만, 네이티브 앱과 같은 수준의 경험을 제공한다. 구글은 “네트워크 상태가 좋지 않아도 빠르게 로드할 수 있고, 관련 푸시 알림을 받을 수 있으며, 홈 화면에 전용 아이콘으로 표시되고, 상위 레벨로 로딩되며, 전체 화면 경험을 할 수 있다”고 설명했다. 이 개념은 2015년부터 등장했으나, 안드로이드용 크롬 베타 버전에서 이제 막 현실화됐다. 작동 방식은 간단하다. 사용자가 PWA를 방문하면 이것을 홈 화면 단축키 추가하듯 홈 화면에 아 저장할 수 있다. 다만, 과거처럼 단순 링크에 그치는 것이 아니다. 앱 서랍에 다른 플레이 스토어에서 다운로드받은 앱들과 함께 표시되며, 설정과 알림, 구독 등 네이티브 앱처럼 작동한다. 사용자는 심지어 이 앱이 크롬에서 동작한다는 것도 모를 수 있다. 설치 후에는 PWA이 독립적으로 실행되며, 인터넷 연결이 없어도 이용할 수 있기 때문이다. 업데이트는 백그라운드에서 진행되며, 모든 종류의 화면 크기에 맞춰지고, 네이티브 앱과 같은 느낌을 준다. 구글은 이에 대해서 다음과 같이 설명했다. “이 새로운 홈 화면에 추가하기 기능은 개발자들이 사용자들을 위한 최고의 경험을 구축할 수 있도록 하기 위한 우리의 여정이 한 발자국 더 나아간 것이며, PWA 설치 메커니즘이 안드로이드의 모든 브라우저에 적용될 것이다.” 테스트를 원한다면, 구글 크롬의 베타버전인 크롬 카나리(Chrome Canary)를 플레이 스토어에서 다운로드한다. 그리고 ...

2017.02.07

회사명:한국IDG 제호: ITWorld 주소 : 서울시 중구 세종대로 23, 4층 우)04512
등록번호 : 서울 아00743 등록일자 : 2009년 01월 19일

발행인 : 박형미 편집인 : 박재곤 청소년보호책임자 : 한정규
사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2022 International Data Group. All rights reserved.

10.5.0.9