2019 GDG WebTech 참관기

Google Developers Groups 에서 주최한 WebTech 를 다녀왔고 이를 정리해보려고 한다.

아래의 세션들을 들을 수 있었다.

1. Puppeteer: Getting Started
2. Hands on Portals
3. New Capabilities for the Web
4. WebAssembly 101
5. Going BIG - PWA
6. Deep in Lighthouse Audits

Puppeteer

1번째 세션에서는 Puppeteer 를 소개해 주셨다.

전체 세션은 들을수 없었고, 구글 로그인 부분부터 들을 수 있었다.

jest 를 이용해서 chrome 을 open 하고 구글 Oauth 를 로그인과 로그아웃을 화면 단에서 자동으로 테스트 해보는 과정은 매우 신기 했다.

마치 안드로이드 앱 화면을 자동을 테스트하는 것과 유사했다.

react-snap 도 Puppeteer 로 구현되어 있다고 하여, Puppeteer 에 대해서 공부 해볼만한 가치가 생겼다.

Portals

2번째 세션은 Portals 이라는 새로운 개념을 얻을 수 있었다.

일반적인 웹에서 페이지 이동은 이전 페이지의 라이프 사이클을 종료하고 다음 새 페이지 에서 새로 시작한다.

그러다 보니 같은 사이트 혹은 동일한 회사에서 만든 페이지라고 해도, 별개의 페이지 처럼 느껴진다.

구글에서는 새로운 HTMLPortalElement 를 새로운 스펙으로 정의하였다.

새로운 페이지로 이동할때 이전 페이지를 종료 시키는것이 아닌 새로운 페이지를 내부에서 노출시키는 것과 같이 동작 하므로써, 페이지에 연속성을 부여하여, 사이트들을 하나의 애플리케이션 처럼 동작하는것 처럼 느끼게 해준다.

그리고 중요한점은 Portals 로 이동할 때 URL 은 변경되는데, 히스토리 관리가 가능해진다. 또한 Portals 로 이동한 페이지와 이전 페이지가 이벤트를 주고 받을 수 있다.

구글이 매우 밀고 있는 PWA 와 합쳐진다면 나중에는 정말 Native APP 을 대체할 수 있는 강력한 기능중 하나가 될 것 같다.

Portals 이 지원되는 않는 사이트는 Iframe 으로 구현할 수 있다고 한다.

추후 정식 스펙으로 정해지고 모든 브라우저에서 지원하게 될 날이 매우 기대 된다.

지금은 크롬 카나리아 에서만 테스트 해 볼 수 있다.

New Capabilities

3번째 세션은 구글에서 어떤 기능들을 추가하려고 하는지를 들을 수 있었다.

구글이 최근 가장 많이 고민하는것이 APP gap 인것 같다.

웹에서 가능한 것과 앱에서 가능한 것 그리고 그차이를 얼마나 줄일 수 있을 지를 고민하는 것같다.

이것을 설명하기 위해 Project fugu 을 들을 수 있었다. 여기서 fugu 는 복어다

그리고 새로 추가될 Web Share Api, Media session api, Web wake lock, Badge API 에 대한 설명을 들을 수 있었다.

Chromium 프로젝트에 대부분이 지원될 것이라 예상되어 매우 기대되는 기능들이다.

WebAssembly

4번째 세션은 WebAssembly 를 들을 수 있었다.

WebAssembly 란 Assembly 언어로 브라우저는 네이티브 수준의 성능으로 제어할 수 있는 개발할 수 있는 기능이다.

이전에 C/C++ 을 JS 로 컴파일 하던것을 기원으로 Assembly 언어로 브라우저를 제어하면 성능을 빠르게 낼수 있지 않을까 고민하면서 만들게 되었다.

WebAssembly 는 Awesome WebAssembly Languages 에서 지원하는 언어로도 만들 수 있다.

WebAssembly 로 작성 했다고 해서, Javascript 로 작성한 코드보다 반드시 빠르지는 않지만, 복잡하고, 무거운 작업일수록 WebAssembly 이 빠를 가능성이 높다고 한다.

WebAssembly 는 꼭 공부해서 적용해보고 싶은 분야중 하나여서 매우 재미 있었다.

PWA

5번째 세션으로 PWA 를 들을 수 있었다.

manifest.json 의 설명, Service Worker 에 대한 설명, 간단한 예제를 볼 수 있었다.

대표적인 예제로 hulu 를 들을 수 있었는데,

hulu 는 자체적으로 만든 웹페이지가 매우 뛰어났다.

PC 용 앱을 만들어 배포 하였는데, 성능 상 이슈가 매우 많았고, 사용자들이 많이 떠났다고 한다.

하여, 이미 잘 작성된 Web 을 PWA 로 만들어서 사용자들에게 배포 하였는데, 성능 이슈가 많이 해소 되었고 많은 사용자들이 다시 잘 사용하였다고 한다.

모던 브라우저에서 대부분 PWA 를 지원하고 있어, 현재 개발하고 있는 프로젝트에 녹여봐도 좋을 것 같다.

Lighthouse

6번째 세션은 Lighthouse 에 대해서 들을 수 있었다.

크롬에서 제공하는 브라우저의 성능을 테스트 해볼 수 있는 기능으로 open source 로 작업되고 있고 대부분 작업자 들이 구글러 라고 한다.

개발자들의 환경은 매우 뛰어나지만, 보통의 사용자들은 환경은 매우 나쁘므로, 좋은 환경에서의 100점보다, 나쁜 환경에서의 50점이 더 중요하다.

모든 것을 대응하면 좋겠지만, 작업과 일정에 바쁜 개발자들이 사실 모든 점수를 올리는 것은 불가능에 가까우므로, Performance 를 최우선으로 중시하고, Accessibility 도 최대한 맞춰주는 것이 좋다고 한다.

Lighthouse 에서 점수를 반드시 올릴 필요는 없지만, 최대한 올려주는 것이, 사용자들에게 도움이 될 것을 생각해 본다면, 충분히 고민하고 공부 해볼만한 영역중 하나인것 같다.

네트워킹

마지막으로 네트워킹을 통해 다른 분들의 고민들을 들을 수 있었다.

다들 Open source 에 관심들이 많구나라고, 느낄 수 있었다.

Open source 를 크지 않더라도 작은 부분에서 기여할 수 있다는 것을 배울 수 있었다.

마무리

GDG Seoul 에서는 전체적 Google IO 에서 설명한 내용을 들을 수 있었다면, GDG WebTech 에서는 구글이 지양하는 Web 에 대한 내용을 들을 수 있었다.

전문적으로 Web 에 대해서 집중적으로 들을 수 있었고, 많은 insight 를 얻을 수 있어서 매우 재미 있었다.

더욱 공부할 수 있는 영역을 많이 알게 된 것 같아서 매우 들뜨다.

다음 GDG WebTech 가 있다면 꼭 다시 참석 하고 싶다.