shiwoo.dev logoshiwoo.dev

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

프론트엔드 뉴스레터

#31

2026년 11월 5일4개 소식

이번 이슈 한눈에

  • Safari 27.3 베타에 사용자가 켜는 자동 다크 모드 추가
  • npm 새 버전을 7일 뒤에 설치하도록 제한한 회사의 운영 기록
  • 컨테이너 쿼리 설정 하나로 카드 너비가 0이 되는 이유
  • 웹폰트 분할이 다운로드를 줄이면서 텍스트 배치는 늦춘 사례
  1. 01

    webkit.org

    Safari가 밝은 웹사이트를 다크 모드로 바꿔요

    Safari 27.3 베타에 사용자가 켜는 Adaptive Dark Mode가 추가됐어요. 밝은 웹사이트의 배경과 글자 색을 브라우저가 바꿔 어두운 화면으로 보여줍니다. 대부분의 이미지는 그대로 두지만 일부 로고·아이콘의 색을 바꾸고, 마스크나 mix-blend-mode 효과를 끄기도 해요.

    HTML의 color-scheme 메타 태그나 CSS의 color-scheme 속성에 light dark를 지정해 다크 모드 지원을 선언한 페이지는 변환하지 않습니다. 지원 선언이 없어도 이미 어두운 페이지는 그대로 둡니다.

    원문 읽기 ↗
  2. 02

    brunoj.com

    npm 새 버전을 일주일 뒤에 설치하도록 제한했어요

    Bruno Jurković가 npm·PyPI의 새 패키지 버전을 일주일 기다렸다 설치하는 회사의 운영 기록을 공개했어요. 패키지 다운로드를 중계하는 프록시에서 배포 후 7일이 지나지 않은 버전은 목록에서 숨기고 다운로드도 막습니다. 작성자가 공개 타임라인을 비교한 올해 패키지 탈취 사고 다섯 건에서는 악성 버전이 모두 5시간 안에 내려갔어요. 설치를 늦춰 이런 발견·제거 시간을 확보하려는 정책입니다.

    운영 비용도 생겼습니다. 프록시 밖에서 만든 lockfile에 너무 최신 버전이 고정돼 있으면 설치가 실패하고, Dependabot·Renovate도 같은 대기 기간을 적용해야 업데이트 PR의 CI가 막히지 않아요.

    • 패키지 내용은 검사하지 않고 배포 시점으로 걸러요. 악성 버전이 일주일 넘게 발견되지 않으면 이 정책만으로는 막을 수 없습니다.
    원문 읽기 ↗
  3. 03

    smashingmagazine.com

    컨테이너 쿼리를 켰더니 카드 너비가 0이 된 이유

    컨테이너 쿼리는 바깥 요소의 크기에 따라 안쪽 요소의 스타일을 바꿔요. 이때 바깥 요소에 container-type: inline-size를 주면, 바깥 요소는 안쪽 콘텐츠를 기준으로 너비를 정할 수 없게 됩니다. 원문의 예제에서는 콘텐츠 너비에 맞춰지던 flex 아이템들이 이 선언 하나로 너비 0px이 됐어요.

    반면 부모 너비를 채우는 일반 블록은 너비를 유지했습니다. 글은 콘텐츠에 기대어 너비를 정하는 요소인지 먼저 확인하고, 너비가 이미 정해진 래퍼를 쿼리 컨테이너로 삼는 해결책을 제시해요.

    원문 읽기 ↗
  4. 04

    ivankristianto.com

    웹폰트를 잘게 나눴더니 텍스트 배치가 느려졌어요

    웹폰트를 글자 범위별로 나누면 페이지에서 쓰는 부분만 내려받을 수 있어요. 그런데 다국어 사이트의 성능을 추적한 사례에서는 기본 영문자가 여러 파일에 흩어져 있었습니다. 같은 도구로 공개 폰트를 나눈 재현에서는 i·j가 나머지 소문자와 다른 파일에 들어갔어요. 한 단어를 그릴 때도 브라우저가 파일별로 글자 모양과 위치를 계산해야 해서 텍스트 배치 시간이 늘어난 거예요.

    작성자는 기본 라틴 문자를 한 파일에 모으도록 분할 방식을 바꿨어요. 같은 폰트의 @font-face 선언에서 unicode-range가 겹치면 뒤쪽 선언을 먼저 확인하므로, 새 파일을 추가할 때는 범위 중복과 선언 순서도 함께 살펴야 합니다.

    • 원문의 실험에서는 CPU 속도를 낮춘 Mac에서 텍스트 배치 시간을 측정했어요. 실제 사용자가 클릭하거나 탭한 뒤 화면이 반응하기까지 걸리는 시간이 얼마나 줄었는지는 아직 확인하지 못했습니다.
    원문 읽기 ↗

다음 이슈 받아보기

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

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

← 뉴스레터 #30 · 2026-11-04