interpolate-size 기준

interpolate-size는 CSS transition이나 animation에서 숫자 길이와 intrinsic size keyword 사이를 보간할 수 있게 하는 속성입니다. 예전에는 height: 0에서 height: auto로 자연스럽게 전환하려고 임시 최대 높이, JavaScript 측정, transform 효과 같은 우회가 자주 필요했습니다. 이 속성은 그런 상황 중 일부를 CSS 값 단계에서 더 직접적으로 표현하게 해 줍니다.

결론부터 말하면, 접히는 패널이나 내용 길이가 달라지는 카드처럼 auto, max-content, fit-content 같은 내용 기반 크기로 열리는 UI에는 interpolate-size: allow-keywords를 검토할 수 있습니다. 다만 2026년 10월 3일 기준 MDN은 이 기능을 Limited availability이자 experimental로 표시하므로, 공개 서비스의 핵심 흐름에서는 지원 브라우저와 fallback을 먼저 확인해야 합니다.

무엇을 해결하는 속성인가

CSS transition은 두 값 사이의 중간값을 계산할 수 있어야 자연스럽게 움직입니다. 100px에서 300px로 바뀌는 값은 중간값을 만들기 쉽지만, 0에서 auto로 바뀌는 값은 내용에 따라 크기가 정해지므로 일반적인 숫자 보간처럼 처리하기 어렵습니다.

interpolate-size는 이 문제를 해결하기 위해 명시적인 opt-in을 둡니다. allow-keywords를 지정하면 <length-percentage> 값과 일부 intrinsic size keyword 사이의 보간을 허용합니다. 기본값은 numeric-only이며, 이 기본값에서는 intrinsic size keyword를 보간하지 않습니다.

.accordion {
  height: 0;
  overflow: clip;
  transition: height 180ms ease;
}

.accordion.is-open {
  height: max-content;
}

.accordion-area {
  interpolate-size: allow-keywords;
}

핵심은 interpolate-size가 크기 값을 직접 지정하는 속성이 아니라는 점입니다. 실제 닫힘과 열림 크기는 height, width, flex-basis 같은 속성에서 정하고, interpolate-size는 그 전환에서 keyword 보간을 허용할지 결정합니다.

어떤 값 사이를 전환할 수 있나

MDN 문서 기준으로 현재 opt-in 대상은 auto, min-content, max-content, fit-content, 그리고 flex-basis처럼 컨테이너 크기와 연결되는 content입니다. 중요한 제한은 한쪽 끝이 <length-percentage>여야 한다는 점입니다. 즉 0px에서 auto, 2.5rem에서 max-content 같은 전환은 목표에 맞지만, min-content에서 max-content처럼 keyword끼리의 전환을 모두 해결해 주는 기능은 아닙니다.

전환	판단	이유
0px -> auto	검토 가능	숫자 길이와 intrinsic keyword 조합입니다.
2.5rem -> max-content	검토 가능	고정 높이에서 내용 전체 높이로 여는 UI에 맞습니다.
min-content -> max-content	부적합	두 끝이 모두 intrinsic keyword입니다.
scaleY(0) -> scaleY(1)	다른 문제	transform 전환이며 레이아웃 크기 자체를 보간하지 않습니다.

어디에 선언하는 것이 좋을까

interpolate-size는 상속되는 속성입니다. 문서 전체에서 같은 정책을 쓰려면 :root에 선언할 수 있지만, 그러면 하위 요소 전체에 영향을 줍니다. 특정 컴포넌트나 레이아웃 구역에서만 intrinsic size 전환을 허용하고 싶다면 해당 컨테이너에 좁게 선언하는 편이 더 예측하기 쉽습니다.

:root {
  /* 문서 전체에 허용 */
  interpolate-size: allow-keywords;
}

.disclosure-list {
  /* 필요한 구역에만 허용 */
  interpolate-size: allow-keywords;
}

상속된다는 점은 편리하지만, 동시에 코드 리뷰에서 확인해야 할 지점이 됩니다. 어떤 요소의 크기 전환이 갑자기 가능해졌다면 가까운 조상에 선언된 interpolate-size를 함께 봐야 합니다. 컴포넌트 단위 CSS에서는 필요한 범위에만 두고, 공통 reset이나 전역 스타일에는 의도를 명확히 남기는 방식이 안전합니다.

calc-size()와는 어떻게 다를까

calc-size()는 intrinsic size 값을 기반으로 계산을 수행하는 CSS 함수입니다. 예를 들어 내용 크기 그대로가 아니라 내용 크기에서 여백을 빼거나 더한 값을 쓰고 싶을 때 함수가 의미를 갖습니다. MDN은 단순히 intrinsic size animation을 허용하려는 목적이라면 상속되는 interpolate-size가 대체로 더 선호된다고 설명합니다.

.panel-set {
  interpolate-size: allow-keywords;
}

.panel.is-open {
  height: auto;
}

.measured-box {
  width: calc-size(max-content, size + 2rem);
}

