4월 웹 플랫폼 업데이트 공부 정리 | contrast-color()가 드디어 됐다

web.dev 블로그에 4월 웹 플랫폼 정리 글이 올라왔다. Chrome 147과 Firefox 150이 이번 달 안정 버전으로 올라오면서 Baseline에 진입한 기능들이 꽤 됐다.

읽으면서 특히 눈에 걸렸던 건 contrast-color()였다. 디자인 작업할 때 배경색 바꾸면 텍스트 색도 수동으로 맞춰야 하는 게 늘 번거롭다고 느꼈는데, 이걸 CSS 레벨에서 처리할 수 있다는 점이 흥미로웠다.

1️⃣ 이게 뭐냐?

contrast-color()는 배경 색상을 넣으면 그 위에서 가장 읽기 좋은 색(검정 또는 흰색)을 반환해 주는 CSS 함수다. 사용자가 배경색을 직접 고를 수 있는 UI라면, 텍스트 색을 별도로 맞춰줄 필요가 없어진다.

color: contrast-color(var(--bg-color));

이전에도 일부 브라우저에서 실험적으로 지원하긴 했는데, 이번에 모든 주요 브라우저에서 표준화됐다는 의미인 것 같다. Baseline에 올라왔다는 건 이제 진짜 쓸 수 있다는 신호인 셈이다.

Chrome 147에선 element.startViewTransition()이 임의 DOM 요소에도 노출됐다. 기존엔 document.startViewTransition()으로 페이지 전체 전환만 가능했는데, 이제 특정 요소 단위로 전환 애니메이션을 줄 수 있게 됐다. 여러 전환을 동시에 실행하거나 클립·변형을 요소에 직접 상속하는 것도 가능해졌다고 한다.

border-shape도 새로 나왔다. 다각형이나 원형 같은 비직사각형 테두리를 CSS로 만들 수 있게 해주는 속성인데, SVG 클리핑 없이 비정형 테두리를 만들 수 있다는 방향이 꽤 흥미로운 것 같다.

2️⃣ 내가 든 생각

contrast-color()가 접근성 이슈를 코드 레벨에서 자동으로 처리해준다는 방향이 흥미로웠다. 디자이너 입장에서 보면, 색 조합을 선택할 때 텍스트 가독성을 직접 챙겨야 하는 부담이 있는데, 이 함수가 있으면 그 책임이 CSS로 내려가는 셈이다.

👉🏻 다만 “검정 또는 흰색” 이분법이 실제 접근성을 충분히 보장하는지는 좀 의문이었다. 고대비 맥락에선 충분할 것 같은데, 일반 UI에서 가독성 기준이 정말 두 가지로만 해결되나 싶었다. 아직 깊이 파보진 않아서 뭔가 더 있을 수도 있겠지만.

View Transition API가 요소 범위까지 내려온 것도 꽤 흥미로운 변화인 것 같다. 전에 페이지 전체 전환을 써봤을 때 원하는 부분만 자연스럽게 처리하기 어렵다는 느낌이 있었는데, 요소 단위가 되면 그 문제가 좀 해소될 것 같다는 생각이 들었다.

💡 그런데 이렇게 되면 컴포넌트마다 독립적인 전환 애니메이션을 가질 수 있게 되는 건데, 오히려 UX 일관성을 관리하기가 더 어려워지는 건 아닐까? 카드, 모달, 탭이 전부 다른 전환을 가지면 화면 전체 흐름이 산만해질 수도 있겠다 싶었다.

3️⃣ 앞으로 어떻게 쓸까?

contrast-color()는 테마 전환이나 사용자 커스텀 색상 기능이 있는 UI에서 먼저 써봐야겠다는 생각이 들었다. 색상 변수만 바꿔도 텍스트 가독성이 자동으로 따라오는 구조를 만들 수 있을 것 같아서, 다음 프로젝트에서 시도해볼 만할 것 같다.

View Transition API의 요소 단위 지원은 써봐야 알겠지만, 지금보다 훨씬 실용적으로 쓸 수 있을 것 같다. 전에는 페이지 단위 전환이라는 제약 때문에 넣기 어려웠던 부분이 있었는데.

⭐️ 마지막으로, 웹 플랫폼 업데이트를 공부하며 느낀 점

이번에 훑으면서 든 생각은, 웹 플랫폼에서 중요한 건 기능이 새로 나왔다는 사실보다 “언제 Baseline에 진입했는지를 계속 챙기는 일”인 것 같다는 거다. 기능이 존재한다는 걸 알고 있어도, 실제로 쓸 수 있는 상태가 됐는지를 놓치면 실무에서 한참 늦게 따라가게 된다.

---

참고 원문: New to the web platform in April