VUILD

이 레슨이 끝나면

/v4-landing으로 본인 서비스의 랜딩 페이지(5섹션)가 만들어진다
vuild.kr copy_generator로 한 줄 카피·CTA 후보가 자동 생성된다
vuild.kr ai_generations로 대표 이미지(hero / OG)가 자동 생성된다
최종 랜딩이 localhost에서 보기 좋게 떠 있다

랜딩 페이지가 왜 중요한가?

랜딩 페이지는 잠재 사용자가 본인 서비스를 처음 만나는 화면이에요. 한국 평균 웹사이트 첫 화면 체류 시간은 약 8초. 이 8초 안에 "이 서비스가 나를 위한 거구나" 또는 "관심 없네"가 결정돼요.

랜딩에 들어가야 할 5섹션 (출시 후에도 계속 다듬는 부분):

섹션	목적	예시 카피
1. Hero	8초 안에 "나를 위한 서비스다" 느낌	"비개발자도 30일이면 본인 SaaS"
2. 문제·공감	"이 문제 본인도 있죠?" 공감	"좋은 아이디어가 있는데 코딩이 막혀서..."
3. 해결책 (How)	"우리 서비스는 이렇게 풀어요"	"AI 코칭 + 시스템 자동화로 한 단계씩"
4. 사회적 증거	"다른 사람도 쓰고 있어요" 신뢰	사용자 5명 후기 / 만든 결과물 mockup
5. CTA	"지금 한 가지 행동 하세요"	"무료로 시작하기" 버튼

🎨 생성 (Codex CLI) — 5섹션 랜딩 페이지 와이어프레임 (위에서 아래로 hero / 문제 / 해결책 / 후기 / CTA).

단계 1 — `/v4-landing` 호출

/v4-landing

스킬이 본인에게 묻는 것 + 추천 답:

"5섹션 다 만들까요? 일부만 만들까요?" → 5섹션 다
"기존 / 페이지를 덮어쓸까요?" → 네 (기존이 placeholder면)
"디자인 톤은?" → "PLAN의 디자인 시스템 따르고, ○○사이트 톤으로" (4-10에서 고른 참고 사이트)
"카피는 본인이 줄까요? 자동 생성할까요?" → 자동 생성 → 검토 후 다듬기

스킬이 자동으로 해 주는 일:

5섹션 view 파일 생성 (app/views/home/index.html.erb 등)
각 섹션의 placeholder 카피 (수정 전제)
대표 이미지 자리(placeholder)
CTA 버튼 → 회원가입 페이지로 연결
모바일 반응형 처리
OG 메타 태그 (카톡 공유 시 보이는 미리보기)

📷 캡쳐 — /v4-landing 진행 후 localhost:3000 메인 페이지에 5섹션 랜딩이 뜬 상태.

단계 2 — vuild.kr 카피 생성기

스킬이 만든 placeholder 카피보다 더 좋은 후보가 vuild.kr에 있어요. 브라우저 새 탭 → vuild.kr/projects/{본인ID}/launch/copy_generator.

vuild.kr이 본인 PLAN의 가치 선언문(VALUE)을 base로 다음 종류의 카피 후보를 자동 생성해 줘요:

Hero 헤드라인 5개 후보
서브 카피 5개
CTA 버튼 문구 5개 ("무료로 시작" / "30초 만에 가입" 등)
각 섹션의 한 문단 카피

후보를 보고 "이거 좋네" 한두 개 골라 본인 랜딩 view에 직접 붙여넣기. 또는 Claude Code에 "vuild에서 생성한 다음 카피로 hero 교체해줘" + 카피 복붙.

📷 캡쳐 — vuild.kr copy_generator 페이지. 5개 헤드라인 후보 + CTA 후보 카드.

단계 3 — vuild.kr AI 이미지 생성

대표 이미지(hero 위 큰 이미지, OG 미리보기)도 vuild.kr에서 자동 생성 가능. vuild.kr/projects/{본인ID}/ai_generations로 이동.

"새 이미지 생성" 클릭.
이미지 종류 선택 (hero / OG / 아이콘 등).
본인이 원하는 톤 한 줄 입력 (예: "따뜻한 베이지 톤, 노트북 + 커피 일러스트").
3~5장 후보가 자동 생성됨. 마음에 드는 것 1장 선택 → 다운로드.
다운받은 PNG를 본인 빌드킷의 app/assets/images/ 폴더에 저장.
view에서 image_tag "이미지파일명.png"로 사용 또는 Claude에 "이 이미지를 hero 섹션에 넣어줘" 부탁.

