2025년 디자이너를 위한 새로운 프론트엔드 기능들
(smashingmagazine.com)- 현대 웹 기술의 발전으로 과거에는 JavaScript로 구현해야 했던 많은 작업이 이제 HTML과 CSS로 간단히 가능
- 컴포넌트 중심 스타일링, 부모 요소 스타일링, 상대 색상 정의 등 새로운 기술이 여러 브라우저에서 폭넓게 사용 가능
- 디자이너와 개발자들이 UI 컴포넌트를 더욱 간단하고 효과적으로 제작할 수 있는 방법 제공
CSS 컨테이너 쿼리 및 스타일 쿼리
-
컴포넌트 중심 스타일링 가능
- 컨테이너의 너비 및 스타일 정보를 쿼리하여 CSS 스타일 적용
- 여러 변형을 가진 재사용 가능한 컴포넌트 스타일링에 유용
- 참고: CSS 스타일 쿼리 소개
텍스트 균형 조정 (text-wrap: balance)
-
타이포그래픽 균형 유지
- 제목 및 카드 타이틀 등에서 텍스트가 고르게 분배되도록 자동 계산
- 참고: Ahmad Shadeed의 가이드
폼 입력 필드 자동 크기 조정
-
입력 크기 자동화
- 텍스트 입력 또는 선택 메뉴 크기가 컨텐츠에 맞게 자동으로 조정
- 간단한 CSS 한 줄로 구현 가능
- 참고: Adam Argyle의 설명
숨겨진 콘텐츠 검색 가능 (hidden=until-found)
-
UI 접근성 향상
- 접힌 아코디언 섹션 등 숨겨진 콘텐츠를 페이지 내 검색 및 검색 엔진에서 검색 가능
- 참고: Joey Arhar의 가이드
고해상도 색상 지원 (OKLCH, OKLAB)
-
50% 더 많은 색상 지원
- 사람의 색상 지각을 기반으로 설계된 새로운 색상 스펙
- 디자인 시스템과 그라데이션에 적합
- 참고: Vitaly Friedman의 설명
CSS 상대 색상
-
기존 색상 기반 색상 계산
-
from키워드를 사용하여 색상의 밝기 조정, 보색 계산 등 가능 - 참고: Adam Argyle의 코드 스니펫
-
View Transitions API
-
부드러운 화면 전환
- 기존 화면에서 새로운 화면으로 이동 시 CSS 애니메이션을 활용한 매끄러운 전환 구현
- 단일 문서 또는 두 개의 문서 간 전환 지원
- 참고: Bramus Van Damme의 가이드
CSS 스크롤 스냅
-
정확한 스크롤 경험 제공
- 사용자가 특정 콘텐츠 항목으로 스냅되도록 스크롤 컨테이너를 설정 가능
- 참고: Ahmad Shadeed의 가이드
부모 스타일링 (:has)
-
부모 요소를 자식 요소 상태 기반으로 스타일링
- 부모-자식 관계를 넘어서 다른 요소의 상태에 따라 스타일 조정 가능
- 참고: Josh W. Comeau의 가이드
다른 주목할 기능들
-
입력 상태 스타일링 개선:
:user-valid,:user-invalid로 사용자의 입력 변경 후 피드백 제공 -
모바일 키보드 최적화:
inputmode와enterkeyhint로 가상 키보드 개선 -
<dialog>HTML 요소: 접근 가능한 모달 및 팝오버 구현
결론
- 새롭고 실용적인 프론트엔드 기술은 UI와 UX 디자인에 혁신적 영향을 미침
- 향후 구현될 기능: masonry 레이아웃,
<selectmenu>커스터마이징, 텍스트 박스 정렬 등 - 웹 플랫폼 발전을 위해 노력하는 모든 개발자들에게 감사드리며, 이 글이 프로젝트 및 애플리케이션 개선에 유용하길 바람. 즐거운 작업 되시길!
Safari, Firefox 미구현
- 폼 입력 필드 자동 크기 조정
- 숨겨진 콘텐츠 검색 가능 (hidden=until-found)
Firefox 미구현
- View Transitions API
프론트엔드 신기능은 사실상 크롬의 단독 신기능으로 간주하는게 편합니다.
극단적인 사례로는 OffscreenCanvas처럼 5년씩 걸리는 경우도 있습니다. (크롬 2018, 사파리 2023)
다른 분도 지적하셨다시피 필자가 브라우저간 호환성이나 동작의 일관성은 전혀 고려하지 않네요. 이것 말고도 브라우저 간에 구현이나 동작이 다른 경우가 있어서 덮어놓고 신기능을 선택할 수는 없습니다. 아무리 크롬의 사용률이 높다해도 iOS가 있기 때문에 최소한 사파리에서 잘 동작하는지 정도는 고려해야 합니다