AI는 CSS를 자신 있게 틀린다. var(--spacign-md)라고 써도 브라우저는 조용히 넘어가고, width: fit-parent라는 존재하지 않는 값을 생성해도 빌드는 성공한다. TypeScript로 잡을 수 있는 타입 오류와 달리, CSS에는 컴파일러가 없다. AI는 틀려도 자신감을 잃지 않는다. 그게 문제다.
2025년 학술 연구에 따르면 LLM이 생성한 컴파일 오류의 94%가 타입 체크 실패에서 비롯됐다. 반대로 말하면, TypeScript처럼 컴파일러가 있는 언어에서는 AI가 저지르는 실수의 대부분을 빌드 단계에서 잡을 수 있다는 뜻이다. dev.to의 'The case for compiled, typed CSS' 글이 짚는 핵심이 바로 이것이다. CSS만 그 보호막 밖에 있다. PostCSS나 Stylelint는 문법 오류를 잡지만, 의미 오류는 잡지 못한다. padding: 12px는 문법적으로 완벽하다. 디자인 토큰이 spacing-md: 16px라는 사실을 CSS 린터는 모른다.
흥미로운 건 Tailwind v4에서도 이 문제가 오히려 심화됐다는 점이다. v4는 설정을 tailwind.config.ts에서 네이티브 CSS의 @theme {} 블록으로 옮겼다. 단순해진 건 맞다. 하지만 기본 경로가 TypeScript 타입 시스템 바깥으로 나왔다. AI가 @theme { --color-brand: #3b82f6 }을 생성할 때 디자이너가 지정한 값이 #2563eb라는 사실을 알 방법이 없다. 두 값 모두 유효한 hex다. 빌드는 통과한다. 오류는 픽셀 단위 UI 검수 때 비로소 발견된다. 가장 널리 쓰이는 CSS 프레임워크조차, AI 시대에 타입 계약을 잃는 방향으로 움직이고 있다.
여기서 React 컴포넌트 설계와 구조적으로 같은 원칙이 작동한다. velog의 'React 렌더링 최적화' 글은 memo나 useCallback 같은 훅을 쓰기 전에 컴포넌트 구조를 먼저 점검하라고 말한다. 상태를 필요한 곳에만 두는 '상태 밀어내기', 리렌더링 영향권 밖으로 꺼내는 '컴포넌트 합성'이 코드 최적화보다 먼저다. CSS 타입 설계도 같은 레이어에 있다. AI에게 더 나은 컨텍스트를 주거나, 더 정교한 프롬프트를 쓰는 건 사후 처방이다. 토큰을 TypeScript 안에 두고 컴파일 타임에 검증하는 구조가 선행되어야 한다. 구조가 선행될 때 AI는 추측하는 대신 스펙을 읽는다.
실무에서 이 논리는 꽤 구체적으로 작동한다. 디자인 토큰을 .ts 파일 하나에 정의하고, 빌드 타임에 CSS 변수와 Tailwind 테마로 동시에 내보내는 구조를 만들면 된다. 런타임 CSS-in-JS가 아니다. styled-components나 Emotion처럼 런타임에 스타일을 주입하는 방식은 성능 비용이 명확하고 이미 퇴장 수순에 들어섰다. 여기서 말하는 건 값은 TypeScript에 살고, 컴파일러가 검증하고, 결과물은 정적 CSS로 나오는 구조다. 제로 런타임, 타입 안전성, 단일 소스. AI가 스타일 코드를 생성할 때 TypeScript 스펙을 통과해야만 빌드가 된다면, 오류는 브라우저가 아닌 터미널에서 잡힌다.
비용 논리도 같은 방향을 가리킨다. dev.to의 'Less Than a Penny Per Document'는 AI 도구의 비용을 단위 API 호출 비용이 아닌 전체 워크플로우 비용으로 봐야 한다고 말한다. Textract는 페이지당 더 저렴하지만, 파이프라인 구축과 수동 검수까지 합산하면 비전 API보다 20배 가까이 비쌌다. CSS 타입 시스템도 같은 프레임으로 읽을 수 있다. 초기에 토큰 구조를 TypeScript로 설계하는 비용은 실재한다. 하지만 AI가 생성한 스타일 오류를 시각 회귀 테스트나 QA 단계에서 매번 잡는 비용, 디자인 토큰과 CSS 변수를 두 벌로 유지하며 동기화하는 비용과 비교하면 구조 설계가 압도적으로 저렴하다.
"AI가 곧 더 잘할 것"이라는 반론은 늘 있다. 맞을 수도 있다. 하지만 ByteDance의 Web-Bench 벤치마크에서 당시 최고 성능 모델이 실세계 웹 개발 태스크에서 25.1% 정확도를 보였고, GitClear의 분석에서는 AI 코드 생성이 늘수록 복붙 코드 비율이 올라가고 리팩터링 비율은 떨어지는 역상관이 관측됐다. 모델 성능 지표는 올라가지만 실무 코드 품질 지표는 반대로 움직인다. 더 나은 AI를 기다리는 건 베팅이다. 타입 시스템은 보증이다.
정리하면 이렇다. AI는 CSS를 빠르게 만든다. 그 속도가 오류의 속도이기도 하다. 컴파일러가 없으면 검증 비용은 사람이 낸다. 구조적 해법은 단순하다. 토큰을 TypeScript에 두고, 빌드 타임에 검증하고, 정적 CSS로 내보낸다. React 렌더링 최적화에서 상태를 올바른 위치에 두는 것이 memo보다 먼저이듯, CSS 타입 계약을 설계하는 것이 더 정교한 AI 프롬프트보다 먼저다. AI가 스타일을 쓰기 전에 스펙이 있어야 한다. 스펙 없이 생성된 CSS는 빠르게 쌓이고, 느리게 무너진다.