2026 State of CSS 결과로 본 CSS 생태계 anchor positioning, has(), 그리고 AI 사용률의 진실

2026 State of CSS, 뭐가 달라졌나

매년 Sacha Greif가 진행하는 State of CSS 설문 결과가 공개됐어요. 이번 결과에서 가장 눈에 띄는 건 CSS-Tricks가 웹 플랫폼 리소스 사용 순위 3위에 올랐다는 점입니다. MDN, Can I Use 같은 절대 강자들 바로 뒤에 블로그 하나가 이름을 올렸다는 건, 그만큼 Guides와 Almanac 섹션에 공을 들였다는 뜻이죠.

실무자 입장에서 이번 설문은 단순한 인기 투표가 아니라 **"지금 CSS로 무엇이 가능해졌는가"**를 보여주는 지표예요. 특히 anchor positioning과 :has()의 약진은 앞으로의 마크업/스타일 전략을 바꿔놓을 만한 신호입니다.

근거자료: 2026 State of CSS & State of Devs 설문 결과

설문의 세부 항목을 뜯어보면 실무에 바로 참고할 만한 숫자들이 꽤 나옵니다. 아래에서 하나씩 짚어볼게요.

핵심 지표 3가지: 만족도, 신기능, AI 사용률

1) CSS 만족도: 5점 만점에 4점

숫자만 보면 정체된 것 같지만, 사실 이건 **"CSS 르네상스가 안정기에 접어들었다"**는 신호로 읽는 게 맞아요. 새 기능이 쏟아지는데도 불만이 폭발하지 않는다는 건, 학습 곡선과 생산성 사이의 균형이 잡혀가고 있다는 뜻이거든요.

2) 최애 신기능: anchor positioning vs :has()

1위와 2위가 anchor positioning과 **:has()**로 접전이었어요. 재미있는 건 :has()가 "신기능"으로 분류되긴 했지만, 가장 많이 사용된 기능에서도 1위를 차지했다는 점입니다. 즉, 이미 실무에 깊숙이 들어와 있다는 거죠.

/* anchor positioning으로 툴팁 위치 자동 정렬 (JS 불필요) */
.tooltip-trigger {
  anchor-name: --trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

/* :has()로 부모 요소를 자식 상태에 따라 스타일링 */
.card:has(img.hero) {
  grid-template-rows: 240px 1fr;
}

.form-field:has(input:invalid) {
  border-color: #e5484d;
}

특히 anchor positioning은 툴팁, 드롭다운, 팝오버 같은 UI에서 JavaScript 의존도를 크게 줄여줍니다. 예전엔 Popper.js나 Floating UI를 붙였어야 했던 자리인데, 이제 CSS만으로 해결되는 케이스가 늘고 있어요.

3) AI 코드 생성 사용률: "가끔 쓰는 사람"이 대세

설문 응답자 중 AI를 0~50% 비율로 사용한다는 응답이 3,031명, 50% 이상 사용은 721명이었어요. 표면적으로는 "AI를 보조 도구로만 쓴다"는 의견이 압도적입니다.

다만 이 숫자는 해석에 주의가 필요해요. 설문에 응하는 개발자층 자체가 AI 의존도가 낮은 편일 가능성이 크거든요. 실제로 회사에서 AI 코드 어시스턴트를 강제로 쓰는 팀은 이런 설문에 잘 응답하지 않죠.

주의할 점과 실무 적용 팁

anchor positioning, 지금 도입해도 될까?

결론부터 말하면 프로덕션 도입은 아직 신중하게 접근하는 게 좋아요. Chrome 계열은 안정적이지만 Safari/Firefox의 지원 범위를 반드시 확인해야 합니다. 폴백 전략은 이렇게 잡으면 됩니다.

/* 기능 감지 후 안전하게 적용 */
@supports (anchor-name: --x) {
  .tooltip {
    position-anchor: --trigger;
    top: anchor(bottom);
  }
}

/* 미지원 브라우저용 폴백 */
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

:has()는 이제 사실상 표준

:has()는 이미 주요 브라우저에서 모두 지원되기 때문에 적극적으로 쓰셔도 됩니다. 다만 주의할 점은 성능이에요. :has()는 부모-자식 관계를 역방향으로 탐색하기 때문에, DOM 트리가 깊고 넓은 페이지에서 남용하면 스타일 재계산 비용이 커질 수 있습니다. 리스트 아이템 수백 개에 :has()를 걸어두는 패턴은 피하는 게 좋아요.

한국 개발 생태계에서의 적용 맥락

국내 SI/에이전시 환경에서는 레거시 브라우저 지원 요구가 여전히 발목을 잡는 경우가 많아요. 특히 관공서, 금융권 프로젝트에서는 anchor positioning 같은 최신 스펙을 그대로 쓰기 어렵습니다. 이런 환경이라면 :has()처럼 이미 폭넓게 지원되는 기능부터 단계적으로 도입하고, anchor positioning은 사내 어드민이나 신규 서비스처럼 브라우저 통제가 가능한 영역에서 먼저 검증해보는 걸 추천해요.

또 하나, 국내 프론트엔드 채용 공고를 보면 여전히 jQuery나 부트스트랩 기반 유지보수 수요가 많습니다. 최신 CSS를 학습할 때는 "이 기능이 레거시 코드베이스에 어떻게 점진적으로 이식될 수 있는가"까지 함께 고민하는 습관이 실무에서 큰 차이를 만듭니다.

정리: 2026년 CSS, 어디에 투자할까

이번 설문이 던지는 메시지는 명확해요.

• anchor positioning과 :has()는 반드시 익혀두세요. 툴팁/팝오버/조건부 레이아웃에서 JS를 걷어낼 수 있습니다.
• AI 코드 생성은 "보조 도구"로 쓰는 게 현실적입니다. 50% 이상 의존하는 개발자는 소수라는 통계가 이를 뒷받침해요.
• 만족도 4.0은 안정기 진입의 신호입니다. 새 기능 러시가 끝나고 실무 적용 단계로 넘어왔다는 뜻이죠.

다음 단계로는 CSS Color Level 4(oklch(), color-mix())와 Container Queries를 함께 파보시길 권합니다. 이번 설문에서도 색상 관련 기능들이 개별적으로는 강한 지지를 받았는데, 이들을 조합하면 디자인 시스템 구축 방식 자체가 달라집니다.

함께 보면 좋은 글

• Azure Chaos Studio로 프로덕션 장애를 예측하는 카오스 엔지니어링 실전 가이드
• Holotron-12B: NVIDIA Nemotron 기반 컴퓨터 사용 AI 모델의 추론 효율 2배 향상

그리고 아직 안 하셨다면 State of Devs 설문도 참여해보세요. 코드 얘기가 아니라 "당신"에 대한 설문이라 부담 없이 몇 분이면 끝납니다.