2021.06.28

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

JR Raphael | Computerworld
크롬, 윈도우, 맥 심지어는 모바일에서도 ‘프로그레시브 웹 앱(Progressive Web App; PWA)’을 사용하면 부담 없이 더 많은 작업을 할 수 있다.  

‘프로그레시브 웹 앱(Progressive Web App; PWA)’이라고 하면 대부분의 사람은 (심지어 기술을 잘 안다고 하는 전문가조차도) 멍한 표정으로 바라보다가 어색한 침묵으로 이어지는 반응을 보일 것이 뻔하다.

PWA는 지난 몇 년 동안 ‘앱’과 관련돼 발전된 것 중 가장 유망한 기술에 속하지만 여전히 흔하지 않고 혼란스럽기 때문에 결과적으로 상당한 오해를 받고 있다. 우선, 오해를 받는 이유에는 브랜딩 문제가 있다. ‘PWA’라는 몹시 투박한 이름이 일반 사용자보단 개발자를 위한 것처럼 보이기 때문이다.
 
ⓒGetty Images

여기에 더해 PWA의 기능이 프로그램마다 크게 달라지는 일관성 문제, 그리고 제공 방식 측면에서 PWA를 찾아 설치하는 방법이 명확하지 않다는 문제도 있다. 사용 가능한 옵션을 살펴보거나 품질을 평가할 수 있는 통합 온라인 스토어도 없다.

하지만 본인의 용도에 적합한 프로그램을 찾는다면 PWA는 매우 유용한 생산성 도구가 될 수 있다. 최고의 PWA는 모든 기능을 갖추고 있으며, 앱 같은 인터페이스를 제공한다. 오프라인에서도 작동하며, 기존 앱 인터페이스와 사실상 구별되지 않는다. 

또한 가볍고, 자동 업데이트되며, 대부분의 일반적인 컴퓨팅 플랫폼에서 동일한 방식으로 작동한다. 이는 크롬 OS(Chrome OS) 설정의 중요한 요소가 될 수 있으며, 윈도우, 맥, 리눅스 시스템은 물론 심지어는 안드로이드나 iOS 기기에서도 유용할 수 있다.

PWA를 찾아서 실제로 쓸 만한지 파악하기만 하면 되는데, 여기서는 그 요령을 자세하게 소개한다.

프로그레시브 웹 앱(PWA)이란?
먼저, 대체 PWA란 정확히 무엇인지 간단하게 살펴보자. 앞서 언급했던 것처럼 PWA가 매우 혼란스럽기 때문이다. PWA를 이해하는 간단한 방법은 웹 사이트와 로컬에 설치된 프로그램이 섞여 있다고 생각하는 것이다. PWA는 브라우저로 연결되고 일반적인 웹 기술을 사용하지만 기존의 독립형 앱처럼 ‘보이고 느껴지도록’ 패키징돼 있다. 

제대로 된 PWA는 기존 로컬 앱의 이점을 동일하게 제공할 수 있다. 이를테면 다양한 종류의 기기에 걸친 일관적인 경험 그리고 번거롭지 않은 관리 및 유지가 바로 그것이다. 

PWA를 찾아서 설치하는 방법은?
이 부분이 특히 애매하다. 구글은 크롬북의 플레이 스토어에서 PWA를 서서히 선보이기 시작했지만 옵션은 여전히 가뭄에 콩 나듯 있다(그리고 어떤 특정 방식으로도 정보가 표시돼 있거나 검색 가능하지도 않다). 몇몇 서드파티 사이트가 PWA 가상 스토어의 공백을 메우기 위해 생겨났지만 전반적으로 다소 부족하고 품질이 떨어진다. 

바탕화면에서 사용 가능한 PWA를 확인하는 유일한 방법은 관련 웹 사이트를 방문한 다음 브라우저 주소 표시줄에서 특수 아이콘(예: 크롬에서는 아래쪽 방향 화살표가 있는 모니터 등)을 찾아보거나 혹은 브라우저의 기본 메뉴를 열고 사이트가 열려 있는 동안 ‘설치(Install)’ 옵션을 찾아보는 수밖에 없다. 

