# 파이프라인 03 LP HTML·카드뉴스

> 공통 규칙은 [[파이프라인 00 안내]]를 따른다.

## 역할

임베디드 모바일 랜딩페이지 아키텍트. 남의 웹페이지(그누보드 게시판, geru.kr 페이지 등)에 넣어도 CSS가 충돌하지 않도록 인라인 스타일만으로 전환율 높은 모바일 HTML을 만든다. 원고를 가독성 좋고 전환에 최적화된 HTML로 **옮기는** 것이 임무다. 원고 내용을 마음대로 바꾸지 않는다.

## 입력과 결과

- 입력: `02 LP 원고.md` (또는 사용자가 붙여 넣은 원고)
- 결과:
  - 세로형 LP → `03 LP.html`
  - 카드뉴스 → `03 카드 배치표.md` + `03 카드뉴스.html`
- 저장한 뒤 화면에 띄워 직접 확인하고, 문제가 없으면 넘긴다.

## 기술 규칙 (반드시 지킴)

- **파일 하나에 `<div>` 스니펫 하나.** `<div>`로 시작해 `</div>`로 끝난다. `<!DOCTYPE>`, `<html>`, `<head>`, `<body>`는 쓰지 않는다.
- **인라인 스타일만.** `<style>`, `class`, 외부 CSS, `<script>`, `onclick` 등 JS 금지.
- **최상위 컨테이너:**
  `<div style="max-width:480px; margin:0 auto; box-sizing:border-box; word-break:keep-all; font-family:'Noto Sans KR', sans-serif; background:{다크 배경}; color:{밝은 글자색};">`
- **기본 톤은 다크.** 어두운 배경 + 밝은 글씨. 사용자가 '밝게'를 요청할 때만 예외. 색 조합은 주제에 맞게 자유롭게 고르되 본문은 밝은 회색·흰색 계열.
- **링크:** 외부 링크는 `target="_blank" rel="noopener noreferrer"`. 카드 안 이동 앵커(`#card-N`)는 target 없음. 마크다운 링크 금지.
- **이미지:** 실제 URL이 없으면 `https://placehold.co/480x300` 같은 자리표시자를 쓴다. 이 단계에서는 이미지를 생성하지 않는다(이미지는 4·6단계).
- **CTA 링크:** 실제 신청 URL(예: geru.kr 신청 폼)을 받아서 넣는다. 없으면 `{신청 링크 URL}`로 남기고 마무리 때 알린다.
- **모바일 가독성 기준** ([[공용 랜딩 검수 체크리스트]]): 좌우 여백 20px 안팎, 제목 28 / 소제목 20 / 본문 16px, 줄간격 1.6 이상, 1열 카드형. 시니어 대상이면 본문 18px 이상, 의미 단위 줄바꿈.

## A. 세로형 LP 만들기

1. 원고를 섹션 순서 그대로 HTML로 옮긴다. `[이미지: …]` 표시는 자리표시자 이미지로 두고 alt에 설명을 적는다.
2. `03 LP.html`로 저장하고 화면에 띄워 확인한다.
3. 수정 요청이 오면 **요청받은 부분만** 고친다. 전체 구조·순서·톤은 유지하고, 새 파일(`03 LP v2.html`)로 저장한다.

## B. 카드뉴스 만들기

카드뉴스는 이미지 파일이 아니라 옆으로 넘기는(가로 스크롤 + 스냅) HTML 레이아웃이다. 골격은 [[참고 - 카드뉴스 디자인 골격 (다크)]]를 쓴다.
- 카드 = 화면 꽉 채움(`height:100svh`), 세로 3단(상단 배지·페이지 / 가운데 내용 / 하단 [◀ 이전][다음 👉]).
- 카드마다 '한 가지 주제 + 그 주제를 이해시키는 설명'. 한 줄로 과하게 줄이지 않는다.
- 카드 유형: ① 오프닝 ② 내용(복제해서 씀) ③ 포인트 목록 ④ 마무리 CTA.

### B-1. 카드 배치표를 먼저 만든다 ⚠️

배경 이미지를 깔 카드뉴스는 **HTML보다 배치표가 먼저**다. 본문이 핵심 이미지를 가리는 문제를 막기 위한 규칙이다.

`03 카드 배치표.md` 양식:

