2026년 4월 Baseline 월간 다이제스트

Baseline 월간 다이제스트에 오신 것을 환영합니다. 2026년 4월에는 일부 CSS 기능과 정밀 수학 유틸리티(precision math utilities)를 새롭게 사용할 수 있게 되었으며, 구조적 시맨틱 요소(structural semantic elements) 및 기타 Web API 추가 사항들이 널리 보급되었고, 개발자 커뮤니티의 여러 소식도 함께 전해드립니다.

2026년의 Baseline과 접근성 (accessibility)

웹을 위해 구축한다는 것은 모든 사람이 사용할 수 있는 경험을 만드는 것을 의미합니다. 최근 A11y Up의 글에 따르면, 개발자가 웹 표준(web standards)에 의존할 때 접근성 요구 사항을 고려하는 것이 더욱 효과적이라고 주장합니다. 그동안 엔지니어들은 현재 웹 플랫폼의 일부가 된 접근 가능한 패턴을 재현하기 위해, 커스텀 방식의 무거운 JavaScript 솔루션을 배포해 왔습니다. 이러한 맞춤형(bespoke) 솔루션은 때때로 취약하며, 보조 기술(assistive tech) 환경에서 깨지기 쉽고, 유지 관리하기가 어렵습니다.

이 기사는 웹 플랫폼 기능이 교차 브라우저 상호 운용성(cross-browser interoperability)을 달성함에 따라, 접근성을 염두에 둔 개발이 더욱 효과적인 작업이 된다는 점을 강조합니다. 공통의 목표와 사용자 인터페이스(UI) 패턴을 달성하기 위해 웹 기능을 사용하면 많은 번거로운 작업이 처리되며, 스크린 리더(screen readers)와 키보드 탐색 유틸리티에 적절한 시맨틱(semantics)을 직접 매끄럽게 노출할 수 있습니다. Baseline은 여기서 가이드 역할을 하며, 웹 기능이 프로젝트에서 평가하고 사용할 수 있을 만큼 충분히 성숙한 시점을 알려줍니다.

Baseline 신규 사용 가능 기능

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

CSS contrast-color()

function

동적 테마 엔진(Dynamic theme engines)과 커스터마이징 가능한 컴포넌트들로 인해, 개발자들은 고대비(high contrast)를 선호하는 사용자 설정을 수용하기 위해 여러 색상 시스템을 유지 관리해야만 했습니다. CSS contrast-color() 함수는 이러한 유지 관리 부담을 완전히 브라우저로 넘깁니다. 함수에 기본 입력 색상을 전달하면, 엔진이 이를 평가하여 높은 대비를 가진 보조 색상을 반환합니다. 이는 일반적으로 가독성 점수가 가장 높은 색상에 따라 검은색 또는 흰색으로 매핑됩니다.

