웹의 미래를 그리다 온라인 세미나 발표자료 제목: 웹 기술 트렌드 및 전망 살펴보기 발표: 송효진 선임연구원 (LG전자 SW센터)

1. LG전자 송효진 선임연구원 | 2020. 09. 10
포스트 코로나 시대 ‘웹의 미래를 그리다’ 세션 발표
웹 기술 트렌드 및 전망 살펴보기
발표자료 바로가기
https://bit.ly/39F8KDm

2. HTTP
URL
HTML
Browser
Web vs. App
Chromium
WASM
PWA Web Vitals
Google
Security
?
10 Questions
W3C
Beyond browser
Media
Fugu project

3. The Web is so much more than
one company, one product, or one person.
전 세계 웹 개발자 규모: 1700만명 (17M)
전 세계 웹 사이트 규모: 15억개 (1.5B)
전 세계 웹 기술 사용자: 45억명 (4.5B)
* Reference: Keynote in Chrome Dev Summit 2019
https://youtu.be/F1UP7wRCPH8?t=282
1

4. APPWeb
(1995 ~) (2008 ~)
게임, 영상편집 등 일부를 제외하면
대부분의 작업을 웹 브라우저에서 진행
(검색, 미디어, 회사업무 등)
주요 서비스 대부분이
모바일 앱 형태로 제공
(브라우저보다 편리함)
vs.

5. APP
(2008 ~)
주요 서비스 대부분이
모바일 앱 형태로 제공
(브라우저보다 편리함)
Web in App
네이버 지도 링크
https://naver.me/GMFaZjLp
YouTube 영상 링크
https://youtu.be/3LOLhtRCnp0
App to Web

6. Browser
2008 2003 2002
https://gs.statcounter.com
2

7. Chromium
2008
Release date Chrome version Num. of patches
2017-07-25 M60 10,200
2018-10-16 M70 11,000
2020-02-04 M80 15,300
2020-05-19 M83 18,900
2020-07-14 M84 12,900
2020-08-25 M85 13,800
2017년 9월, BlinkOn8 event @Tokyo
삼성, 네이버, LG 크로미움 개발자들

8. Google 2019년 광고 연매출: 116조
2019년 YouTube 연매출: 18조
* Reference: https://www.theverge.com/2020/2/3/21121207/youtube-google-alphabet-earnings-revenue-first-time-reveal-q4-2019
3

9. W3C
Leading the web to its full potential
429 Members as of May 29, 2020 (link)
34 Working Groups (link)
274 active specifications are tracked (link)
*HTML WG
WebRTC WG
*CSS WG
*Audio WG
*Service Worker WG
WebAssembly WG
*Automotive WG
Web of Things WG
Immersive Web WG
Web Payments WG
w/ whatwg4

10. Core of the Web
1. HTML
2. URI
3. HTTP
https://www.w3.org/People/Berners-Lee/WorldWideWeb.html
5

11. Core of the Web
HTML
URI
HTTP

12. Tim Berners-Lee
웹은 정보를 찾기에 유용합니다.
웹은 인터넷을 효과적으로 사용할 수 있게 합니다.
세계는 더 잘 연결되어 있어야 합니다.
인류의 지식이 독점적 시스템에 종속되면 안됩니다.
2020년 5월, W3C AC 2020 회의에서 (COVID-19로 인한 서울 개최 취소 아쉬움)

13. HTML
HyperText Markup Language
2014년 10월, W3C TPAC 2014 행사에서
HTML5
웹 기술 전반를 아우르는 키워드 (Canvas, Web storage, Web workers, etc.)
2014년, HTML5 권고안 발표 (완성)
2019년, WHATWG와 단일 스펙 제공 합의
https://www.w3.org/TR/html53/
https://html.spec.whatwg.org/
6

