요즘 코드 작성하는 일은 예전과 정말 달라졌다. 예전에는 한 줄 한 줄 직접 쳐야 했는데, 이제는 AI가 몇 초 만에 HTML을 잔뜩 뽑아준다. 못 쓸 코드라고 하기엔 브라우저에서 돌려보면 페이지가 제대로 나온다. 그렇다고 바로 쓸 수 있냐고 하면, 소스를 열어보는 순간 아주 엉망진창이다.
최근에 프로젝트를 하나 인수했는데, 프론트엔드 페이지가 전부 AI가 생성한 것이었다. 처음에는 꽤 좋아 보였다. 효율이 높아서 하루에 페이지를 여러 개 만들 수 있었다. 그런데 배포 전날, 테스트 담당 동료가 다가와서 모바일에서 버튼 하나가 눌리지 않는다고 말했다. 코드를 열어보니, 세상에, div 하나에 일곱여덟 겹이 감싸져 있고, 들여쓰기는 전부 엉망이고, 태그 닫힘은 브라우저가 알아서 추측하게 내버려둔 상태였다. 한참을 찾아 헤맨 끝에 문제를 찾았는데, 태그 하나가 닫히지 않아서 브라우저가 자동 복구할 때 뒤쪽 구조를 전부 망가뜨린 것이었다.
이 일 이후로 나는 정신을 차렸다. AI가 생성한 코드는 아무리 정상으로 보여도 배포 전에 반드시 HTML 포맷팅 도구를 한 번 거쳐야 한다.
왜 꼭 포맷팅을 해야 하는가? 몇 가지 실질적인 이유를 말해주겠다.
첫째, 포맷팅을 하면 코드 구조가 한눈에 들어온다. AI가 코드를 쓸 때는 문제가 하나 있는데, 모든 것을 한데 쌓아두는 걸 좋아한다. 줄바꿈해야 할 곳에서 줄바꿈을 안 하고, 들여쓰기해야 할 곳에서 들여쓰기를 안 한다. 포맷팅 도구를 한 번 돌리면 부모-자식 관계가 명확해져서 어떤 태그가 어떤 태그를 감싸고 있는지 한눈에 보인다. 버그를 찾을 때 효율이 몇 배나 차이 난다.
둘째, 숨겨진 오류를 발견하는 데 도움이 된다. 닫히지 않은 태그도 있고, 잘못 쓴 속성도 있는데, 코드가 어지러우면 전혀 보이지 않는다. 포맷팅 도구를 돌리면 구조가 잘못된 부분이 즉시 드러난다. 방을 정리하는 것과 같다. 물건이 어지럽게 쌓여 있을 때는 다 괜찮아 보이지만, 정리해보면 여기엔 쓸모없는 상자가 하나 더 있고, 저기엔 뚜껑이 하나 빠져 있다는 걸 알게 된다.
셋째, 팀 협업할 때 포맷팅된 코드라야 리뷰하기 좋다. 생각해봐라. 동료가 AI가 생성한 코드를 잔뜩 제출했는데 들여쓰기는 엉망이고 줄바꿈은 제멋대로라면, 보겠는가 안 보겠는가? 보면 머리 아프고, 안 보면 불안하다. 통일된 포맷팅을 하면 모두가 같은 기준을 따르니까 누가 무엇을 바꿨는지 한눈에 알 수 있다.
넷째, 브라우저에 친화적이다. 브라우저의 오류 허용 능력이 강하긴 하지만, 그건 브라우저가 대신 뒷수습을 해주는 것이다. 코드 구조가 명확하고 태그 닫힘이 정확하면 브라우저의 렌더링 효율도 더 높아진다. 특히 모바일은 원래 성능이 빠듯한데, 브라우저에 더 폐를 끼치지 마라.
내 현재 워크플로는 이렇다. AI가 코드를 생성하면 먼저 편집기에 복사하고, HTML 포맷팅 도구를 한 번 돌리고, 그다음 눈으로 구조를 한 번 훑어보고, 문제가 없는 것을 확인한 뒤 프로젝트에 넣는다. 2분도 더 안 걸리지만, 절약되는 디버깅 시간은 2분 정도의 문제가 아니다.
누군가는 포맷팅이 그저 들여쓰기 좀 하고 줄바꿈 좀 하는 것인데 무슨 큰 소용이 있겠냐고 생각할 수 있다. 이렇게 말하겠다. 글을 쓸 때도 문단을 나눠야 하는데, 문단이 없는 글을 읽으면 피곤하지 않은가? 코드도 마찬가지다. 포맷팅은 예쁘게 보이려는 게 아니라 문제가 숨을 곳을 없애기 위한 것이다.
한 가지 더 알려줄 것이 있다. AI가 생성한 코드에는 때때로 이상한 속성이나 불필요한 태그가 붙어 있는데, 포맷팅을 하면 이런 군더더기가 특히 눈에 띈다. 그러면 자연스럽게 삭제할 수 있고, 페이지 로딩 속도도 조금은 빨라진다. 이 조금을 얕보지 마라. 티끌 모아 태산이고, 사용자 경험은 이렇게 조금씩 쌓여가는 것이다.
그러니 게으름 피우지 마라. AI가 코드를 대신 써주는 건 좋은 일이지만, 배포 전 마지막 관문은 네가 직접 지켜야 한다. HTML 포맷팅이라는 도구는 별것 아닌 것처럼 보여도 결정적인 순간에 정말 너를 구해줄 수 있다. 적어도 나는 이제 이게 없으면 못 살겠다. 한 번 포맷팅을 안 하면 마음이 정말 놓이지 않는다.