이 명령어는 사용할 수 있는 경우 크롬에서는 점 3개 아이콘(기본 메뉴)에 그리고 엣지에서는 기본 메뉴의 ‘앱(Apps)’ 섹션에 표시된다. 서비스 사용을 위해 로그인이 필요한 경우에는 먼저 로그인해야(또는 계정을 만든 후 로그인해야) PWA 설치 프롬프트가 보일 수 있다. 
 
프로그레시브 웹 앱 설치 옵션은 크롬(해당 사진)과 마이크로소프트 엣지 브라우저에서 서로 다른 위치에 표시된다. ⓒJR Raphael/IDG

한편 이상한 일이지만 파이어폭스는 더 이상 PWA 표준을 지원하지 않으며, 사파리는 데스크톱 환경에선 이를 아예 지원했던 적이 없다. 

동일한 기본 개념이 모바일에서도 작동한다. 휴대폰이나 태블릿에서 PWA 기능이 있는 사이트를 보면서 브라우저의 기본 메뉴를 확인해야 한다. 안드로이드의 경우 크롬에서 설치 가능할 때 ‘앱 설치(Install app)’ 옵션이 표시된다. 엣지의 경우 ‘화면에 추가(Add to screen)’라고만 표시될 뿐 추가되는 항목이 PWA인지 아니면 단순히 브라우저에서 사이트를 열 수 있는 기본 링크인지 명확한 언급이 없다. 

iOS에서는 사파리만 PWA 설치를 지원한다. 사파리 역시 PWA를 받는 건지 아니면 기본 웹 링크를 받는 건지 알 수 없는 애매모호한 ‘홈 화면에 추가(Add to home screen)’ 옵션만 제공한다(앞서 말한 것처럼 매우 혼란스럽다!) 

플랫폼 또는 기기 종류와 관계없이 PWA를 찾아서 설치하면 이는 바탕화면, 홈 화면 등 해당 운영체제에서 새로 설치된 앱을 저장하는 위치에 아이콘으로 나타난다. 

이제 사용할 만한 가치가 있는(즉 생산성을 향상시켜주는) PWA를 살펴보는 순서로 넘어가자. 그중에서도 특히 사용자 경험에 실제로 뭔가를 더해 주는 앱을 중심으로 소개할 예정이다.

최고의 작업 및 메모용 PWA
• 투두이스트(Todoist)
제대로 된 PWA가 어떤 모습이어야 하는지 알고 싶다면? 멀리서 찾을 필요 없이 ‘투두이스트’를 보면 된다. 이 목록 작성 앱은 일반 로컬 프로그램과 거의 똑같이 보이고, 느껴지며, 동작하는 PWA를 제공한다. 

해당 PWA를 설치한 기기에서는 이미 생성돼 있는 기존 작업을 확인, 관리, 수정할 수 있다. 신규 작업을 생성할 수도 있다. 이 모든 게 브라우저에 연결돼 있다는 사실조차 느끼지 못할 정도로 빠르고 버퍼링 없는 인터페이스에서 이뤄진다. 
 
투두이스트 프로그레시브 웹 앱은 오프라인 상태에서도 기존 프로그램과 똑같이 보이고 작동한다. ⓒJR Raphael/IDG

무엇보다 이는 오프라인에서도 모든 기능이 작동한다. 인터넷에 연결돼 있지 않을 땐 오프라인 상태임을 알려주는 아이콘이 표시되고 변경 내용은 인터넷이 연결되면 즉시 동기화된다. 한 가지 주의할 사항은 아직 인터넷 연결이 활성화된 상태에서 앱을 미리 열어 둬야 한다는 점이다. 그래야 처음에 모든 최신 정보를 동기화하고 업로드할 수 있다. 

• 구글 킵(Google Keep)
다소 놀랍게도 현시점에서 ‘구글 킵’은 제대로 작동하고 진짜 쓸 만한 PWA로 제공되는 유일한 구글 서비스다. 구글 킵 PWA는 다른 구글 제품과는 다르게 실제 프로그램처럼 동작한다. 오프라인 상태에서도 기존 노트를 검색, 확인, 편집하고 새 노트를 작성할 수 있다. 이 밖에 시간 및 위치 기반의 리마인더부터 태깅, 색상 구분, 심지어는 AI 기반 이미지-텍스트 변환까지 다양한 고급 기능을 갖추고 있어 매우 유용하다. 

