프로젝트 개요
텍스트만 입력하면 AI가 자동으로 랜딩페이지를 생성해주는 시스템을 만들고 싶었습니다.
정돈된 문구 랜딩페이지 문구 생성하는데 2일 + 바이브코딩으로 디자인 & 피드백 받아서 개선 2~3일 - 거의 일주일이 걸리는데요, 이를 반나절로 단축하는 것이 목표입니다.
일단 클로드코드에게 시키기
는 랜딩페이지 A to Z 생성 자동화를 하고 싶어.
1. 우선 가져다 쓸 수 있는 블럭들을 만들거야.
예) 커리큘럼, 강사 소개, 차별점, 수강생 후기, 우리 조직 체크리스트 등... 예상되는 애들은 공식 블럭으로 만들고, 공식 블럭에 없는 상황을 쓰게 될때는 커스텀 블럭
형식으로 해서 쌓을 수 있게 되면 좋겠어. - 그리고 이게 각각 json 형식으로? 아니어도 됨. 다른 형식이라도 추천해주면 ㅇㅋ
2. 내가 랜딩페이지 문구를 주면 이것이 1번의 블럭 규칙에 따라서 자동으로 정리됨 / 이때는 gemini API 3.0 flash를 쓸거야.
3. 우선 디폴트로 내가 지정해둔 블럭 (세션) 순서대로 쌓이게 되고, 이것이 미리 지정해둔 템플릿 디자인에 맞춰서 랜딩페이지가 한 번에 나오게 됨 (랜딩페이지 템플릿은 아직
만들기 전이야) 1-2를 한 다음에 적절한 디자인을 만들어서 템플릿화를 시켜야겠어.
일단 내가 얘기한 내용에도 공백이 많아서 보안이 필요해.
너가 계획을 세워줘.
정리하자면 이렇게 됩니다.
초기 구상
가져다 쓸 수 있는 블록들을 먼저 만들기 (커리큘럼, 강사 소개, 차별점, 수강생 후기 등)
랜딩페이지 문구를 주면 Gemini API로 블록 규칙에 따라 자동 정리
지정해둔 블록 순서대로 쌓이고, 템플릿 디자인에 맞춰 랜딩페이지 생성
파이프라인 설계
입력(원문) → 전처리 → 블럭 분류/추출 → 스키마 검증
↓
블럭 순서 규칙 → 정렬된 블럭 리스트 → 템플릿 바인딩
↓
랜딩페이지 생성 → 품질 검수 → 최종 출력
Phase 1: 템플릿 제작 (landing_atoz)
레퍼런스 분석
Playwright MCP로 기존 타사 랜딩페이지들을 분석해보았습니다. (코드X, 패X 등..)
결과: 디자이너의 터치가 가미된 이미지 에셋이 예쁜 것이지, 컴포넌트 구조 자체는 단순하다는 것을 파악해서 직접 블록별로 쌓기로 했습니다.
21st.dev 활용
섹션별 적절한 디자인 레퍼런스 탐색하러 들어갔는데,
웹페이지 빌더 기능이 생겼더라고요. 테스트해봤으나, 결과물이 마음에 들지 않았습니다.
웹페이지 빌더로 만들어진 결과물
"어차피 템플릿화해서 두고두고 쓸거면 제대로 만들자" 결정
템플릿 제작 과정
실제 강의 콘텐츠(팝업스튜디오)를 md 파일로 정리
대략적인 구조를 잡아 랜딩페이지 초안 요청
히어로부터 순차적으로 21st.dev에서 괜찮은 디자인 찾기
각 섹션별로 프롬프트 주고 수정 요청
다양한 옵션을 보여주는 웹페이지 스크린샷
이런거 copy prompt해서 -> 섹션에 입혀달라고 요청하면 아래처럼 나옵니다.
작업 방식
21st.dev에서 디자인 찾기
↓
Claude Code에 프롬프트 전달
↓
Claude가 작업하는 동안 다음 섹션 디자인 찾기
↓
반복...
소요 시간: 약 4시간
최종 결과물
Phase 2: 블록 시스템 구축
12개 블록 타입 정의
강의/제품 랜딩페이지에 필요한 블록들을 표준화했습니다:
블록
설명
hero
메인 타이틀, 서브타이틀, CTA
intro
강사/제품 소개
problem
고객 페인포인트
transformation
Before/After 변화
testimonials
수강생 후기
curriculum
커리큘럼 상세
pricing
가격 및 참가 안내
faq
자주 묻는 질문
...
그 외 4개 블록
Gemini API 연동
제가 자유 형식 텍스트를 입력하면 Gemini가 분석하고
이미 위에서 정의된 각 블록에 맞는 구조화된 JSON으로 자동 변환
Pydantic 모델로 데이터를 검증합니다.
Jinja2 템플릿 시스템
각 블록별 독립적인 HTML 템플릿 제작
반응형 디자인, 다크모드 지원
CSS 토큰 기반 디자인 시스템 적용
Phase 3: 웹앱 & API
SPA 웹앱 (순수 HTML/CSS/JS)
#/input → #/blocks → #/enhance → #/preview → #/download
프레임워크 없이 해시 기반 라우팅 구현
세션 기반 상태 관리
FastAPI 백엔드
엔드포인트
기능
POST /api/parse
텍스트 → 블록 파싱
POST /api/enhance
AI 카피라이팅 개선
POST /api/render
HTML 생성
GET /api/preview/{id}/
실시간 미리보기
POST /api/download/{id}
ZIP 다운로드
이렇게 자유 텍스트를 넣으면
한국어와 중국어가 포함된 웹사이트 스크린샷
섹션별로 파싱된 결과를 바로 확인할 수 있고
내용이 들어가고 바로 수정 가능
직관적이지 않아서 섹션별 미리보기 기능 구현
Phase 4: 블록 편집 UX 개선
인라인 WYSIWYG 편집
미리보기에서 텍스트 직접 클릭하여 수정
배열 항목 추가/삭제 버튼
iframe ↔ 부모 postMessage 통신
그리고 코드에서 수정이 어려우니 미리보기에서 직접 수정할 수 있게 구현함
그런데 아직 하이트라이트(주황색 텍스트) 등 반영이 제대로 되지 않아서 버그 개선이 필요합니다.
Before/After 시각적 비교
AI 개선 결과를 원본과 나란히 렌더링
JSON 대신 실제 미리보기로 비교
완성 후 최종 미리보기
데스크탑, 테블릿, 모바일 뷰로 볼 수 있습니다.
완성되면 현재는 다운 받을 수 있게 되어 있음
추후에는 완성 후 배포 누르면 개별 ulr로 바로 생성될 수 있도록 구현할 예정입니다.
기술 스택
Backend: Python, FastAPI, Pydantic
AI: Google Gemini API
Frontend: 순수 HTML/CSS/JS (프레임워크 없음)
Templating: Jinja2
구조: 모노레포 (
core,api,webapp)
결과물
아직은 버그가 많지만 대략적인 구조는 나왔습니다. 추후에는
버그 픽스를 포함해서
중간 중간에 도식화 이미지 자동 생성하고 삽입까지 하기
완료 후 자동 배포 및 url 생성까지 진행해보려고 합니다.
