3 posts tagged with "conference"

View All Tags

Chrome dev summit 2021 빠르게 훑기

December 3, 2021 · 3 min read

Gracefullight

Owner

Workshop 섹션때문인지, 재택환경 때문인지 작년보다 내용이 없었다.

Building a more private web

New privacy-Preserving Technologies
FLoC 관련 이라 앞부분 스킵
UA-CH (User Agent Client Hints API): 유저 브라우저 핑거프린팅 방지
- 기존 UA 에는 버전, 플랫폼 정보들이 담김.
- UA String Reduction 2022-04부터 시작
- User Agent Client Hints 로 마이그레이션 해야함.
  - https 만 가능
  - https://web.dev/migrate-to-ua-ch/

How leading developers build innovative web experiences

KAPWING: 온라인 비디오 에디터
- Indexed DB
- Web Socket API
- Web Audio API
- Media Recorder API
- Web Workers
- PWA
- (+) Web Codecs
- (+) WebGL
- (+) Media Source Extensions
Zoom
- PWA Desktop Web Codes API 로 Chrome OS 지원
- 런칭 후 16.9M 유저 증가 (전년대비 7M 증가)
Google Meet
- PWA: Custom background using WASM SIMD and WebGL.
Youtube Primium.
- PWA: SW, CacheStorage, IndexedDB, Web Share API, Navigation Preload.
Tiktok: creating a multi-form-factor, frictionless experience.
- Workbox to Prefetch videos.
- expand PWA desktop.
- 트래픽 10배 상승
Adobe Photoshop Web
- Chrome 과 웹플랫폼팀과 코웤
- wasm 을 사용해서 퍼포먼스 패널티 기능 구현.
- Storage Foundation API.
- 피드백 환영

Understanding performance with Core Web Vitals

https://www.youtube.com/watch?v=F0NYT7DIlDQ

구글과 자바스크립트 프레임워크 간의 퍼포먼스 협업 Aurora
PageSpeed Insights 리뉴얼
라이트하우스에서 유저 플로우 측정 가능
- Warm load 나 스크롤 등을 시뮬레이션하고 테스트 가능
개발자모드 Recorder 탭에서 puppteer 테스트를 만들어서 export 할 수 있다.

The new responsive design

https://www.youtube.com/watch?v=dhrX_biPH8c

@container: parent 영역에 따른 반응형
Nesting css
@media (pefers-colors-scheme: dark)
- 개발자도구 > Rendering > Emulate auto dark mode 가능
https://web.dev/patterns/layout/
https://web.dev/learn/css/
https://web.dev/learn/layout

feconf 2021

December 2, 2021 · 7 min read

Gracefullight

Owner

A1: Do more, with less

UI 개발의 일반적인 문제

화면마다 매번 새로 디자인 되는 컴포넌트: UI의 파편화로 생산성 감소 새로 구현하는게 맘편해요...

디자인 일관성 다운 -> 중복코드 파편화 -> 유지보수가 어려운 UI 코드 무한루프

디자인시스템 구성요소

토큰: 컬러, 타이포그래피, 사이즈, 여백, 트랜지션…
컴포넌트: 토큰을 가지고 컴포넌트의 생김새 정의
- Primary, fill, normal, disabled…
패턴: Danger fill > 한 화면에 하나만 사용, 경고용도로 사용

스펙을 가지고 스토리북 생성

디자인 시스템 가이드 정의 > 디자인과 개발에 동일한 컴포넌트 구현 및 사용 > 커뮤니케이션 비용 다운, 효율성 일관성, 퀄리티 증가

100명 이상 소통하기에 다른 문제가 생겼다.

코드를 디자인에 일치시키는 어려움 (14:25)
비주얼 중심의 디자이너 언어 <-> 기능 중심의 개발자 언어
- Blue: Primary
- Red: Danger
엄격함과 유연함 사이에 절충이 필요했다.

스케치로 만들고 직접 리액트 컴포넌트를 수동으로 만들었다.

