마이크로소프트는 어떻게 엣지를 웹앱을 위한 최고의 브라우저로 만들려 하는가

학습 차원에서 틈틈이 해외 전문가들이 블로그나 미디어 그리고 책에서 쓴 글을 정리하고 있습니다. 이번 포스팅도 그중 하나고요. 거칠고 오역된 부분이 있을 수 있습니다. 제대로 번역되지 않은 부분은 확인주시면 반영토록 하겠습니다. 이번 글은 이글루 CEO이자 UX 디자이너인 사무엘 다사티가 미디엄에 쓴 글을 번역한 것입니다.

최근 몇 년간 프로그레스 웹앱(Progress Web Apps: PWA)은 성장하는 트렌드가 됐다. 웹 거인들과 모바일 개발자들이 똑같이 이를 주도했다. PWA가 네이티브 같은 경험을 어떤 플랫폼에도 제공하게 한다는 이유에서였다.

PWA에 가장 헌신했던 회사들 중에는 마이크로소프트가 있다. 마이크로소프트는 PWA빌더 같은 프로젝트로 웹 개발자들이 PWA를 끌어안도록 도왔다.

첫 크로미움 기반 마이크로소프트 엣지 버전을 내놓은 데 이어 마이크로소프트는 최근 빌드2020에서 네이티브와 웹앱의 간극이 이어지도록 지원하는 새로운 기능과 API들을 공개했다.

이들 변화는 무엇이고, 이게 당신에게 의미하는 바는 무엇인가?

윈도에서 1등 시민으로서의 PWA

첫 변화 세트들은, 마이크로소프트 엣지에서 설치되는 PWA가 윈도와 상호 작용하는 방식에 대한 것이다. 지금까지 엣지에서 웹앱을 설치하는 것은 네이티브 앱 느낌이 나는 애플리케이션을 갖는다는 것을 의미했다. 하지만 일부 맥락에선 제대로 돌아가지 않았다.

예를 들면, 웹앱은 설정 앱이나 태스크 매니저에서, 별도 애플리케이션으로 보여주지 않았다. 이것은 관리의 어려움으로 이어졌다. 특히, 기술에 대해 잘 모르는 사용자들에게 그랬다. 이 모든 것을 곧 수정될 것이다. 엣지팀은 새 브라우저 버전에서 PWA가 또 다른 앱으로 다뤄질 것임을 발표하기 위해 빌드2020 무대에 섰다.

설치 외에도 웹앱은 OS가 시작할 때 런칭에 대한 허가를 얻기 위해 공유 대상( share target)으로서도 설치될 수 있을 것이다. 예를 들어 이것들은 윈도 쉐어 다이얼로그의 앱 리스트에서 이것들을 볼 수 있을 것이다. 특정 파일 유형, URL, 프로토콜들에 대해 디폴트로 설정될 수 있다.

새 API

PWA를 보다 네이티브 느낌이 들게 하는 변화들 외에 엣지 팀은, 새로운 API 세트들도 공개했다. 웹앱을, 보다 네이티브앱처럼 행동하게 한다.

최적화할 수 있는 타이틀바(Customizable titlebars)

지금까지 PWA는 적수인 네이티브 앱만큼 자유롭게 타이틀바를 최적화할 수 없었다.

UI 관점에서 PWA가 갖는 가장 큰 단점 중 하나는, 데스크톱 기기에서 돌아 갈 때 타이틀 바를 최적화할 수 없다는 것이다.

곧 출시될 엣지 브라우저 새 버전이 제공하는 새 API들은 이 문제를 수정한다. 개발자들이 HTML 요소들을 타이틀 바 아래에서 확장하도록 해준다. 이것은, 특히, 복잡한 PWA에서 유용하다. 복잡한 PWA는 탭과 검색 바를 놓을 수 있게 됨에 따라 자신들의 UI에 소중한 공간을 낭비하지 않을 것이다.

네이티브 파일 시스템 액세스

지금까지 웹사이트들은 파일을 사용자 기기에서 특정 위치에 저장하는 것이 허락되지 않았다. 이것은 온라인 사진 에디터들이 원하는 사진을 편집하기 위해 올리고 그때 그것을 기기에 내려받도록 요구했다는 것을 의미했다. 반면 네이티브 앱은 단지 기존의 것을 대체할 수 있는 단지 옵션을 주기만 하면 될 것이다.

엤지 86부터, 개발자들은, 사용자가 선택하는 모든 파일들을 한 세션에서 처리할 수 있다. 따라서, 웹에서 생산성 앱을 보다 유용하게 한다.

배지(Bagging)

우리는 이미 앱 아이콘에 배치를 추가할 수 있는 API들이 크로미움 기반 브라우저에 제공된다는 것을 알았다. 이제 우리가 처음으로 전체 사진을 볼 시간이다. 숫자와 아이콘과 함께 배지를 PWA에 추가할 수 있을 뿐만 아니라 서비스에서 배지 콘텐츠를 업데이트하기 위해 사용되는 새로운 이벤트에도 접근할 수 있게 한다. 나는 이런 이벤트 개념이 매우 흥미로운 것임을 안다. 이것이 누름 알람을 보내주는 경량 대안을 제시하고 있기 때문이다.

외관상 작은 UI 변경 퍼럼 보이지만, 나는 이것을 작은 변화로 깎아내리지 않는다. 사용자 연구들은 앱 아이콘에 배지를 추가하는 것은 사용자 관여를 실질적으로 늘린다는 것을 여러 차례 설명했다.

마이크로소프트 스토어로 가는 쉬운 길

PWA빌더 덕분에 PWA를 마이크로소프트 스토어에 최소한의 노력으로 퍼블리싱하는 것은 이미 가능하다. 이 같은 접근이 갖는 가장 큰 단점은 새로 공개된 API들을 활용하기 위해 크로미움 대신 구형 엔진을 탑재한 브라우저에서 돌아가는 패키지된 웹앱이다. 이것들은 새로 공개된 API들을 활용할 수 없을 것이다.

빌드2020에서, 우리는 이것이 몇개월안에 바뀔 것임을 알았다. PWA빌더가  패키지화된 웹앱을 크리미움에서 돌아가는 것을 가능하게 될 것이다.

정리

웹 개발자로서, 나는 정말로 마이크로소프트가 PWA에서 공격적으로 투자하는 것을 보는 것에 흥분된다. 나는 PWA가 웹 경험 뿐만 아니라 모바일앱의 미래라고도 생각한다. 이런 것들을 네이티브 언어와 프레임워크를 위한 실질적인 대체재로 만들어주는 것들이다.

테크잇 뉴스레터를 전해드립니다!

오피니언 기반 테크 블로그 'TechIt'
테크 비즈니스를 보는 다양한 통찰들을 이메일로 간편하게 받아 볼 수 있습니다.

About the author

endgame
endgame

테크 블로거 / 공유할만한 글로벌 테크 소식들 틈틈히 전달하겠습니다

No more pages to load


TechIT

테크 비즈니스를 보는 다양한 통찰 '테크잇'

독자 여러분들께서 좋은 의견이나 문의 사항이 있으시면 아래 양식에 따라 문의 주시기 바랍니다.

Contact