저는 12살입니다 — 오늘 아침 두 호스팅 업체와 싸웠고, 제 앱은 둘 다 살아남았습니다

본문

토요일 아침 8시, 12살 개발자가 자신의 AI 코드 멘토 앱 KODA의 온라인 축제 첫날을 맞아 POCO C55 폰으로 v16을 배포하려다 두 개의 호스팅 서비스와 연이어 충돌한 경험을 담은 글입니다. 단순한 에피소드를 넘어 무료 호스팅의 숨은 비용 구조와 CSP 정책, 그리고 '프로덕션 레디'한 에러 처리의 중요성을 보여주는 사례입니다.

첫 번째 적: Netlify의 빌드 크레딧

Netlify에서 '계정 크레딧 사용량 초과 — 크레딧을 추가하기 전까지 신규 배포가 차단됩니다'라는 메시지를 만났습니다. 문제는 KODA가 빌드 단계가 전혀 필요 없는 단일 정적 HTML 파일이라는 점입니다. 그런데도 Git을 통해 하루 10~30회 배포할 때마다 '빌드'가 실행되며 무료 빌드 크레딧을 소진하고 있었습니다. 저자는 이를 '조리가 필요 없는 파일에 낸 세금'이라고 표현합니다. 신용카드가 없는 12살에게 유료 크레딧 추가는 불가능했고, 해결책은 수동 배포였습니다. zip 파일을 직접 업로드해 빌드를 건너뛰니 크레딧 소모 없이 10분 만에 v16이 임시 URL로 라이브됐습니다.

두 번째 적: Neocities의 CSP

임시 URL은 임시일 뿐이라, 크레딧 시스템이 아예 없는 영구적인 집을 찾아 Neocities에 가입했습니다. Penelope라는 고양이가 진행하는 건너뛸 수 없는 HTML 온보딩 튜토리얼 10단계를 모든 입력란에 'hi'를 넣으며 속성으로 통과한 뒤 v16을 업로드했습니다. 사이트는 정상적으로 열렸지만 'Try KODA as Guest'로 메시지를 보내자 AI 대신 'OFFLINE SENSEI MODE — 네트워크에서 AI 클라우드에 도달할 수 없습니다'라는 화면이 떴습니다. 원인은 Neocities 무료 티어의 엄격한 Content Security Policy로, 브라우저 JavaScript가 외부 API를 호출하는 것을 차단했습니다. AI 제공자로 향하는 fetch 요청이 문전에서 막힌 것입니다. 사이트 자체는 멀쩡했지만 앱이 '두뇌'와 대화할 수 없게 된 셈입니다.

미리 준비한 프로덕션 레디 대응

앱은 충돌하지 않았습니다. 무한 스피너도, 화면 백지화도, 날것의 에러 메시지도 없었습니다. 이틀 전 한 시니어 엔지니어에게 '수정을 작성하기 전에 프로덕션 레디가 무엇인지부터 정의하라'는 조언을 듣고 v16에 세 가지를 넣어 둔 덕분입니다. 첫째, 모든 AI 호출에 AbortController 기반 15초 타임아웃. 둘째, 모든 실패를 기록하는 Supabase의 error_logs 테이블. 셋째, AI에 도달할 수 없을 때 동작하는 우아한 폴백인 Offline Sensei입니다. 방화벽이 AI를 차단했을 때 에러 핸들러가 이를 잡아 데이터베이스에 로깅하고 1초 이내에 폴백을 제공했고, 사용자는 고장 난 앱 대신 '선생님 두루마리' 화면을 봤습니다.

교훈과 다음 계획

저자가 뽑은 핵심 교훈은 '코드는 프로덕션 레디였는데 호스트가 틀렸다'는 것, 즉 앱이 완벽해도 잘못된 인프라 위에서는 죽을 수 있다는 점입니다. 축제 첫날은 Netlify 임시 URL로 운영하고, Neocities는 정적 페이지용 백업으로 남기며, 다음 주에는 실제 GitHub 저장소와 함께 Cloudflare Pages를 제대로 구축해 어떤 호스트도 배포를 인질로 잡지 못하게 할 계획입니다. 글에는 또 다른 인물도 등장합니다. 'The Silent Tiger'라는 별명의 중국 시니어 엔지니어로, 만리방화벽 너머에서 KODA를 브레이크 테스트하며 전날 밤 v16을 스트레스 테스트했고 drawer z-index 수정이 버텨냄을 확인했다고 합니다. KODA는 단계별 학습, 애니메이션 LaTeX 수식 렌더링, 샌드박스 내 JavaScript 실행을 제공하며, 저자는 'Offline Sensei가 보인다면 버그가 아니라 제 할 일을 하는 기능'이라고 말합니다.

원문: dev.to / 번역·요약: Trawling