Claude Code와 CSS
Claude Code and CSS
핵심 요약
Claude가 CSS 작업을 JS로 해결하려 고집했지만, 결국 간단한 CSS Grid로 해결했다는 개발자의 경험담.
- AI 코드 품질 — CSS 작업 시 AI가 비효율적인 JS 방식을 고집하는 경향이 있음
- CSS Grid 활용 — 복잡한 JS 로직 대신 간단한 CSS 속성으로 문제 해결 가능
- 개발자 회의론 — AI가 코딩 업무를 대체할 수는 있어도 아직 CSS 분야에선 실력이 부족함
AI와 일자리 대체에 대한 우울한 분위기를 좀 덜어보고자 이 글을 씁니다.
저는 프론트엔드 개발자이고 CSS가 주특기입니다. Claude에게 두 개의 내부 카드(나란히 배치된)가 내용물에 따라 동일하게 확장되는 간단한 모달을 만들어달라고 요청했습니다. 즉, 한쪽 카드의 이름이 더 길면 두 카드 모두 너비가 늘어나야 하는 상황이었죠.
Claude는 계속 JS를 써야 한다고 고집했고, 제가 여러 번 반박해도 CSS로는 구현하기 어렵다는 이유만 늘어놓더군요. 마감 기한 때문에 일단 수긍했지만 영 찜찜했습니다. 그래서 다시 돌아가 grid: 1fr auto 1fr(auto는 화살표 아이콘용)을 사용하라고 지시했습니다. 그런데 웬걸, 단 몇 줄의 CSS로 useEffect나 참조(reference)를 사용하는 번거로움을 덜 수 있었습니다.
Claude가 여러분의 일자리를 대체하지 못할 거라는 말은 아닙니다. 하지만 지난 몇 달간 지켜본 결과, 적어도 CSS 분야에서만큼은 AI의 코딩 관습이 그리 좋지 않다는 걸 깨달았습니다.