14. URL
Uniform Resource Locator
사용자와 기기를 넘나들며 리소스 공유에 활용 (웹의 핵심 가치 중 하나)
네이버 지도 링크
https://naver.me/GMFaZjLp
YouTube 영상 링크
https://youtu.be/3LOLhtRCnp0
앱 또는 웹에서 위의 링크를 실행하면?
1) 기 등록된 URL 패턴에 매치되는 특정 앱에서 실행
2) 브라우저에서 HTML로 실행
* 앱이 없으면 웹에서 실행
7

15. HTTP
HyperText Transfer Protocol
1. HTTP/3 (aka. HTTP over QUIC) - 2018년 12월
Client Server
HTTP Request Over QUIC
2. QuicTransport API since Chrome 84 - 2020년 6월
HTTP가 아닌 QUIC 프로토콜로 서버와 직접 양방향 통신할 수 있는 Web API
Datagram APIs(unreliable) and Streams APIs(reliable)
Origin TrialParts of Web Transport API
8

16. Trends of the Web
Web Assembly
Progressive Web Apps
Media
Fugu project
Web Vitals
Security

17. Web Assembly (aka. WASM)
웹에서 네이티브 코드를 실행할 수 있는 환경 제공
WebAssembly Summit (2020년 2월) https://webassembly-summit.org/
V8 v8.3 릴리즈 (2020년 5월) Up to 4GB memory supports for a web app
Chrome 84 릴리즈 (2020년 7월) Web Assembly SIMD (HW supports)

18. Web Assembly
활용 분야: Game, Media, Virtual DOM processing, etc.
Always bet on JavaScript (and WASM) - Branden Eich

19. PWA
Progressive Web Apps
* How to install: 브라우저, 앱스토어

20. PWA
Advantages from App and Web
Offline availability
Push notification
Background service
Home screen access
No download/update required
Linkable and shareable
Indexed for searching(Google)
https://web.dev/what-are-pwas/

21. PWA
Challenges
LIMITATION
1. Supports from iOS
2. Hard to develop
3. Hard to distribute
4. Less capabilities

22. Fugu project
복어 (잘 손질하지 않고 먹으면 독의 위험성을 내포)
네이티브 앱의 기능 중 웹 앱에서 지원할 수 없는 기능을
웹의 장점을 그대로 보존하면서 지원하기 위한 프로젝트
최근 사례
Chrome 85부터 Native File System API 공식 지원 시작
* Fugu 기능 리스트: https://goo.gle/fugu-api-tracker
Security, Privacy

23. Web Vitals
Essential metrics for a healthy site
https://web.dev/vitals

24. Media
AV1 support since Chrome 70
AVIF support since Chrome 85
MSE, EME for YouTube
Low-level Web APIs for Media
https://jakearchibald.com/2020/avif-has-landed/
JPG : 74.4KB
WebP : 43.0KB
AVIF : 18.2KB
Cobalt browser for embedded devices (e.g. TV)
https://www.w3.org/TR/?tag=media
Video decoder
Image decoder
9

25. Security
브라우저 보안 모델을 신뢰할 수 있을까?
1. HTTPS
대형 통신사 개인정보 1200만건 유출 사고
2. SOP (Same Origin Policy)
CORS (Cross Origin Resource Sharing) COEP, COOP, CORP, CORB
HTTP Request
HTTP Response
요금조회
버튼클릭
사용자
인증결함
HTTP 패킷을 가로채서
고객번호 변조
3. Site Isolation
Spectre 변종 대응을 위해 성능 저하 감수
(메모리 사용량 약 10% 증가)
내 모든 개인 정보가 저장되어 있는 구글 서버

26. Web beyond the browser

27. Web beyond the browser
AGL (Automotive Grade Linux)
GENIVI
LG’s contribution to the Web
10

28. Wrap up
공유/평등 가치를 지향하는 웹
특정 기업에 종속되지 않는 웹
메타 플랫폼으로 기능하는 웹
Native에 근접해 가고 있는 웹
브라우저를 넘어 다양한 산업을 향하는 웹
발표자료 다운로드
https://bit.ly/39F8KDm