홈

web.dev

2026년 4월 Baseline 월간 요약

원문: April 2026 Baseline monthly digest
 — web.dev
원문은 CC-BY-4.0
 라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.

2026년 Baseline과 접근성

웹을 구축한다는 것은 모두가 사용할 수 있는 경험을 구축하는 것을 의미합니다. A11y Up의 최근 글
은 개발자가 웹 표준에 의존할 때 접근성 요구 사항을 고려하는 것이 더 효과적이라고 주장합니다. 한동안 개발자들은 현재 웹 플랫폼의 일부인 접근 가능한 패턴을 다시 만들기 위해 사용자 정의되고 종종 무거운 JavaScript 솔루션을 출시해 왔습니다. 이러한 맞춤형 솔루션은 때때로 불안정하고 보조 기술에 의해 깨지기 쉬우며 유지 관리가 어렵습니다.
이 글은 웹 플랫폼 기능이 브라우저 간 상호 운용성을 달성함에 따라 접근성을 염두에 두고 개발하는 것을 더 효과적인 작업으로 만든다고 강조합니다. 공통 목표와 사용자 인터페이스 패턴을 달성하기 위해 웹 기능을 사용하면 많은 노력이 절감되며, 스크린 리더 및 키보드 탐색 유틸리티에 직접 올바른 의미 체계가 원활하게 노출됩니다. Baseline은 여기서 가이드 역할을 하며, 웹 기능이 프로젝트에서 평가하고 사용할 수 있을 만큼 성숙한 순간을 신호합니다.

Baseline 신규 이용 가능 기능

이 섹션의 기능은 2026년 4월 기준으로 핵심 브라우저 세트에서 지원되며 이제 Baseline 신규 이용 가능 기능입니다.

CSS 
contrast-color()
함수

동적 테마 엔진과 사용자 정의 가능한 컴포넌트는 개발자에게 고대비 사용자 환경 설정을 수용하기 위해 여러 색상 시스템을 유지하도록 강요했습니다. CSS 
contrast-color()
함수는 이러한 유지 관리 부담을 전적으로 브라우저로 이전합니다. 기본 입력 색상을 함수에 전달하면 엔진이 높은 대비를 이루는 보조 색상을 평가하고 반환하며, 일반적으로 가장 높은 가독성 점수를 제공하는 색상에 따라 검정 또는 흰색으로 매핑됩니다.
.card-header {
  background-color: var(--dynamic-bg-color);
  /* 자동으로 가장 높은 대비의 텍스트 색상으로 해결됩니다. */
  color: contrast-color(var(--dynamic-bg-color));
}
이를 통해 사용자 정의 솔루션이나 유지 관리하기 어려운 CSS 없이도 가독성에 대한 접근성 표준을 충족할 수 있습니다. 중간 톤 색상 선택에 계속 주의해야 하지만, 이 함수는 사용자 환경 설정을 처리하는 데 필요한 보일러플레이트 CSS를 줄여줍니다. MDN의 
contrast-color()
참조 페이지
에서 자세한 내용을 확인할 수 있습니다.

Math.sumPrecise()

표준 루프 또는 
Array.prototype.reduce()
와 같은 메서드를 사용하여 숫자 시퀀스를 합산하면 부동 소수점 정밀도 손실이 발생할 수 있습니다. 이는 중요한 재무 계산 또는 원격 측정 합계에 영향을 미칠 수 있습니다.
Math.sumPrecise()
메서드는 이 문제를 해결합니다. 숫자 이터러블을 수락하고 정밀도 안전 루틴을 실행하여 정확한 합계를 제공합니다. MDN의 
Math.sumPrecise()
문서
에서 메커니즘을 살펴보세요.

Baseline 널리 이용 가능 기능

다음 기능은 Baseline 널리 이용 가능 기능이 되었으며, 이는 프로젝트에서 광범위하게 호환되고 사용할 수 있음을 의미합니다.

<search>
요소

