[2019-10-14][conference] W3C HTML5 Conference 2019

telnet turtle·2022년 8월 30일
Conference과거작성글
0
post-thumbnail

2019년 가을 코엑스에서 열렸던 W3C HTML5 Conference 2019 참석 후기를 적어보려고 한다. 수업 듣듯이 노트 필기식으로 남겼지만, 기억에 남는 내용들이었기에 정리해서 공유하고자 한다.

 

 

오전 시간

오전에는 기조연설 2회를 듣고 밥을 먹었다.

 

 

기조연설 Project Fugu

Project Fugu, "Closing the App Gap", 10.11.2019. W3C HTML5 컨퍼런스, 서울, 대한민국

연사: 최홍찬, 구글

주제: Web Application을 위해서 웹이 어떻게 플랫폼이 변화해야 하는가?

 

Soundation

* 왜 적었는지 기억이 안 난다. Soundation Chrome Studio를 말하는 것 같다. 웹 오디오 API 등이 주제였기 때문이다.

Sound 믹싱을 웹에서 하려 했는데… 처음엔 Flash를 썼었다. (하지만 Flash는 이제 보안 상 사용할 수 없다.) 그리고 PNaCL도 썼다. (C++를 웹에서 썼다!) 그리고 2018년부터는 HTML5를 이용할 수 있게 되었다.

웹 표준화의 느린 속도가 걸림돌이다.

Spotify

PWA

유저에게 앱 설치 강요 X

모바일 웹을 앱처럼 사용하는 기술

재생빈도 증가율, 60일 실사용자수 증가율, 이탈 사용자 줄었고, 앱 다운로드로 이어지는 전환율 → 두 자리 숫자 증가율들!!

PWA가 이렇게 좋은데 PWA를 데스크탑 앱을 대체하도록 하면 어떻게 될까?

CEF

크로미움은 업데이트가 빠르다. 개발자: ㅠㅠ

웹 앱이 가능할까? PWA는 안돼

  • 오프라인 경험
  • 파일 액세스 무제한?
  • 런 온 스타트업?
  • 풀 커스터마이제이션 탑 바?
  • 노티와 배지?

필요 기능의 부재

 

Web Audio API

2010년부터 9년동안 개발했다.

Web audio API 단점은?

:

  • 메모리 사용에 효율이 낮다
  • 인더스트리 요구가 반영되지 않는다
  • 확장성이 없다

확장성 → 개발자에 임파워링 -> 생태계 늘어남 → 더 많은 유저 → 더 많은 회사 투자 → 플랫폼 더 개선 선순환

플랫폼 엔지니어가 얻은 교훈은

개발자와의 소통부족: 요구사항을 얻어오자

 

웹 플랫폼의 문제 세 가지

  1. 느린 표준화 속도
  2. 필요 기능 부재
  3. 개발자와 소통 부족

 

Project Fugu

Fugu’s mission is to close the capabilities gap with native to enable developers to build new experiences on the web while preserving everything that is great about the web.
chromium.org/teams/web-capabilities-fugu
웹 플랫폼과 네이티브와의 기능 차이를 줄이고 웹의 장점은 그대로 보존하면서 개발자들이 웹에서 새로운 경험을 만들어낼 수 있도록 한다.

 

안타깝게도 찍어놓은 사진이 없다.. 웹 검색으로 당시 발표 자료를 찾아서 캡처할 수 있었다. 발표 자료: 링크

 

오리진 트라이얼 (Origin Trial)

:

  • 새로운 웹 기능을 안전하게 실험
  • 새 기능 사용한 앱으로 직접 유저 테스트 가능
  • 의미있는 피드백을 얻을 수 있는 채널
  • 구글 폼으로 구글에 등록하면 구글이 API 키를 줌
  • 다큐멘트에 키가 들어가 있으면 크롬이 숨겨진 API 를 불러옴
  • css prefix 사태, 방지한다

권한/허가 permission
개인정보 보호 privacy
보안 security

이 주제들에 대해서는 끝장토론을 한다

 

Project Fugu Selected Works

