카드뉴스 텍스트 줄바꿈 가독성 수식과 word-break keep-all 가이드

직접 해보기 →

인스타그램, 페이스북, 카드뉴스 마케팅 템플릿을 제작할 때 가장 흔하게 발생하는 디스플레이 오류가 바로 텍스트 어색한 줄바꿈 및 어절 잘림 현상입니다.

1:1 정사각형(1080x1080px) 카드뉴스 가상 캔버스 위에서 타이틀 텍스트의 폰트 크기, 행간(line-height), 자간(letter-spacing), 그리고 단어 단위 줄바꿈(word-break: keep-all) 옵션을 조절하여 모바일 화면에서 문맥이 끊기지 않고 가장 읽기 편한 가독성 배치를 미리 모의하는 시뮬레이터 도구입니다. 본 글에서는 카드뉴스 텍스트 가독성 레이아웃 수식과 CSS 폰트 옵션을 해설합니다.

---

1. 카드뉴스 텍스트 시각적 균형 수식 공식

카드뉴스 1:1 대지 폭 W_card와 폰트 크기 F_size, 문장 어절 수 N_words 간의 시각적 줄바꿈 밸런스 점수 연산 수식은 다음과 같습니다:

[ \text{LineCount} = \left\lceil \frac{\text{TextWidth}}{W_{\text{card}} - 2 \times \text{Padding}} \right\rceil ]

가독성을 높이는 3대 CSS 텍스트 속성 역할:

• word-break: keep-all;: 한글 단어(어절)가 문장 중간에서 뚝 베어져 다음 줄로 넘어가 오독을 유발하는 현상을 방지하고, 단어 단위로 묶여 예쁘게 줄바꿈되도록 강제합니다.
• line-height: 1.3 ~ 1.4: 타이틀 문구의 행간이 너무 넓으면 텍스트가 파편화되어 보이고, 너무 좁으면 글자가 겹쳐 보입니다. 카드뉴스 타이틀에는 1.35 내외가 가장 이상적입니다.
• text-wrap: balance;: 모던 CSS 속성으로 부모 컨테이너 너비 내에서 각 줄의 글자 수가 최대한 균등한 길이로 분배되도록 자동으로 밸런싱합니다.

---

2. 카드뉴스 텍스트 레이아웃 CSS 스타일 소스

다음은 모바일 화면에서 깔끔한 어절 줄바꿈과 폰트 가독성을 보장하는 카드뉴스 CSS 전용 소스 코드입니다:

<div class="card-news-canvas">
  <div class="card-text-container">
    <span class="badge">MARKETING TIPS</span>
    <h2 class="card-title">인스타그램 카드뉴스 텍스트 줄바꿈 가독성 노하우</h2>
    <p class="card-desc">한글 단어가 끊기지 않고 예쁘게 떨어지는 최적의 레이아웃 배치 시뮬레이션</p>
  </div>
</div>

.card-news-canvas {
  width: 360px;
  height: 360px; /* 1:1 정방형 캔버스 */
  padding: 32px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.5px;

  /* 핵심 어절 자르기 방지 및 자동 밸런스 */
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.card-desc {
  margin-top: 12px;
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.5;
  word-break: keep-all;
}

[!NOTE] 포토샵이나 포토푀에 텍스트를 얹고 줄바꿈을 일일이 엔터 쳐가며 테스트할 필요 없이, 카드뉴스 텍스트 줄바꿈 시뮬레이터 도구를 활용하면 문구를 입력하고 폰트 크기, 행간, 정렬 및 word-break 옵션을 실시간 조절하여 완성된 마크업과 CSS 스타일을 획득할 수 있습니다.

---

3. 실무 카드뉴스 제작 시 디자인 지침

1. 줄 끝 조사의 어색한 분리 방지: 한글 문장의 경우 단어 끝에 붙는 조사가 다음 줄로 혼자 외롭게 넘어가지 않도록, 주요 명사 구문 단위로 br 태그를 수동 조합하거나 word-break: keep-all을 선언하는 마무리가 필수적입니다.
2. 배경 이미지 대비 딤드(Dimmed) 겹침 렌더링: 배경에 사진이 들어가는 카드뉴스의 경우 텍스트 뒤에 background: rgba(0, 0, 0, 0.4) 또는 backdrop-filter: blur(4px) 필터를 입혀 글자 선명도를 반드시 확보해야 합니다.