최근에 프론트엔드 하는 친구 몇 명과 밥을 먹다가 AI로 코드 작성하는 이야기가 나왔다. 한 친구는 요즘 Copilot이나 Cursor를 쓰면 몇 분 만에 페이지 구조를 뚝딱 만들어내고 로직까지 알아서 써준다고 감탄했다. 다른 친구는 맞아, 근데 남이 쓴 CSS나 AI가 생성한 CSS를 받아보면 정말 골치 아파 죽겠어—들여쓰기는 고양이가 긁어놓은 것처럼 엉망이고, 공백은 하나 더 있거나 하나 빠진 게 운에 달려 있고, 어떤 때는 한 줄에 수백 글자를 써놓아서 색상 값을 찾으려면 Ctrl+F로 한참을 검색해야 한다고 맞장구쳤다.
이 말에 정말 공감했다. AI가 확실히 코드 작성 속도를 많이 끌어올렸지만, CSS 단계에서는 오히려 자주 일을 망쳐놓는다. 왜 그럴까? AI가 CSS를 생성할 때는 '돌아가는지 안 돌아가는지'만 신경 쓰지, 네가 나중에 어떻게 유지보수할지는 전혀 신경 쓰지 않기 때문이다. 반응형 레이아웃을 써달라고 하면 미디어 쿼리는 써주지만, 선택자 중첩, 속성 순서, 줄바꿈과 들여쓰기는 그때그때 기분에 따라 달라진다. 결과적으로 프로젝트에 복사 붙여넣기 하면 코드 스타일이 팀 규칙과 완전히 안 맞아서 코드 리뷰 때 동료들에게 한소리 듣게 된다.
이럴 때는 직접 나서서 뒷수습을 해야 한다. 나도 예전에 수동으로 조정해봤는데, 한 줄 한 줄 들여쓰기 고치고, 불필요한 공백 지우고, 압축된 코드 펼치고, 흩어진 코드 합치고. 30분이나 하다 보니 눈이 침침해지고, 실수로 속성 값 하나를 잘못 고쳐서 페이지가 바로 깨져버렸다. 그 후로는 정신 차리고 도구를 바로 쓴다.
CSS 포맷팅과 압축은 듣기에는 같은 일 같지만, 사실 두 가지 방향이다. 포맷팅은 압축되어 한 덩어리로 뭉쳐진 코드를 다시 펼쳐서 적절한 들여쓰기와 줄바꿈을 추가해 사람이 읽을 수 있게 하는 것이고, 압축은 반대로 삭제할 수 있는 공백, 줄바꿈, 주석을 모두 없애서 파일 크기를 최대한 줄여 로딩을 빠르게 하는 것이다. 이 두 작업을 수동으로 하는 건 자기 자신과 싸우는 꼴이다.
내가 지금 쓰는 건 온라인 CSS 포맷팅 압축 도구인데, 소프트웨어 설치 필요 없이 웹페이지를 열고 코드를 붙여넣고 버튼 한 번 누르면 왼쪽에는 원본 코드, 오른쪽에는 처리 결과가 나온다. 포맷팅하고 싶으면 포맷팅 모드를 선택하면 선택자 사이에 빈 줄 하나, 속성 앞에 두 칸 들여쓰기, 콜론 뒤에 공백을 자동으로 넣어줘서 보기만 해도 편안하다. 압축하고 싶으면 압축 모드로 전환하면 주석을 제거하고, 줄바꿈을 삭제하고, 불필요한 공백을 먹어치워서 마지막에 한 줄의 압축된 코드를 줘서 프로덕션 환경에 바로 던져도 문제없다.
핵심은 이게 가리지 않는다는 거다. AI한테서 복사한 코드가 아무리 엉망이어도 다 정리해준다. 가끔 GitHub에서 긁어온 오픈소스 프로젝트 CSS는 스타일이 제각각이라 어떤 건 Tab 쓰고 어떤 건 스페이스 쓰고 어떤 건 속성 순서가 엉망인데, 넣었다 빼면 통일된 스타일로 나와서 얼마나 많은 일을 덜어주는지 모른다.
누군가는 편집기에 포맷팅 기능이 내장되어 있지 않냐고 할 수 있다. 맞다, VS Code에는 Prettier가 있고 WebStorm에도 내장되어 있다. 하지만 문제는 모든 사람이 환경을 잘 갖춰놓은 게 아니고, 가끔 남의 컴퓨터에서 임시로 뭔가 고치거나 온라인 IDE에서 코드를 작성할 때는 그렇게 편하지가 않다. 게다가 Prettier 설정도 꽤 번거로울 때가 있어서 프로젝트마다 다르고, 잘못하면 포맷팅 후에 오히려 에러가 난다. 온라인 도구는 이런 잡스러운 게 없다. 열면 바로 쓰고, 쓰면 바로 떠나면 된다.
또 하나, AI가 코드를 점점 더 빠르게 작성한다는 건 우리가 남의 코드를 받을 기회도 점점 더 많아진다는 뜻이다. 예전에는 프로젝트 하나를 몇 명이서 작성했는데, 이제 AI가 참여하면서 코드 스타일은 더욱 통제 불가능해졌다. 이럴 때 손에 맞는 포맷팅 압축 도구는 주방의 채소 씻는 대야처럼 별것 아닌 것 같아도 없으면 정말 안 된다.
결국 AI는 일을 대신 해주는 거지, 집을 치워주는 게 아니다. 기능은 작성해주지만 코드整洁함은 네가 직접 신경 써야 한다. 엉망진창인 CSS와 씨름하며 시간을 보내느니 믿을 만한 도구를 찾아서 몇 초 만에 끝내는 게 낫다. 아낀 시간에 커피 한 잔 마시거나 컴포넌트 두 개 더 작성하는 게 낫지 않나?