무슨 일이 있었나요?
프론트엔드 개발자라면 한 번쯤 글을 읽어봤을 Josh W. Comeau가 Interop 2027을 주제로 CSS가 앞으로 어디로 가는지 짚는 글을 썼어요. 제목은 거창하게 'CSS의 미래'인데요, 이 얘기를 제대로 이해하려면 Interop이라는 프로젝트부터 알아야 해요. 요즘 CSS가 예전보다 훨씬 덜 괴로운 이유가 바로 여기 있거든요.
Interop이 뭐냐면
Interop은 주요 브라우저 개발사들이 모여서 '올해는 이 기능들을 모든 브라우저에서 똑같이 동작하게 만들자'고 약속하는 연례 프로젝트예요. 애플(WebKit), 구글(Chromium), 마이크로소프트, 모질라(Gecko)에 Igalia, Bocoup 같은 회사들이 참여해요. 2021년에 Compat 2021로 시작했고, 2022년부터 Interop이라는 이름으로 매년 이어지고 있어요.
운영 방식이 꽤 재밌어요. 보통 가을에 개발자와 브라우저 회사들한테서 '이 기능 좀 브라우저마다 맞춰주세요' 하는 제안을 받고, 논의를 거쳐서 이듬해 초에 그해 집중할 영역(focus area)을 정해요. 그다음엔 web-platform-tests라는 공용 테스트 모음으로 브라우저별 통과율을 재서 대시보드로 공개하고요. 일종의 공개 성적표라서 어느 브라우저가 뒤처지는지 누구나 볼 수 있어요.
효과는 이미 증명됐어요. 캐스케이드 레이어(@layer), 서브그리드, 컨테이너 쿼리, 부모 선택자라고 불리는 :has() 같은 기능들이 Interop을 거치면서 주요 브라우저에 빠르게 다 들어왔거든요. 예전 같으면 한 브라우저에만 들어가고 나머지는 몇 년씩 소식이 없었을 기능들이에요.
다음 차례로 꼽히는 CSS 기능들
Interop 2027에 정확히 뭐가 들어갈지는 제안과 논의를 거쳐야 정해지는데요, 요즘 CSS 커뮤니티에서 '다음은 이거다' 하고 꼽는 기능들은 꽤 분명해요.
앵커 포지셔닝(Anchor Positioning)은 툴팁이나 드롭다운 메뉴를 특정 버튼 옆에 딱 붙여주는 기능이에요. 지금은 Floating UI 같은 자바스크립트 라이브러리로 위치를 계산하는 경우가 많은데, 이걸 CSS만으로 할 수 있게 되는 거예요. 버튼에 anchor-name: --menu-btn을 주고 메뉴에 position-anchor: --menu-btn을 주면 둘이 연결돼요. 메뉴가 화면 끝에 닿으면 반대쪽으로 뒤집는 것도 CSS가 알아서 해줘요.
스크롤 기반 애니메이션(Scroll-driven Animations)은 스크롤 위치에 따라 애니메이션이 진행되게 하는 기능이에요. 읽기 진행률 바나 스크롤하면 스르륵 나타나는 카드 같은 효과를 animation-timeline: scroll() 한 줄로 만들 수 있어요. 스크롤 이벤트 리스너를 달고 프레임마다 계산하던 코드가 필요 없어지니까 성능에도 좋아요.
뷰 트랜지션(View Transitions)은 화면이 바뀔 때 부드러운 전환 애니메이션을 넣어주는 기능이에요. 특히 페이지를 이동하는 멀티 페이지 사이트에서도 앱처럼 자연스럽게 전환할 수 있다는 게 큰 장점이고요.
이것 말고도 디자인을 마음대로 바꿀 수 있는 <select> 요소, CSS 안에서 조건문을 쓰는 if() 함수와 사용자 정의 함수, 핀터레스트처럼 벽돌 쌓듯 엇갈려 배치하는 메이슨리 레이아웃까지 있어요. CSS가 점점 진짜 프로그래밍 언어 쪽으로 가고 있는 게 보여요.
업계 흐름에서 보면
재밌는 건 이 기능들 대부분이 원래 자바스크립트 라이브러리가 하던 일을 브라우저가 가져오는 것이라는 점이에요. jQuery가 하던 DOM 선택을 querySelector가 가져간 것처럼, 이제는 위치 계산이나 스크롤 애니메이션, 화면 전환 같은 일이 CSS로 넘어오고 있어요. 번들 크기가 줄고, 메인 스레드 부담이 줄고, 접근성 처리도 브라우저가 기본으로 챙겨주니까 장점이 많아요.
같이 알아두면 좋은 개념이 Baseline이에요. 어떤 기능이 주요 브라우저에 모두 들어가면 '신규 지원(Newly available)', 그로부터 30개월이 지나면 '널리 지원(Widely available)'으로 표시해 주는 기준이에요. MDN이나 Can I Use에서 이 배지를 볼 수 있어요. Interop이 하는 일은 결국 더 많은 기능을 더 빨리 Baseline에 올려놓는 거예요.
한국 개발자에게 주는 시사점
한국 서비스는 챙길 게 좀 더 많아요. 아이폰 사용자가 많아서 사파리 지원이 특히 중요하고, 삼성 인터넷이나 카카오톡, 네이버 앱 같은 인앱 브라우저(웹뷰)까지 신경 써야 하거든요. 그래서 새 CSS 기능이 모든 곳에 들어올 때까지 무작정 기다리는 것보다 점진적 향상(Progressive Enhancement) 전략이 현실적이에요. @supports (anchor-name: --a)처럼 지원 여부를 먼저 확인해서, 지원하는 브라우저에서는 새 기능을 쓰고 아닌 곳에서는 기존 방식으로 동작하게 만드는 거예요.
팀 차원에서 '우리는 Baseline 널리 지원 기능까지는 자유롭게 쓴다' 같은 기준을 정해두면 코드 리뷰에서 소모적인 논쟁이 확 줄어요. 뷰 트랜지션처럼 지원 안 하는 브라우저에서는 애니메이션만 빠지고 기능은 그대로 동작하는 것들은 지금 도입해도 부담이 거의 없고요.
마무리
한 줄 정리: CSS는 자바스크립트 라이브러리가 하던 일을 하나씩 가져오는 중이고, Interop이 그 속도를 끌어올리고 있어요.
여러분은 Interop 2027에 어떤 CSS 기능이 꼭 들어갔으면 좋겠나요? 실무에서 브라우저 호환성 때문에 포기했던 기능이 있다면 그것도 공유해 주세요.
🔗 출처: Hacker News