사례 연구 1: 다국어 랜딩 + 결제 페이지

아이디어

한 친구가 한국으로 이주하는 외국인을 위한 29달러짜리 PDF 가이드를 판다. 그녀는 전 세계에서 빠르게 로드되고, 영어·한국어·중국어로 말하며, 서버를 만지지 않고도 카드 결제를 받는 단일 페이지를 원했다.

스펙

코드를 한 줄이라도 쓰기 전에 스펙을 한 문단으로 유지했다:

29달러짜리 디지털 제품을 위한 단일 페이지 마케팅 사이트를 만들어라.
세 언어(en/ko/zh)를, 브라우저에서 자동 감지하되
토글로 전환 가능하게. Stripe Checkout을 여는 "구매" 버튼 하나와
성공 시 감사 페이지로 리다이렉트. 내가 유지보수해야 하는 백엔드
서버는 없이. 어디서든 빠르게 로드되어야 한다.

스펙이 무엇을 말하지 않는지 주목하라: 프레임워크 없음, 디자인 시스템 없음, 애널리틱스 없음, 이메일 수집 없음. 그 하나하나가 합리적인 기능이었을 것이고, 그 하나하나가 첫 출시를 늦췄을 것이다. 한 문단짜리 스펙의 규율은 대부분 무언가를 빼는 규율이다.

스택

"내가 유지보수하는 백엔드 없음"에 "전 세계에서 빠름"을 더하면, 비밀을 필요로 하는 단 하나(Stripe 세션 생성)를 위한 작은 서버리스 함수가 딸린 엣지 CDN 위의 정적 호스팅을 곧장 가리켰다. 우리는 Cloudflare Pages 위의 정적 사이트에 단일 Pages Function을 선택했다. 전체 아키텍처가 한 문장에 들어간다 — 함수 하나를 호출하고 그 함수가 Stripe와 통신하는 정적 페이지 — 그리고 그 단순함이 나중에 디버깅 가능하게 만든 것이다.

핵심 프롬프트

우리는 넓게 시작해서 AI가 구조를 제안하게 했다:

정적 랜딩 페이지(순수 HTML/CSS/JS, 프레임워크 없음)를
en/ko/zh 언어 토글과 함께 스캐폴드하라. 카피를 언어를 키로 하는
단일 JS 객체에 저장하라. 기본값을 navigator.language에서
감지하라. index.html 하나에 main.js 하나로 유지하라.

그런 다음 비밀이 사는 결제 경로:

/api/checkout에 Cloudflare Pages Function을 추가하라. 단일
29달러 제품에 대한 Stripe Checkout 세션을 생성하고 리다이렉트
URL을 반환하는 것이다. STRIPE_SECRET_KEY를 환경에서 읽고, 절대
하드코딩하지 말라. 구매 버튼은 이 함수에 POST한 다음 반환된
URL로 window.location 해야 한다.

"절대 하드코딩하지 말라"는 문구는 제 자리를 한다. 제 기본값에 맡겨두면, AI는 예제를 "동작"하게 만들려고 플레이스홀더 키를 인라인으로 즐겁게 떨궈놓고, 플레이스홀더는 어느새 출시되는 진짜 키가 되는 법이다. 프롬프트에서 한 번 소리 내어 말하는 것이 리뷰에서 잡아내는 것보다 싸다.

장애물

첫 라이브 테스트가 실패했다: 구매 버튼이 아무것도 하지 않았고, 브라우저 콘솔에 CORS 에러가 나왔다. 우리는 추측하지 않았다. 정확한 에러를 그대로 다시 붙여 넣었다:

구매를 클릭하면 이렇게 로그된다: "Access to fetch at
'/api/checkout' blocked by CORS policy." 함수와 페이지는 같은
도메인에 있다. 여기 함수 코드다: [붙여넣음]. 실제로 뭐가 잘못됐나?

AI가 즉시 그것을 잡아냈다: 함수가 Stripe URL을 JSON으로 반환하고 있었지만, 함수의 OPTIONS 프리플라이트가 처리되기 전에 fetch가 만들어지고 있었다. 우리가 실수로 정적 페이지와 함수를 서로 다른 두 Pages 프로젝트에 배포했기 때문이었다. 진짜 수정은 코드가 아니라 배포 토폴로지였다. 함수를 같은 프로젝트의 /functions 디렉터리로 옮기자 에러가 사라졌다.

이 교훈은 곱씹을 가치가 있다: 증상은 코드에 있었지만(fetch에서 나온 CORS 에러), 원인은 인프라에 있었다(하나가 아니라 두 프로젝트). 만약 우리가 설정을 붙여 넣지 않고 AI에게 "CORS 에러를 고쳐"라고 시켰다면, AI는 Access-Control-Allow-Origin 헤더를 덧붙였을 것이다 — 컴파일되고, 증상을 덮고, 진짜 버그를 살려두는 수정. 문자 그대로의 에러와 함께 그 주변 맥락을 붙여 넣고, 당신의 설정과 맞지 않으면 첫 번째 그럴듯한 설명을 받아들이지 말라.

출시

우리는 라이브 Stripe 키를 Pages 대시보드에 암호화된 환경 변수로 추가하고(저장소에는 절대 넣지 않고), 그녀 도메인의 DNS를 Pages로 향하게 한 뒤, 카드로 진짜 29달러 테스트 구매를 한 번 돌리고 환불했다. 우리는 또 실패 경로도 일부러 클릭해봤다 — 거절되는 테스트 카드 — 그녀가 청구되지 않고 빈 화면 대신 멀쩡한 메시지를 보는지 확인하기 위해. 오후 한나절 만에 라이브. 그녀는 그날 저녁 첫 판매를 했다.