"분명 예쁘게 만든 홈페이지인데, 왜 손님이 장바구니도 못 보고 나가버릴까요?"
— 월 매출 3천만 원 쇼핑몰 대표님이 저에게 던진 첫 질문
답은 의외로 단순합니다. 화면이 뜨기까지 손님이 기다리는 시간, 딱 3초입니다. 구글 연구에 따르면 로딩이 1초에서 3초로 늘어나면 이탈률은 32% 치솟고, 5초가 되면 90%까지 올라갑니다. 그런데 대부분의 소상공인 홈페이지는 '화려해 보이려고' 넣은 자바스크립트(JS) 라이브러리 수십 개에 짓눌려 있습니다.
슬라이드 하나 띄우려고 300KB짜리 라이브러리를, 애니메이션 하나 때문에 또 다른 200KB를 불러옵니다. 이 '떡칠'을 걷어내고 2027년 웹 표준이 될 CSS Interop 2027 기능으로 갈아끼우면, 코드 한 줄 복잡하게 짜지 않고도 홈페이지가 날아다닙니다. 그리고 이 작업, 비전공자도 AI를 옆에 끼면 건당 50만 원을 받고 대행할 수 있습니다.
왜 지금 'CSS Interop 2027'인가?
Interop은 크롬·사파리·파이어폭스 등 브라우저 회사들이 "이 기능만큼은 똑같이 완벽하게 지원하자"고 매년 합의하는 프로젝트입니다. 2027년 목록에는 scroll-driven animation, :has(), view transitions 같은, 예전엔 무거운 JS로만 가능했던 효과를 CSS 몇 줄로 대체하는 기능이 가득합니다. 즉, "제거 대상 JS"와 "대체할 CSS"가 공식적으로 짝지어진 셈이죠.
비전공자도 가능한 5단계 실전 프로세스
"코드도 모르는데 어떻게 남의 홈페이지를 고치냐"고요? 핵심은 직접 짜는 게 아니라 '진단하고 AI에게 지시하는 것'입니다. 아래 5단계만 순서대로 밟으면 됩니다.
① 무료 진단 — 숫자로 공포를 보여준다
구글 PageSpeed Insights에 고객사 주소를 넣고 점수를 캡처합니다. 보통 소상공인 사이트는 모바일 점수가 30~45점. "지금 손님의 절반이 로딩 중에 떠나고 있습니다"라는 한 문장이 영업의 전부입니다.
② 범인 색출 — 무거운 JS 찾기
크롬 개발자도구(F12) → Network 탭을 열면 용량 순으로 파일이 정렬됩니다. jQuery, 슬라이더, 애니메이션 플러그인 등 '덩치 큰 JS'를 메모해 두세요.
③ AI로 CSS 전환 — 핵심 치트키
"이 슬라이더 JS 코드를 CSS scroll-snap으로 바꿔줘. 라이브러리 의존성 없이 순수 CSS만 사용하고, 모바일 대응과 접근성도 지켜줘."
AI가 뽑아준 코드를 붙여넣고 JS 로딩 줄을 지우면 끝입니다. 문법을 외울 필요가 없습니다. '무엇을 없애고 무엇으로 바꿀지'만 알면 됩니다.
④ 검증 & 리포트 — 신뢰를 파는 단계
다시 PageSpeed를 돌려 '42점 → 91점', '로딩 4.8초 → 1.3초' 같은 전후 비교 이미지를 만듭니다. 이 한 장이 재의뢰와 입소문을 부릅니다.
⑤ 납품 & 정산 — 타깃별 공략
쇼핑몰(이탈률=매출 직결), 병원·학원(예약 전환율), 소상공인(네이버 검색 노출)은 속도에 가장 민감한 4대 고객군입니다. 건당 30~50만 원, 유지보수 월 구독으로 확장하면 안정적인 부업이 됩니다.
이 부업의 진입장벽은 '코딩 실력'이 아니라 '진단 → 교체 → 리포트'라는 작업 흐름을 아는가입니다. AI는 코드를 쓰고, 당신은 판단합니다.
"그래도 F12를 열고 코드를 만지는 그 첫걸음이 두렵다"면, 그 손잡이를 잡아드리는 게 바로 교육의 역할입니다. 투더제이(TTJ) 코딩클래스 정규반에서는 비전공자가 AI를 활용해 실제 홈페이지를 진단하고, CSS Interop 기능으로 경량화한 뒤, 고객에게 리포트를 납품해 정산받기까지의 전 과정을 프로젝트 실습으로 다룹니다. 화려한 이론이 아니라, 오늘 배운 걸 이번 주말에 50만 원으로 바꾸는 흐름 말입니다. 손님이 '로딩'을 보기 전에 떠나는 홈페이지는, 지금도 당신의 첫 고객을 기다리고 있습니다.