홈 히어로 헤드라인이 어색하게 끊기던 버그 수정
목차
홈페이지 히어로 섹션의 대형 헤드라인과 리드 문단이 도중에 어색하게 끊어져서 읽기 불편했다. 원인은 .hero 클래스에 박혀 있던 max-width: 18ch 제약 때문. 그 제약을 제거하니 문제가 해결됐다.
왜 18ch 였을까
max-width: 18ch는 사실 타이포그래피에서 흔한 "최적 행 길이(optimal line length)" 가이드다. 대부분의 본문 텍스트는 한 줄에 55–75자 정도가 가장 읽기 편하다고 알려져 있다. 18ch는 그보다 짧지만, 여러 언어 환경이나 폰트 크기를 고려할 때 상당히 보수적인 제약이다. 아마 초기 설계할 때 "어떤 크기의 텍스트든 깔끔하게 정렬하겠다"는 의도로 적용했을 거다.
그런데 히어로 섹션은 다르다. 거기는 작은 본문 문장이 아니라, 눈에 띄는 큰 헤드라인이다. "우리 서비스의 핵심 메시지"를 한눈에 전달해야 하는데, 18ch 제약이 있으니까 "단어 단위로 자꾸 줄바꿈"되면서 시각적 흐름을 방해했다.
예를 들면:
우리 서비스는
당신의 시간을
더 소중하게
만들어줍니다
이렇게 끝이 나게 되는 식인데, 본인이 의도한 건:
우리 서비스는 당신의 시간을
더 소중하게 만들어줍니다
이 정도의 여유 있는 줄바꿈일 거다.
컴포넌트 컨텍스트의 차이
이건 흔한 패턴이다. 같은 CSS 클래스가 여러 컨텍스트에서 돌아다닐 때, 한 곳의 선의(善意)가 다른 곳의 버그가 되기 쉽다.
- 본문 단락(
.prose p)이라면? → 18ch 정도로 줄바꿈을 억지로 해도 괜찮을 수 있다. - 카드 제목이라면? → 조금 더 너그러워야 한다.
- 히어로 메인 타이틀이라면? → 완전히 다른 레이아웃 규칙이 필요하다.
이번 수정은 .hero 자체에서 그 제약을 빼버리고, 필요하면 히어로 안의 특정 요소(.hero__title, .hero__subtitle 같은)에만 의도적으로 적용하는 식으로 가는 게 나을 것 같다는 판단이 담겨 있다.
이런 버그는 어디서 붙나
내가 경험상 느낀 건, 이런 타이포그래피 버그는 QA나 디자인 리뷰에서 자주 발견된다는 것. 개발자가 코드만 봐서는 감지하기 어렵다. 실제로 브라우저에서 "헤드라인이 깨져 보이는지" 확인해야 한다. 팀이 "느낌상" 좀 이상한데 정확히 뭐가 문제인지 말하기 어려운 그런 버그.
이번에도 아마 누군가 홈페이지를 봤을 때 "헤드라인이 너무 자주 끊겨"라는 피드백을 줬을 거고, 그걸 추적하다 보니 .hero max-width 까지 파고들었을 것 같다.
회고
CSS 제약(constraints)은 "어디까지 적용할 건가"를 신중히 결정해야 한다는 걸 다시 느꼈다. Global 스타일에서 의도한 규칙이 모든 요소에 맞는 건 아니니까.
또 이런 변경은 사실 작아 보이지만, 사용자가 맨 처음 보는 페이지이고 맨 처음 읽는 콘텐츠라는 점에서 체감 품질에 큰 영향을 미친다. 그래서 히어로 섹션 같은 "크리티컬 영역"은 좀 더 세심한 검토를 거칠 가치가 있다. 팀 차원에서 "메인 페이지 디자인 리뷰"를 따로 시간 들여서 하는 것도 좋은 투자라고 본다. 개발자, 디자이너, 그리고 가능하면 실제 사용자 피드백까지.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.