GERU KNOWLEDGE / 공용 지침사용 방법 ↗
REF / 참고 가이드

카드뉴스 배치 가이드

필요할 때 꺼내 쓰는 공용 제작 가이드입니다.

Markdown 다운로드 ↓공개본 갱신 2026-10-23

카드뉴스 배치 가이드

먼저 배치표를 만듭니다

카드 핵심 메시지 글 영역 이미지 영역 핵심 피사체
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는 실제 원고와 링크로 완성합니다.