-> 블로그 | 구글 킵을 120% 활용하는 25가지 방법

• 심플노트(Simplenote)
기본에 충실한 필기용으로는 (그 이름도 적절한) ‘심플노트’가 PWA 환경에서 앱 같은 경험을 제공한다. 심플노트는 노트 작성, 편집, 확인을 위한 깔끔하고 탐색하기 쉬운 인터페이스를 제공한다. 또 태그와 체크리스트를 지원하긴 하지만 대부분의 다른 노트 작성 플랫폼에 있는 혼란스러운 추가 기능은 전혀 없다. 심플노트 역시 100% 오프라인 작업이 가능하다. 단 여기에 필요한 최초 동기화가 실행될 수 있도록 인터넷에 연결된 상태일 때 앱을 여는 것을 잊지 말아야 한다.

최고의 멀티미디어 작업용 PWA
• 포토피(Photopea)
포토샵 소프트웨어를 사용하지 않고 포토샵 수준의 편집이 필요할 때 전적으로 웹 기반 기술을 사용하는 ‘포토피’는 이에 적절한 대안이다. 포토피 PWA를 설치하면 사진 최적화부터 일러스트레이션 조정, 복잡한 멀티레이어 그래픽 파일 생성까지 모든 작업을 할 수 있다. 포토피는 모든 기능을 오프라인에서도 사용할 수 있다.
 
ⓒJR Raphael/IDG

• 포토스택(PhotoStack)
이미지를 한꺼번에 많이 리사이징 및 수정해야 할 때(예: 여러 사진을 같은 크기로 줄여야 하거나 회사 웹사이트에 올리기 전에 테두리 및 워터마크를 추가해야 하는 경우) 필요한 PWA가 바로 ‘포토스택’이다.

포토스택을 사용하면 개수와 상관없이 이미지를 끌어온 다음 원하는 작업을 지정할 수 있다. 앞서 언급한 작업 외에도 파일 형식을 일관된 표준으로 바꾸기, 이미지 품질을 조정해 크기 줄이기, 패턴 만들어 일관된 이름 지정하기, 이미지에 저장된 EXIF 데이터를 식별해 제거하기 등을 할 수 있다. 매개변수를 원하는 방식으로 설정한 뒤 몇 번 클릭만 하면 온라인이거나 오프라인이거나 관계없이 모든 이미지가 지정한 대로 조정된다.

• 크롬 캔버스(Chrome Canvas)
기본적인 이미지 마크업 정도만 필요하다면 구글의 초간단 ‘크롬 캔버스 앱’이 안성맞춤이다. 이미지 위에 낙서할 수 있는 앱이기 때문이다. 이동하면서 사진에 동그라미를 치거나 강조표시를 해야 한다든가 또는 슬랙에 공유하기 전에 이미지 일부를 지워야 한다든가 할 때 크롬 캔버스를 사용하면 가장 손쉽고 빠르게 할 수 있다. 지금까지 다룬 모든 PWA와 마찬가지로 오프라인에서도 인터넷에 연결됐을 때 못지않게 잘 작동한다.
 
ⓒJR Raphael/IDG

생각해 볼 만한 PWA 하나 더
5217

한 가지 용도의 간단한 프로그램 이야기가 나온 김에 마지막으로 소개하는 PWA는 범위를 최대한 좁힌 것이다. 바로 ‘5217’이라는 것이다. 이는 52분 일하고 17분 휴식하는 주기가 성과를 높일 수 있다는 생산성 이론을 바탕으로 한다. 

따라서 5217은 업무 시간과 쉬는 시간을 계속 카운트다운 할 수 있는 타이머를 제공한다. 52분이 지날 때마다 휴식 시간이라고 알려 주고 17분이 지나면 다시 일을 시작할 시간이라고 알려 준다. 온라인 상태이든 오프라인이든 상관없다.

단 주의할 점은 매시간 17분 일하고 52분 쉬고 싶다는 유혹을 받을 수 있다. 그 유혹은 참거나 최소한 금요일에만 쓰도록 아껴 두어야 한다. 꼼수를 다른 사람은 모르게 할 테니 안심하시라.

* JR Raphael은 컴퓨터월드 객원 편집자다. 기술의 인간적 측면에 큰 관심을 가지고 있다. ciokr@idg.co.kr
 



