클로드 코드로 고퀄리티 상세 페이지 자동 생성하기
📺 원본 영상: [풀버전] 클로드코드로 고퀄리티 상세페이지 자동으로 만드는 방법 (기획, 카피라이팅, 디자인 모두) 🎙️ 채널: 빌더 조쉬 Builder Josh 📅 정리 일자: 2026-02-24 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(코드, 에이전트 구조도, 생성 이미지 등)는 포함되지 않을 수 있습니다.
개요
이 강연은 Claude Code의 멀티 에이전트 팀 기능과 Google Gemini(제미나이) API를 조합하여, 크몽에서 최소 100만 원~500만 원을 들여야 했던 상세 페이지 제작을 100% 자동화하는 방법을 다룬다. 단순한 이미지 생성 튜토리얼이 아니라, 기획·카피라이팅·디자인·이미지 프롬프팅까지 아우르는 에이전트 팀 전체를 Claude Code 위에서 구성하고 실제 결과물을 검증하는 과정을 처음부터 끝까지 보여준다.
왜 상세 페이지 자동화인가 — 비용과 구조의 문제
크몽과 같은 플랫폼에서 상세 페이지 외주 제작을 의뢰하면 최소 100만 원에서 많게는 500만 원까지 비용이 발생한다. 이 가격이 형성되는 이유는 단순히 디자인 한 장을 만드는 것이 아니기 때문이다. 기획 단계에서 제품의 핵심 가치를 도출하고, 카피라이팅으로 구매를 유도하는 문장을 작성하며, 디자인으로 시각적 설득 구조를 완성하고, 이후 수정까지 반복하는 복잡한 협업 프로세스가 포함되어 있다. 강연자는 이 전체 프로세스를 Claude Code의 에이전트 팀으로 대체할 수 있다고 주장하며, 이는 단순한 비용 절감을 넘어 “우리만의 상세 페이지로 세일즈(sales)를 직접 운영하는 시대”가 열렸음을 의미한다고 강조한다.
상세 페이지는 구조상 단일 이미지가 아니라 다수의 이미지 조각이 세로로 이어 붙여진 형태다. 고객의 시선을 3초 안에 잡는 헤더 이미지부터, 공감을 유발하는 페인 포인트 섹션, 솔루션 제시, 후기, 세트 구성 안내, 보장 문구까지 각각이 별도의 이미지 슬롯으로 구성된다. 강연자는 이 구조를 13개의 이미지 슬롯으로 정의했으며, 이 13개를 한꺼번에 자동 생성하고 하나의 PNG 파일로 합치는 것이 이번 시스템의 핵심 결과물이다.
시스템 아키텍처 — 에이전트 팀의 구성
💡 [영상 참조] 강연자는 이 시점에서 Whimsical(윔지컬)로 제작한 에이전트 팀 구조도를 화면에 표시합니다. 상세 다이어그램은 원본 영상에서 확인하세요.
전체 시스템은 오케스트레이터를 중심으로 다섯 개의 전문 에이전트가 순차적으로 연결되는 파이프라인 구조다. 강연자는 이를 실제 회사의 팀 구조에 비유하여 설명한다.
첫 번째는 **정보 수집 에이전트(Intake Agent)**다. 사용자가 만들고 싶은 상세 페이지의 요건과 제품 정보를 입력하면, 이 에이전트가 필요한 정보를 질문을 통해 수집한다. 일종의 고객 상담 역할이다.
두 번째는 **리서치 에이전트(Research Agent)**다. 수집된 정보를 바탕으로 웹에서 관련 자료, 경쟁사 정보, 시장 트렌드 등을 수집한다. 이 에이전트의 결과물이 이후 카피라이팅의 원재료가 된다.
세 번째는 **카피라이팅 에이전트(Copywriting Agent)**다. 강연자는 카피라이팅에 대해 “판매에 있어서 전부라고 해도 과언이 아니다”라고 단언한다. 단순한 제품 설명이 아닌 세일즈 라이팅(Sales Writing), 즉 구매 행동을 유발하는 설득 문구를 작성하는 것이 이 에이전트의 역할이다.
네 번째는 **디자인 에이전트(Design Agent)**다. 카피라이팅 결과물을 받아 전체 상세 페이지의 스타일과 색상 방향을 결정하고, 이를 다음 단계에 전달하는 역할을 한다.
다섯 번째는 **프롬프팅 에이전트(Prompting Agent)**다. 디자인 방향을 구체적인 Gemini API 이미지 생성 프롬프트 13개로 변환한다. 이 프롬프트들이 Gemini를 호출하여 실제 이미지를 생성하고, 최종적으로 Python 스크립트가 13개 이미지를 한 장의 세로형 PNG로 합쳐 결과물을 완성한다.
에이전트 팀 구축 과정 — 설계도 작성부터 수정까지
초기 설계 요청과 첫 번째 문제
Claude Code를 Cursor IDE에서 열고, 상세 페이지 에이전트 팀의 구조도 제안을 요청하는 것부터 시작한다. 강연자는 “정보 수집 에이전트, 리서치 에이전트, 카피라이팅 에이전트, 디자인 에이전트, 프롬프팅 에이전트 개발용 구조도를 제시해줘. Gemini Pro로 진행하고 싶어”라는 식으로 요청했다. 이때 Claude Code는 워크플로우 구성, 실행 환경(CLI/웹 애플리케이션/API 서버), 결과물 형태(HTML/CSS, Figma 연동, JSON 파일 등)에 대해 확인 질문을 돌려준다.
강연자는 이 질문들에 대해 실행 환경은 CLI(Command Line Interface), 워크플로우는 순차 파이프라인 방식, 결과물은 PNG 이미지 13개라고 명확히 지정했다. 그러자 Claude Code가 계획도를 제시했는데, 첫 번째 시도에서는 결정적인 문제가 발견되었다. 전체 구조가 Python 파일(main.py, config.py)과 JSON 파일로만 구성되어 있었던 것이다. 이는 Claude Code 공식 가이드라인에서 권장하는 에이전트·스킬 구성 방식과 전혀 다른 접근이었다.
수정 방향 — 공식 가이드라인 준수의 중요성
강연자는 이 문제를 명확히 짚어내고 재설계를 요청했다. 핵심 수정 지시는 “Claude Code의 공식 서브 에이전트와 스킬을 참고해서 만들 수 있도록 해줘. 공식 팀 에이전트 기능을 활용해서 계획도를 다시 제시해줘”였다. 수정된 계획도는 에이전트들이 Markdown(.md) 파일 형태로 agents/ 폴더 내에 구성되고, Claude Code의 스킬 기능을 활용하는 별도의 파일이 skills/ 폴더에 위치하는 구조로 제시되었다.
강연자는 이 구조에서 검토 포인트를 두 가지로 압축해서 설명한다. 첫째, agents/ 폴더 안에 Markdown 파일로 에이전트 정의가 제대로 들어왔는지, 둘째, skills/ 폴더에 별도의 스킬 파일이 올바르게 구성되었는지다. 이 두 가지가 확인되면 나머지 Python 코드나 세부 구현은 Claude Code가 알아서 처리한다는 것이 강연자의 입장이다. “개발은 Claude가 훨씬 더 잘 한다”는 표현으로 이를 요약한다.
상세 페이지 설계의 핵심 — 13단계 랜딩 페이지 구조
단순히 에이전트 팀을 만드는 것만으로는 고품질 결과물이 나오지 않는다. 강연자는 별도로 landing-page-plan.md 파일을 준비하여 에이전트가 참조하도록 시스템 프롬프트에 학습시켰다. 이 파일이 이번 자동화 시스템의 품질을 결정하는 핵심 요소다.
💡 [영상 참조] 강연자는 이 시점에서 랜딩 페이지 플랜 문서의 13단계 구조를 화면에 표시합니다. 전체 문서는 강연자가 GitHub에 공개한 자료에서 확인할 수 있습니다.
강연자가 직접 설명한 랜딩 페이지 구조의 핵심 흐름은 다음과 같다. 첫 단계는 긴급성 헤더로, 3초 안에 방문자의 시선을 잡아야 한다. 다음은 공감 섹션으로, “이거 내 얘기네”라는 반응을 이끌어내는 구성이다. 강연자는 본인이 실제 제작했던 ‘5일간의 이메일 부트캠프’ 상세 페이지 사례를 예시로 들며 공감 섹션의 방향을 설명했다. “앱 만들었는데 아무도 안 써요”, “릴스(Reels) 100개 올렸는데 결제는 0건이에요”, “뭐가 문제인지 모르겠어요”와 같은 문구가 고객의 아픔을 공감하는 카피라이팅의 시작점이 된다.
공감 이후에는 문제 정의 섹션이 이어진다. 강연자의 설명에 따르면 이 섹션에서는 “시간은 흐르고 수익은 여전히 0이다”, “경쟁자는 늘어나고 기회는 줄어든다”는 식으로 문제의 심각성을 구조화하고, 그 원인을 명확히 제시해야 한다. 이 문제 정의 위에 솔루션, 변화 스토리, 후기, 세트 구성, 보장 문구가 순차적으로 쌓이면서 13개 이미지 슬롯이 채워진다. 강연자는 이 구조를 Claude Code의 카피라이팅 에이전트가 그대로 참조하게 만들었으며, 이것이 결과물 품질의 핵심 변수라고 강조한다.
Gemini API 연동 — 이미지 생성 엔진 연결
에이전트 팀과 랜딩 페이지 플랜이 준비되면, 이미지를 실제로 생성하는 Gemini API를 연결해야 한다. 강연자는 ai-studio.google.com에 접속하여 “Get API Key” 메뉴에서 새 API 키를 발급받는 과정을 보여줬다. 이 과정에서 중요한 사전 조건이 있는데, Google Cloud Console에서 결제 계정 연동이 완료되어 있어야 API를 정상적으로 활용할 수 있다. 강연자는 구글 AI 모드나 검색을 통해 “구글 콘솔 API 결제 연동 방법”을 찾아 신용카드 또는 체크카드를 등록하면 된다고 설명했다.
API 키를 발급받은 후에는 이를 .env 파일에 저장해야 한다. 강연자는 Cursor에서 새 파일을 생성할 때 .env라고 이름 짓는 과정을 보여줬다. .env(dot-env) 파일은 API 키처럼 외부에 노출되어선 안 되는 민감한 정보를 저장하는 숨김 파일로, 이 파일을 Claude Code 세션에서 불러와 “Gemini API 키는 여기에 있으니 에이전트가 참조하도록 하라”고 지시하는 형태로 연동이 완성된다.
⚠️ STT 교정: 원본 음성에서 “.emd 파일”로 반복 언급된 부분은 맥락상
.env파일의 오인식으로 판단하여 교정했습니다.
실제 결과물 검증 — 화장품과 유모차 상세 페이지
첫 번째 시도 — 기준 없는 자동화의 한계
“상세 페이지 하나 테스트로 만들어줘”라는 첫 번째 명령의 결과물은 강연자의 기대에 미치지 못했다. AI 자동 광고 최적화를 주제로 한 상세 페이지가 나왔는데, 구조가 뒤죽박죽이고 이미지 높이도 통일되지 않았으며 만화풍 이미지가 섞여 있어 실제 판매에 쓸 수 없는 수준이었다. 강연자는 이를 “어느 정도의 내용으로 제작해야 한다는 가이드라인이 없었기 때문”이라고 진단했다. 즉, 에이전트 팀의 구조 자체보다 품질 기준을 명시하는 것이 더 중요하다는 교훈을 얻게 된 순간이다.
두 번째~세 번째 시도 — 점진적 최적화
이후 강연자는 구글 이미지 검색에서 화장품 이미지를 가져와 Cursor 대화창에 붙여 넣은 뒤, 다음 두 가지 조정 사항을 추가로 지시했다. 첫째, 전체 이미지의 가로·세로 크기를 1,200px로 고정할 것. 둘째, 샘플 이미지를 참조하여 실제 사람 얼굴이 등장하는 모델 이미지를 생성할 것. 두 번째 결과물은 모공 클렌징 세트를 주제로 카피라이팅이 적용된 이미지들이 생성되었고, 실사 모델 이미지와 사용자 후기, 성분 설명이 포함되어 품질이 눈에 띄게 향상되었다.
세 번째 시도에서는 모델 등장 비율을 높이고, 제품 디테일을 강화하며, 만화풍 이미지를 완전히 제거하도록 추가 지시했다. 이 결과물에 대해 강연자는 “바로 써도 될 만한 수준”이라고 평가했다. 고객 공감 섹션(“이런 고민 있으신가요?”), Before & After 이미지, 클렌징 성분 안내, 100% 만족 보장 문구, 자주 묻는 질문(FAQ), 경쟁 비교 표까지 상세 페이지의 주요 섹션이 완성된 형태로 자동 생성되었다는 점에서 의미가 크다.
유모차 상세 페이지 — 제품 범용성 확인
화장품에 이어 강연자는 유모차 이미지를 동일한 방식으로 시스템에 입력하여 “유모차를 기반으로 한 상세 페이지도 하나 만들어줘”라고 요청했다. 결과물에는 “아이와 함께 하는 모든 순간을 특별하게”라는 헤더 카피와 함께, 육아 경험자의 공감을 유도하는 이미지들이 생성되었다. 강연자는 전체 완성도에 대해 “초안”이라는 표현을 사용하며, 실제 판매에 적용하기 전에 리뷰 내용 교체, 모델 이미지 교체, 브랜드명 수정 등의 수동 최적화가 필요하다고 현실적인 조언을 덧붙였다.
💡 [영상 참조] 화장품 및 유모차 상세 페이지 결과 이미지는 원본 영상에서 직접 확인할 수 있습니다.
마무리 — 세 가지 핵심 요건
강연자는 영상 마지막에 이 시스템을 성공적으로 구축하기 위한 세 가지 조건을 명확히 정리했다.
첫째, Claude Code 공식 가이드라인에 맞춘 에이전트 팀 구성이다. 단순히 Python 스크립트로 로직을 짜는 것이 아니라, Claude Code의 공식 서브 에이전트 및 스킬 기능을 활용하여 Markdown 파일 기반의 에이전트 구조를 만들어야 한다. 이 기준을 지키지 않으면 초기 시도처럼 엉뚱한 구조가 나온다.
둘째, 13단계 랜딩 페이지 구조 프롬프트의 명시적 참조다. 에이전트가 무엇을 만들어야 하는지 품질 기준이 없으면, 시스템은 형편없는 결과를 낸다. 강연자가 제공하는 landing-page-plan.md 파일을 시스템 프롬프트에 직접 참조하게 만드는 것이 결과물 품질의 핵심이다.
셋째, Gemini(제미나이) API의 정확한 연동이다. .env 파일에 API 키를 저장하고 Claude Code가 이를 참조하도록 설정하는 과정이 반드시 완료되어야 한다. 결제 계정 연동까지 포함된 이 단계가 빠지면 이미지 생성 자체가 불가능하다.
강연자는 이 모든 자료(에이전트 Markdown 파일, 랜딩 페이지 플랜, Python 스크립트 등)를 GitHub에 공개하여 누구나 다운로드 후 자신의 제품에 맞게 커스터마이징할 수 있도록 했다고 밝혔다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | [풀버전] 클로드코드로 고퀄리티 상세페이지 자동으로 만드는 방법 |
| 채널 | 빌더 조쉬 Builder Josh |
| 리포트 작성 | 2026-02-24 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.