"장바구니에 담기 버튼을 눌렀는데 화면이 0.8초 얼어붙어요. 손님들이 그새 나가버립니다."
— 월 매출 3천만원 규모 온라인 쇼핑몰 운영자의 실제 하소연
스크롤을 내릴 때 화면이 뚝뚝 끊기고, 버튼을 눌러도 반응이 느리고, 상품 목록을 넘길 때 버벅거리는 홈페이지. 원인의 80%는 메인 스레드 병목(Main Thread Blocking)입니다. 브라우저가 화면을 그리는 단 하나의 일꾼(메인 스레드)이 무거운 자바스크립트 작업에 발이 묶여, 사용자의 클릭·스크롤에 반응하지 못하는 현상이죠.
문제는 대부분의 쇼핑몰·예약사이트 사장님은 이걸 '원래 인터넷이 느린 탓'이라고 오해한다는 것. 여기에 비전공자가 AI를 활용해 파고들 수익 틈새가 있습니다. 오늘은 '화면 멈춤 자동 진단·처방 리포트 봇'을 만들어 월 100만원 유지보수 계약을 따내는 5단계를 실전으로 풀어드립니다.
코드를 '작성'하는 게 아닙니다. AI에게 측정 도구를 돌리게 하고, 그 결과를 사장님이 알아듣는 리포트로 번역하는 자동화 봇을 만드는 것. 이게 비전공자의 무기입니다.
왜 화면이 끊길까? 30초 개념 정리
브라우저는 초당 60번 화면을 새로 그립니다(60fps). 즉 한 프레임당 여유는 16.6밀리초뿐. 그런데 자바스크립트 작업 하나가 이 시간을 넘겨 메인 스레드를 점유하면, 그 사이 화면은 얼어붙습니다. 이게 바로 '끊김'의 정체입니다.
돈 되는 5단계 실전 가이드
STEP 1 · 측정 도구를 AI에게 맡긴다
구글이 무료 배포하는 Lighthouse와 Web Vitals가 핵심 도구입니다. 비전공자는 코드를 짤 필요 없이, AI에게 "이 URL의 성능 점수와 TBT(Total Blocking Time)를 매일 자동 측정하는 스크립트를 만들어줘"라고 지시하면 됩니다. TBT가 300ms를 넘으면 '끊김 위험' 신호입니다.
STEP 2 · '긴 작업'을 목록으로 뽑아낸다
브라우저 성능 기록에서 50ms 이상 걸린 작업(Long Task)만 골라냅니다. 예약사이트라면 "날짜 캘린더 렌더링 620ms", 쇼핑몰이라면 "상품 필터 계산 480ms" 식으로 범인이 드러나죠. AI에게 결과를 표로 정리하게 하면 끝.
STEP 3 · 전문용어를 '사장님 언어'로 번역한다
"이미지 지연 로딩 미적용으로 LCP 4.2초"라고 쓰면 사장님은 이해 못 합니다. 대신 "상품 사진이 한 번에 다 뜨느라 첫 화면이 4.2초 늦게 나옵니다 → 사진을 순차 로딩으로 바꾸면 1.8초로 단축, 이탈 손님 회복 예상". AI가 이 번역을 자동으로 해줍니다.
STEP 4 · 리포트를 자동 발송한다
주 1회 진단 결과를 PDF로 만들어 이메일로 쏘도록 예약 실행을 걸어둡니다. 사장님은 아무것도 안 해도 매주 '우리 사이트 건강검진표'를 받아보게 됩니다. 봇이 알아서 일하는 동안 당신은 다른 계약을 따면 되죠.
STEP 5 · 월 구독으로 전환한다
첫 진단 리포트를 무료로 1건 제공해 "이런 문제가 있었네요"를 각인시킨 뒤, "매주 자동 진단 + 우선순위 처방 = 월 100만원" 구독으로 넘깁니다. 실시간 대시보드·예약사이트처럼 끊김이 곧 매출 손실인 업종일수록 계약 성사율이 높습니다.
비전공자가 진짜 넘어야 할 벽
솔직히 말하면, AI가 스크립트를 짜줘도 "이 결과가 왜 나왔는지, 어떤 처방이 진짜 효과 있는지" 판단하는 기본기는 필요합니다. TBT와 LCP가 뭔지, 왜 이미지 지연 로딩이 답인지 이해해야 사장님의 "정말 이거 하면 빨라져요?"라는 질문에 자신 있게 답할 수 있으니까요. 도구는 무료지만, '진단을 해석하는 눈'이 곧 월 100만원의 근거입니다.
투더제이(TTJ) 코딩클래스 정규반에서는 바로 이런 '측정 → 해석 → 처방 → 수익화' 파이프라인을 비전공자 눈높이에서, 실제 봇을 함께 만들며 훈련합니다. 코드를 외우는 게 아니라, AI를 부려 돈 버는 구조를 설계하는 법을 배우는 곳입니다.
홈페이지가 뚝뚝 끊긴다는 건, 누군가에겐 골칫거리지만 당신에겐 월 100만원짜리 계약서일 수 있습니다. 오늘 소개한 5단계를 작은 사이트 하나에 직접 적용해보세요. 첫 진단 리포트 한 장이, 당신의 첫 고객을 데려올 겁니다.