블로그 목록으로
📖 도구 튜토리얼 管理员 · · 4분 · 22 조회

ChatGPT가 코드를 잘못 작성한 날, 나는 이 JS 포맷터를 배웠다

ChatGPT로 코드를 수정하다가 일곱 번이나 여덟 번 연속 실패했다. 페이지가 하얗게 변하고, 버튼이 작동하지 않고, 함수를 잘못 사용해서 고객의 배포를 거의 지연시킬 뻔했다. 마지막으로 눈에 띄지 않는 JS 포맷터 도구로 AI가 생성한 지저분한 코드를 한 번에 정리했고, 루프 괄호 위치 오류와 변수명 철자 불일치 버그를 즉시 발견했다. 이 글은 이 실제 경험을 공유하고, AI가 코드를 작성할 때 반드시 포맷터 도구로 검사해야 하는 새로운 작업 흐름을 정리했다. AI의 효율성을 유지하면서도 그것이 지어낸 함정을 피할 수 있다.

이 일은 지난주에 시작됐다. 그날 나는 개인 프로젝트를 하나 받았는데, 고객의 오래된 프로젝트의 프런트엔드 페이지를 수정하는 일이었다. 기능은 복잡하지 않았고, 몇 개 버튼의 인터랙션 로직만 바꾸면 됐다. 나는 이 작업이 간단하다고 생각해서, ChatGPT에게 바로 맡기면 되지 않을까? 직접 코드를 한 줄씩 보지 않아도 되니까.

나는 요구사항을 아주 상세하게 설명했고, 변수명을 어떻게 지을지까지 지정했다. ChatGPT도 기대에 부응해서, 코드를 주르륵 생성해줬다. 나는 그것을 보고, 구조가 명확하고 주석도 잘 달려 있고, 오류 처리까지 추가해줬다. 그때 나는 기분이 좋았고, 이번엔 안전하다고 생각해서 바로 프로젝트에 복사해서 붙여넣고, 저장하고, 브라우저를 새로고침했다.

그런데 결과가 어땠는지 아는가? 페이지가 하얗게 변했다. 콘솔에 빨간 오류가 가득 찼다. 마치 설날 같았다.

나는 서둘러 오류 메시지를 복사해서 ChatGPT에게 보여줬다. 그것은 "죄송합니다. 경계 조건 하나를 놓쳤습니다"라고 말하고, 수정한 코드를 다시 보내줬다. 나는 다시 붙여넣었고, 이번에는 하얗게 변하지 않았지만 버튼이 클릭에 반응하지 않았다. 나는 계속 피드백을 주었고, 그것은 계속 수정했다. 일곱 번이나 여덟 번을 반복했는데, 매번 버그 하나를 고치면 두 개의 새 버그가 생겼다. 가장 화가 났던 것은, 한 번은 내 프로젝트에 존재하지도 않는 함수를 코드에 사용하면서, 진지하게 "공용 메서드를 호출합니다"라고 주석을 달아놓은 것이다.

그때 나는 정말 키보드를 내려치고 싶었다. 고객은 계속 재촉했고, 오후에 배포해야 한다고 했다. 나는 화면에 지저분한 코드를 바라보았다. 들여쓰기가 엉망이고, 공백과 탭이 섞여 있었고, 괄호는 어떤 것은 줄 끝에, 어떤 것은 줄 시작에 있었다. 파일 전체가 고양이가 밟은 것처럼 보였다. 나는 이 상태에서 수동으로 수정할 수 없었다. 왜냐하면 보기도 어려웠기 때문이다.

고객에게 연기한다고 사과하려는 순간, 예전에 즐겨찾기에 저장해둔 온라인 도구가 생각났다. 이름은 "JS 포맷터 및 압축기"였다. 죽은 사람을 살리는 심정으로, 나는 ChatGPT가 생성한 마지막 버전의 코드 전체를 그 도구에 넣고 "포맷" 버튼을 눌렀다.

기적이 일어났다. 원래 한 덩어리로 뭉쳐 있던 코드가 순식간에 펼쳐졌고, 각 계층이 명확하게 보였으며, 줄바꿈과 들여쓰기가 제대로 되었다. 나는 문제가 어디에 있는지 한눈에 알 수 있었다. 루프의 닫는 괄호 위치가 잘못되어 전체 로직이 어긋났다. 또한 변수명 철자가 일치하지 않는 부분이 있었는데, ChatGPT는 userName이라고 썼지만, 나중에 호출할 때는 username으로 썼다.

솔직히 말하면, 예전에는 이런 포맷터 도구를 하찮게 여겼다. 그냥 레이아웃을 정리하는 것뿐이고, 기술적 가치가 없다고 생각했다. 하지만 그날 나는 깨달았다. 자신이 작성하지 않았고 로직에 문제가 있는 코드를 마주했을 때, 포맷터는 돋보기와 같다. 코드가 펼쳐지면 숨겨진 모든 오류가 드러난다.