bluetooth.rocks/batmobile/ Web Bluetooth (SHIPPED)

wicg.github.io/web-share-target/ Web Share & Web Share Target (SHIPPED)

w3c.github.io/mediasession/ Media Session
API (SHIPPED)

wicg.github.io/shape-detection-api/ Shape Detection API (IN DEVELOPMENT)

wicg.github.io/badging/ Badging API (IN DEVELOPMENT)

wicg.github.io/native-fle-system/ Native File System (IN DEVELOPMENT)

wicg.github.io/serial/ Web Serial API (IN DEVELOPMENT)

wicg.github.io/webhid/ Web HID API (IN DEVELOPMENT)

(사진과 함께 있는 발표자료에서 확인해 보자.)

 

 

되게 모바일 퍼스트다… 사례가 다 모바일이여

발표자료 올려주겠지?

데스크탑 프로젝트도 두 개 있네

goo.gle/fugu-api-tracker/ Fugu API Tracker - 현재 개발 완료된 기능, 개발 중인 기능을 볼 수 있다. ALL API spec, 예제.

 

질답

Q. 호환성 어떻게 바라보냐?

모질라는 새 API에 보수적인 편인데 아예 API 개발 초기부터 모질라와 얘기를 나눴다. 반응이 의외로 좋았다고 생각한다

Q. 보안 문제?

투명하게 오픈 채널에 알린다

Q. 딥 러닝쪽에 어떻게 바라보나?

Fugu와는 교집합이 적다고 본다

 

 

기조연설 Move the Web Forward

Move the Web Forward, 김효, Whale, Naver, W3C html5 Con 2019

연사: 네이버 웨일 브라우저 PO, 네이버

발표 자료 → 링크

개인적으로 브라우저를 만들며 이렇게 고생하는구나가 잘 와닿는 발표였다.

 

지금까지 웨일

브랜드 정립하려고 왔다갔다 했고, 2018년 버전 1 출시! 고생했다.

5.58 마켓 셰어 (내부적으론 보다 조금 낮게 본다)

누가 쓰나? 낮 시간, 10대, 20대가 절반이다

10대, 20대가 브라우저 타겟인데, 30 40이 (브라우저 개발하며) 고민하고, 50에게 승인을 받는다 (고생하는 듯)

 

Clean Web (광고차단)

광고 차단이 필요하다.

(하지만 네이버는 검색 광고를 많이 한다)

 

광고차단의 현황

  • Coalition for Better Ads: 구글, 네이버, 페북
  • AcceptableAds: ABP

Better Ads의 정책

보다 나은 광고 표준 제안

CBA가 만드는 표준 있음

 

광고 차단 Overview

CBA에 위배하는 모든 광고 찾음,

적용

ABP와의 차이?

  • ABP: Acceptable한 광고가아닌건 다 막는다
  • CBA: 룰에 위배하는 광고가 존재하는 사이트의 모든 광고를 막는다

프로세스

  1. CBA 위반 1차 필터
  2. 2차 필터
  3. 엣지 케이스

2차 필터 룰셋은 불륨이 크다

CPU 사용량 높은게 문제

Compaction, Convert, ..., 네이버에서 적용하는 방법

플러그인 없는 웹: 웹인증서

웨일을 쓰면 신한은행에서는 웹 인증서로 뱅킹할 수 있어 쓰는법 심플하다. (홍보)

텍스트가 되게 많아서 적지 않음.

오픈소스의 무게 Rebase

(손이 많이 가는구나..)

새로운 API 붙여야 제품 품질이 높아진다. 고통스러운 작업. 빠른 code rebase

분기당 1회 크로미움 코드베이스 리베이스

웨일 브라우저는 크로미움을 기반으로 만들었나 보다.

Whale의 크로미움 리베이스 방식 Phase

  1. Rebase 장인이 초도 버전 리베이스
  2. 각 모듈 담당자가 리베이스
  3. QA, 안정화

각 작업기간?