HTML 
<search>
요소는 웹 애플리케이션에서 검색 환경을 집합적으로 나타내는 폼 컨트롤, 필터링 메커니즘 및 제출 유틸리티의 명시적인 래퍼 역할을 합니다.
<search>
  <form action="/site-search">
    <label for="query">문서 검색</label>
    <input type="search" id="query" name="q">
    <button>검색</button>
  </form>
</search>
포함 요소를 
<search>
태그로 전환하면 사용자에게 접근성 이점을 제공합니다. 브라우저는 자동으로 
<form>
요소에 
role="search"
를 지정할 필요 없이 요소에 
search
의 암시적 ARIA 랜드마크 역할을 할당합니다. 이를 통해 스크린 리더가 검색 인터페이스를 식별하고 사용자가 탐색하도록 도울 수 있습니다. MDN의 
<search>
요소 페이지
에서 구현 세부 정보를 읽어보세요.

웹 인증 공개 키 액세스

AuthenticatorAttestationResponse
인터페이스에 대한 직접 속성 추출기 지원이 확대되어 웹 인증(WebAuthn) API를 사용한 비밀번호 없는 인증이 덜 복잡해졌습니다. 
getPublicKey()
및 
getPublicKeyAlgorithm()
과 같은 메서드를 사용하면 브라우저가 원시 이진 데이터를 처리할 필요 없이 공개 키 세부 정보를 추출해 줍니다. MDN의 
AuthenticatorAttestationResponse
페이지
에서 이러한 속성과 사용 방법에 대해 자세히 알아보세요.

String.prototype.isWellFormed()
및 
String.prototype.toWellFormed()

JavaScript 문자열은 UTF-16으로 인코딩되어 유니코드 쌍으로 복잡한 문자 및 이모티콘을 매핑합니다. 문자열을 이를 고려하지 않고 슬라이스하면 대체 쌍의 고립된 절반(단독 대체 문자라고 함)이 남아 잘못 형성된 텍스트가 발생합니다.
isWellFormed()
를 사용하면 개발자가 문자열에 단독 대체 문자가 포함되어 있는지 확인할 수 있으며 부울 값을 반환합니다. 문자열이 유효성 검사에 실패하면 
toWellFormed()
를 호출하여 잘못된 대체 문자를 표준 유니코드 대체 문자(
U+FFFD
)로 바꿀 수 있습니다. 이는 
encodeURI()
와 같은 함수를 호출하기 전에 유용하며, 잘못 형성된 입력을 발견하면 
URIError
를 발생시킵니다. MDN의 
String.prototype.isWellFormed()
문서
에서 이러한 메서드의 작동 방식을 알아보세요.

ARIA 속성 반사

대화형 요소의 접근성 상태를 업데이트하려면 표준 DOM 속성 메서드(예: 
element.setAttribute('aria-expanded', 'true')
)를 통한 왕복이 필요했습니다. ARIA 속성 반사는 접근성 속성을 객체 속성으로 미러링하여 이를 단순화합니다.
Element
인터페이스는 ARIA 속성을 
element.ariaExpanded
, 
element.ariaChecked
, 
element.ariaHidden
과 같은 인스턴스 속성으로 직접 반사합니다. 이를 통해 점 표기법 구문을 사용하여 접근성 상태를 수정할 수 있습니다.
// 깔끔하고 읽기 쉬운 상태 업데이트
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
ARIA 대상을 JavaScript 속성으로 처리하면 UI 프레임워크와 상태 관리 도구가 보조 컨텍스트를 더 안정적으로 조정할 수 있으며, 스크린 리더 컨텍스트를 실제 애플리케이션 상태와 일치시키는 데 도움이 됩니다. 반사된 속성의 전체 목록은 MDN의 
Element
인스턴스 속성 가이드
를 확인하세요.

마무리

Baseline과 관련하여 누락된 사항이 있다면 알려주시면 다음 호에 포함되도록 하겠습니다! Baseline에 대한 질문이 있거나 피드백을 제공하고 싶으시면 이슈 트래커
에 이슈를 제출해 주십시오.

목차

목록으로