Safari 27의 브라우저 개선, 컴포넌트 공간을 기준으로 하는 컨테이너 쿼리, 네이티브 포커스를 보존하는 커스텀 체크박스 패턴을 정리합니다. 개발자가 바로 활용할 수 있도록 정리했습니다.
calendar_todaysummarize2026년 38주차bolt중요 업데이트 1건
article
태그: 프레임워크 업데이트읽기_시간: 80분
Safari 27.0에 추가된 WebKit 기능
Safari 27.0은 83개 기능과 844개 수정을 제공하며, 네이티브 컨트롤과 레이아웃 안정성, JavaScript 모듈 로딩을 개선합니다. 커스터마이징 가능한 select는 appearance: base-select와 새로운 스타일링 지점을 제공하면서 키보드 탐색, 유효성 검사, 폼 제출을 유지합니다. 스크롤 앵커링은 기본으로 활성화되며 변형된 앵커를 툴팁과 팝오버가 올바르게 따라가고, position-anchor의 기본값도 auto에서 normal로 바뀝니다. 다시 구현한 ECMAScript 모듈 로더는 top-level await의 실행 순서 문제를 수정하고, WebAssembly에는 JavaScript Promise Integration이 추가됩니다. WebKit이 제공하는 BigInt 수학 API는 Stage 1 제안을 기반으로 하므로, API형태가 바뀔 수 있음을 고려하고 브라우저 간 동작을 검증한 뒤 의존해야 합니다.
Ahmad Shadeed는 여러 줄 레이블 옆에서 아이콘을 수직 중앙 정렬하면 첫 줄이 아니라 줄 사이에 놓일 수 있는 이유를 설명합니다. 고정된 픽셀 이동량은 특정 예시를 고칠 수 있지만 글꼴 크기나 줄 높이가 바뀌면 맞지 않습니다. 대안은 첫 줄의 높이와 정해진 아이콘 크기의 차이로 이동량을 계산하며, calc() 표현식에서 lh 단위를 사용합니다. 아이콘을 위쪽에서 시작해 첫 줄에 맞도록 이동시키고 크기와 축소 동작도 명시합니다. 이 패턴은 한 장의 화면에 맞춘 위치 대신 타이포그래피의 변화에 따라 정렬되게 합니다.
Andy Bell은 실제 체크박스 input과 네이티브 포커스 동작을 유지하면서 커스텀 체크박스를 만듭니다. 감싸는 label이 텍스트와 컨트롤을 연결하고, aria-hidden을 지정한 SVG가 보조 기술에 불필요한 안내를 추가하지 않으면서 체크 표시를 제공합니다. input은 appearance: none과 절대 위치 지정을 사용하며, CSS는 :checked로 아이콘을 전환하고 :has()로 주변 박스를 바꿉니다. 상대 단위인 em과 ex는 컴포넌트가 글자 크기에 맞춰 확대되게 하고, 베이스라인 정렬은 줄바꿈된 레이블의 정렬을 유지합니다. 이 패턴은 라디오 버튼에도 적용할 수 있으며, 체크박스에서 appearance: base와 ::checkmark를 폭넓게 사용할 수 있기 전의 대안입니다.
컨테이너 크기 쿼리는 재사용 컴포넌트가 배정받은 공간에 반응하게 하며, 미디어 쿼리는 페이지 레이아웃과 사용자 환경설정을 담당합니다. Victor Ayomipo는 넓은 데스크톱 화면에서도 좁은 사이드바 안의 카드는 세로 레이아웃이 필요할 수 있음을 보여줍니다. 부모 컨테이너에 이름을 지정하고 container-type: inline-size를 설정하면 @container 규칙으로 자손을 스타일링할 수 있으며, cqi와 clamp()를 조합하면 글자 크기도 컴포넌트 너비를 따릅니다. 글에서는 flex 줄바꿈을 활용하는 우회 기법을 설명하면서 컨테이너는 자신을 조회할 수 없고, 명시적인 크기 없이 container-type: size를 쓰면 높이가 무너질 수 있으며, 쿼리 임계값에는 var()를 사용할 수 없다고 짚습니다. 뷰포트 임계값을 복사하기보다 컴포넌트의 실제 제약을 기준으로 전환 지점을 정해야 합니다.
Kevin Powell은 콘텐츠 래퍼가 최대 너비에 도달한 뒤에도 뷰포트 기반 글자 크기가 계속 커지는 문제를 보여줍니다. 컨테이너 쿼리 단위는 크기를 주변 공간에 맞추지만, 컨테이너가 중첩되면 같은 제목이 서로 다른 너비를 기준으로 계산되는 문제가 생깁니다. 제안하는 기법은 커스텀 속성을 길이로 등록해, 하위 요소가 각자의 컨테이너에서 원래 식을 다시 계산하는 대신 계산된 크기를 상속하게 합니다. 의도적으로 새 로컬 계산이 필요한 곳을 위해 등록하지 않은 크기 계산식도 유지할 수 있습니다. 핵심은 유동적인 글자 크기를 어디에서 계산하고 그 결과를 어디에서 일관되게 유지할지 정한 뒤 중첩 레이아웃에서 동작을 확인하는 것입니다.
Safari 27.0은 83개 기능과 844개 수정을 제공하며, 네이티브 컨트롤과 레이아웃 안정성, JavaScript 모듈 로딩을 개선합니다. 커스터마이징 가능한 select는 appearance: base-select와 새로운 스타일링 지점을 제공하면서 키보드 탐색, 유효성 검사, 폼 제출을 유지합니다. 스크롤 앵커링은 기본으로 활성화되며 변형된 앵커를 툴팁과 팝오버가 올바르게 따라가고, position-anchor의 기본값도 auto에서 normal로 바뀝니다. 다시 구현한 ECMAScript 모듈 로더는 top-level await의 실행 순서 문제를 수정하고, WebAssembly에는 JavaScript Promise Integration이 추가됩니다. WebKit이 제공하는 BigInt 수학 API는 Stage 1 제안을 기반으로 하므로, API형태가 바뀔 수 있음을 고려하고 브라우저 간 동작을 검증한 뒤 의존해야 합니다.
Kevin Powell은 콘텐츠 래퍼가 최대 너비에 도달한 뒤에도 뷰포트 기반 글자 크기가 계속 커지는 문제를 보여줍니다. 컨테이너 쿼리 단위는 크기를 주변 공간에 맞추지만, 컨테이너가 중첩되면 같은 제목이 서로 다른 너비를 기준으로 계산되는 문제가 생깁니다. 제안하는 기법은 커스텀 속성을 길이로 등록해, 하위 요소가 각자의 컨테이너에서 원래 식을 다시 계산하는 대신 계산된 크기를 상속하게 합니다. 의도적으로 새 로컬 계산이 필요한 곳을 위해 등록하지 않은 크기 계산식도 유지할 수 있습니다. 핵심은 유동적인 글자 크기를 어디에서 계산하고 그 결과를 어디에서 일관되게 유지할지 정한 뒤 중첩 레이아웃에서 동작을 확인하는 것입니다.
Ahmad Shadeed는 여러 줄 레이블 옆에서 아이콘을 수직 중앙 정렬하면 첫 줄이 아니라 줄 사이에 놓일 수 있는 이유를 설명합니다. 고정된 픽셀 이동량은 특정 예시를 고칠 수 있지만 글꼴 크기나 줄 높이가 바뀌면 맞지 않습니다. 대안은 첫 줄의 높이와 정해진 아이콘 크기의 차이로 이동량을 계산하며, calc() 표현식에서 lh 단위를 사용합니다. 아이콘을 위쪽에서 시작해 첫 줄에 맞도록 이동시키고 크기와 축소 동작도 명시합니다. 이 패턴은 한 장의 화면에 맞춘 위치 대신 타이포그래피의 변화에 따라 정렬되게 합니다.
Andy Bell은 실제 체크박스 input과 네이티브 포커스 동작을 유지하면서 커스텀 체크박스를 만듭니다. 감싸는 label이 텍스트와 컨트롤을 연결하고, aria-hidden을 지정한 SVG가 보조 기술에 불필요한 안내를 추가하지 않으면서 체크 표시를 제공합니다. input은 appearance: none과 절대 위치 지정을 사용하며, CSS는 :checked로 아이콘을 전환하고 :has()로 주변 박스를 바꿉니다. 상대 단위인 em과 ex는 컴포넌트가 글자 크기에 맞춰 확대되게 하고, 베이스라인 정렬은 줄바꿈된 레이블의 정렬을 유지합니다. 이 패턴은 라디오 버튼에도 적용할 수 있으며, 체크박스에서 appearance: base와 ::checkmark를 폭넓게 사용할 수 있기 전의 대안입니다.
컨테이너 크기 쿼리는 재사용 컴포넌트가 배정받은 공간에 반응하게 하며, 미디어 쿼리는 페이지 레이아웃과 사용자 환경설정을 담당합니다. Victor Ayomipo는 넓은 데스크톱 화면에서도 좁은 사이드바 안의 카드는 세로 레이아웃이 필요할 수 있음을 보여줍니다. 부모 컨테이너에 이름을 지정하고 container-type: inline-size를 설정하면 @container 규칙으로 자손을 스타일링할 수 있으며, cqi와 clamp()를 조합하면 글자 크기도 컴포넌트 너비를 따릅니다. 글에서는 flex 줄바꿈을 활용하는 우회 기법을 설명하면서 컨테이너는 자신을 조회할 수 없고, 명시적인 크기 없이 container-type: size를 쓰면 높이가 무너질 수 있으며, 쿼리 임계값에는 var()를 사용할 수 없다고 짚습니다. 뷰포트 임계값을 복사하기보다 컴포넌트의 실제 제약을 기준으로 전환 지점을 정해야 합니다.
Safari 27.0은 커스터마이징 가능한 select, 자동 스크롤 앵커링, 폭넓은 호환성 수정을 통해 컴포넌트 동작에서 브라우저의 역할을 강화합니다. 커스텀 컨트롤 로직으로 대체하기 전에 브라우저가 제공하는 동작을 기반으로 설계해야 합니다.
이 원칙은 반응형 설계에도 적용됩니다. 컨테이너 크기 쿼리는 컴포넌트가 실제로 받은 공간을 따르게 하고, 미디어 쿼리는 페이지 레이아웃과 사용자 환경설정을 담당합니다. 뷰포트의 전환 지점을 다른 규칙에 복사하기보다 적절한 컨테이너를 선택하고 크기 격리의 영향을 처리하는 것이 핵심입니다.
네이티브 기능은 컨트롤마다 다르므로 새로운 select 스타일링 모델이 체크박스에서도 같은 커스터마이징을 지원한다는 뜻은 아닙니다. Andy Bell의 임시 체크박스 패턴은 실제 input과 포커스 동작을 유지하면서 시각적 표현만 바꾸며, 기반 컨트롤을 버리지 않고 표현을 개선하는 방법을 보여줍니다.
타이포그래피는 더 작은 규모에서 이러한 경계를 드러냅니다. Ahmad Shadeed는 줄 높이로 아이콘을 레이블의 첫 줄에 맞추고, Kevin Powell은 유동적인 글자 크기를 어디에서 계산할지 살펴봅니다. 두 접근은 특정 레이아웃에 맞춘 이동량보다 콘텐츠가 바뀌어도 유지되는 관계를 중시합니다.
핵심 요점
기존 컴포넌트에서 Safari 27.0의 네이티브 select 스타일과 변경된 position-anchor 기본값을 검증하십시오.
컴포넌트가 사용할 수 있는 공간으로 컨테이너 쿼리 전환 지점을 정하고, 페이지 수준의 판단에는 미디어 쿼리를 유지하십시오.