그 후 나는 그 두 가지 오류를 수동으로 고치고, 도구로 "압축"을 해서 파일 크기를 줄였고 로딩 속도도 빨라졌다. 고객에게 보내니 한 번에 통과했다.

이 일은 나에게 큰 교훈을 주었다. ChatGPT는 분명 코드를 작성하는 데 도움을 줄 수 있지만, 신이 아니다. 그것은 프로젝트의 맥락을 볼 수 없고, 실행 결과를 테스트할 수도 없다. 그것이 제공하는 코드는 본질적으로 "정답처럼 보이는 것"이다. 만약 그것을 바로 프로덕션 환경에 던진다면, 언젠가는 실패할 것이다.

하지만 나는 AI로 코드를 작성하지 말라고 권하는 것이 아니다. 그건 너무 과한 것이다. 내 말은, 안전망이 필요하다는 것이다. 이제 나의 작업 흐름은 이렇게 바뀌었다: ChatGPT가 코드를 생성하면, 아무리 자신만만하게 말해도, 나는 항상 먼저 JS 포맷터 도구를 통과시킨다. 포맷 후에는 로직이 자연스러운지 한눈에 볼 수 있고, 한 줄로 뭉쳐진 코드를 직접 읽는 것보다 열 배 효율적이다.

그리고 이 도구의 장점은 인터넷에 연결되지 않아 코드가 서버에 업로드되지 않는다는 것이다. 개인 프로젝트나 회사 민감 코드를 다루는 사람에게 안심감을 준다. 나중에는 내가 직접 작성한 코드를 검사하는 데도 사용했다. 급하게 작성해서 너무 지저분할 때 포맷을 하면, 실수로 빠뜨린 쉼표나 세미콜론도 발견할 수 있다.

이제 고객이 새 프로젝트를 소개해줬지만, 나는 여전히 ChatGPT로 초안을 작성할 것이다. 하지만 더 이상 그것에 휘둘리지 않을 것이다. 포맷, 검사, 수정, 압축, 배포. 이 과정을 모두 거쳐야 마음이 놓인다.

여러분도 AI가 코드를 잘못 작성한 경험이 있다면, 무작정 버티지 말고, 먼저 코드를 포맷해보라. 때로는 진실이 그 지저분한 문자들 속에 숨어 있다. 당신은 그것을 볼 수 있는 눈이 필요할 뿐이다.

22 조회 · 4분

🔗 관련 도구

이 글과 관련된 유용한 도구를 사용해보세요

📝 관련 글

이런 글도 마음에 드실 거예요

tool-tutorials

콘텐츠 팜이 베끼고 베끼면, 이 방법으로 한 번에 오리지널 감성을 뽑아내세요

콘텐츠 팜의 표절 만연으로 오리지널 작가들이 피해를 보고 있어요. 이 글에서는 '텍스트 중복 제거 및 재정렬' 도구를 소개합니다. 이 도구는 문장 구조와 의미를 지능적으로 분석해 참고 자료를 심층 재구성하고 표현을 최적화해서, 핵심 정보를 유지하면서도 빠르게 자신만의 언어 스타일을 만들 수 있게 해줍니다. 주의할 점은, 이 도구는 2차 창작의 효율을 위한 것이지 표절의 가림막이 아니라는 것. 제대로 사용해야 진짜 창작 능력을 키울 수 있어요.

09-03
tool-tutorials

오늘 휴대폰 앨범의 이 숨겨진 기능, 90년대생도 모른다

휴대폰 앨범에 내장된 이미지 회전 및 뒤집기 기능은 생각보다 훨씬 강력합니다. 이 글은 대부분의 90년대생이 모르는 숨겨진 팁을 공개합니다: 좌우 뒤집기로 인물 사진의 시각적 왜곡을 교정하고, 길게 눌러 회전 미세 조정으로 수평선을 맞추며, 뒤집기와 회전의 조합으로 거울에 비친 글자와 구도 문제를 해결할 수 있습니다. 타사 소프트웨어 없이도 망한 사진을 쉽게 살릴 수 있습니다.

09-03
tool-tutorials

웹페이지 복사 붙여넣기가 전부 깨짐? 이 도구가 수동 정리보다 10배 빠릅니다

웹페이지 복사 붙여넣기가 전부 깨짐? HTML to Markdown 도구가 형식이 있는 웹페이지 내용을 한 번에 깨끗한 Markdown 형식으로 변환해 몇 초 만에 끝내며, 수동 정리보다 10배 빠릅니다. 제목, 목록, 테이블, 이미지 등 복잡한 요소 처리와 일괄 변환을 지원하여 시간과 노력을 절약하며, 작가, 블로거, 학생들이 자료를 정리할 때 적합합니다.

09-02