"자바스크립트인 줄" 미래의 CSS에 추가될 충격적인 신기능들 모음

요약 유명 웹 개발 블로거 조시 코뮤(Josh W. Comeau)가 차세대 웹 브라우저 표준 프로젝트인 'Interop 2027'에 제안된 흥미로운 신규 CSS 기능들을 소개했습니다. Interop은 구글, 애플, 마이크로소프트, 모질라 등 주요 브라우저 개발사들이 참여해 브라우저 간 웹 기술 호환성을 1년 내에 100% 가깝게 끌어올리는 프로젝트로, 과거 'CSS Subgrid' 같은 주요 기능도 이를 통해 모든 브라우저에 빠르게 도입된 바 있습니다. 현재 2027년도 프로젝트를 앞두고 모질라가 투표를 진행 중인 가운데, 작성자가 가장 주목한 기능 중 하나는 바로 'CSS 함수(@function)'입니다. 자바스크립트처럼 CSS 자체에서 함수를 정의하고 반환값(result)을 받아 사용할 수 있는 기능으로, 극좌표계를 직교좌표계로 변환하는 등의 복잡한 계산식이나 반복 스타일링을 획기적으로 줄여줄 수 있습니다. 이미 크로미움 계열 브라우저에는 구현되어 있어 도입 가능성이 높게 점쳐집니다. 또 다른 주목할 만한 기능은 박스 모서리를 다양하게 변형할 수 있는 'corner-shape'입니다. 기존의 단순 둥근 모서리(border-radius)를 넘어, 애플 제품 디자인에서 자주 쓰이는 스쿼클(squircle) 형태나 게임 및 SF 느낌의 각진 모서리(bevel), 노치(notch) 등을 손쉽게 구현할 수 있습니다. 기존에 클리핑 마스크를 써야 했던 방식과 달리 실제 테두리 영역(border-box) 자체를 바꾸기 때문에 그림자(box-shadow)나 테두리 선도 모양에 맞춰 자연스럽게 적용됩니다. 크로미움 브라우저에서 먼저 시험 도입되고 있는 이들 기능이 Interop 표준으로 채택되면 향후 웹 디자인 생태계가 크게 바뀔 것으로 기대됩니다.