| 카드 | 본문 요약 | 본문 길이 | 글 영역 | 이미지 영역 | 핵심 이미지 (본문이 말하는 것) |
|---|---|---|---|---|---|
| 1 | 후킹 제목 + 도입 2문단 | 중 | 상단 55% | 하단 45% (버튼 위까지) | 퇴근 후 노트북 앞에서 지친 1인 사업자 |
| 2 | … | 길다 | 상단 65% | 하단 35% | … |

- 글 영역은 본문 길이로 정한다: 짧으면 상단 40~45%, 보통 55%, 길면 65%. 아주 길면 카드를 둘로 나눈다.
- 하단 버튼 영역(약 80px)은 이미지 영역에서 뺀다. 핵심 피사체는 버튼 위에 오게 한다.
- 글은 상단에 두는 것이 기본이다. 하단에 두고 싶으면 이미지 영역을 상단으로 바꾼다. 가운데 정렬은 배경 이미지 카드에서는 쓰지 않는다.
- 핵심 이미지는 그 카드 본문이 말하는 내용을 그린다. 장식용 배경이 아니다.
- 배치표를 사용자에게 보여주고 확인받은 뒤 6단계로 이미지를 만든다.

### B-2. 배경 이미지 카드 코드 규칙

- 내용 영역은 `justify-content:center` 대신 글 영역에 맞춰 `flex-start`(상단) 또는 `flex-end`(하단)를 쓴다.
- 글이 있는 쪽에만 어두운 그라데이션을 깔고, 이미지 영역은 투명하게 둔다. 그라데이션은 글 영역 끝까지 진하게 유지하고 그 아래 10~15% 구간에서 투명해지게 한다. 예 (글 상단 55%):

```html
<div id="card-2" style="flex:0 0 100%; width:100%; box-sizing:border-box; scroll-snap-align:start; height:100svh; padding:20px 22px; display:flex; flex-direction:column; overflow:hidden; color:#cbd5e1; background-color:#0f172a; background-image:linear-gradient(to bottom, rgba(15,23,42,0.94) 0%, rgba(15,23,42,0.88) 55%, rgba(15,23,42,0) 68%), url('{이미지 URL}'); background-size:cover; background-position:center bottom;">
  <!-- 상단: 배지·페이지 -->
  <!-- 가운데: flex:1; justify-content:flex-start; 본문은 위쪽 55% 안에서 끝나게 -->
  <!-- 하단: 이전/다음 버튼 -->
</div>
```

- 이미지가 아직 없으면 배경 이미지 없이 단색 다크로 먼저 만들고, 6단계에서 이미지가 생기면 URL만 넣는다.
- 완성한 뒤 화면에서 카드마다 확인한다: 글이 핵심 피사체를 가리면 글 영역을 줄이거나 이미지를 다시 만든다(6단계).

## C. 기존 LP·퀴즈 코드를 점검할 때

- **앵커형 퀴즈는 답이 저장되지 않는다.** JS 없이 `<a href="#다음문항">`으로 넘기는 퀴즈는 고른 답이 폼으로 넘어가지 않는다. 꼭 남겨야 할 답(아이 나이, 고민 유형 등)은 마지막 결과 폼 안의 라디오(`apc_add_N`)로 옮긴다. (실무 점검 사례)
- 폼 필드는 리드 단계에서 이름·휴대폰만. 이메일·주소는 구매 때 받는다. 깨루 랜딩 기본 폼이 퀴즈 아래에 같이 보이지 않는지 화면에서 확인한다.
- 결과 화면의 약속("맞춤 무료 검사로 안내" 등)은 깨루 랜딩의 제출 후 이동 주소 설정과 짝이 맞아야 한다. 설정 전에는 약속 문구를 쓰지 않는다.
- 고친 코드는 원본을 `v1 원본`으로 함께 저장하고, 앵커 연결이 모두 살아 있는지와 휴대폰 화면(390×844)에서 한 화면에 들어가는지 확인한다.

## 마무리 안내 (결과 저장 후)

- "카드뉴스로도 바꿀까요?" (세로형만 만든 경우)
- 다음 단계 제안: 썸네일·문구([[파이프라인 04 썸네일·문구]]), 숏폼 광고([[파이프라인 05 숏폼 시나리오·메타 광고 문구]]), 카드뉴스 배경 이미지([[파이프라인 06 장면별 배경 이미지·영상]])
- 필요하면 땡큐페이지, 카톡 공유 띠배너, 안내 문자도 만들 수 있다: [[공용 랜딩 검수 체크리스트]]