Tailwind를 떠나는 글이 AI 코딩에 중요한 이유

Julia Evans는 Tailwind를 떠나 바닐라 CSS 구조를 다시 배운 글에서 8년 전 Tailwind를 좋아했던 이유와, 최근 몇 개 사이트를 semantic HTML과 vanilla CSS로 옮기며 배운 점을 정리했다. 표면적으로는 CSS 글이다. 하지만 AI 코딩 시대의 프론트엔드 유지보수 관점에서 보면 훨씬 더 중요한 신호가 있다.

AI 도구는 버튼, 카드, 랜딩 페이지, 대시보드를 빠르게 만든다. 문제는 빠르게 만들어진 UI가 6개월 뒤에도 읽히느냐이다. Tailwind는 reset, 색상 팔레트, 글꼴 스케일, spacing 같은 시스템을 제공했다. Evans가 흥미롭게 말한 지점은 “Tailwind를 떠났지만 Tailwind가 가르친 시스템은 남았다”는 것이다. AI가 만든 코드도 결국 사람이 유지해야 하므로, 이 시스템 감각이 더 중요해진다.

유틸리티보다 구조가 먼저인 순간

Evans는 컴포넌트별 고유 클래스, 컴포넌트 CSS 파일 분리, 색상 변수, font-size 변수, 제한된 utility class, 작은 base style을 이야기한다. 이는 Tailwind Preflight나 design token의 장점을 버리는 것이 아니라, 팀이 이해 가능한 규칙으로 재구성하는 작업이다. CSS의 cascade layers와 CSS nesting 같은 표준이 성숙하면서 이런 선택지도 넓어졌다.

Airbnb 코드 60%가 AI 작성이라는 흐름을 떠올리면, 프론트엔드에서도 “누가 썼나”보다 “구조가 남아 있나”가 중요해진다. AI는 Tailwind 클래스를 잘 붙이지만, 팀의 색상 의미, 레이아웃 의도, 접근성 규칙을 자동으로 알지는 못한다.

AI가 CSS를 망치는 방식

AI 코딩 도구는 대개 눈에 보이는 결과를 최적화한다. 버튼이 비슷하게 보이면 성공으로 판단하기 쉽다. 그러나 CSS는 누적 시스템이다. 같은 색을 하드코딩하고, 비슷한 spacing을 조금씩 만들고, hover 상태를 컴포넌트마다 다르게 쓰면 작은 성공이 큰 부채가 된다. LLM 위임 작업의 문서 손상이 문서에서 보여준 문제가 UI 코드에도 반복된다.

이를 줄이려면 AI에게 “예쁘게 만들어줘”보다 더 구체적인 경계를 줘야 한다. 예를 들어 colors.css의 변수만 쓰기, 새 전역 선택자 금지, 컴포넌트 파일 안에서만 스타일 수정, base style 변경 시 별도 설명 요구 같은 규칙이다. Open Web Docs와 MDN 기준으로 표준 CSS를 쓰면 특정 프레임워크 없이도 모델과 사람이 공유할 수 있는 언어가 생긴다.

한국 팀에 필요한 프론트엔드 운영 규칙

국내 스타트업과 사내 서비스 팀은 AI 도구로 관리자 화면과 랜딩 페이지를 빠르게 만든다. 이때 Tailwind를 쓰느냐 버리느냐가 핵심은 아니다. 핵심은 생성된 UI가 design token, 접근성, 반응형 규칙, 컴포넌트 경계 안에 들어오느냐이다. AI 시대 시니어 개발자의 언어가 바뀌어야 한다는 글과 연결된다. 시니어는 코드를 직접 더 많이 치기보다 AI가 따라야 할 구조를 더 명확히 써야 한다.

좋은 프롬프트는 “Tailwind로 카드 만들어줘”가 아니라 “기존 --size-* 변수와 --color-* 토큰만 사용하고, 새 전역 스타일을 만들지 말며, 컴포넌트 클래스는 하나의 파일에 모아라”에 가깝다. 이렇게 해야 AI가 만든 CSS도 리뷰 가능한 산출물이 된다.

결론

Evans의 글은 Tailwind 비판이 아니다. 오히려 좋은 도구가 개발자에게 시스템 감각을 남길 수 있음을 보여준다. AI 코딩 시대에는 이 감각이 팀의 품질 방어선이 된다. 프레임워크는 바뀌지만 reset, 토큰, 컴포넌트 경계, 작은 base rule, 접근성 utility 같은 원칙은 남는다. AI가 UI를 더 많이 쓸수록 CSS는 더 사소한 기술이 아니라 제품 운영의 언어가 된다.

FAQ

Tailwind를 버려야 한다는 뜻인가?

아니다. Tailwind를 계속 써도 좋다. 핵심은 유틸리티 클래스 뒤에 있는 토큰, spacing, reset, 컴포넌트 경계를 의식하는 것이다.

AI 코딩과 CSS 구조가 왜 연결되나?

AI는 코드를 빠르게 늘린다. 구조가 없으면 빠른 생성이 곧 빠른 부채 축적이 된다.

가장 먼저 정할 규칙은 무엇인가?

색상과 글꼴 크기 변수를 한곳에 두고, 컴포넌트별 CSS 경계를 만들며, 전역 스타일 변경을 제한하는 것이 좋다.

Tailwind가 AI에 더 유리하지 않나?

모델이 Tailwind 패턴을 잘 아는 것은 장점이다. 다만 긴 클래스 문자열이 팀의 의미와 의도를 숨길 수 있어 리뷰 규칙이 필요하다.

소규모 팀도 디자인 토큰이 필요한가?

거창할 필요는 없다. 색상 10개, font scale 몇 개, spacing 규칙만 있어도 AI 생성 UI의 일관성이 크게 좋아진다.