2021.06.28

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

JR Raphael | Computerworld
크롬, 윈도우, 맥 심지어는 모바일에서도 ‘프로그레시브 웹 앱(Progressive Web App; PWA)’을 사용하면 부담 없이 더 많은 작업을 할 수 있다.  

‘프로그레시브 웹 앱(Progressive Web App; PWA)’이라고 하면 대부분의 사람은 (심지어 기술을 잘 안다고 하는 전문가조차도) 멍한 표정으로 바라보다가 어색한 침묵으로 이어지는 반응을 보일 것이 뻔하다.

PWA는 지난 몇 년 동안 ‘앱’과 관련돼 발전된 것 중 가장 유망한 기술에 속하지만 여전히 흔하지 않고 혼란스럽기 때문에 결과적으로 상당한 오해를 받고 있다. 우선, 오해를 받는 이유에는 브랜딩 문제가 있다. ‘PWA’라는 몹시 투박한 이름이 일반 사용자보단 개발자를 위한 것처럼 보이기 때문이다.
 
ⓒGetty Images

여기에 더해 PWA의 기능이 프로그램마다 크게 달라지는 일관성 문제, 그리고 제공 방식 측면에서 PWA를 찾아 설치하는 방법이 명확하지 않다는 문제도 있다. 사용 가능한 옵션을 살펴보거나 품질을 평가할 수 있는 통합 온라인 스토어도 없다.

하지만 본인의 용도에 적합한 프로그램을 찾는다면 PWA는 매우 유용한 생산성 도구가 될 수 있다. 최고의 PWA는 모든 기능을 갖추고 있으며, 앱 같은 인터페이스를 제공한다. 오프라인에서도 작동하며, 기존 앱 인터페이스와 사실상 구별되지 않는다. 

또한 가볍고, 자동 업데이트되며, 대부분의 일반적인 컴퓨팅 플랫폼에서 동일한 방식으로 작동한다. 이는 크롬 OS(Chrome OS) 설정의 중요한 요소가 될 수 있으며, 윈도우, 맥, 리눅스 시스템은 물론 심지어는 안드로이드나 iOS 기기에서도 유용할 수 있다.

PWA를 찾아서 실제로 쓸 만한지 파악하기만 하면 되는데, 여기서는 그 요령을 자세하게 소개한다.

프로그레시브 웹 앱(PWA)이란?
먼저, 대체 PWA란 정확히 무엇인지 간단하게 살펴보자. 앞서 언급했던 것처럼 PWA가 매우 혼란스럽기 때문이다. PWA를 이해하는 간단한 방법은 웹 사이트와 로컬에 설치된 프로그램이 섞여 있다고 생각하는 것이다. PWA는 브라우저로 연결되고 일반적인 웹 기술을 사용하지만 기존의 독립형 앱처럼 ‘보이고 느껴지도록’ 패키징돼 있다. 

제대로 된 PWA는 기존 로컬 앱의 이점을 동일하게 제공할 수 있다. 이를테면 다양한 종류의 기기에 걸친 일관적인 경험 그리고 번거롭지 않은 관리 및 유지가 바로 그것이다. 

PWA를 찾아서 설치하는 방법은?
이 부분이 특히 애매하다. 구글은 크롬북의 플레이 스토어에서 PWA를 서서히 선보이기 시작했지만 옵션은 여전히 가뭄에 콩 나듯 있다(그리고 어떤 특정 방식으로도 정보가 표시돼 있거나 검색 가능하지도 않다). 몇몇 서드파티 사이트가 PWA 가상 스토어의 공백을 메우기 위해 생겨났지만 전반적으로 다소 부족하고 품질이 떨어진다. 

바탕화면에서 사용 가능한 PWA를 확인하는 유일한 방법은 관련 웹 사이트를 방문한 다음 브라우저 주소 표시줄에서 특수 아이콘(예: 크롬에서는 아래쪽 방향 화살표가 있는 모니터 등)을 찾아보거나 혹은 브라우저의 기본 메뉴를 열고 사이트가 열려 있는 동안 ‘설치(Install)’ 옵션을 찾아보는 수밖에 없다. 

