BlinkOn15-Day1

Seokho Song
Seokho Song
3 min read

Categories

Tags

LANGUAGES


BlinkOn 15 Day1

블링크온 이라는 크로미움 렌더링 엔진에 대한 컨퍼런스가 이번주 목요일 금요일 새벽 한시부터 4시까지 진행이 되었었다.

이번 글에서는 각 세션에 대해 간력히 나열하고 정리해보는 글 일것 같다.

Networking

네트워킹 세션은 상당히 흥미로웠다. 네트워킹 세션 페이지에서 조인 버튼을 누르면 실제 블링크온에 참여한 사람을 렌덤하게 매치시켜준다.

Screen Shot 2021-11-17 at 1 15 45 AM

총 2분의 사람을 만났다.

이런저런 이야기를 하며 시간을 보냈다.

  • Lorenzo

    igalia 해드쿼터에서 일하고 있는 엔지니어

  • Nina

    구글에서 크롬 개발자로 일하고 있는 엔지니어

대체로 individual contributor에 대해 관심이 많았던 것 같다. 개인 컨트리뷰터에 대해 항상 감사하다고 생각한다고 그들이 오픈소스 컨트리뷰터들을 어떻게 생각하는지 어떤 태도로 대하고 있는지 엿볼 수 있었다.

인상적이였던 이야기중 하나는 코딩 시간은 어느정도로 잡냐고 물어보니 하루를 3단계로 나눠서 1페이즈 스팩작성 및 스팩관련 작업 2페이즈 코딩 3페이즈 코드리뷰 및 문서작성을 한다고 했다. 다만 항상 그런건 아니고 때에 따라 개발만 하거나 문서만 쓰거나 한다고…

케나다 여행 가고 싶다고 하니까 나중에 놀러오라고, 학생이면 구글의 학생 인턴쉽 프로그램도 있다고 그거 통해서 와보라고 소개해줬다. ㅋㅋ

Day1

Keynote

  • 블링크온 하이브리드
  • 기여자 오버뷰
    • 기업들과 그 기업들의 어떤 피쳐를 만들었는지
    • 27%의 개인 기여자

개발중

  • Shared Element transitions

ship(배포)된 피쳐들 소개

  • accent-color
  • COLRv1 fonts
  • Composite After Paint (CAP)
  • Canvas Updates
    • Context Lost/Restored Events
    • Will Read Frequently
    • New Text Modifiers
    • Reset
    • RoundRect
    • Conic Gradient
    • Filters (WIP)
    • Performance Improe
  • WebCodecs
  • Developer Tools
    • Container Queries
    • User Flows
    • WebAssembly Debugging
    • WebSocket Throttling
    • Privacy Sandbox
  • BFCache Desktop
  • WebTransport
  • Web Permission Prediction
  • RenderingNG
  • V8 Optimization
    • Sparkplug
    • Concurrent lnlining
    • Fast API
  • Idle detection API
  • AppHistory API
  • Reporting API
  • Prioritized task scheduling API
  • Secure Payment Configration

Lighting Talks

  • Ozone News (18:48)
    • 데스크탑에서의 추상화 레이어
  • Storage Partitioning the File System API (21:30)
  • Referrers and Redirects (24:37)
  • The initial empty document (28: 04)
  • <popup>, <selectmenu>, Anchor Positioning
    • 커스텀 가능한 select와 팝업에 대한 이야기
  • Secure Payment Confirmation (34:50)
  • Web Authentication API (37:52)
  • Security key Sign-In data Management (40:30)
  • Accessible name calculation (43:53)
  • Federated Credentials Management (46:58)
  • Animation Smoothness Metric (49:54)
  • Intro to Tracing (52:47)
  • Chrome 100 (55:30) - UA에 Chrome/100.0.0 이 된다면?