1이 4주, 2가 3주, 웨일 70, 73, 76을 리베이스 할 때 걸리는 기간이 점점 낮아진다. 18주, 14주, 12주까지 낮아졌다. 버그 양도 줄어들었다.

(앞의 구글 기조연설은 소개한다는 느낌이 강했다. 웨일 기조연설은 자랑과 함께 겪은 고통을 공유해준다. 네이버에서 하는 발표는 다들 이런 느낌으로 하신다.)

리베이스를 하는데, 새 기능 추가까지 한번에 껴들어가서 작업을 하게 된다. 버그가 생기는데 이게 나온곳이 리베이스인지 새 기능추가인지 모른다.

리베이스 회고도 한다

 

(앞으로는 이런 걸 만들고 싶으시다고 한다.)

 

웨일 2.0 데스크탑

조금 더 부드러운 이상, 사이드바가 달라질거다, 다크 모드가 적용될거다

2.0 데뷰에서 달라질점을 말할 것이다

 

왜 웨일을 만들었나?

크롬은 국내에서 목소리를 내기가 쉽지 않다

“웹 이용자를 자유롭게 하자!”

 

질답

Q. 오픈소스 언제 할 계획?

오픈소스를 하고싶은데, 하려면 할일이 많아서, 꼭 하고 싶고, 할 겁니다.

Q. 웨일이 젊은 층에서 점유율을 늘리려고 이벤트 등을 하는것같은데, 다양한 연령대에서 점유율을 늘리기 위해 어떤 전략이 있나?

여러운 질문이다. 네이버와 콜라보를 하고 있다. 네이버 유저는 젊은 사람만 있진 않다고 안다. 또한 공공기관도 연계 예정이다.

 

(브라우저를 만드는 데 많은 고생이 있다는게 느껴지는 발표였다.)

 

 

점심시간

컨퍼런스에서 주신 식권?을 가지고 코엑스 CJ 푸드홀에서 점심을 먹었다.

오후에는 트랙 3개를 들었다.

 

 

Svelte

스벨트 관련 트랙을 들었다. 내용은 하나도 적지 않고 단지 스벨트가 굉장히 빠르구나 하는 기억만 난다. 모든 것이 엔지니어링으로 느껴지는 리액트에 비해 약간 마법같은 느낌도 났다. 몇 년이 지나 2022년 지금, 웹 프레임워크를 선택하는 데 있어서, 복잡하면 리액트(혹은 Preact), 빠르고 싶으면 스벨트, 두 가지로 양분되는 것 같다. (나는 회사나 팀에서 쓸 거라면 스벨트보다 Vue가 더 적합하고, 개인적으로 사용할 때는 스벨트가 낫다고 생각한다. 하지만 나는 리액트만 쓴다.) 개인적으로 스벨트를 사용해 본 적은 없지만, 충분히 의미 있는 기술이라고 생각한다.

발표 자료 → 링크

발표 동영상 → 유튜브

 

 

React native 전역 상태 공유 성능 개선기

발표자: 김나람, 스튜디오 그로테스큐

(리액트 네이티브를 써본 적도 없었지만, 리액트와 관련이 있는 기술이니까 들으면 좋을 것 같았다.)

https://youtu.be/f1dCNfp-4O0 발표 동영상

리덕스, 몹엑스와 컨텍스트 API

리덕스

오래됨, 점유율, 검색 결과 → 선순환

react-redux로 리액트에서 좋게 쓸 수 있게 유도되고있다

검색 결과 20,000건

엄격한 데이터 플로우,

…

몹엑스

좋은 편의성

최신 기술 빠른 도입

mobx-react 패키지

검색 결과 1,000

컨텍스트 API

검색 결과 500건

리덕스에 대한 고민

코드의 양이 너무 많음

리팩토링에 소극적이게 됨

몹엑스

몹엑스가 느렸다. 이유는?

forceUpdate

store.some = 'trigger!';
store.update = 'force update!';

너무 많은 forceUpdate

컨텍스트 API로 리팩토링

생각보다 리팩토링이 많지 않았다!

결과:

렌더 횟수 60% 감소

정리

