히어로 서브카피 마지막 줄에 한 어절만 남음

[DaleSeo]

DaleStudy/daleui#1214에 취합된 피드백에서 옮긴 이슈입니다.
원 댓글: @SimYunSup (4번 항목)

현상

데스크톱(1440px)에서 히어로 서브카피가 3줄로 떨어지는데 마지막 줄에 "동료들이 기다립니다."만 남아 살짝 어색합니다.

메인 > 히어로 (1440px)

원인

/* src/styles/site.css:384-391 */
.hero-sub {
  margin: 20px auto 0;
  max-width: 560px;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.6;
  opacity: 0.8;
  text-wrap: pretty;
}

text-wrap: pretty는 마지막 줄에 한 단어만 남는 것(고아 단어)을 피하려 시도하지만, 줄 길이를 균등하게 맞추지는 않습니다. 반면 바로 위 .hero h1(site.css:365-372)은 text-wrap: balance를 쓰고 있어 제목과 서브카피의 줄바꿈 방식이 서로 다릅니다.

word-break: keep-all은 이미 site.css:28에 전역으로 적용되어 있습니다.

카피 원문(src/i18n/ko.ts:16-17):

오픈소스 프로젝트와 그룹 스터디를 통해 실제 협업을 경험하세요. 코드 리뷰, 페어 프로그래밍, 그리고 서로의 성장을 응원하는 동료들이 기다립니다.

제안

.hero-sub의 text-wrap을 balance로 바꿔 제목과 동일한 방식으로 줄 균형을 맞춥니다.

.hero-sub {
  text-wrap: balance;
}

balance는 브라우저마다 처리 가능한 줄 수 상한이 있어(대체로 4~10줄) 3줄인 이 카피에는 적용됩니다. 다만 뷰포트에 따라 줄 수가 달라지므로 320 / 375 / 768 / 1024 / 1440 / 1920px에서 결과를 확인해야 합니다.

그래도 어색하다면 max-width를 560px에서 조금 넓혀(예: 600~640px) 2줄로 떨어지게 하는 방법도 있습니다.

영문 카피(src/i18n/en.ts:16-17)도 함께 확인해 주세요. 문장 길이가 달라 줄바꿈 결과가 다르게 나옵니다.

원 피드백에도 "마이너한 의견"이라고 적혀 있으니 우선순위는 낮게 봐도 됩니다.