Interop 2027에 제안된 CSS 기능들과, 향후 1년 안에 CSS가 어떻게 달라질 수 있는지 살펴봅니다.
지난 몇 년 동안 모든 주요 브라우저 벤더(Google, Apple, Microsoft, Mozilla, 그리고 Igalia와 Bocoup)는 웹 기술 전반의 범용 브라우저 지원을 개선하기 위한 프로젝트인 Interop(새 탭에서 열림)를 함께 진행해 왔습니다. 이는 눈부시게 성공적인 노력입니다. 하나의 중점 분야가 Interop에 추가되면, 대개 1년 안에 모든 주요 브라우저에서 거의 100% 지원에 도달합니다. ✨
CSS Subgrid가 좋은 예입니다. Subgrid는 완전히 새로운 레이아웃을 가능하게 하는 CSS Grid의 매우 강력한 확장 기능입니다. Firefox에는 2019년에 구현되었지만, 다른 브라우저에서는 수년간 큰 진전이 없었습니다. 그러다 Interop 2023에 추가되었고, 그해 말에는 모든 최신 브라우저에서 폭넓게 사용할 수 있게 되었습니다.
Y축은 각 브라우저에서 subgrid와 관련된 테스트가 통과한 비율을 보여 줍니다. 검은색 “Interop” 선은 모든 브라우저에서 통과한 테스트를 보여 줍니다.
2026년 말에 접어든 지금, Interop 2027이 계획되고 있습니다. Mozilla 팀은 가장 많이 요청된 기능에 투표할 수 있도록 순위 시스템(새 탭에서 열림)을 만들었습니다. 이들은 순위 데이터를 활용해 내년 Interop에 무엇을 포함할지 결정할 계획입니다!
이 블로그 글에서는 제가 투표한 상위 10개 기능을 자세히 살펴보며, 향후 1년 안에 CSS가 어떤 모습이 될지 조금 미리 보여 드리고자 합니다. 오늘부터 사용할 수 있는 작은 팁과 요령도 몇 가지 소개하겠습니다!
현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
가장 흥미로운 아이디어 중 하나는 CSS에 함수를 추가하자는 제안(새 탭에서 열림)입니다.
/* Define a function: */
@function --gradient-to-transparent(--color, --direction: bottom) {
result: linear-gradient(
to var(--direction),
var(--color),
transparent;
);
}
/* Invoke it: */
.elem {
background: --gradient-to-transparent(red);
}
/* …which produces: */
.elem {
background: linear-gradient(
to bottom,
red,
transparent;
);
}
JavaScript에 익숙하다면 꽤 친숙하게 느껴질 것입니다. @function으로 새 함수를 정의하고 result로 반환값을 지정합니다.
이 기능으로 할 수 있는 멋진 일이 정말 많습니다. 개인적으로 가장 관심 있는 활용 사례는 극좌표와 직교좌표를 변환하는 기능입니다. 이는 제 Whimsical Animations 강의(새 탭에서 열림)에서 반복해서 사용하는 개념이기도 합니다.
@function --translate-polar(--angle, --distance) {
result: translate(
calc(cos(var(--angle)) * var(--distance)),
calc(sin(var(--angle)) * var(--distance))
);
}
/* Move this element 100px at a 45° angle: */
.particle {
transform: --translate-polar(45deg, 100px);
}
저에게는 상당히 “공상 과학”처럼 느껴지지만, 이미 Chromium 브라우저에 구현되어 있습니다. Interop 2027에 추가된다면 머지않아 폭넓게 사용할 수 있게 될 가능성이 아주 높다고 생각합니다!
corner-shape로 만드는 베벨과 스쿼클현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
CSS에서는 border-radius 속성을 사용해 DOM 노드의 모서리를 둥글게 만들고 둥근 사각형을 생성할 수 있습니다. 이 속성은 각 모서리에 4분의 1 원을 더해 4개의 직선 변을 연결하는 방식으로 작동합니다.
corner-shape 속성은 DOM 노드의 4개 변을 연결하는 _대안적인 방식_을 탐구합니다. 몇 가지 새로운 옵션을 제공합니다.
코드 플레이그라운드
코드 편집기:
결과
처음 이 속성을 들었을 때 가장 기대했던 것은 squircle이었습니다. 익숙하지 않다면, 스쿼클은 초타원을 사용해 둥근 모서리를 생성하는 대체 알고리즘입니다. Apple은 더 부드럽고 완만한 가장자리를 만들어 내기 때문에 수년간 이를 활용해 왔습니다.
하지만 corner-shape를 한동안 만져 본 뒤에는 corner-shape: bevel을 아주 자주 쓰게 되었습니다. 비디오 게임 / 공상 과학 UI를 만들기에 훌륭합니다. 아래는 제가 작업해 온 사이드 프로젝트의 작은 미리보기이며, 수많은 corner-shape: bevel을 사용했습니다.
기술적으로는 clip-path나 마스크를 이용해 이와 비슷한 작업을 할 수 있었지만, 그런 기능과 달리 corner-shape는 실제로 border-box의 형태를 변경합니다. 즉, 테두리, 윤곽선, 상자 그림자가 변경된 모서리 형태를 올바르게 따라갑니다!
또한 이 속성은 제가 2026년 10월에 이 글을 쓰는 시점에 Firefox/Safari에서 사용할 수 없지만, 지금부터 사용해도 합리적이라고 생각합니다. 점진적 향상에 완벽한 기능입니다!
border-shape의 무한한 가능성현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
corner-shape 외에도 border-shape(새 탭에서 열림)에 관한 별도 제안이 있습니다. 이는 본질적으로 한 단계 더 낮은 수준의 기능으로, 테두리를 직접 그릴 수 있게 해 줍니다.
최근 뉴스레터 호에서 이 속성을 자세히 다뤘으므로 여기서 너무 반복하지는 않겠습니다. 요약하면, border-shape는 직선, 호, 베지어 곡선을 사용해 원하는 어떤 테두리 형태든 만들 수 있게 해 줍니다.
최근 이 속성을 이용해 상단에 큰 원형 스쿱이 있는 다음 카드를 그렸습니다.
corner-shape처럼 이 속성은 요소의 실제 테두리 상자를 변경하므로, 테두리/윤곽선/그림자가 올바르게 그 형태를 따릅니다. 원하는 형태를 그린 다음 흰색 테두리와 검은색 윤곽선을 추가하여 위에 보인 효과를 만들었습니다!
이 클립에서 한 것처럼 서로 다른 테두리 형태 사이를 애니메이션으로 전환할 수도 있습니다.
이 속성에 관해서는 관련 뉴스레터 호에서 조금 더 알아볼 수 있습니다.
현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
최근 저는 가장 흥미로운 최신 CSS 기능 중 하나인 Anchor Positioning에 관한 블로그 글을 게시했습니다. 이 기능은 실제로 Interop 2026에서 우선순위로 선정되었으며, 이제 널리 사용할 수 있습니다!
Anchor Positioning API는 한 요소를 다른 요소에 앵커링할 수 있게 해 줍니다. 예를 들어 떠 있는 툴팁 요소를 트리거에 앵커링하면, 트리거가 페이지 어디에 있든 툴팁은 항상 트리거에 연결된 상태를 유지합니다.
이런 종류의 문제를 직접 해결해 본 적이 있다면, 놀랄 만큼 까다롭다는 것을 아실 겁니다. 예를 들어 툴팁을 앵커 위에 띄우고 싶을 수 있지만, 앵커가 뷰포트 상단 근처에 있다면 어떻게 해야 할까요?
이 버튼에 대한 추가 정보를 보여 주는 툴팁입니다.
툴팁이 넉넉하게 들어맞습니다.
이 버튼에 대한 추가 정보를 보여 주는 툴팁입니다.
툴팁이 잘리고 있습니다!
원래 Anchor Positioning API는 이 문제를 CSS로 쉽게 해결하는 데 필요한 도구의 _대부분_을 제공했습니다. 대체 위치를 지정할 수 있습니다. 대상 요소가 앵커 위에 들어맞지 않으면 자동으로 아래쪽으로 뒤집을 수 있습니다.
유일하게 빠진 것은 대상이 뒤집혔는지 여부를 알 수 있는 기능이었습니다. 대상 요소가 현재 앵커 위에 있는지 아래에 있는지, 기본 위치를 쓰는지 대체 위치를 쓰는지 CSS에서 알 방법이 없었습니다. 툴팁의 경우 앵커를 가리키는 작은 돌출부를 보통 추가하고 싶기 때문에 이것이 문제가 됩니다.
Anchor Positioning API의 “Level 2” 버전에는 대상 요소가 대체 위치를 사용 중인지 확인할 수 있는 새로운 유형의 컨테이너 쿼리가 포함됩니다. 제 Anchor Positioning 블로그 글에서 자세히 알아보거나, Interop 2027 제안(새 탭에서 열림)을 확인해 보세요.
솔직히 말하면 저는 이 제안(새 탭에서 열림)을 들어 본 적이 없었고, 제가 확인한 바로는 어떤 브라우저에도 구현되어 있지 않습니다. caniuse에도 올라와 있지 않아서 그 작은 위젯 중 하나를 보여 줄 수도 없습니다!
그런데도 이 기능을 보는 순간 꼭 필요하다는 생각이 들었습니다. 😂
아시겠지만, CSS의 inherit 키워드는 해당 속성이 일반적으로 상속되지 않더라도 부모의 값을 아래로 전달할 수 있게 해 줍니다.
코드 플레이그라운드
코드 편집기:
결과
이는 값을 재사용하는 데 유용한 작은 요령이지만, 자주 완전히 작동하지 않는다는 사실을 발견하게 됩니다. 예를 들어 중첩된 테두리 반지름이 있다고 가정해 봅시다.
코드 플레이그라운드
코드 편집기:
결과
중첩된 테두리 반지름이 올바르게 보이려면 내부 반지름의 둥글기 정도를 줄여야 합니다. 따라서 상속된 값을 정확히 사용하고 싶은 것은 아닙니다. 그 값을 변환하고 싶습니다.
바로 여기서 제안된 inherit() 함수가 등장합니다. 상속된 값을 가져와 calc()를 사용해 수정할 수 있게 해 줍니다.
p {
border-radius: calc(inherit() - 4px);
}
이 기능이 얼마나 초기 단계인지 고려하면 Interop 2027에 포함될지는 조금 의외일 것 같습니다. 하지만 언젠가 이 기능을 만나게 되기를 바랍니다! 매우 유용해 보입니다. 😄
현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
스크롤 기반 애니메이션에 관한 제 블로그 글에서는 스크롤을 통해 키프레임 애니메이션을 스크러빙하는 방법을 살펴봅니다. 예를 들어 요소가 뷰포트를 가로질러 이동할 때 서서히 나타나도록 만들 수 있습니다.
스크롤 기반 애니메이션은 Interop 2026의 일부(새 탭에서 열림)였으며, 모든 브라우저에 성공적으로 구현되었습니다. 하지만 스크롤-기반 애니메이션 외에도 스크롤-트리거 애니메이션에 관한 별도 제안이 있습니다.
스크롤 트리거 애니메이션의 목표는 근접 센서가 작동하는 것처럼 사용자가 특정 지점까지 스크롤했을 때 키프레임 애니메이션을 실행하는 것입니다. 그 시점부터 애니메이션은 지정한 지속 시간에 걸쳐 정상적으로 실행됩니다.
현재는 JavaScript의 IntersectionObserver API를 사용해 스크롤 트리거 애니메이션을 구현할 수 있지만, 다소 번거롭습니다. 각각 고유한 활용 사례가 있으므로, 스크롤 기반 애니메이션과 스크롤 트리거 애니메이션 모두에 CSS를 사용할 수 있게 되면 무척 좋을 것입니다.
Bramus의 훌륭한 글(새 탭에서 열림)에서 스크롤 트리거 애니메이션을 더 알아볼 수 있습니다.
현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
현재 저는 동적인 그리드 기반 레이아웃과 관련된 작업을 하고 있습니다. 항목은 데스크톱과 모바일에서 아주 다르게 배치됩니다.
데스크톱 레이아웃
모바일 레이아웃
이는 반응형 CSS의 훌륭한 점 중 하나이지만, 안타까운 부작용이 있습니다. 탭 순서는 시각적 순서가 아니라 항상 _DOM 순서_를 따릅니다. 따라서 누군가 보조 기술을 사용해 요소 사이를 탐색한다면, 화면 크기에 따라 레이아웃이 크게 달라져도 탐색 순서는 항상 동일합니다.
데스크톱에서는 왼쪽의 Redacted 목록이 첫 번째 시각적 항목이지만, 모바일에서는 큰 빨간 버튼이 첫 번째 항목입니다. DOM에서 먼저 오는 요소가 처음으로 포커스를 받게 되며, 이는 결국 일정 비율의 사용자에게는 잘못된 순서가 됩니다.
다행히 새로운 reading-flow 속성이 이 문제의 해결책을 제공하며, Interop 2027 제안(새 탭에서 열림)도 있습니다.
기본 아이디어는 탭 순서가 여러 시각적 순서 중 하나를 따르도록 지정할 수 있다는 것입니다.
.grid {
display: grid;
reading-flow: grid-rows;
}
CSS Grid와 Flexbox 모두에 사용할 값이 있으며, 더 세밀한 제어가 필요하다면 reading-order 속성으로 HTML의 tabIndex와 비슷하게 사용자 지정 순서를 만들 수 있습니다.
이 속성은 제가 개인적으로 존경하는 영웅 중 한 명인 Rachel Andrew가 꾸준히 지지해 온 기능입니다. 그녀의 reading-flow 블로그 글에서 더 읽어 볼 수 있습니다.
interpolate-size와 calc-size()를 사용한 키워드 크기 애니메이션현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
웹에서 오랫동안 문제가 되었던 점은 auto 같은 키워드 값 사이에서는 애니메이션을 적용할 수 없다는 것이었습니다. interpolate-size 속성은 이 문제를 해결하며, 관련된 calc-size() 함수와 함께 Interop 2027 제안(새 탭에서 열림)이 올라와 있습니다.
이 기능의 가장 흔한 활용 사례는 접을 수 있는 아코디언형 UI를 만들기 위해 height: 0과 height: auto 사이를 애니메이션으로 전환하는 것입니다.
코드 플레이그라운드
코드 편집기:
결과
사용 중인 브라우저는 아직 interpolate-size 속성을 지원하지 않습니다. 지원되는 브라우저에서는 다음과 같이 보입니다.
인정하건대 이는 transition-behavior처럼 틈새 기능이지만 지원은 잘 되는 다른 CSS가 필요한 다소 복잡한 예제입니다. 하지만 핵심은 interpolate-size: allow-keywords가 이런 종류의 전환을 가능하게 한다는 점입니다.
이 제안은 꽤 오랫동안 논의되어 왔고 2024년부터 Chrome에 구현되어 있으므로, Interop 2027에 포함되기를 바랍니다!
아직 모든 브라우저에서 사용할 수는 없지만, 점진적 향상으로 오늘부터 사용할 수 있습니다. 지원되지 않는 브라우저에 짧은 지연이 추가될 수 있으므로 transition은 반드시 @supports 쿼리 뒤에 두세요.
현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
CSS Grid 레이아웃을 독특하게 만드는 요소 중 하나는 그리드 자식이 전적으로 CSS에서 정의한 행/열을 사용해 배치된다는 점입니다. 다른 모든 레이아웃 모드에서는 요소가 다른 요소를 사용해 배치됩니다! 예를 들어 Table 레이아웃에서는 모든 그리드 셀에 연관된 <td> 또는 <th> 요소가 있습니다.
CSS Grid에는 많은 장점이 있지만, 단점 중 하나는 그리드 셀 사이에 테두리를 추가하기가 쉽지 않다는 것입니다. 그리드 셀이 비어 있다면 border: 1px solid를 적용할 요소가 없습니다!
간격 장식 제안(새 탭에서 열림)은 그리드 자체에 테두리와 유사한 문법을 사용할 수 있게 해 주는 새로운 CSS 속성 집합을 도입합니다. 살펴보세요.
코드 플레이그라운드
코드 편집기:
결과
사용 중인 브라우저는 아직 rule 속성을 지원하지 않습니다. 지원되는 브라우저에서는 다음과 같이 보입니다.
border처럼 rule 속성은 선의 너비, 색상, 스타일(대시/점선/실선)을 지정할 수 있는 단축 속성입니다. 각 행 또는 열 사이에만 선을 그리고 싶다면 row-rule과 column-rule도 사용할 수 있습니다.
현재 브라우저 지원 현황
Chrome 155 및 Edge 154에서 지원
Firefox 157에서 미지원
Safari 27에서 미지원
position: sticky로 작업할 때, 요소가 현재 “고정된” 상태인지 알 수 있으면 좋겠다고 생각한 적이 있나요? 예를 들어 고정 헤더가 뷰포트 상단에 고정될 때 배경색을 바꾸고 싶을 수 있습니다.
이 제안(새 탭에서 열림)은 position: sticky 요소가 일반적인 흐름 내 위치에서 뷰포트에 고정되는 상태로 전환될 때 일치하는 새로운 유형의 컨테이너 쿼리를 구현하기 위한 것입니다. 살펴보세요.
코드 플레이그라운드
코드 편집기:
결과
사용 중인 브라우저가 아직 이 기능을 지원하지 않는다면 다음과 같이 보입니다.
흥미롭게도 이 새 API는 고정 위치 지정만을 위한 것이 아닙니다. 모든 종류의 스크롤 관련 상태를 쿼리하는 데 사용할 수 있습니다. 예를 들어 스크롤 컨테이너가 상단/하단까지 스크롤되었는지 알 수 있으며, 이는 스크롤을 나타내는 그라데이션을 표시하는 데 유용할 수 있습니다.
코드 플레이그라운드
코드 편집기:
결과
위로 스크롤할 수 있으면 scrollable: top이 일치하고, 이에 따라 콘텐츠 상단 위에 떠 있는 의사 요소를 표시합니다. 맨 위까지 스크롤하면 scrollable: top이 더 이상 적용되지 않으므로 그라데이션은 숨겨집니다.
지원되는 브라우저에서는 다음과 같이 보입니다.
Interop의 7년 차로 접어들며, 이 프로젝트가 웹에 엄청난 성공을 거두었다는 점은 부정할 수 없습니다. 이 성공을 계속 이어 가고 있어서 정말 기쁩니다!
지금은 웹 개발자에게 조금 이상한 시기라는 것을 알고 있고, 많은 사람이 이제 이런 종류의 일에 신경 쓸 필요가 있는지 궁금해합니다. 모든 일을 LLM에 맡긴다면, 여전히 최신 CSS 기능을 계속 따라가야 할까요?
개인적으로는 그 어느 때보다 중요하다고 생각합니다. LLM의 학습 데이터 중 상당수가 수년 전의 것이므로, 이들이 최신 CSS 기능을 사용할 것이라고 기대할 수는 없습니다. 이 글에서 소개한 기능 대부분은 오늘날 점진적 향상으로 사용할 수 있으며, 과거의 사례가 지침이 된다면 그중 많은 기능이 곧 폭넓게 제공될 것입니다.
최고의 사용자 경험을 구축하려면 에이전트가 최신 웹 기능을 활용하도록 이끌어야 하며, 그러려면 우리 스스로 그 기능들을 알아야 합니다! 올해 초 뉴스레터 호에서 이 점을 다뤘습니다. 에이전트 시대에도 깊이 있는 기술 전문성은 여전히 엄청나게 가치 있습니다.
마지막으로, 여러분이 원하는 항목의 순위를 매겨 보시기를(새 탭에서 열림) 강력히 권합니다! 이 목록에는 이 블로그 글에 포함하기에는 적합하지 않았던 Temporal 같은 흥미로운 JavaScript API를 비롯해 훌륭한 제안이 무척 많습니다.
2026년 10월 22일