코덱스로 만든 웹사이트를 통짜로 방치하면 매번 돈이 깨집니다
TuBrief 편집팀
2026년 7월 18일
0
컴퓨터/소프트웨어원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
인공지능이 짜준 코드는 보통 HTML 파일 하나에 모든 기능이 뭉쳐 있습니다. 처음 만들 때는 편하지만, 버튼 문구 하나 바꾸려다 전체 코드를 다시 뽑아야 하는 악순환이 시작됩니다. 2026년 기준 깃허브 통계를 보면 AI가 만든 코드가 폭발적으로 늘고 있습니다. 다들 만드는 건 쉬워졌는데, 고치는 걸 못해서 결국 외주 개발자를 찾습니다. 기술적으로 완전히 독립하고 싶다면 처음부터 코드를 쪼개야 합니다. 버튼이나 입력 창을 독립된 파일로 나누어 관리하는 구조가 답입니다.
전체 코드를 다시 짜는 허튼짓을 멈추고 작업 시간을 줄이려면, 브라우저가 기본으로 지원하는 기능을 활용해 웹사이트를 조각내야 합니다.
<nav> 태그를 그대로 복사합니다. 이 부분을 navigation-bar.html이라는 별도 파일로 저장합니다.custom-button.html로, 이메일을 받는 입력 폼 영역은 lead-form.html로 각각 분리합니다.index.html 파일에서 이 분리된 파일들을 호출하도록 웹 컴포넌트 API나 자바스크립트 fetch 함수를 삽입합니다.이 작업을 끝내면 웹사이트가 모듈 단위로 바뀝니다. 나중에 버튼 색상을 바꿀 때 custom-button.html 하나만 수정하면 웹사이트 전체에 곧바로 반영됩니다.
프레이머(Framer)나 웹플로우(Webflow) 같은 도구도 AI 컴포넌트 기능을 내놓고 있습니다. 하지만 프레이머 베이직 플랜은 월 10달러에 페이지 수가 제한되고, 웹플로우 CMS 플랜은 월 23달러를 매달 결제해야 합니다. 게다가 그 플랫폼을 떠나는 순간 코드를 쓰지 못하게 묶어버립니다. 반면 이렇게 순수 코드를 쪼개서 기깃허브 페이지 같은 무료 호스팅에 올리면 고정 비용이 0원이 됩니다. 코드가 완전히 내 소유가 되는 것입니다.
조회수만 높은 웹사이트는 돈이 안 됩니다. 고객이 버튼을 누르고 이메일을 남기는 순간을 정확히 추적해야 마케팅 예산을 아낍니다. 코덱스에게 구글 애널리틱스 4(GA4) 추적 코드를 넣으라고 시킬 때는 프롬프트에 명확한 기준을 줘야 코드가 망가지지 않습니다.
<instruction_set>
- 목적: GA4 이벤트 추적 스니펫 삽입
- 컨테이너 ID: G-XXXXXXXXXX
- 조건: 주요 CTA 버튼 클릭 시 'cta_click' 이벤트를 자바스크립트 데이터레이어로 전송
</instruction_set>
이렇게 XML 태그 형태로 명확히 구획을 나누어 지시하면 AI가 기존 디자인을 깨뜨리지 않고 정확한 자바스크립트 코드만 골라서 넣어줍니다.
고객 정보를 모으기 위해 월 수만 원씩 하는 유료 폼 서비스를 쓸 필요는 없습니다. 구글 스프레드시트와 앱스 스크립트(Apps Script)를 연동하면 비용이 전혀 들지 않는 수신 저장소가 만들어집니다.
timestamp, name, email, message를 차례로 적습니다. 그 후 메뉴에서 확장 프로그램 안의 Apps Script를 실행합니다.LockService.getScriptLock 구문이 포함된 doPost(e) 함수를 작성합니다. 이 구문은 여러 사용자가 동시에 버튼을 누를 때 데이터가 누락되는 현상을 막아줍니다. 악성 봇을 걸러내는 허니팟 필터 코드도 이때 함께 넣습니다./exec 주소를 복사합니다.<form>) 태그의 action 속성에 복사한 주소를 그대로 붙여넣습니다.이제 광고를 보고 들어온 사람이 신청 버튼을 누르면 유료 툴을 거치지 않고 구글 스프레드시트에 리드가 실시간으로 쌓입니다. 다만 마케팅을 공격적으로 해서 트래픽이 몰릴 때는 구글 API 호출 제한으로 에러가 날 수 있습니다. 이를 방지하려면 전송 실패 시 몇 초 후 재시도하는 지수 백오프(Exponential Backoff) 비동기 로직을 자바스크립트 코드에 추가해두는 것이 안전합니다.
내 컴퓨터에서는 잘 뜨던 사이트가 버셀(Vercel)이나 넷리파이(Netlify), 깃허브 페이지에 올리는 순간 먹통이 되곤 합니다. 비개발자가 가장 자주 겪는 3가지 오류와 해결법입니다.
원인은 상대 경로 문제입니다. 내 컴퓨터 폴더 기준으로 주소를 적었기 때문에 서버에 올라가면 파일을 못 찾습니다. 이미지 주소를 내 컴퓨터 기준이 아닌, 최상위 루트를 기점으로 하는 절대지향형 경로(/images/logo.png)로 전부 교체해야 해결됩니다.
서버는 새로고침된 주소의 독립된 페이지를 찾으려고 하지만, 우리 사이트는 single-page 구조라 파일이 존재하지 않기 때문입니다. 넷리파이 배포라면 루트 폴더에 _redirects 파일을 만들고 /* /index.html 200을 적어 넣으면 됩니다. 버셀이라면 vercel.json 파일에 rewrites 규칙을 선언해 해결합니다.
깃허브 페이지에 내 도메인을 붙였을 때 ERR_SSL_PROTOCOL_ERROR가 뜬다면, 도메인 관리 사이트(클라우드플레어 등)로 가야 합니다. 프록시 상태를 끄고 DNS 전용(DNS Only)으로 변경한 뒤, 깃허브 표준 IP 주소 4곳에 A 레코드를 매핑하십시오. 그 후 깃허브 설정에서 SSL 강제 사용을 다시 체크하면 해결됩니다.
| 장애 요인 | 브라우저 오류 메시지 | 해결 방법 |
|---|---|---|
| 이미지 경로 유실 | GET ... 404 Not Found | 최상위 루트 상대 경로(/)로 수정 |
| 새로고침 시 화면 이탈 | 404 Page Not Found | _redirects 또는 vercel.json 리다이렉트 설정 |
| 도메인 보안 설정 에러 | ERR_SSL_PROTOCOL_ERROR | DNS Only 레코드 설정 후 SSL 재인증 |
API 인증 키 같은 민감한 정보를 소스 코드에 그대로 적어두면 깃허브를 통해 다 털립니다. 버셀이나 넷리파이 대시보드의 환경변수(Environment Variables) 메뉴에 따로 등록해야 합니다. 이때 자바스크립트 빌드 규칙에 따라 변수명 앞에 NEXT_PUBLIC_ 같은 접두사를 붙여야 프론트엔드 코드에서 정상적으로 인식합니다. 결제 키처럼 절대 노출되면 안 되는 비밀번호는 브라우저가 직접 호출하게 만들면 안 되며, 버셀 펑션 같은 서버리스 함수 내부에서만 조회하도록 주소를 우회해야 안전합니다.
AI에게 계속 코드를 고쳐달라고 요구하다 보면 어느 순간 들여쓰기가 뒤죽박죽 꼬이고 구조가 망가집니다. 인간이 직접 눈으로 보고 어디를 고쳐야 할지 알아볼 수 있게 규칙을 강제해야 합니다.
HTML 태그와 CSS 이름은 무조건 소문자로만 씁니다. 들여쓰기는 탭 문자를 쓰지 말고 공백 2칸으로 통일합니다. 주석은 복잡한 설명 없이 고쳐야 할 코드 바로 윗 줄에 딱 한 줄로만 적습니다.
AI에게 코드를 짜달라고 하기 전에 시스템 프롬프트 구역에 이 규칙을 미리 박아두는 것이 좋습니다.
<system_formatting_guard>
- 무조건 <!doctype html> 선언 포함
- 모든 태그와 속성은 소문자 사용
- 들여쓰기는 soft spaces 2칸 고정
- 수정 빈도가 높은 가격, 문구 바로 위에는 <!-- TODO: 수정 영역 --> 주석 배치
</system_formatting_guard>
코드가 제대로 정렬되었는지 확인하려면 프리티어 플레이그라운드(Prettier Playground) 웹사이트를 쓰면 됩니다. 내가 만든 코드를 붙여넣고 클릭 한 번이면 들여쓰기가 칼같이 정렬됩니다. 코드를 업데이트하기 전에는 프리티 디프(Pretty Diff) 같은 온라인 도구를 열어 왼쪽에는 기존 코드를, 오른쪽에는 새 코드를 넣고 대조해 보십시오. 오타 때문에 데이터 수집 스크립트가 누락되었거나 입력 폼이 깨진 부분을 배포 전에 골라낼 수 있습니다. 이 과정만 습관으로 만들어도 개발자 도움 없이 혼자서 웹사이트를 안전하게 운영할 수 있습니다.