휴먼 에러가 생기고, 스케치컴포넌트와 리액트컴포넌트를 서로 비교해야했다.
디자인과 코드 사이에 의존 관계를 만들어야한다.
기존 디자인툴은 모든 프롭의 조합을 그려놓아야한다. (스티커 붙히기) 파워포인트로 디자인만들기 급..
- 디자인 툴에서도 코드를 사용할 수 있으면 좋을텐데.. > 프레이머로 전환

프레이머

모든 요소가 리액트 컴포넌트로 이루어짐 22:17분
디자이너가 프롭을 정의하고 입력할 수 있음
컨셉 검증을 위해 리액트로 작성된 라이브러리를 프레이머로 옮김
리액트 컴포넌트 수정시 디자인 컴포넌트도 수정되어 코드 동기화가 완료됨

언어가 다른것

제플린, 피그마에서 디자인한건지 디자인시스템컴포넌트인지를 확인하려면 일일히 눌러봐야함
- 토스에서는 손가락 이모지를 앞에 넣어서 명시적으로 이름을 바꿧음
  - button-1. fill-medium-primary (style, size, color)
- 박스에 버튼이 있는경우, 알 수가 없음.. 박스에 들어가는 버튼인지 버튼만을 넣는것인지... (29:49)

왜 디자인을 다시 개발해야하는가? 프레이머로 커스텀 핸드오프 기능 구현

클릭시 전체 자식 노드의 프롭 정보를 노출시킴 (32:09)
개발자와 디자이너의 언어도 일치시킴

DST (Design Syntax Tree)

리액트 노드의 형태를 모방해서 기계가 파싱가능한 트리구조로 추상화 (33:41)
DST Element (34:22) -> DST React Renderer (35:20) (35:38)

{
  "elementType": "AmountTop",
  "properties": {
    "title": "",
    "subtitle": "",
    "button": {
      "elementType": "button",
      "properties": {
        "Title": "",
        "Type": "",
        "Style": "fill"
      }
    }
  }
}

디자인을 바로 코드로 옮기는 목표 달성

엄격함과 유연함

디자인 시스템에 컴포넌트가 있는줄 몰랐어요
구멍인 줄은 알았는데 자유롭게 쓰고 싶었어요
컴포넌트를 쓰긴 했는데 패턴을 어긴지 몰랐어요 등등..
커스텀 컴포넌트 계속 만들면 디자인시스템 도입 이전하고 똑같음
리스트 컴포넌트 스펙 참조 (41:21)
- 디자이너가 컴포넌트 목록을 잘 몰라서 새로 만드는 경우
- 가이드가 힘들었음 (43:26)
- 디자인 시스템 관리자가 매번 패턴 점검 필요

디자인 린터 (디자인 시스템 커버리지 계산기)

권장 패턴이 아닌 경우 알림
DST 를 통해 디자인 분석
크롬 확장프로그램으로
- 프레이머 웹사이트의 html 에서 Dst 정보 파싱
- DST 에서 컴포넌트 관계 분석
- 권장 패턴에 맞게 사용중인지 계산 (권장 패턴 요소 개수 / 전체 요소 개수) (44:50)
- 학습비용과 전파비용을 극복함

React + DST (46:20)

DST 의 스펙만 확장시키면 됨
Server driven UI 나 다른 언어 컴포넌트로 전환도 가능해보임.

A6: swc

많은 벤더가 전환 중

개인적인 의견: 엄청 빨라짐, 아직 롤업 플러그인 지원은 미비, 모든 Node 생태계가 러스트로 이동 중, swcpack 프로덕션 기대

B1: recoil

개인적인 의견: 인포그래픽 아름다워서 공유용으로 적합.

Chrome dev summit 2020 빠르게 훑기

December 12, 2020 · 11 min read

Gracefullight

Owner

Performance (특히 CLS)와 Privacy 가 행사 전반에 녹아있었다. 가장 중요했던 건 이제 Web Vitals 수치가 SEO 에 반영이 된다는 것이다.

