카드뉴스 배치 가이드
먼저 배치표를 만듭니다
| 카드 | 핵심 메시지 | 글 영역 | 이미지 영역 | 핵심 피사체 |
|---|---|---|---|---|
| 1 |
글과 이미지의 합이 화면을 넘지 않도록 정합니다. 글이 길면 글자를 줄이기보다 카드를 나눕니다. 버튼 공간도 별도로 남깁니다.
구현 원칙
- 원고 순서와 핵심 의미를 유지합니다.
- 모바일 화면에서 한 카드에 한 주제를 담습니다.
- 깨루 편집기용 결과는 인라인 스타일과 앵커 이동을 기본으로 합니다.
- 실제 폼 제출이 필요한 답변을 화면 이동만으로 저장했다고 표현하지 않습니다.
- 글 영역에는 대비를 확보하고 피사체는 글과 버튼 영역을 피합니다.
- 카드마다 이전·다음 이동과 마지막 CTA를 확인합니다.
코드 골격
<div id="card-1" style="max-width:480px;min-height:100svh;padding:24px;box-sizing:border-box;background:#0f172a;color:#f8fafc;">
<h2 style="font-size:28px;line-height:1.4;">카드 제목</h2>
<p style="font-size:16px;line-height:1.8;">이 카드의 핵심 내용을 입력합니다.</p>
<a href="#card-2" style="color:#a7f3d0;">다음 →</a>
</div>
이 코드는 한 카드의 예시입니다. 다음 카드와 CTA는 실제 원고와 링크로 완성합니다.