선택 기준은 간단합니다. 내용 기반 크기로 전환만 하고 싶다면 interpolate-size부터 봅니다. 내용 기반 크기에 계산이 필요하거나 특정 속성 값 안에서 intrinsic size를 수식으로 다뤄야 한다면 calc-size()를 검토합니다. 둘을 "새로운 calc() 문법"처럼 뭉뚱그리면 적용 범위가 흐려집니다.

성능과 접근성에서 조심할 점

height, width 같은 box model 속성 전환은 레이아웃 계산을 동반할 수 있습니다. MDN의 calc-size() 문서도 가능하면 box model 속성 애니메이션을 피하면 layout 이벤트와 그 영향을 줄이는 데 도움이 된다고 설명합니다. 따라서 단순한 시각 효과라면 transform이나 opacity가 더 가벼울 수 있고, 실제 레이아웃 크기가 바뀌어야 할 때만 intrinsic size 전환을 쓰는 편이 좋습니다.

접힘 UI에서는 overflow, 포커스 이동, 키보드 조작도 함께 확인해야 합니다. 시각적으로 닫힌 영역 안의 버튼이 여전히 포커스를 받을 수 있거나, 전환 중 레이아웃이 크게 밀리면 사용성이 나빠질 수 있습니다. interpolate-size는 크기 보간을 돕는 CSS 속성이지, disclosure 위젯의 상태 관리나 접근성 의미를 자동으로 완성하는 기능은 아닙니다.

실무 적용 기준

첫째, 대상 브라우저를 확인합니다. MDN은 interpolate-size를 Baseline이 아닌 기능으로 표시하며, 일부 널리 쓰이는 브라우저에서 동작하지 않는다고 설명합니다. 오래된 브라우저, 앱 내장 WebView, 사내 표준 브라우저까지 지원해야 한다면 기본 동작이 깨지지 않는 fallback을 먼저 둬야 합니다.

둘째, progressive enhancement로 다룹니다. 지원하지 않는 환경에서도 콘텐츠는 열리고 닫혀야 하며, 전환만 덜 부드러운 정도가 가장 안전합니다. 기능 지원 확인이 필요하면 @supports로 범위를 좁힐 수 있습니다.

.panel {
  overflow: clip;
}

@supports (interpolate-size: allow-keywords) {
  .panel-group {
    interpolate-size: allow-keywords;
  }

  .panel {
    transition: height 180ms ease;
  }
}

셋째, 전역 선언은 신중히 둡니다. 프로젝트 전체에서 accordion, disclosure, 메뉴 전환 패턴을 일관되게 관리한다면 :root 선언이 단순할 수 있습니다. 반대로 여러 라이브러리와 컴포넌트가 섞인 서비스라면 작은 범위부터 적용해 예상하지 못한 크기 전환을 줄이는 편이 낫습니다.

FAQ

height: auto 전환이 항상 자연스러워지나

항상 그렇지는 않습니다. 한쪽 끝이 숫자 길이여야 하고, 실제 속성이 transition 대상이어야 하며, 지원 브라우저여야 합니다. 콘텐츠 양이 크게 바뀌는 UI에서는 전환 중 layout 비용과 스크롤 흔들림도 확인해야 합니다.

max-height 우회는 이제 필요 없나

지원 브라우저가 충분하고 fallback 요구가 낮은 환경에서는 줄일 수 있습니다. 하지만 호환성이 중요한 공개 서비스에서는 max-height, 즉시 열림, JavaScript 측정 같은 기존 fallback이 여전히 필요할 수 있습니다.

interpolate-size와 @starting-style은 같은 기능인가

다릅니다. @starting-style은 처음 표시되는 요소가 transition의 시작 스타일을 갖도록 돕는 at-rule입니다. interpolate-size는 숫자 길이와 intrinsic size keyword 사이의 보간을 허용하는 속성입니다. popover나 dialog 진입 전환처럼 둘을 함께 검토할 수는 있지만 해결하는 문제가 다릅니다.

정리

interpolate-size는 내용 기반 크기로 열리고 닫히는 UI를 CSS로 더 직접적으로 표현하게 해 주는 속성입니다. allow-keywords를 지정하면 0px 같은 숫자 길이와 auto, max-content, fit-content 같은 intrinsic size keyword 사이의 전환을 다룰 수 있습니다.

실무 기준은 보수적으로 잡는 편이 좋습니다. 기능 지원을 확인하고, 지원하지 않는 환경에서도 콘텐츠와 조작이 유지되게 작성한 뒤, 필요한 컴포넌트 범위에만 opt-in합니다. 계산이 필요한 intrinsic size 값은 calc-size()를 따로 검토하고, 단순 전환 허용은 interpolate-size를 기본 후보로 보면 됩니다.

이 글은 2026년 10월 3일 기준 MDN interpolate-size, MDN calc-size(), CSS Values and Units Module Level 5 초안을 바탕으로 정리했습니다.

참고 자료

• MDN: interpolate-size CSS property
• MDN: calc-size() CSS function
• CSS Values and Units Module Level 5