이 명령어는 사용할 수 있는 경우 크롬에서는 점 3개 아이콘(기본 메뉴)에 그리고 엣지에서는 기본 메뉴의 ‘앱(Apps)’ 섹션에 표시된다. 서비스 사용을 위해 로그인이 필요한 경우에는 먼저 로그인해야(또는 계정을 만든 후 로그인해야) PWA 설치 프롬프트가 보일 수 있다. 
 
프로그레시브 웹 앱 설치 옵션은 크롬(해당 사진)과 마이크로소프트 엣지 브라우저에서 서로 다른 위치에 표시된다. ⓒJR Raphael/IDG

한편 이상한 일이지만 파이어폭스는 더 이상 PWA 표준을 지원하지 않으며, 사파리는 데스크톱 환경에선 이를 아예 지원했던 적이 없다. 

동일한 기본 개념이 모바일에서도 작동한다. 휴대폰이나 태블릿에서 PWA 기능이 있는 사이트를 보면서 브라우저의 기본 메뉴를 확인해야 한다. 안드로이드의 경우 크롬에서 설치 가능할 때 ‘앱 설치(Install app)’ 옵션이 표시된다. 엣지의 경우 ‘화면에 추가(Add to screen)’라고만 표시될 뿐 추가되는 항목이 PWA인지 아니면 단순히 브라우저에서 사이트를 열 수 있는 기본 링크인지 명확한 언급이 없다. 

iOS에서는 사파리만 PWA 설치를 지원한다. 사파리 역시 PWA를 받는 건지 아니면 기본 웹 링크를 받는 건지 알 수 없는 애매모호한 ‘홈 화면에 추가(Add to home screen)’ 옵션만 제공한다(앞서 말한 것처럼 매우 혼란스럽다!) 

플랫폼 또는 기기 종류와 관계없이 PWA를 찾아서 설치하면 이는 바탕화면, 홈 화면 등 해당 운영체제에서 새로 설치된 앱을 저장하는 위치에 아이콘으로 나타난다. 

이제 사용할 만한 가치가 있는(즉 생산성을 향상시켜주는) PWA를 살펴보는 순서로 넘어가자. 그중에서도 특히 사용자 경험에 실제로 뭔가를 더해 주는 앱을 중심으로 소개할 예정이다.

최고의 작업 및 메모용 PWA
• 투두이스트(Todoist)
제대로 된 PWA가 어떤 모습이어야 하는지 알고 싶다면? 멀리서 찾을 필요 없이 ‘투두이스트’를 보면 된다. 이 목록 작성 앱은 일반 로컬 프로그램과 거의 똑같이 보이고, 느껴지며, 동작하는 PWA를 제공한다. 

해당 PWA를 설치한 기기에서는 이미 생성돼 있는 기존 작업을 확인, 관리, 수정할 수 있다. 신규 작업을 생성할 수도 있다. 이 모든 게 브라우저에 연결돼 있다는 사실조차 느끼지 못할 정도로 빠르고 버퍼링 없는 인터페이스에서 이뤄진다. 
 
투두이스트 프로그레시브 웹 앱은 오프라인 상태에서도 기존 프로그램과 똑같이 보이고 작동한다. ⓒJR Raphael/IDG

무엇보다 이는 오프라인에서도 모든 기능이 작동한다. 인터넷에 연결돼 있지 않을 땐 오프라인 상태임을 알려주는 아이콘이 표시되고 변경 내용은 인터넷이 연결되면 즉시 동기화된다. 한 가지 주의할 사항은 아직 인터넷 연결이 활성화된 상태에서 앱을 미리 열어 둬야 한다는 점이다. 그래야 처음에 모든 최신 정보를 동기화하고 업로드할 수 있다. 

• 구글 킵(Google Keep)
다소 놀랍게도 현시점에서 ‘구글 킵’은 제대로 작동하고 진짜 쓸 만한 PWA로 제공되는 유일한 구글 서비스다. 구글 킵 PWA는 다른 구글 제품과는 다르게 실제 프로그램처럼 동작한다. 오프라인 상태에서도 기존 노트를 검색, 확인, 편집하고 새 노트를 작성할 수 있다. 이 밖에 시간 및 위치 기반의 리마인더부터 태깅, 색상 구분, 심지어는 AI 기반 이미지-텍스트 변환까지 다양한 고급 기능을 갖추고 있어 매우 유용하다. 