리덕스

  1. 풍부한 기술 문서
  2. 강력한 미들웨어
  3. 쓰는 자, 코드의 무게를 견뎌라!

몹엑스

  1. write less, do more!
  2. 너무 급진적인 정책에 대한 대비 필요
  3. 앱이 큰 규모라면 옵저버블 분할 계획 필수적이다

Context API

  1. Zero configuration
  2. 리덕스와 몹엑스의 중간 어디쯤의 느낌
  3. 미들웨어가 필요하다면 직접 구현

컨텍스트를 도입하기 전에 테스트해보고싶다면

https://github.com/gretesq/context-q



Azure Pipeline을 이용한 Electron CI/CD 구축기

영상: https://youtu.be/kIcg7O2oqlg

 

 

Vue.js 초심자가 실무에서 주의해야 할것 5가지

발표자: 캡틴판교

https://youtu.be/wU8Y07vgUbQ 발표 동영상

https://github.com/WePlanet/vue-five-common-mistakes 발표 자료

https://github.com/WePlanet/vue-five-common-mistakes/blob/master/pdf/2019W3C_HTML장기효.pdf 발표 슬라이드

 

(뷰는 자주 쓰지 않았지만, practical 하고 도움이 되는 발표내용이라고 느껴졌다.)

대상

기본 문법 아는 웹 개발자

서비스 개발할 기획자

등

기대 효과

PR 보내면 시니어에게 칭찬받기

발표 자료

https://github.com/joshua1988/vue-five-common/mistakes (현재는 지워졌다.)

 

발표자 소개

생략

1. 반응성

화면이 안그려져요

언제 반응성 주입?

create 직전 init reactivity

생성할때 없던 속성은

조작해도 바뀌지 않는다

e.g.

서버에서 받은 오브젝트 안에 checked 속성이 없다 → 프론트 코드에서 checked를 설정해도 리렌더되지 않는다

해결: this.$set(this.users[0], 'checked', false)

$set: reactivity 주입해준다

2. DOM 조작

jQuery 식 쓰지마라

ref

디렉티브

사례 1

이벤트로 돔을 쫒아갔느데, 그러지말고 index 등을 활용하면 되지

리액트식이네

v-for에 인덱스 주고 @click="removeItem(index)" (그냥 이렇게 문자열로 쓰네..?)

this.$refs.listitem[index]

3. 템플릿

템플릿이 마운트되는 시점 주의하자