📷 캡쳐 — vuild.kr ai_generations 페이지. 이미지 생성 입력 + 5장 후보 그리드.

단계 4 — 카톡 공유 미리보기 (OG 태그)

본인 서비스 URL을 카톡으로 보낼 때 미리보기에 보이는 게 OG (Open Graph) 태그예요. 이게 잘 설정돼야 첫 인상이 좋아요.

4-11 단계 1의 /v4-landing이 기본 OG 태그를 자동 추가하지만, 다음을 직접 확인:

og:title: 카톡에서 보이는 제목 (예: 본인 서비스 이름)
og:description: 한 줄 설명
og:image: 카톡에서 보이는 이미지 (1200×630 권장)

Claude Code에 "OG 태그 점검해줘" 부탁하면 누락된 부분 알려줘요. 이미지는 ai_generations에서 OG 전용으로 생성한 걸 사용.

🎨 생성 (Codex CLI) — 카톡 채팅창에 본인 URL이 OG 미리보기로 떠 있는 mockup. 제목 + 설명 + 이미지. — 카톡 한 번 공유에서 첫 인상의 절반이 결정돼요.

단계 5 — 모바일 점검

4-9에서 배운 브라우저 모바일 미리보기로 본인 랜딩을 폰 사이즈에서 확인. 자주 깨지는 곳:

Hero 헤드라인이 너무 큼 (모바일에서 줄바꿈 깨짐)
이미지가 화면 밖으로 튀어나감
CTA 버튼이 너무 작음
섹션 간 여백이 너무 큼/작음

문제 발견 시 Claude Code에 "모바일에서 hero 헤드라인이 두 줄로 깨져, 글자 크기 줄여줘" 같은 한 줄 요청.

자주 발생하는 문제 + 해결

"카피가 본인 톤이 아니에요"

AI 자동 생성 카피는 평균적이에요. "더 친근하게 / 더 전문가답게 / 더 위트 있게" 같은 톤 지시를 명시하고 다시 생성. 또는 본인이 직접 한 줄 적고 "이 톤으로 다른 후보 5개 만들어줘" 부탁.

"AI 이미지가 마음에 안 들어요"

한 번에 마음에 드는 게 안 나오는 게 정상. 톤 묘사를 더 구체적으로: 색·구도·스타일·분위기. 예: "일러스트 / 베이지 + 브라운 / 위에서 보는 구도 / 따뜻하고 차분한 분위기 / 사람 X". 또는 무료 stock 이미지 사이트(Unsplash, Pexels)에서 가져오는 것도 좋은 대안.

"OG 미리보기가 캐싱돼서 안 바뀌어요"

카톡·페이스북·트위터 등은 OG 정보를 한 번 캐시해요. 변경 후 안 바뀌면 카카오 OG 디버거 (developers.kakao.com → 도구 → OG 태그 디버거)에서 강제 리프레시.

"랜딩 페이지가 너무 길어 보여요"

5섹션이 부담스러우면 일단 hero + CTA 2섹션만 출시 → 사용자 피드백 보면서 확장. MVP는 짧을수록 좋아요.

자가 진단 — 통과 기준

☐ localhost:3000에서 5섹션(또는 본인이 정한 섹션) 랜딩이 떠 있다
☐ Hero 헤드라인이 본인 서비스 가치를 8초 안에 전달함
☐ CTA 버튼이 회원가입(또는 핵심 기능)으로 연결됨
☐ 모바일 화면에서 깨짐 없이 보임
☐ OG 태그(og:title / description / image)가 설정되어 있음
☐ git commit ("랜딩 페이지 + 카피 + 이미지")

다음 단계 → 4-12 [선택] 결제 연결 — Toss Payments

본인 서비스가 유료 모델이면 결제를 붙여요. 무료/포트폴리오 SaaS면 4-12는 건너뛰고 4-13으로 가도 돼요. 결제는 한국 Toss Payments가 비개발자에게 가장 친절해요. PG 위탁 + 테스트키 + webhook + 멱등성을 한 번에 다뤄요.

랜딩 페이지 + AI 카피·이미지