블로그 포스트 카드 본문 가독성 개선을 위한 폰트 영역 분리

블로그 컴포넌트에서 폰트 적용 범위를 잡아줬다.

왜 이걸 건드렸나

PostCard.astro 를 보다가 불편한 걸 발견했다. 본문 영역까지 전부 accent 폰트(세리프 계열이든, 손글씨체든)로 덮여 있는 상태였던 것. 디자인적으로 포인트를 주려다 보니 어느 순간 heading 뿐 아니라 body 텍스트까지 같은 폰트 패밀리로 칠해진 거다.

결과적으로 카드 안에 텍스트가 많아질수록 읽기 피로감이 올라갔다. 미려한 폰트도 적재적소가 있는 법인데, 긴 줄의 본문을 장식성 폰트로 읽게 만드는 건 명확한 readability 손해다.

.bak2 파일이 같이 커밋에 떠 있는 걸 보면, 이것저것 폰트 조합을 손으로 실험하다가 백업 파일이 쌓인 흔적이 역력하다. 얼마나 왔다갔다 했는지 알 것 같다.

뭘 바꿨나

핵심은 heading only 원칙. 장식 폰트는 시선을 잡는 역할이지, 정보를 전달하는 역할이 아니다. heading 에 accent 폰트를 쓰면 카드 제목에서 성격이 드러나고, body 는 sans-serif 로 가독성 확보. 이 조합이 기술 블로그 포스트 카드에선 훨씬 안정적으로 읽힌다.

실제 적용하면 대략 이런 패턴이 된다:

/* PostCard body text */
.post-card-body {
  font-family: var(--font-sans); /* system-ui, sans-serif 계열 */
  line-height: 1.6;
}

/* Heading only — accent */
.post-card-title {
  font-family: var(--font-accent);
  font-weight: 700;
}

간단해 보이지만 이걸 컴포넌트 레벨에서 명확하게 분리해두지 않으면, 나중에 전역 스타일이나 다른 컴포넌트에서 font-family 를 바꿀 때 예상치 못한 곳에서 튀어나온다.

회고

.bak2 파일 같이 올라간 것부터 정리했어야 했다. 실험할 때 .bak 파일 남기는 습관은 로컬에서만 쓸 것. 커밋엔 깔끔하게 올려야 하는데, 이번엔 같이 들어가버렸다. 다음부턴 .gitignore 에 *.bak* 패턴 추가해두는 편이 낫겠다.

폰트 관련 변경은 "보기엔 괜찮은데?" 싶어서 방치하기 쉬운 영역이다. 근데 readability 는 시간이 지나야 문제가 보인다. 처음엔 개성 있어 보이고, 한 달 뒤에 내 블로그 읽다가 본문이 눈에 안 들어오는 걸 깨닫는 식. 이번에 빠르게 잡은 게 잘됐다.

"heading 에만 accent" 원칙은 웬만한 타이포그래피 가이드에서도 공통으로 나오는 말인데, 막상 컴포넌트 조각조각 쌓다 보면 흐릿해진다. CSS 변수(--font-accent, --font-sans)로 시스템을 잡아두고, 컴포넌트에서는 그 변수만 참조하는 구조로 가면 나중에 폰트 전체 교체할 때도 한 곳만 바꾸면 된다. 이 구조는 이번에 함께 정리했다.

끝.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.