# 랜딩페이지 자동 생성기 만들기 ver1 - 작성자: [엉뚱한 기록가](https://community.clauders.ai/member/imported-member-eiSv6Xx86t) - 공간: [바이브 코딩](https://community.clauders.ai/claude-code) - 게시: 2026-03-20 - 연재: [Claude Code 실전 프로젝트](https://community.clauders.ai/series/claude-code-practical-builds) 2/3편 - 태그: #고마워클코 #OT과제 - 주소: https://community.clauders.ai/claude-code/post/%EB%9E%9C%EB%94%A9%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9E%90%EB%8F%99-%EC%83%9D%EC%84%B1%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-ver1-78c88e7e-b76b-8a7b-b7ba-f8e2593d70b4 --- ### **1. "한 에이전트에게 다 시키면 되지 않을까?"** 처음에는 하나의 프롬프트로 "리서치부터 코드까지 다 해줘"를 시도했습니다. **결과**: 처참했습니다. 리서치는 피상적이고, 카피는 밋밋하고, 디자인은 일관성이 없고, 코드는 기본 템플릿 수준이었습니다. AI 하나가 모든 전문 영역을 커버하는 건 사람 한 명이 다 하는 것과 같은 문제였습니다. **교훈**: 전문 영역별로 에이전트를 분리하고, 각 에이전트에게 해당 도메인의 지식(디자인 시스템, 타이포그래피 규칙, 전환 심리학 등)을 주입해야 합니다. 결국 8개 에이전트로 분리했습니다. ### **2. "AI가 생성한 디자인은 다 비슷하게 생겼다"** 에이전트를 분리한 후 품질은 올라갔지만, 프로젝트를 여러 개 만들다 보니 전부 비슷한 레이아웃이 나왔습니다. 히어로 섹션 → 특징 → 후기 → CTA → 푸터, 매번 같은 구조. **해결**: 6종의 **레이아웃 아키타입**을 정의했습니다. 아키타입 구조 적합 업종 Storytelling Flow 스크롤 시 이야기 전개 화장품, 브랜드 Authority Grid 수치/인증 강조 서비스업, B2B Product Showcase 제품 이미지 중심 식품, 테크 Editorial Magazine 매거진 비대칭 패션, 프리미엄 Dashboard-style 정보 밀집 SaaS, 교육 Immersive Visual 풀스크린 비주얼 인테리어, 럭셔리 그리고 **기존 프로젝트와 동일한 아키타입은 자동으로 회피**하도록 했습니다. 베이커리 프로젝트에서 Product Showcase를 썼으면, 다음 식품 프로젝트에서는 다른 아키타입을 선택합니다. ### **3. "방충망 사이트에 3D 파티클이 필요할까?"** 초기에는 모든 프로젝트에 같은 수준의 인터랙션을 적용했습니다. 럭셔리 화장품이든 동네 방충망 업체든 같은 기술 스택(Next.js + Framer Motion)으로 만들었는데, 방충망 업체 사이트에 파티클 효과와 3D 애니메이션이 들어간 건 과잉이었습니다. **해결**: **3단계 Tier 시스템**을 만들었습니다. Tier 기술 스택 적합 업종 **T1** Premium Next.js + Framer Motion 화장품, 럭셔리, 테크, 게임 **T2** Professional Next.js + Framer Motion (기본 애니메이션) 패션, 식품, 교육, SaaS **T3** Clean HTML/CSS/JS + Tailwind CDN 시공업, 로컬 서비스, 학원 경쟁사 분석 단계에서 5개 항목(업종 비주얼 의존도, 경쟁사 인터랙션 수준, mood 키워드, 미디어 에셋, 타겟 감성)을 0~2점으로 채점하여 Tier를 자동 판정합니다. 방충망은 T3, 화장품은 T1이 자동으로 결정됩니다. ### **4. "이미지가 전부 placeholder였다"** 코드는 잘 나오는데, 이미지가 전부 `placeholder.jpg`이거나 깨진 URL이었습니다. AI가 존재하지 않는 이미지 URL을 만들어내는 hallucination 문제였습니다. **해결**: `@asset-curator`라는 전담 에이전트를 만들고, Pexels/Unsplash에서 **실제로 접근 가능한 이미지 URL**을 검색·확인하도록 했습니다. "placeholder 사용 금지"를 시스템 규칙으로 강제했습니다. ### **5. "에이전트가 단계를 건너뛰거나 대충 넘어갔다"** 에이전트가 가끔 리서치를 건너뛰거나 빈 파일만 만들고 다음 단계로 넘어가는 문제가 있었습니다. **해결**: 각 Phase 끝에 **Human In The Loop 게이트**를 넣었습니다. 사람이 직접 산출물을 확인하고 "진행" 또는 "재작업"을 결정합니다. 추가로, 산출물 파일이 존재하는지 + 최소 크기(100바이트) 이상인지를 코드로 자동 검증하는 **Anti-Skip Guard**도 넣었습니다. AI의 "했습니다" 말만 믿지 않고, 실제 파일을 코드로 확인합니다. ### **6. "한국 사이트인데 영어권 디자인 감각이 나왔다"** AI는 기본적으로 영어권 웹사이트 데이터로 학습되어 있어서, 한국 시장에 맞지 않는 디자인이 나왔습니다. 여백이 너무 넓고, CTA 문구가 한국인에게 어색하고, 신뢰 요소(인증 마크, 고객 후기 배치)가 한국 소비자 기대와 달랐습니다. **해결**: 한국 시장 특화 디자인 지식을 문서화하여 에이전트에게 주입했습니다. - **한국어 타이포그래피**: 한글 자간(-0.02em~-0.01em), 행간(1.8~2.0), word-break 규칙 - **한국 시장 전환 패턴**: 4단계 신뢰 스택(인증→수치→후기→보증), 카카오톡 채널 연동, "무료 상담" vs "지금 구매" CTA 차이 - **폰트 페어링**: Pretendard + 본명조 같은 한국어 웹폰트 조합 - **정보 밀도**: 한국 소비자는 미니멀보다 정보 밀도가 높은 페이지를 선호하는 경향 이 지식들은 `references/` 폴더에 8개 문서로 정리되어, 해당 에이전트에게 자동으로 주입됩니다. ### **7. "코드는 나왔는데 디자인 플랜과 다르게 구현됐다"** 디자인 플래너가 "히어로 섹션에 그라디언트 오버레이 + 좌정렬 텍스트"를 설계했는데, 코드 빌더가 "센터 정렬 + 단색 배경"으로 구현하는 일이 있었습니다. 에이전트 간 산출물 전달 과정에서 정보가 유실된 것입니다. **해결**: `@design-reviewer`가 Playwright로 실제 구현된 페이지의 스크린샷을 촬영하고, 디자인 플랜 문서와 **항목별로 비교 검증**하도록 했습니다. 불일치가 발견되면 QA 리포트에 구체적 이슈로 기록되고, 코드 빌더가 수정합니다. ### **Claude Code의 Sub-agent 구조** - **에이전트 정의**: `.claude/agents/` 폴더에 각 에이전트의 역할, 도구 권한, 도메인 지식을 Markdown으로 정의 - **Slash Command**: `/make-landing-page`(프로젝트 초기화), `/run`(워크플로우 실행), `/Human-in-the-loop`(품질 게이트) - **Hook 스크립트**: 위험 명령 차단, 시크릿 유출 탐지 등 안전장치를 Python Hook으로 자동화 - **도메인 지식 주입**: `references/` 폴더의 디자인 시스템 문서를 에이전트 실행 시 Context Injection ### **워크플로우 자동 생성** 고객 정보(YAML)를 분석하여 Tier와 아키타입을 판정한 뒤, 12단계 `workflow.md`를 자동 생성합니다. 이 워크플로우가 어떤 에이전트를 어떤 순서로 호출하고, 각 단계에서 어떤 산출물을 만들어야 하는지를 정의합니다. 같은 시스템에서 만들어도: - 베이커리 → T2 + Product Showcase - 화장품 → T1 + Storytelling Flow - 인테리어 → T3 + Authority Grid 업종마다 기술 스택, 레이아웃, 인터랙션 수준이 전부 달라집니다. ### **AI 에이전트는 "전문가 팀"처럼 써야 한다** 하나의 AI에게 모든 걸 시키는 것보다, 역할을 분리하고 각자의 전문 지식을 주입하는 게 훨씬 나은 결과를 냅니다. 인간 조직의 분업과 같은 원리입니다. ### **"AI가 했다"고 말하면 안 믿어야 한다** AI가 "완료했습니다"라고 말해도, 실제로 파일이 존재하는지, 내용이 있는지를 **코드로 검증**해야 합니다. 사람도 "했습니다" 하고 실제론 안 한 경우가 있듯이, AI도 마찬가지입니다. ### **도메인 지식을 문서화해서 주입하는 게 핵심이다** "좋은 랜딩페이지 만들어줘"보다 "한국어 자간은 -0.02em, 신뢰 스택은 인증→수치→후기→보증 순서, CTA는 '무료 상담 받기'"처럼 **구체적인 도메인 지식을 문서로 정리**해서 에이전트에게 읽히는 게 결과물의 품질을 결정합니다. ### **사람의 검수 포인트가 있어야 한다** 완전 자동화는 매력적이지만 중간중간 사람이 확인하는 게이트가 없으면 잘못된 방향으로 쭉 달려갑니다. Research가 끝난 후, 설계가 끝난 후, 구현이 끝난 후 — 이 3번의 체크포인트가 전체 품질을 높여주는 것 같습니다. 아직 완성본도아니고 아쉬운 부분도 너무 많기 때문에 계속 추가 수정을 해볼 예정입니다. 또한, 제가 정답이 아니라고 생각하며 아직은 AI티가 조금씩은 나는 것 같습니다 [https://www.youtube.com/watch?v=m25xU2qEbcg](https://www.youtube.com/watch?v=m25xU2qEbcg)