크롬 135: `::scroll-button()` 및 `::scroll-marker()`로 자바스크립트 없는 스크롤 UI 구현 가능

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자, 특히 자바스크립트 의존도를 줄이고자 하는 UI/UX 개발자

핵심 요약

• ::scroll-button() 및 ::scroll-marker()는 자바스크립트 없이 스크롤 UI 구현 가능
• 접근성, 키보드 지원, 스타일링을 CSS 파일로만 처리할 수 있음
• 크롬 135+에서 지원되며, Edge, Firefox, Safari는 아직 미지원

섹션별 세부 요약

1. 새로운 CSS 의사요소 소개

• ::scroll-button(start)와 ::scroll-button(end)는 스크롤 방향에 따라 좌우/상하 버튼을 생성
• ::scroll-marker()는 스크롤 스냅 포인트의 위치를 시각적 인디케이터로 표시
• 예시: content: '◀';와 content: '▶';로 방향 버튼 스타일링 가능

2. 주요 기능 및 장점

• 접근성: 스크린 리더 및 키보드 지원 내장 (ARIA 설정 불필요)
• 성능 최적화: 자바스크립트 없이 작동 → 페르포먼스 향상, 번들 크기 감소
• CSS 기반 스타일링: position, transform 등으로 자유롭게 디자인 가능

3. 브라우저 지원 현황

• 크롬 135+: 전체 지원
• Edge (크로미움 기반): 플래그 활성화 필요 (chrome://flags/#enable-experimental-web-platform-features)
• Firefox, Safari: 아직 미지원

4. 실무 적용 고려사항

• 프로그레시브 엔한스먼트 전략 필수 (기본 기능은 CSS로, 브라우저 호환성 확보를 위해 자바스크립트 보조)
• 라이브러리 대체 가능성: 풍부한 라이브러리 없이도 스크롤러, 슬라이더 구현 가능

결론

• ::scroll-button()과 ::scroll-marker()는 접근성과 성능을 동시에 개선하는 혁신적인 CSS 기능
• 크롬 135 이상 사용 시 즉시 적용 가능, 다른 브라우저는 플래그 또는 점진적 업그레이드 필요
• 자바스크립트 의존도 감소로 웹 앱의 가볍고 유연한 개발이 가능해짐