new Vue({
	created: function() {const ctx = document.getSelect('');// null});

혹은 mounted를 써도 된다.

4. 속성 ref

v-for에 쓰면 Array 형태로 들어간다

나머지는 리액트와 비슷하다

v-show

v-if 언디파인드 주의

5. 속성 computed

간결하고 직관적인!

<p>{{greetingStr}}</p>
new Vue({
	data: {str: 'name'},
	computed: { greetingStr: function() {return 'something'} }
}

활용법

HTML 컨디셔널 클래스네임

 

 

개발자가 창업할 때 유의해야 할 세 가지

김태현, 500 Startup Korea

https://tkim.co/2019/05/30/개발자가-창업할-때-유의해야-할-세-가지/

발표 영상: https://youtu.be/5CcakTmanBY

 

 

웹 개발자들이 SEO를 위해 알아두어야 할 구조화 데이터

김건오, 트윈워드

(이것도 상당히 인상깊은 트랙이었다.)

발표 영상: https://youtu.be/6lNGJa_7Vg8

 

마케팅의 끝판왕!

마케팅 중 가장 테크니컬한 부분.

돈? 트래픽? ㄴㄴ. SEO.

SEO의 최신 동향

가장 효과적인 디지털 마케팅

검색 유저는 뭘 클릭하나

48% 아무것도 안함 41% 검색 결과 클릭 4% 광고 클릭

변하고 있는 검색 결과 페이지 (구글)

featured snipet / answer box

rich snippet

regular snippet

어떡하면 내가 만든 웹 페이지가 저기에 포함될 것인가?

SEO 마케팅의 핵심

네이버는 SEO 구조와 데이터를 덜 씁니다

오늘 얘기할 것은 구글

지식 패널과 지식 그래프, 구조화 데이터

...에 풍부한 지식을 넣어서 마케팅 효과를 높인다

퀴즈: 컴퓨터가 추출 가능한 이름은?

마크업에서 어떻게?

리치 스니펫 사례

(이하 생략)

(영상에서 확인해보자.)

 

 

웹에서 인공지능 언어모델 BERT 경험하기

http://cloud.ainetwork.ai

김민현 kimminhyun@comcom.ai

(인공지능을 잘 몰랐는데, 친숙함을 더해 준 발표였다.)

발표 자료: 링크

 

리소스

크레딧

데이터센서가 처리할 수 있는 트래픽 량 < 논문상에서 필요하다고 생각하는 데이터 량

데이터센터를 확보하기 어렵다

 

코드는 공짜로 싸게 올립니다

서비스는 AWS로 비용을 들려 올려야 시작됩니다

AWS에 $5k

App operation finally becomes free!

유튜브는 동영상을 공짜로 올리게 해놓고, 성공했다

이것의 끝판왕이 프로그램 아니냐

프로그램을 공짜로 올리게 한다? 이게 컨텐츠 올리듯이 공짜로 할 수 없을까?

AI 솔루션의 특징? 굉장히 많다.

Rethinking "Leela Zero" project

AlphaGo Lee (3737)

AlphaGo Zero (5185)

알파고제로: 350억 정도, 2주 걸린다

알파고 제로 다음으로 강력한게 Leela Zero 다

 

AI를 개발할때 내 머신에서 할일이 별로 없어졌다

맥북은 GPU가 안된다

1080갖고 하던 시대는 금방 지나서, 안된다

Colab, 웹에서 돌려봐라. ID 하나당 GPU를 하나씩 줬다 → 여기서 Leela Zero를 많이

다. ID 하나씩 받아서

Google is Cool

구글은 줬다. 어뷰징만 안 하면.

The New development Environment

로컬에선 소스만 하고, 클라우드에서 트레이닝한다.

솔루션 몇 개 소개

Gitpod | code now

여기서 코딩도 하고 커밋 푸시 디플로이를 다 한다.

문제: 머신을 누가 제공하냐?

내가 구글 클라우드를 사거나, gitpod에서 프리미엄을 하거나.

이렇게 시작하는거겠죠. 웹에서 하고 클라우드에서 실행하고.

Cloud Run Button

구글에서 하고 있는데, 많이 알려지진 않았다

앱 이미지를 서버리스하고 돌려준다

Where can I find resource?

리소스를 어디서 찾는게 관건이다.

다양한 클라우드 컴퓨터 제공자를 빨리 찾고. 연결시켜주고.

AI 칩 회사 입장에서 보면

TPU가 나왔는데

우리나라에서도 빠른 칩을 만들었는데

서빙을 못하는거지 제휴를 안했으니까

그럼 제품화가 힘든거지

Bert 환경 준비하기

(구글 프레젠테이션도 파워포인트 못지 않게 정말 멋지다.)

하드웨어, 소프트웨어 준비하고

실행

 

이하 생략, 나머지는 발표 자료에서 확인해보자.

 

 

웹 인터페이스를 접목시킨 생활속 AI 프로젝트

김규호 교수, 서강대학교

발표 자료: 링크

 

(여러 소주제들이 다채롭게 변하는 발표였다. 난 재밌게 들었지만 주제를 훌쩍 점프하시길래 기록을 제대로 하지 못했다. 거의 소제목만 적었다. 상세한 내용은 발표 자료에서 확인해보자.)

 

Case 1. 겨울철 아파트 난방 데이터 수집 분석

내 집이 추웠다. 어떻게 할 수 없을까 해결한 사례다

20장 슬라이드셰어에 올렸다

저런 문제가 있구나

저렇게 해결할 수도 있구나

문제정의

난방쏠림
난방비효율

하드웨어 이리저리

노드, mysql

난방쏠림, 난방비폭탄 해결

난방데이터수집시스템 구성

DS18B20 개당백원 싸요

| one wire

라즈베리파이 Node 프로그램 짜기 쉬워

 

| HTTP

인터넷

아마존

data

AI

ESP8266 Arduino/Internet Programming

C언어 쉽다

Node.js/Express Framework Programming

30줄이면 웹서버 돌려요

스키마를 맞춰두면 웹 파라미터로 들어온걸 코딩 없이 DB에 바로 들어가게 할 수 있어

Google Line Chart

데이터를 모았고 그다음엔 그래프로 봐야지

JS 코드 20줄만 나오면 그래프로 보기 좋다.

세팅

온도센서

뜨거운물을 보내서 다시 환수되요

처음에 찬물보내고 따뜻해지면 올라가요

방마다 열흡수율이 다른데

round robbin으로 보일러가 방 특성 생각을 안하고 보내고 있더라고

내가 조절했지

난방비가 30% 줄었고 온도 피크값을 줄였어요

갑자기 미세먼지 얘기

미세먼지를 타임시리즈로 보니까 대체로 비슷하지만 지역마다 다르기도 하다.

비슷한거는 글로벌 영역인데 다른것은 로컬 영역이다.

태풍이 오면 평준화되어서 땅에떨어진다

2만원짜리 미세먼지 센서

쓸만하다. 정부에서 1시간마다 제공하는 미세먼지 데이터랑 개략적으로 일치한다.

어느날 분당, 개포동, 신촌 먼지를봤는데 특이점이 있어요

개포동, 신촌이 시간이다르게 피크점이있고 분당이없다

살펴보니까 시간이다르고 구간이다르다

먼지덩어리가 지나간거지

시간이 몇분,

직경이 이렇게 변하면서 이 회전반경으로 이걸 중심으로 곡선으로 원을 그리며 지나갔다.

신촌 북경 산호세 미세먼지 비교

북경은 널을뛰어요

산호세는 깨끗한데 바베큐를 구워먹으면 미세먼지가 뛰어요

전기를 보는데

http://openenergymonitor.org

 

이하 생략

 

Node와 Browser에서의 Javascript 동작의 차이점과 V8 엔진의 작동원리

김형규, 대덕마이스터고

발표 동영상 → 링크

 

(발표자가 긴장한 것 같았다. 고등학생이던데 수백 명 앞에서 발표를 하는게 대단했다고 생각했다.)

 

노드 V8 엔진의 구조와, 머신 코드에 관한 내용이었다.

 

(메모를 전혀 안 했음)

 

 

마무리

마무리하는 시간에 경품 추첨이 있었다. 입장할 때 티켓을 분리해서 유리병에 넣었는데 그것 가지고 추첨을 했다. 1, 2, 3등 상품이 있었는데 1등 상품은 아이패드 미니 5세대였다.

 

컨퍼런스장을 둘러보니 어림잡아 800명 정도 앉아있었다. 옆에 있던 회사 동료와 '1등 하려면 800분의 1 확률이네요.' 같은 잡담을 했다.

내 앞에서 3명이나 안계시는 바람에 4번째 재추첨해서 당첨돼 아이패드를 가져갈 수 있었다. 컨퍼런스에서 경품 추첨을 한다면 꼭 마지막까지 남아 있어보자. 복학해서 수업 들을 때 잘 사용했다. 좋은 상품을 주셔서 감사합니다.

 

코로나가 터지고 오프라인 컨퍼런스를 가본 적이 없는 것 같다. 온라인으로 하는 것도 편리하지만 행사에 가서 느꼈던 재미와는 다른 것 같다. 다시 오프라인 행사가 진행됐으면 좋겠다.

 

 

컨퍼런스 정보

2019. 10. 11.
웹표준기술융합포럼

상세정보 안내

상세정보 안내 1

profile
telnet turtle
프론트엔드 엔지니어
이전 포스트

[2018-05-31][Ubuntu] 우분투에 ssh 공개키 그리고 비밀번호 로그인 설정

다음 포스트

[css] CSS 투명도 설정

0개의 댓글