Skip to main content

3 posts tagged with "conference"

View All Tags

· 3 min read

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

Building a more private web

  • New privacy-Preserving Technologies
  • FLoC 관련 이라 앞부분 스킵
  • UA-CH (User Agent Client Hints API): 유저 브라우저 핑거프린팅 방지

How leading developers build innovative web experiences

최신 기술 쓴 회사 소개

https://www.youtube.com/watch?v=1vGVrC03_jo

  • 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

· 7 min read

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

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

· 11 min read

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

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

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

A more private way to measure ad conversions

Sign-up form best practices

  • 한 판을 정리해놓아서 이 것만 보면 된다.
  • 이름 검사에 정규식을 사용할 때 유니코드 기반을 사용해야한다. /[\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

The web ahead

The web ahead

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