Sessions

  • COLRv1 Color Vector Fonts by Dominic Rottsches

    컬러폰트는 이모지, 타이포 등등에서 다양한곳에서 사용됨

    COLRv1 문자는 페인트 연산의 방향이 있는 비순환 그래프다

    COLRv1 문자를 그리는 것은 위 그래프를 순회하면서 그리는것

    SVG와 COLRv1 연관

    svg → flattened SVG → COLRv1 Font Glyph

    폰트 사이즈가 비트맵보다 메모리를 4~5배정도 적게 먹는다. 심지어 벡터 타입이라 스케일도 좋다.

    크롬 카네리 (아마 97+ 버전 이상?)에서 #colr-v1-fonts 로 enable 가능

  • :has() prototyping status by Byungwoo Lee

    pseudo 클레스는 css의 중요한 로지컬 셀렉터다

    has() 를 통해 선택자로 선택할 수 있는 엘리먼트를 로지컬하게 정할 수 있다

    .a: has (.b) 와 같이 subject 엘리먼트를 터미널 엘리먼트가 아닌 엘리먼트를 선택할 수 있다.

    .a:has(.b:hover) 와 같이도 사용할 수도 있다. 유용할 것 같다.

  • MathML by Frederic

    수식 렌더링에 대한 이야기인듯, DOM처럼 다룰 수 있고 스타일이 가능해지지 않을까..?

    아직 잘 모르겠다..

  • Armv9 Security Update

    로우레벨 보안관련 업데이트가 많이 있던것 같은데 나중에 한번 보면 좋을 것 같다.

  • Rendering 2022 Plans

    렌더러 엎고 하위호환 유지하면서 새로운 렌더러로 점진적으로 개선하는데 6~7년 소비했다. (CAP, LayoutNG 등)

    Rendering NG 프로젝트들

    • Composition After Paint
    • Next Generation Layout (Layout NG)

    렌더링 스테이지는 함수형이여야 한다고 한다. (인상적임)

    • defined inputs
    • defined outputs
    • deterministic behavior

    렌더 스테이지 아웃풋은 immutable 해야한다.

    50%의 성능향상! == 베터리 소비량 적어짐

    근시일내에 할 것들은 컴포지션 관련된 것들일것이라고 한다. 컴포지션 gif elzhemfkejsrk…

    Threaded text shaping, Non-Blocking Commit, Off Main Thread Compositing

    이야기만 들어도 속도가 많이 향상될 프로젝트들 인듯하다.

    장기적으로는

    • Off Main Thread Paint
    • Off Main Thread Pre-Paint
    • Hit Testing the Fragment Tree

  • Measuring Dropped Frames and Animation Smoothness by Michal

    • Animation Smoothness 오버뷰
    • Visual Completeness vs Smoothness vs Latency
    • 어느정도 했는지
    • 어떻게 할 수 있는지

    Animation Smoothness 의 목표

    • 애니메이션중에 Visual Completeness 프레임에 라벨링을 하는것
    • 어떤 애니메이션 프레임이 사용자에게 영향이 갔는지 구분하는 것
    • 페이지의 전체 라이프사이클을 측정하는 것

    https://web.dev/smoothness/

    기존 메트릭과 다른점은 visual smoothness를 실행중인 애니메이션에서 캡쳐하는 것과 모든 애니메이션에 대한 것 등이 있다.

    • Visual Completness
      • 렌더 프레임이 될 수 있는 기회를 가진 것
      • 애니메이션 프레임으로 4개의 상태를 가질 수 있다
        1. No Update Desired
        2. Fully Presented
        3. Partially Presented : 메인스래드 없이 컴포지터 업데이트
        4. Dropped
    • Animation Smoothness
      • Frame sequences는 애니메이션 도중 매우 중요하다
      • 몇몇의 애니메이션은 Partially Presented다
      • 몇몇의 애니메이션은 다른 애니메이션을 마스킹 할 수 있다 (i.e. 스크롤링)
    • #show-performance-metrices-hud
      • 퍼포먼스 메트릭을 실시간으로 볼 수 있는 HUD다
      • 드랍된 프레임들의 확률을 볼 수 있다.
      • 레이아웃 시프트도 측정해주는듯..?

이렇게 Day1이 끝났다.

css의 작은 피쳐를 개발하다가 더 넓은 세상을 보게 된 것 같다는 생각이 든다.

웹 피쳐가 생각보다 더 다양하고 많다는 느낌도 받았고, 개발자 도구가 점점 강력해지고 있다는 생각이 든다.

아마도, IE만 버릴 수 있다면 이런 피쳐들을 직접 회사에서 활용하는 날이 오지 않을까 기대 해본다.

물론 interoperability가 보장된 피쳐들을 쓸 수 있지 않을까 생각된다..

아마도 블링크에 소개되고 쉽 된 기능중 다른 브라우져에서도 지원 될것을 기대하면 한 1~2년 정도 전의 웹 브라우져의 최전선 이였던 피쳐들을 활용할 수 있지 않을까 싶다.

Day2는 다음에 정리해보고자 한다.