State of CSS 2026, 새 기능보다 브라우저 지원이 더 큰 변수예요

State of CSS 2026, 새 기능보다 브라우저 지원이 더 큰 변수예요

State of CSS 2026 썸네일

CSS에 새 기능이 빠르게 늘면서 개발자는 외부 도구를 추가하기 전에 브라우저 지원부터 따져야 해요. 4,902명이 참여한 State of CSS 2026에서는 Anchor Positioning이 가장 관심을 받은 새 기능으로 꼽혔어요. 실무 도입을 늦추는 이유로는 브라우저 호환성이 다시 앞에 나왔어요. 1

핵심 요약

구분	조사 결과	개발자가 확인할 점
새 기능	Anchor Positioning 사용률이 전년보다 15%포인트 늘었어요	지원 대상 브라우저와 대체 레이아웃을 먼저 정해야 해요
보편화된 기능	`:has()` 83.7%, `aspect-ratio` 81.3%, CSS Nesting 70.6%가 사용 경험 상위권이에요	예전 우회 코드를 줄일 수 있는지 점검할 만해요
도구 선택	Tailwind CSS가 가장 많이 쓰였고, 프레임워크를 쓰지 않는 응답이 Bootstrap보다 많았어요	프로젝트 규모와 팀 규칙에 맞춰 도구를 고를 여지가 커졌어요
AI 활용	CSS 코드의 AI 생성 비중은 평균 28%였어요	생성 결과의 반응형 동작과 접근성을 직접 확인해야 해요

1. CSS 기능은 빨리 늘지만, 실무 도입 속도는 브라우저가 정해요

Anchor Positioning은 다른 요소를 기준점으로 삼아 팝오버나 툴팁의 위치를 정할 수 있는 기능이에요. 올해 처음 써 본 기능 가운데 가장 선호하는 기능으로 168표를 받았어요. 사용률도 전년보다 15%포인트 올라 조사 대상 중 가장 큰 증가 폭을 보였어요. 하지만 브라우저 호환성 때문에 사용을 피한 기능에서도 123건으로 1위였어요. 관심과 실제 배포 사이에 간격이 남아 있다는 뜻이에요. 2

이미 널리 쓰이는 기능은 수치가 더 분명해요. `:has()` 사용 경험은 83.7%, `aspect-ratio`는 81.3%, CSS Nesting은 70.6%였어요. 긍정 평가도 `:has()` 51.8%, CSS Nesting 48.6%, `aspect-ratio` 48.1%로 높았어요. 복잡한 선택자 우회, 비율 유지용 패딩 트릭, 중첩을 위한 전처리 코드처럼 오래 유지해 온 패턴을 CSS 자체 기능으로 바꿀 수 있는 범위가 넓어졌어요. 1

도구 생태계도 함께 움직였어요. Tailwind CSS는 1,854명이 사용해 프레임워크 가운데 1위를 지켰어요. 프레임워크를 쓰지 않는다는 응답은 1,042명으로 Bootstrap 982명보다 많았어요. CSS-in-JS를 쓰지 않는다는 응답도 2,073명으로 가장 많았어요. 다만 Sass와 SCSS 사용자는 2,032명, PostCSS 사용자는 1,284명이라 기존 도구가 곧바로 사라진다고 보기는 어려워요. 새 CSS 기능이 늘면서 프로젝트마다 필요한 도구의 범위를 다시 정하는 흐름에 가까워요. 2

AI 코딩 도구가 CSS를 완전히 대신하는 모습도 아직 멀어요. 응답자가 밝힌 CSS 코드의 AI 생성 비중은 평균 28%였고, 3,732명 가운데 980명은 0%라고 답했어요. 전체 응답자 기준으로는 26%가 CSS를 전혀 AI로 생성하지 않았어요. CSS는 코드 한 줄의 문법보다 화면 크기, 브라우저, 접근성, 기존 디자인 시스템이 함께 맞아야 해요. 생성된 코드가 그럴듯해 보여도 실제 화면에서 확인하는 과정이 빠지기 어려운 이유예요. 1

조사 결과를 전체 웹 개발자의 통계로 확대해서 읽으면 안 돼요. 설문은 2026년 5월 15일부터 6월 29일까지 공개 방식으로 진행됐고, 응답자를 무작위로 뽑지 않았어요. 이전 설문 참가자와 소셜 미디어 유입이 응답자 구성에 영향을 줬어요. 비율 자체보다 CSS에 관심이 많은 개발자가 어떤 기능을 먼저 시험하고 어디에서 막히는지 보는 자료로 쓰는 편이 맞아요. 2

왜 중요한가요

프론트엔드 팀은 새 기능의 인기 순위보다 지원 브라우저 표를 먼저 봐야 해요. Anchor Positioning이나 View Transition API를 도입한다면 지원하지 않는 환경에서 어떤 화면을 보여 줄지 함께 정해야 해요. 기능 탐지는 가능해도 제품의 핵심 동작이 특정 브라우저에서 사라지면 배포하기 어려워요. 2

기존 코드 정리에는 더 직접적인 기회가 있어요. `:has()`, `aspect-ratio`, CSS Nesting처럼 사용 경험이 높은 기능부터 살펴보면 자바스크립트 보조 코드나 전처리 의존성을 줄일 후보를 찾을 수 있어요. 모든 도구를 한꺼번에 걷어내기보다는 브라우저 지원 범위와 빌드 환경을 확인한 뒤 작은 컴포넌트부터 바꾸는 편이 안전해요.

728x90

새 기능을 따라가는 부담도 무시하기 어려워요. 일반적인 CSS 고충 가운데 인지 과부하가 86건으로 가장 많이 언급됐어요. 팀이 모든 기능을 즉시 배우기보다 실제 문제와 연결된 기능만 도입 목록에 올리면 학습 비용을 줄일 수 있어요. 설문에서 새 기능을 따라가는 수준의 평균이 5점 만점에 2.8점이었다는 점도 이런 현실을 보여 줘요. 1

참고 자료

1. State of CSS 2026 — GeekNews
2. State of CSS 2026 — Devographics