shiwoo.dev logoshiwoo.dev

뉴스레터about me
  • GitHub
  • LinkedIn
  • Email
© 2026 Shi Woo, Park (custardcream98)
All rights reserved.
← 지난 이슈

프론트엔드 뉴스레터

#38

2026년 11월 13일5개 소식

이번 이슈 한눈에

  • img로 불러온 SVG의 색을 바깥 CSS로 바꾸는 Linked Parameters를 주요 브라우저 세 곳이 구현하고 있어요.
  • LLM 채팅 UI에서 스트리밍 답변이 왔다는 걸 스크린 리더 사용자에게 알리는 방법을 소개해요.
  • Val Town이 서비스를 종료하고, 2027년 2월에 코드를 오픈소스로 공개할 예정이에요.
  • Paul Irish가 공개한 chrome-capture와 Puppeteer 25.10의 page.record()를 쓰면 Chrome 153부터 들어간 내장 인코더로 ffmpeg 없이 탭을 MP4로 녹화할 수 있어요.
  1. 01

    blog.kizu.dev

    img로 불러온 SVG의 색을 CSS로 바꾸는 Linked Parameters, 구현 진행 중

    <img>나 background-image로 불러온 SVG는 바깥 CSS로 스타일을 바꿀 수 없어요. 그래서 아이콘 색 하나를 바꾸려고 SVG를 컴포넌트 코드에 인라인하는 경우가 많았습니다. 이렇게 하면 번들이 무거워지고 SVG 파일을 따로 캐시할 수도 없어요.

    Linked Parameters를 쓰면 SVG 파일 안에 fill: env(--color, pink)처럼 바꿀 수 있는 값을 표시해 둘 수 있어요. 바깥 CSS는 link-parameters 속성으로 그 값을 넘깁니다. Firefox Nightly에 구현이 들어갔고, Safari Technology Preview 254 릴리스 노트에도 언급됐어요. Chromium은 구현 중입니다. 아직 안정 버전 브라우저에서는 쓸 수 없고, 사양도 CSSWG 초안이라 문법이 계속 다듬어지고 있어요.

    • Interop 2027 제안이 제출됐지만 채택 여부는 아직 정해지지 않았어요.
    원문 읽기 ↗
  2. 02

    smashingmagazine.com

    LLM 채팅 UI에서 스크린 리더 사용자에게 답변이 왔다고 알리는 방법

    채팅 UI에서는 답변이 화면에 이어 붙는 동안에도 포커스가 입력창에 머물러요. 그래서 스크린 리더 사용자는 답이 왔는지 알 수 없습니다. 이때 쓰는 게 live region이에요. aria-live를 단 영역의 내용이 바뀌면 스크린 리더가 포커스를 옮기지 않아도 그 내용을 읽어 줍니다.

    Eric Bailey는 메시지마다 aria-live를 달지 말고, DOM 끝에 알림 전용 live region을 하나만 두어 모든 알림에 쓰라고 권해요. 토큰이 들어올 때마다 읽어 주면 알아듣기 어려우니 스트리밍이 끝난 뒤 답변 전체를 한 번에 읽어 주라고 합니다. 로딩을 애니메이션으로만 보여 준다면 제출하고 5초 뒤부터 5초마다 'Loading' 같은 문구를 읽어 주라고 해요. 그래야 사용자가 앱이 멈추지 않았다는 걸 알 수 있습니다.

    • ariaNotify()는 live region을 두지 않고 스크린 리더에 알림을 보내는 API이고, Baseline 기준으로 여러 브라우저가 지원해요. 하지만 보조기술 사용자는 업데이트를 미루는 경향이 있어서, 글쓴이는 당분간 live region을 쓰라고 권합니다. polyfill도 있지만 지원 범위가 live region 방식과 맞는지 먼저 확인하라고 해요.
    원문 읽기 ↗
  3. 03

    blog.val.town

    Val Town이 서비스를 종료하고 2027년 2월에 코드를 오픈소스로 공개해요

    브라우저에서 서버 측 JavaScript를 작성해 바로 실행하던 Val Town이 운영을 끝냅니다. 클라우드 컴퓨팅 시장에서 경쟁할 수 없었다는 게 이유예요. 11월 10일부터 신규 가입과 플랜 업그레이드를 받지 않아요. 12월 10일에는 읽기 전용으로 바뀌고, 2027년 1월 10일에 나머지 서비스가 끝납니다. sqlite와 blob 저장소는 12월 10일 읽기 전용 전환에서 빠지는데, 이 둘이 언제 끝나는지는 따로 밝히지 않았어요.

    과금은 이미 멈췄고, 연간 플랜을 미리 결제한 사용자는 일부를 환불받아요. Cloudflare, Vercel, Netlify, Render로 옮기는 가이드가 나와 있고, Val Town 코드는 2027년 2월 1일에 오픈소스로 공개할 예정입니다.

    원문 읽기 ↗
  4. 04

    stately.ai

    XState v6 beta, 에이전트가 옛 문법을 쓰지 않도록 다시 설계

    XState v6가 70번 넘는 alpha를 거쳐 beta가 됐어요. AI 에이전트는 학습 데이터에 많이 남아 있는 v4·v5 문법으로 코드를 쓰기 쉽습니다. v6는 이 문제를 겨냥해, 설치한 버전에 맞는 문서를 node_modules/xstate/docs에 함께 넣어 배포해요. 옛 v5 설정이 남아 있으면 무엇으로 바꿔야 하는지 알려 주는 오류를 던집니다.

    상태 머신 작성 방식도 바뀌었어요. 전이는 다음 상태와 context 변경을 반환하는 일반 함수로 쓰고, 조건은 평범한 JavaScript 식으로 씁니다. 그래서 assign·sendTo 같은 액션 생성자와 and·or 같은 가드 헬퍼는 제거됐어요.

    • 핵심 API는 안정됐다고 보지만 durable execution 같은 새 API는 실험 단계예요. v5도 계속 지원합니다.
    • v5와 v6를 함께 설치해 머신을 하나씩 옮길 수 있어요. 기계적인 변경은 npx xstate migrate 코드모드가 대부분 처리합니다.
    원문 읽기 ↗
  5. 05

    github.com

    Chrome 내장 인코더로 탭을 바로 MP4로 녹화하는 chrome-capture

    Paul Irish가 Chrome 탭을 MP4로 녹화하는 chrome-capture를 공개했어요. CLI로도, 라이브러리로도 쓸 수 있고, Chrome에 이미 들어 있는 녹화 기능을 사용합니다.

    Puppeteer 같은 자동화 도구는 Chrome DevTools Protocol(CDP)이라는 통로로 Chrome에 명령을 보내 브라우저를 조종해요. 예전에는 이 방식으로 화면을 녹화하려면 CDP 명령 Page.startScreencast가 보내 주는 JPEG 프레임을 받아 ffmpeg로 따로 인코딩해야 했어요. 9월에 stable로 나온 Chrome 153부터는 Page.startScreenRecording 명령을 쓰면 Chrome이 녹화하면서 직접 AV1 MP4로 인코딩합니다. 그래서 녹화를 멈추면 파일이 거의 바로 나와요. chrome-capture는 이 명령으로 60~120fps, 최대 2160p까지 녹화합니다.

    Puppeteer 25.10 이상을 쓴다면 이 명령을 감싼 실험적 page.record()로 바로 녹화할 수 있어요. Playwright나 CDP 세션을 직접 다루는 환경에서는 chrome-capture 라이브러리에 페이지나 세션을 넘겨 녹화합니다.

    • Playwright 자체 지원 PR은 아직 열려 있어요.
    • macOS에서 120fps로 녹화하려면 headful 모드와 120Hz 디스플레이가 필요해요.
    원문 읽기 ↗

다음 이슈 받아보기

읽어볼 만한 프론트엔드 소식과 글을 골라 보내드립니다.

언제든 구독을 취소할 수 있어요.

← 뉴스레터 #37 · 2026-11-12