6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
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
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
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
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/
22. Fugu project
복어 (잘 손질하지 않고 먹으면 독의 위험성을 내포)
네이티브 앱의 기능 중 웹 앱에서 지원할 수 없는 기능을
웹의 장점을 그대로 보존하면서 지원하기 위한 프로젝트
최근 사례
Chrome 85부터 Native File System API 공식 지원 시작
* Fugu 기능 리스트: https://goo.gle/fugu-api-tracker
Security, Privacy
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% 증가)
내 모든 개인 정보가 저장되어 있는 구글 서버