State of speed tooling

Field vs Lab

Lighthouse 지표가 올해 리뉴얼 되었는데 FCP, TBT, CLS 지표를 주로 보면 된다.
이 값이 Core Web Vitals 지표로 사용된다.
실험실 데이터와 필드 데이터가 있는데, 실험실 데이터로 향상을 시킨 뒤 필드 데이터로 확인하면 된다.
Third party 에 대한 측정도 추가되었다.
Thrid party facades 를 통해 iframe 등도 lazy load 해야한다.

Fixing common Web Vitals issues

CLS를 측정하고 개선하는 방안에 대해 설명하였다.
GoogleChrome/web-vitals 로 측정해라.
LayoutShiftAttribution API

const connection = navigator.connection.effectiveType;
const { width, height } = window.screen;
const debugInfo = { connection, widght, height };
sendToAnalytics({ cls, debugInfo });

// Ohter sources of info:
// window.scrollY
// LayoutShiftAttribution (part of the Layout Instability API)
// Debugging info specific to your app (e.g. tokens)

UX patterns optimized for Core Web Vitals

Prevent CLS

Placeholder 를 놓아 CLS 를 막아야한다는 내용이였다.
Click 해서 내용이 추가되는 경우도 마찬가지이다.

Exploring the future of Core Web Vitals

Web Vitals Changelogs 확인하고 피드백 주면 좋겠다.

Core Web Vitals and SEO

첫째 날의 가장 중요한 섹션이지 않을까 싶다. 21년 5월부터 랭킹에 적용된다.
Loading, Interactivity, Stability 가 중요하다.
SEO 에는 필드 데이터를 사용한다.
- Field data: RUM, CrUX 랑 비슷하고, last ~month 사이의 기간동안 측정된 결과이다.
- Lab test data: 테스트 데이터

Ranking factors

Ranking factor 는 위와 같다. Google 검색결과의 페이지 환경 이해를 참조하자.
Search Console 에서 Core Web Vitals report 데이터를 확인 가능하다.
회사명 같은 특정한 경우는 속도가 Ranking factor 에 주는 영향력이 낮지만, best editor 처럼 여러 검색 결과가 나오는 경우에는 page experience 가 표시에 더 많은 영향을 준다.
Great relevant content > Page experience
Page experience 가 좋으면 유저의 이탈율이 24% 감소한다. (The Science Behind Web Vitals)

Beyond fast

동적으로 로드되는 영역에 대해 content-visibility을 줘서 placeholder 를 구현할 수 있다.

.content {
  content-visibility: auto;
  content-intrinsic-size: 0 500px;
}

font metrics override descriptors

운영체제와 브라우저에 따라 폰트가 다르게 보이는 것과 swap 폰트 로드로 인해 레이아웃이 변경되는 구조를 막을 수 있다.
ascent-override, descent-override, line-gap-override Chrome87 부터 가능하다.
Back Forward Cache 가 Chrome87 에서 Same Origin 에 대해서도 적용되었다. (November 17, 2020)
chrome은 strict multi-process architecture 라 적용하는데 좀 걸렸다.
portal 을 18년 소개 후부터 미는데.. 브라우저 지원이 없어서 아직까진 잘 모르겠다.
포탈을 쓰면 스토리지 제한이 없어서 두 사이트 간 content 공유가 쉽다.
quicklink 도 짧게 소개했다. newegg 사는 50% 컨버젼 상승과 4x faster navigation 을 달성했다고 한다.

Enable and debug cross-origin isolated

헤더가 추가된다.
- Cross-Origin-Opener-Policy: same-origin 코옵
- Cross-Origin-Embedder-Policy: required-corp 코엡
Why you need "cross-origin isolated" for powerful features 문서와 Demo 참조하는 게 좋다.
COOP 는 no-openner 속성과 비슷하며 제어하는 위치의 차이이다.
COEP 는 CORP 와 함께 사용하여 리소스 로드를 제어할 수 있다. 서비스워커보다 상위에서 실행된다.
요약하면 아래와 같다.

