2025년에 놓쳤을 가능성이 있는 5가지 강력한 Web Platform 기능
Source: Dev.to
개요
아래에서는 각 기능에 대한 간단한 요약, 브라우저 지원 현황, 핵심 API 세부 사항, 그리고 실용적인 사용 사례를 확인할 수 있습니다.
1. moveBefore() — 마침내, 진정한 DOM 이동
지원
- Chrome 133+
- Firefox 144+
- Safari (개발 중)
무엇을 하는가
moveBefore()는 요소를 상태를 유지한 채 새로운 위치로 이동합니다. appendChild()나 insertBefore()와 달리 다음을 보존합니다:
- 애니메이션 및 전환 진행 상황
- 포커스와 활성 상태
- 전체 화면 모드
- 팝오버 열림/닫힘 상태
- 모달 상태
예시
// 기존 방식: 상태가 파괴됨
newParent.insertBefore(element, referenceNode);
// 새로운 방식: 상태가 유지됨 ✨
newParent.moveBefore(element, referenceNode);if ('moveBefore' in Element.prototype) {
mainContent.moveBefore(videoPlayer, null);
} else {
// 구형 브라우저용 폴백
mainContent.appendChild(videoPlayer);
}실제 사용 사례: 모바일에서 사이드바에 있던 비디오 플레이어가 메인 콘텐츠 영역으로 이동하면서도 재생이 중단되지 않는 반응형 레이아웃 구축.
2. CSS Custom Highlight API — DOM 수술 없이 하이라이트
지원
2025년 6월 기준 베이스라인 (Chrome, Edge, Safari, Firefox 140+)
무엇을 하는가
JavaScript에서 텍스트 범위를 정의하고, CSS에서 스타일링하며 DOM을 건드리지 않습니다. 요소를 삽입하는 방식으로 인한 레이아웃 스러싱을 없애줍니다.
예시
// 텍스트를 찾아 Range 생성
const range = new Range();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);
// 하이라이트 등록
const highlight = new Highlight(range);
CSS.highlights.set('search-result', highlight);::highlight(search-result) {
background-color: #fef08a;
color: #1e1e1e;
}왜 중요한가
- DOM 변형 제로 → 레이아웃 스러싱 제로
- 여러 범위가 하나의 하이라이트 이름을 공유 가능
- 요소 경계를 넘어선 하이라이트 지원
- 검색‑타입 UI에 최적
팁: 하나의 Highlight 객체에 여러 Range 인스턴스를 담을 수 있어, 하나의 CSS 규칙으로 모든 검색 결과를 강조할 수 있습니다.
3. field-sizing: content — 한 줄로 자동 확대 폼 필드
지원
- Chrome 123+
- Edge
- Safari 26.2+
무엇을 하는가
폼 컨트롤이 내용에 맞춰 자동으로 커지고 줄어들어, JavaScript 리사이즈 핸들러가 필요 없게 됩니다.
기본 사용법
textarea,
input,
select {
field-sizing: content;
}크기 제한
textarea {
field-sizing: content;
min-block-size: 3lh; /* 최소 3줄 */
max-block-size: 12lh; /* 최대 12줄 */
}
input {
field-sizing: content;
min-inline-size: 10ch;
max-inline-size: 40ch;
}지원 요소
<textarea><input>(text, email, url 등)<select>(드롭다운 및 멀티‑셀렉트)
점진적 향상: 이 속성을 지원하지 않는 브라우저는 고정 크기 필드를 그대로 보여주므로 별도의 JavaScript 폴백이 필요 없습니다.
4. sibling-index()와 sibling-count() — CSS가 드디어 위치를 알다
지원
- Chrome 138+
- Firefox (개발 중)
무엇을 하는가
sibling-index()는 형제 요소들 중 현재 요소의 0부터 시작하는 인덱스를 반환합니다.sibling-count()는 형제 요소 전체 개수를 반환합니다.
예시: 계단식 애니메이션
.card {
animation: fade-in 0.3s ease-out backwards;
animation-delay: calc(sibling-index() * 100ms);
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
}예시: 개수를 모르는 동일 너비 열
.tab {
width: calc(100% / sibling-count());
}창의적인 사용 사례
- 계단식 애니메이션
- 아이템 간 동적 색상 그라디언트
- 아이템 수에 따라 변하는 반응형 그리드 레이아웃
- 삼각함수를 활용한 원형 배치
/* 아이템 수에 관계없이 무지개 그라디언트 */
.item {
--hue: calc(360 / sibling-count() * (sibling-index() - 1));
background: hsl(var(--hue) 70% 60%);
}5. CSS Anchor Positioning — JavaScript 없이 툴팁 만들기
지원
- Chrome 125+
- Safari 26+
- Firefox (2025년 말 예상)
무엇을 하는가
이름이 지정된 앵커를 기준으로 요소를 배치하고, 오버플로우가 발생하면 자동으로 뒤집어 줍니다.
기본 사용법
.trigger {
anchor-name: --my-trigger;
}
.tooltip {
position: fixed;
position-anchor: --my-trigger;
position-area: top;
}암시적 앵커링 (Chrome 133+)
<button popover>Hover me</button>
<div popover>I'm anchored automatically!</div>[popover] {
position-area: bottom span-left;
margin: 0;
}브라우저가 버튼과 팝오버 사이에 자동으로 관계를 만들어 주므로 anchor-name을 직접 지정할 필요가 없습니다.
먼저 어떤 것을 도입해야 할까요?
field-sizing: content부터 시작하세요.
- 위험 제로: 지원되지 않는 브라우저는 기존 고정 필드로 표시됩니다.
- JavaScript 제로: 자동 리사이즈 핸들러를 제거할 수 있습니다.
- 즉각적인 UX 개선: 폼이 더 반응적으로 느껴집니다.
- CSS 한 줄: 최소 노력으로 최대 효과를 얻을 수 있습니다.
그 다음으로는 CSS Anchor Positioning을 도입하면 툴팁, 드롭다운, 팝오버 UI를 크게 개선할 수 있습니다.
마무리
웹 플랫폼은 이제 수년간 JavaScript로 해결해 왔던 일들을 점점 더 네이티브하게 제공하고 있습니다. 상태를 보존하는 이동, 자동 크기 조절 필드, 선언형 위치 지정은 단순히 편리함을 넘어 성능·접근성·유지보수성 측면에서도 큰 장점을 제공합니다.
이 기능들은 지금 바로 안정적인 브라우저에 포함되어 있습니다. 플래그도 없고 폴리필도 필요 없습니다(다만 moveBefore()와 형제 함수에 대한 폴백은 현명한 선택일 수 있습니다).
가장 기대되는 간과된 기능은 무엇인가요? 아래 댓글로 알려 주세요.