.card-header {
background-color: var(--dynamic-bg-color);
/* 자동으로 가장 대비가 높은 텍스트 색상으로 결정됨 */
...

이를 통해 별도의 커스텀 솔루션이나 유지보수가 어려운 CSS 없이도 가독성을 위한 접근성 표준을 충족할 수 있습니다. 중간 톤(mid-tone) 색상 선택에 여전히 주의를 기울여야 하지만, 이 함수는 이러한 사용자 편의를 처리하는 데 필요한 상용구(boilerplate) CSS를 줄여줍니다. `contrast-color()`에 대한 자세한 내용은 MDN 참조 페이지에서 확인할 수 있습니다.

.

`Math.sumPrecise()`

표준 루프나 `Array.prototype.reduce()`와 같은 메서드를 사용하여 숫자 시퀀스를 합산하면

부동 소수점 정밀도 손실(floating-point precision loss)이 발생할 수 있습니다. 이는 중요한 금융 계산이나 텔레메트리(telemetry) 합계에 영향을 미칠 수 있습니다.

`Math.sumPrecise()`

메서드는 이 문제를 해결합니다. 이 메서드는 숫자의 반복 가능한 객체(iterable)를 받아 정밀도가 보장된 루틴을 실행하여 정확한 합계를 제공합니다. `Math.sumPrecise()`에 대한 작동 원리는 MDN 문서에서 확인해 보세요.

## Baseline 광범위하게 사용 가능한 기능 (widely available features)

다음 기능들이 Baseline의 '광범위하게 사용 가능한(widely available)' 상태가 되었습니다. 즉, 이제 여러분의 프로젝트에서 폭넓은 호환성을 가지며 사용할 수 있음을 의미합니다.

`<search>`

요소

HTML `<search>`

요소는 웹 애플리케이션에서 검색 경험을 집합적으로 나타내는 폼 컨트롤(form controls), 필터링 메커니즘, 제출 유틸리티를 위한 명시적인 래퍼(wrapper) 역할을 합니다.

<search> <form action="/site-search"> <label for="query">Search documentation</label> ... ```

포함하는 요소를 <search>

태그로 전환함으로써 사용자에게 접근성 이점을 제공할 수 있습니다. 브라우저는 이 요소에 search라는 암시적인 ARIA 랜드마크 역할(landmark role)을 자동으로 할당하므로, <form>

요소에 role="search"를 명시할 필요가 없습니다. 이를 통해 스크린 리더가 검색 인터페이스를 식별하고 사용자가 검색 기능으로 이동하는 것을 도울 수 있습니다. <search>

요소에 대한 구현 세부 사항은 MDN 페이지에서 읽어보세요.

Web Authentication 공개 키 액세스 (public key access)

Web Authentication (WebAuthn) API를 통해 비밀번호 없는(passwordless) 환경으로 전환하는 과정이 AuthenticatorAttestationResponse 인터페이스의 직접 속성 추출기(direct property extractors)에 대한 폭넓은 지원 덕분에 이제 훨씬 덜 복잡해졌습니다. getPublicKey() 및 getPublicKeyAlgorithm()과 같은 메서드를 사용하면, 브라우저가 가공되지 않은 이진 데이터(raw binary data)를 직접 다룰 필요 없이 공개 키(public key) 세부 정보를 대신 추출해 줍니다. 이러한 속성들과 사용법에 대한 자세한 내용은 AuthenticatorAttestationResponse의 MDN 페이지에서 확인하세요.

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

JavaScript 문자열은 UTF-16으로 인코딩되며, 이는 Unicode 쌍 내의 복잡한 문자와 이모지를 매핑합니다. 만약 이를 고려하지 않고 문자열을 슬라이스(slice)하면, 고립된 서로게이트 쌍의 절반(lone surrogates라고 불림)이 남게 되어 잘못된 형식의 텍스트(malformed text)가 생성됩니다.

isWellFormed()를 사용하면 개발자가 문자열에 고립된 서로게이트(lone surrogates)가 포함되어 있는지 확인할 수 있으며, 불리언(boolean) 값을 반환합니다. 문자열이 유효성 검사에 실패하면 toWellFormed()를 호출하여 잘못된 서로게이트를 표준 Unicode 대체 문자(U+FFFD)로 교체할 수 있습니다. 이는 잘못된 입력을 만났을 때 URIError를 발생시키는 encodeURI()와 같은 함수를 호출하기 전에 유용합니다. 이러한 메서드들이 어떻게 작동하는지는 String.prototype.isWellFormed()의 MDN 문서에서 알아보세요.

ARIA 속성 리플렉션 (ARIA attribute reflection)

대화형 요소(interactive elements)의 접근성 상태(accessibility states)를 업데이트하려면 element.setAttribute('aria-expanded', 'true')와 같이 표준 DOM 속성 메서드를 통한 왕복 과정(roundtrips)이 필요했습니다. ARIA 속성 리플렉션(ARIA attribute reflection)은 접근성 속성을 객체 속성으로 미러링함으로써 이 과정을 단순화합니다.

Element 인터페이스는 ARIA 속성을 element.ariaExpanded, element.ariaChecked, element.ariaHidden과 같은 인스턴스 속성으로 직접 리플렉션합니다. 이를 통해 점 표기법(dot-notation) 구문을 사용하여 접근성 상태를 수정할 수 있습니다.

// 깔끔하고 읽기 쉬운 상태 업데이트
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";

ARIA 대상(targets)을 JavaScript 속성(properties)으로 취급하면 UI 프레임워크와 상태 관리 도구(state management tools)가 보조 공학적 맥락(assistive contexts)을 더욱 안정적으로 조정할 수 있으며, 스크린 리더(screen reader)의 맥락을 실제 애플리케이션 상태와 일치시키는 데 도움이 됩니다. 반영된 속성(reflected properties)의 전체 목록을 확인하려면 Element 인스턴스 속성(instance properties)에 관한 MDN 가이드를 참조하세요.

마치며

Baseline과 관련된 내용 중 저희가 놓친 것이 있다면 알려주세요. 다음 호에서 반드시 다루도록 하겠습니다! Baseline에 대한 질문이 있거나 피드백을 제공하고 싶다면, 저희 이슈 트래커(issue tracker)에 이슈(issue)를 등록해 주세요.