# 타 도메인 리소스
Cross-Origin-Resource-Policy: cross-origin
# 또는 CORS 열고 img[crossorigin] 추가

# 타 도메인 아이프레인
Cross-Origin-Resource-Policy: cross-origin

# 내 사이트
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
# 또는 a[no-openner] 추가

Introducing the Privacy Budget

브라우저 fingerprint 를 방지하기 위한 proposal
Privacy Sandbox
Less entropy, User-Agent Client Hints 로 개선하여 특정하지 못 하게 할 것이다.

A more private way to measure ad conversions

쿠키를 심어서 arbitrary information까지 추적이 가능한 걸 개선하려한다.
conversiondestination, impressiondata, reportingorigin 가 추가된다.
브라우저 자체에 고유값이 저장되며 chrome://conversion-internals 에서 디버깅 가능하다.
A more private way to measure ad conversions, the Event Conversion Measurement API와 Demo 를 보는 게 이해가 쉬웠다.

한 판을 정리해놓아서 이 것만 보면 된다.
이름 검사에 정규식을 사용할 때 유니코드 기반을 사용해야한다. /[\p{L} ]+/u
개인적으로 듣기 제일 좋았다.

SMS OTP form best practices

<input
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
  pattern="\d{6}"
  required
/>

한 판을 정리해놓아 이 것만 보면 된다.
type="number" 가 아닌 type="text", inputmode="numeric" 을 사용해야한다.
OTP 문자 마지막 라인에는 @${bound-domain} #${OTP} 처럼 넣어주면 브라우저에서 파싱이 가능하다. (e.g. @gracefullight.dev #123456)
Web OTP API를 사용하여 서버에서 바로 받아서 사용할 수도 있다.

What's new in DevTools

Gird 지원 추가
Location 변경 기능 추가, Timezone, Language
Idle Detection API 추가, Kiosk 에서 비활성화시 사용 가능
Font-face 에서 fallback 을 확인 가능, Disable Local font 추가
animation 수정 가능
element screenshot
element hover 시 accessibility 확인 필드 추가
warning 등이 Issues 탭으로 나와서 가이드까지 추가 됨
WebAuthn 탭으로 디버깅 가능
CSS Overview 탭 추가
Media 디버깅 패널 추가

Extending CSS with Houdini

Houdini.how에 Worklet 확인 가능
CSS.paintWorklet.addModule 로 바로 가져와서 쓸 수 있다고 강조했다.
Static gradient worklet 가 예뻐보였다.

Debugging WebAssembly with modern tools

emcc 로 c++ 디버깅 옵션을 주면 c++ 소스를 바로 디버깅도 가능하다.
추후 memory inspection, custom formatters, profiling, code coverage 기능을 추가할 예정이다.
google map 에 어떤 wasm 기술이 적용되었는지 알려주면 좋을텐데 아쉬웠다.

Transitioning to modern JavaScript

6x slower

모던 자바스크립트는 최신 버전을 말하는 게 아니라, All modern browsers 가 사용할 수 있는 스크립트를 말한다.
ES2017 은 유저 중 94% 가 다 사용할 수 있으므로 더 높은 버전 사용시에는 이 버전을 타켓으로 해야한다. (ES2021은 70%)
더 낮은 브라우저에 대한 지원이 필요할 경우 ESnext > ES2017 > ES2015 처럼 ES2017 을 한번 더 말아서 따로 제공해야한다. 필요 없는 코드가 너무 많이 들어가기 때문이다.
달마다 80PB 가 필요없는 레거시 자바스크립트 로드에 사용된다고 한다.
EStimator 를 사용하여 어떤 코드를 변경해야할지 확인할 수 있다.
Publish, ship, and install modern JavaScript for faster applications

Next-level web apps on desktop