-> 블로그 | 구글 킵을 120% 활용하는 25가지 방법

• 심플노트(Simplenote)
기본에 충실한 필기용으로는 (그 이름도 적절한) ‘심플노트’가 PWA 환경에서 앱 같은 경험을 제공한다. 심플노트는 노트 작성, 편집, 확인을 위한 깔끔하고 탐색하기 쉬운 인터페이스를 제공한다. 또 태그와 체크리스트를 지원하긴 하지만 대부분의 다른 노트 작성 플랫폼에 있는 혼란스러운 추가 기능은 전혀 없다. 심플노트 역시 100% 오프라인 작업이 가능하다. 단 여기에 필요한 최초 동기화가 실행될 수 있도록 인터넷에 연결된 상태일 때 앱을 여는 것을 잊지 말아야 한다.

최고의 멀티미디어 작업용 PWA
• 포토피(Photopea)
포토샵 소프트웨어를 사용하지 않고 포토샵 수준의 편집이 필요할 때 전적으로 웹 기반 기술을 사용하는 ‘포토피’는 이에 적절한 대안이다. 포토피 PWA를 설치하면 사진 최적화부터 일러스트레이션 조정, 복잡한 멀티레이어 그래픽 파일 생성까지 모든 작업을 할 수 있다. 포토피는 모든 기능을 오프라인에서도 사용할 수 있다.
 
ⓒJR Raphael/IDG

• 포토스택(PhotoStack)
이미지를 한꺼번에 많이 리사이징 및 수정해야 할 때(예: 여러 사진을 같은 크기로 줄여야 하거나 회사 웹사이트에 올리기 전에 테두리 및 워터마크를 추가해야 하는 경우) 필요한 PWA가 바로 ‘포토스택’이다.

포토스택을 사용하면 개수와 상관없이 이미지를 끌어온 다음 원하는 작업을 지정할 수 있다. 앞서 언급한 작업 외에도 파일 형식을 일관된 표준으로 바꾸기, 이미지 품질을 조정해 크기 줄이기, 패턴 만들어 일관된 이름 지정하기, 이미지에 저장된 EXIF 데이터를 식별해 제거하기 등을 할 수 있다. 매개변수를 원하는 방식으로 설정한 뒤 몇 번 클릭만 하면 온라인이거나 오프라인이거나 관계없이 모든 이미지가 지정한 대로 조정된다.

• 크롬 캔버스(Chrome Canvas)
기본적인 이미지 마크업 정도만 필요하다면 구글의 초간단 ‘크롬 캔버스 앱’이 안성맞춤이다. 이미지 위에 낙서할 수 있는 앱이기 때문이다. 이동하면서 사진에 동그라미를 치거나 강조표시를 해야 한다든가 또는 슬랙에 공유하기 전에 이미지 일부를 지워야 한다든가 할 때 크롬 캔버스를 사용하면 가장 손쉽고 빠르게 할 수 있다. 지금까지 다룬 모든 PWA와 마찬가지로 오프라인에서도 인터넷에 연결됐을 때 못지않게 잘 작동한다.
 
ⓒJR Raphael/IDG

생각해 볼 만한 PWA 하나 더
5217

한 가지 용도의 간단한 프로그램 이야기가 나온 김에 마지막으로 소개하는 PWA는 범위를 최대한 좁힌 것이다. 바로 ‘5217’이라는 것이다. 이는 52분 일하고 17분 휴식하는 주기가 성과를 높일 수 있다는 생산성 이론을 바탕으로 한다. 

따라서 5217은 업무 시간과 쉬는 시간을 계속 카운트다운 할 수 있는 타이머를 제공한다. 52분이 지날 때마다 휴식 시간이라고 알려 주고 17분이 지나면 다시 일을 시작할 시간이라고 알려 준다. 온라인 상태이든 오프라인이든 상관없다.

단 주의할 점은 매시간 17분 일하고 52분 쉬고 싶다는 유혹을 받을 수 있다. 그 유혹은 참거나 최소한 금요일에만 쓰도록 아껴 두어야 한다. 꼼수를 다른 사람은 모르게 할 테니 안심하시라.

* JR Raphael은 컴퓨터월드 객원 편집자다. 기술의 인간적 측면에 큰 관심을 가지고 있다. ciokr@idg.co.kr
 

X