서론: 완벽했던 내 서비스, 갑자기 숨을 거두다
네이버 블로그 전용 텍스트 포맷 변환기를 런칭하고, 며칠 동안은 세상을 다 가진 기분이었습니다. AI가 써준 글을 좌측에 붙여넣고 버튼만 누르면, 더러웠던 배경색이 싹 날아가고 네이버 블로그에 최적화된 깔끔한 텍스트가 우측에 나타났으니까요. 포스팅 시간이 획기적으로 줄어들며 생산성이 폭발했습니다. 제 웹사이트(https://ai-translator-e5v.pages.dev/)에 접속해서 이 툴을 사용하는 지인들도 “진짜 편하다”며 극찬을 아끼지 않았습니다.
하지만 평화는 오래가지 않았습니다. 어느 날 평소처럼 AI 채팅창에서 표(Table) 형태가 포함된 긴 글을 복사해 변환기에 집어넣고 ‘변환하기’ 버튼을 눌렀습니다. 그런데 우측 결과창에 아무것도 뜨지 않았습니다. 버튼을 여러 번 광클해 보았지만, 웹페이지는 마치 꽁꽁 얼어붙은 것처럼 아무런 반응이 없었습니다. 코딩 초보가 가장 두려워하는 순간, 바로 ‘치명적인 버그(Bug)’와 마주한 것입니다. 등줄기에 식은땀이 흘렀지만, 이제 저에겐 구글링으로 밤을 새우던 과거와 달리 든든한 AI 사수가 있습니다. 이번 편에서는 비전공자가 웹 툴을 운영하다 에러를 만났을 때, 당황하지 않고 AI와 함께 문제를 추적하여 해결해 내는 ‘디버깅(Debugging)’의 기술을 공유합니다.
1. 에러 메시지는 ‘외계어’가 아니라 ‘단서’다
프로그램이 멈췄을 때 비전공자들이 가장 먼저 하는 행동은 창을 닫아버리거나 코드를 처음부터 다시 짜달라고 하는 것입니다. 하지만 진짜 원인을 모른 채 코드를 엎어버리면, 나중에 똑같은 문제가 반드시 다시 발생합니다.
의사가 환자의 증상을 알아야 병을 고칠 수 있듯, AI 개발자에게도 ‘어디가 어떻게 아픈지’ 알려줄 단서가 필요합니다. 웹 브라우저에는 이 단서들이 모이는 비밀의 방이 있습니다.
-
F12 키의 마법 (개발자 도구): 크롬 브라우저에서 키보드 상단의 F12 키를 누르면 화면 오른쪽에 복잡한 창이 하나 열립니다. 여기서 상단의 ‘Console(콘솔)’ 탭을 클릭해 보십시오.
-
평소에는 깨끗하던 이 창에, 에러가 발생한 순간 붉은색 글씨로 끔찍한 경고문이 출력되어 있었습니다.
Uncaught TypeError: Cannot read properties of undefined (reading 'replace') at HTMLButtonElement... -
읽을 수도, 이해할 수도 없는 외계어 같았지만 상관없습니다. 이것이 바로 AI에게 전달할 가장 완벽하고 결정적인 ‘진단서’이기 때문입니다.
2. AI 의사에게 정확한 증상 보고하기 (디버깅 프롬프트 공식)
빨간색 에러 코드를 마우스로 드래그해서 그대로 복사했습니다. 그리고 AI 채팅창을 열어 ‘상황’과 ‘증상’을 결합한 디버깅 프롬프트를 날렸습니다.
에러를 해결해 달라고 할 때는 막연하게 “안 돼”라고 하면 안 됩니다. **[어떤 행동을 했을 때] + [어떤 에러 코드가 떴는지]**를 명확히 묶어주어야 합니다.
나의 디버깅 프롬프트: “내가 만든 네이버 블로그 텍스트 변환기에서 에러가 발생했어. 평소엔 잘 되는데, 표(Table)나 특수 기호가 많이 섞인 텍스트를 좌측에 붙여넣고 ‘변환’ 버튼을 누르니까 우측에 아무것도 안 뜨고 멈춰버려. F12 콘솔 창을 열어보니까 아래와 같은 빨간색 에러 코드가 떴어. 이 오류의 원인이 무엇이고, 해결된 전체 자바스크립트 코드를 다시 작성해 줘.
[에러 코드 복사 붙여넣기]
Uncaught TypeError: Cannot read properties of undefined...“
3. 셜록 홈스급 원인 분석과 외과 수술
AI는 제가 던져준 에러 코드를 분석하더니 단 3초 만에 원인을 찾아냈습니다.
-
AI의 진단: “해당 오류는 원본 텍스트에 예상치 못한 HTML 구조(예: 복잡한 표 태그)가 섞여 들어왔을 때, 정규 표현식(Regex)이 이를 제대로 치환하지 못하고 ‘undefined(정의되지 않음)’ 상태를 반환하면서 변환 로직 자체가 다운되어 버린 것입니다.”
-
해결책 제시: AI는 기존 코드에
if조건문을 추가하여, 예상치 못한 태그가 들어오면 무시하고 넘어가거나 안전하게 일반 텍스트로 우회하여 처리하는 ‘예외 처리(Exception Handling)’ 방어 로직을 덧붙인 새로운 코드를 짜주었습니다.
새로 받은 자바스크립트 코드를 워드프레스에 덮어씌웠습니다. 다시 아까 에러를 일으켰던 문제의 텍스트를 붙여넣고 버튼을 누르자, 이번에는 시스템이 멈추지 않고 깔끔하게 표의 텍스트만 추출하여 우측 화면에 띄워주었습니다. 완벽한 디버깅의 성공이었습니다.
4. 비전공자 vs AI 기반 디버깅 프로세스 비교
| 디버깅 단계 | 과거의 비전공자 방식 (스택오버플로우 의존) | AI 비서를 활용한 방식 |
| 에러 인지 | 화면이 멈추면 당황하며 브라우저 새로고침 무한 반복 | F12 콘솔 창을 열어 붉은색 에러 메시지(로그) 확보 |
| 원인 추적 | 에러 코드를 구글에 검색해 영어로 된 수십 개의 답변을 뒤짐 | AI에게 [상황 설명 + 에러 코드]를 통째로 던져주고 진단 요청 |
| 해결 및 적용 | 남의 코드를 긁어와 내 코드의 어디에 넣을지 몰라 레이아웃 파괴 | AI가 내 원래 코드에 맞춰 수정한 전체 코드를 제공, 그대로 복붙 완료 |
| 소요 시간 | 며칠을 끙끙 앓다가 프로젝트 포기 | 길어야 5분 내외 |
결론: 에러는 실패가 아니라 ‘업그레이드’의 기회다
개발자 도구를 열어 빨간 글씨를 마주하는 것은 코딩 초보에게 엄청난 스트레스입니다. 하지만 AI와 함께 디버깅을 한 번 성공하고 나면, 묘한 카타르시스와 함께 코딩에 대한 두려움이 완전히 사라집니다. “어차피 고장 나도 로그만 복사해서 AI한테 주면 다 고쳐주잖아?”라는 막강한 자신감이 생기기 때문입니다.
이 사건을 계기로 네이버 블로그 변환기는 어떤 악랄한 텍스트가 들어와도 멈추지 않는 견고한 방어력을 갖추게 되었습니다. 웹 서비스가 안정화 궤도에 오르자, 저의 시선은 자연스럽게 더 넓은 무대인 ‘모바일 앱’으로 향하기 시작했습니다. 다음 13편에서는 웹 브라우저를 벗어나, 스마트폰 중독을 막기 위해 일정 시간 폰 화면을 잠가버리는 ‘어플리케이션(App)’ 기획과 네이티브 앱 생태계에 대한 도전기를 펼쳐보겠습니다.