PWA 로 추가될 내용들이였다. 기능 설명 위주였다.
navigator.runOnOsLogin
Window placement window.getScreens(), internal/external
Tabbed application mode & Display override manifest.display_override: "tabbed"
Notification triggers TimestampTrigger
Link capturing manifest.capture_links, manifest.url_handlers
File type handling manifest.file_handlers, launchQueue
Badging (이게 드디어 나온다.)
Digital goods API

New logic to detect PWA offline support

현재는 오프라인 체크시 서비스워커에 fetch event 가 정의되어있는지만 확인하는데 이제는 offine 시에 200 이 반환되어야한다.
chrome88 에서 check-offline-capability 플래그를 활성화하여 테스트 가능하다.
chrome89 에서 console.warn 을 발생시킬 것이다.
offline.html 파일을 강제시키는 bug fix 느낌이다.

What’s new for web apps in Play

bubblewrap/cli 사용하여서 TWA 를 만드는 방법
PaymentRequest 로 PWA 와 구글 결제 연동 가능

Extending Workbox: custom strategies and plugins

Workbox v6 이 되면서 Lifecycle hook 과 기존 strategy 를 확장 가능하게 변경되었다.
한 판을 정리해놓아 이 것만 보면 된다.

Structured data for developers

Dynamic structred data 가 가능하다.

const s = document.createElement("script");
s.setAttribute("type", "application/ld+json");

fetch(`/api/events/structured-data?id=${id}`)
  .then((r) => r.text())
  .then((data) => {
    s.textContent = data;
    document.head.appendChild(s);
  });

테스트는 Rich Results Test 에서 가능하다.
schema-dts, react-schemaorg 패키지도 있다.

Making the web more visual with Web Stories

Web story 를 만드는 방법에 대해 나온다.
stories.google 나 Google의 웹 스토리 사용 설정하기 참조하자.
nws.ai, wp.stories.google, makestories.io 에서 만들거나 amp story 로 가능하다.
구글 검색에도 표시되어서 언젠가는 만들어야할 것 같다.

The web ahead

Wasm: The bridge that helps from lagacy application to that better world.
Write your code once for all browsers.
원반 언제 다 볼 수 있을까 갈수록 기본기가 중요해지는 것 같다.

Building a more private web​

How leading developers build innovative web experiences​

Understanding performance with Core Web Vitals​

The new responsive design​

A1: Do more, with less​

A6: swc​

B1: recoil​

State of speed tooling​

Fixing common Web Vitals issues​

UX patterns optimized for Core Web Vitals​

Exploring the future of Core Web Vitals​

Core Web Vitals and SEO​

Beyond fast​

Enable and debug cross-origin isolated​

Introducing the Privacy Budget​

A more private way to measure ad conversions​

Sign-up form best practices​

SMS OTP form best practices​

What's new in DevTools​

Extending CSS with Houdini​

Debugging WebAssembly with modern tools​

Transitioning to modern JavaScript​

Next-level web apps on desktop​

New logic to detect PWA offline support​

What’s new for web apps in Play​

Extending Workbox: custom strategies and plugins​

Structured data for developers​

Making the web more visual with Web Stories​

The web ahead​

Building a more private web

How leading developers build innovative web experiences

Understanding performance with Core Web Vitals

The new responsive design

A1: Do more, with less

A6: swc

B1: recoil

State of speed tooling

Fixing common Web Vitals issues

UX patterns optimized for Core Web Vitals

Exploring the future of Core Web Vitals

Core Web Vitals and SEO

Beyond fast

Enable and debug cross-origin isolated

Introducing the Privacy Budget

A more private way to measure ad conversions

Sign-up form best practices

SMS OTP form best practices

What's new in DevTools

Extending CSS with Houdini

Debugging WebAssembly with modern tools

Transitioning to modern JavaScript

Next-level web apps on desktop

New logic to detect PWA offline support

What’s new for web apps in Play

Extending Workbox: custom strategies and plugins

Structured data for developers

Making the web more visual with Web Stories

The web ahead