새로운 CSS 기능을 소개하는 글은 넘치도록 많습니다. 저희 블로그에도 :has(), 컨테이너 쿼리, View Transitions 같은 기능을 다룬 글이 수십 편 쌓여 있죠. 그런데 정작 제작 현장에서 가장 자주 나오는 질문은 따로 있습니다. "그래서 그거, 지금 실제 프로젝트에 넣어도 되나요?"
이 질문에 대한 공통 언어가 몇 해 전부터 자리를 잡았습니다. Baseline입니다.
"쓸 수 있다"와 "써도 된다"는 다른 말입니다
예전에는 이 판단을 각자 알아서 했습니다. 호환성 표를 열어 브라우저 아이콘이 초록색인지 눈으로 훑고, 개발자는 "됩니다"라고 하고, 며칠 뒤 클라이언트의 오래된 아이패드에서 레이아웃이 무너집니다. 표는 기술적으로 동작하는가만 알려줄 뿐, 지금 이 사이트의 방문자 구성에서 안전한가는 알려주지 않기 때문입니다.
Baseline은 그 간극을 메우려고 만들어진 기준입니다. 브라우저 벤더와 MDN, 웹 커뮤니티가 함께 정의했고, 지금은 MDN 문서 상단과 주요 호환성 사이트에 배지 형태로 표시됩니다.
Baseline은 두 개의 선을 긋습니다
Newly available — 방금 전 주자가 도착했다
Chrome, Edge, Firefox, Safari 네 엔진의 최신 안정 버전 모두에서 그 기능이 동작하기 시작한 시점입니다. 데스크톱과 모바일을 함께 봅니다. 즉 "마지막 브라우저가 방금 따라잡았다"는 뜻이지, "사용자들 기기에 이미 깔려 있다"는 뜻이 아닙니다. 여기서 오해가 많이 생깁니다.
Widely available — 그로부터 30개월
Newly 시점에서 30개월이 지나면 Widely로 승격됩니다. 이 정도면 브라우저를 잘 업데이트하지 않는 기기까지 대부분 교체·갱신됐다고 보는 기간입니다. 별도 대비책 없이 기본값으로 써도 무난한 구간이죠.
실무에서 저희가 쓰는 세 가지 기준
- Widely available이면 그냥 씁니다. 별도 논의 없이 기본 코드에 넣습니다.
- Newly available이면 "없어도 괜찮은 곳"에만 씁니다. 부드러운 페이지 전환, 미세한 호버 효과처럼 빠져도 내용 전달에 지장이 없는 층입니다. 구형 브라우저에서는 그냥 애니메이션 없이 조용히 넘어갑니다.
- Baseline 진입 전이면 실서비스에는 넣지 않습니다. 대신 사내 실험 페이지에서 먼저 굴려봅니다.
핵심은 두 번째입니다. 신기능을 구조가 아니라 장식에 배치하면, 지원 여부와 무관하게 사이트는 항상 멀쩡하게 동작합니다. 반대로 레이아웃의 뼈대를 신기능에 맡기면 한 브라우저만 어긋나도 페이지가 통째로 무너집니다.
Baseline이 답해주지 않는 것
Baseline은 전 세계 평균을 기준으로 한 신호일 뿐, 특정 사이트의 실제 방문자 구성까지 알지는 못합니다. 관공서나 기업 내부망을 주로 상대하는 사이트라면 통제된 구형 환경의 비중이 훨씬 높습니다. 그래서 저희는 Baseline 배지를 본 다음 반드시 한 번 더 확인합니다. 애널리틱스의 브라우저·버전 분포입니다. 여기서 예상 밖의 숫자가 나오는 프로젝트가 생각보다 자주 있습니다.
또 하나, Baseline은 "동작하는가"만 말합니다. 접근성이 충분한지, 스크린 리더가 제대로 읽는지는 별개의 검증 항목입니다.
정리하면
새 기능을 빨리 도입하는 것 자체가 실력은 아닙니다. 도입 시점을 설명할 수 있는 기준을 갖는 것이 실력입니다. Baseline은 그 기준을 개발자와 클라이언트가 같은 단어로 이야기할 수 있게 만들어줍니다.
CYAN은 사이트를 만들 때 어떤 기능을 어떤 근거로 채택했는지, 지원하지 않는 환경에서는 무엇이 대신 보이는지를 함께 정리해 전달합니다. 화면이 예쁜 것과 모든 사용자에게 예쁜 것은 다른 문제니까요.
