왜 CSS @function이 필요한가?
CSS는 오랫동안 calc(), min(), max() 같은 내장 함수로 계산을 지원해왔어요. 하지만 복잡한 스타일 로직을 재사용하려면 매번 calc()를 조합하거나 SCSS의 함수를 사용해야 했죠. 이제 CSS 네이티브 @function이 등장하면서, CSS만으로도 재사용 가능한 커스텀 함수를 정의할 수 있게 됐습니다.
이 기능은 아직 초안 단계이지만, CSS 변수보다 동적이고 모듈화된 스타일을 작성할 수 있게 해줍니다. 특히 디자인 토큰을 관리하거나, 반복적인 계산을 줄이고 싶은 프로젝트에서 유용해요.
핵심 문법과 예제
@function은 --로 시작하는 사용자 정의 식별자를 사용해요. 기본 구조는 다음과 같습니다.
@function --half(--size) {
result: calc(var(--size) / 2);
}
.container {
margin-inline: --half(20px); /* 10px로 계산됨 */
}
타입 체크와 기본값
인자에 타입을 명시하면 잘못된 값이 들어왔을 때 미리 방지할 수 있어요.
@function --progression(--current, --total) returns {
result: calc(var(--current) / var(--total) * 100%);
}
.progress-bar {
width: --progression(3, 5); /* 60% */
}
기본값을 지정할 수도 있습니다.
@function --brand-glass(--opacity: 0.5) returns {
result: rgb(10 120 255 / var(--opacity));
}
.header {
background: --brand-glass(); /* 기본값 0.5 적용 */
}
리스트 인자 처리
여러 값을 하나의 리스트로 받고 싶다면 # 접미사를 사용하고 중괄호로 감싸면 됩니다.
@function --get-range(--list#, --n) {
result: calc(max(var(--list)) - min(var(--list)) + var(--n));
}
div {
padding-block: --get-range({10px, 100px, 50px}, 200px); /* 290px */
}
주의사항과 브라우저 지원
아직 실험 단계
@function은 CSS Custom Functions and Mixins Module Level 1 명세에 정의되어 있으며, 현재 브라우저 지원이 제한적입니다. Chrome 148+에서만 부분 지원되며, @supports를 통한 기능 감지도 아직 완벽하지 않아요.
@supports (at-rule(@function)) {
/* ... */
}
순환 참조 금지
함수 A가 B를 호출하고, B가 다시 A를 호출하면 브라우저는 무한 루프를 방지하기 위해 두 함수를 모두 무효화합니다.
한국 개발 생태계 적용 맥락
국내에서는 아직 CSS @function을 실제 프로덕션에 적용하기 어렵습니다. 브라우저 호환성 문제로 인해 폴리필도 존재하지 않기 때문이에요. 하지만 디자인 시스템을 구축하는 기업에서는 SCSS의 함수를 CSS 네이티브로 전환하는 방향을 미리 준비해두면 좋습니다. 특히 토큰 기반의 테마 관리에서 유용할 거예요.
다음 단계 학습 방향
@function이 완전히 지원되기 전까지는 CSS 변수 + calc() 조합으로 비슷한 패턴을 구현하는 연습을 추천합니다. 또한 @mixin 제안도 함께 지켜보면 좋아요.
결론
CSS @function은 스타일 로직을 모듈화하고 재사용하는 강력한 도구가 될 잠재력을 가지고 있습니다. 아직 실험 단계이지만, 코드베이스의 유지보수성을 높이고 싶은 개발자라면 미리 문법과 패턴을 익혀두는 것이 좋아요.
관련해서 AI 평가 비용이 새로운 컴퓨팅 병목이 되고 있습니다 (2026 현황 분석)과 팬톤이 에이전트 AI로 색상 전문성을 확장한 방법 AI-Ready 데이터베이스의 핵심 역할도 함께 읽어보시면 기술 트렌드를 넓게 이해하실 수 있습니다.