Astro 블로그 글 상세 페이지 가독성 개선 과정

들어가며

블로그를 배포한 뒤 가장 먼저 신경 쓰게 된 부분은 글 상세 페이지였다.

메인 페이지나 글 목록도 중요하지만, 블로그에서 방문자가 가장 오래 머무는 화면은 결국 글 본문이다.

그래서 이번에는 chailmon.com의 글 상세 페이지를 더 읽기 좋게 만들기 위해 아래 항목을 개선했다.

1. 글 상세 페이지 기본 레이아웃 개선
2. 본문 Typography 스타일 정리
3. 코드블록, 인라인 코드, 인용문 개선
4. 이전 글 / 다음 글 네비게이션 추가
5. 같은 카테고리의 관련 글 추가
6. 모바일 가독성 점검

이번 글은 그 과정을 기록한 것이다.

1. 글 상세 페이지 기본 레이아웃 개선

처음 글 상세 페이지는 기능적으로는 문제가 없었다.

제목, 날짜, 카테고리, 태그, 본문이 모두 정상적으로 보였다.

하지만 실제 운영 블로그처럼 보이기에는 조금 단순했다.

그래서 먼저 글 상세 페이지의 기본 레이아웃을 정리했다.

개선 방향은 다음과 같았다.

본문 최대 너비 줄이기
제목 영역과 본문 영역 분리
날짜, 수정일, 카테고리, 태그 정리
본문과 헤더 사이 간격 조정
전체 카드 형태를 더 차분하게 변경

기존에는 본문이 다소 넓게 보일 수 있었기 때문에, 본문 영역은 max-w-3xl 수준으로 제한했다.

글은 화면 전체를 넓게 쓰는 것보다 적당한 줄 길이를 유지하는 편이 읽기 좋다.

또 제목 영역은 살짝 다른 배경색을 사용해 본문과 구분했다.

글 메타 정보
제목
설명
태그
본문

이렇게 구조를 나누니 글의 시작 부분이 더 안정적으로 보였다.

2. 본문 Typography 스타일 분리

처음에는 글 상세 페이지 파일 안에 Tailwind arbitrary selector를 길게 작성했다.

예를 들면 이런 식이었다.

[&>h2]:mt-14
[&>p]:mt-6
[&_pre]:rounded-2xl

이 방식은 빠르게 만들 때는 편하다.

하지만 나중에 글 상세 페이지 스타일을 계속 수정하려면 유지보수가 불편해질 수 있다.

그래서 본문 스타일을 src/styles/global.css의 .prose-content 클래스로 분리했다.

이후 글 상세 페이지에서는 이렇게만 사용하게 만들었다.

<div class="prose-content">
  <Content />
</div>

그리고 .prose-content 안에서 문단, 제목, 목록, 링크, 이미지, 표, 코드블록 스타일을 관리했다.

이렇게 바꾸니 글 상세 페이지 파일이 훨씬 단순해졌다.

또 앞으로 본문 스타일을 수정하고 싶을 때 global.css만 보면 된다.

3. 제목과 문단 간격 조정

긴 글에서는 제목 간격이 중요하다.

특히 h2는 글의 큰 구간을 나누는 역할을 한다.

그래서 h2 위에는 충분한 여백과 구분선을 넣었다.

.prose-content h2 {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #e2e8f0;
}

이렇게 하니 긴 글을 읽을 때 구간이 더 명확하게 나뉘었다.

문단은 줄간격을 넉넉하게 잡았다.

.prose-content {
  font-size: 17px;
  line-height: 2;
}

한국어 글은 줄간격이 너무 좁으면 답답하게 보인다.

그래서 데스크톱에서는 17px, 모바일에서는 16px 기준으로 조정했다.

4. 코드블록과 인라인 코드 개선

이 블로그는 개발 관련 글이 많아질 가능성이 높다.

그래서 코드블록은 반드시 읽기 편해야 했다.

코드블록에는 어두운 배경을 사용하고, 상단에 CODE 라벨을 붙였다.

.prose-content pre::before {
  content: "CODE";
}

코드블록이 본문 안에서 명확하게 구분되도록 내부 테두리와 여백도 조정했다.

인라인 코드는 본문 흐름 안에서 너무 튀지 않도록 밝은 회색 배경과 얇은 테두리를 사용했다.

.prose-content :not(pre) > code {
  white-space: nowrap;
  border: 1px solid #e2e8f0;
}

다만 모바일에서는 긴 인라인 코드가 화면을 밀어낼 수 있어서 줄바꿈이 가능하도록 조정했다.

@media (max-width: 640px) {
  .prose-content :not(pre) > code {
    white-space: normal;
    word-break: break-word;
  }
}

5. 인용문과 표 스타일 개선

본문 안에서 중요한 문장이나 참고 내용을 강조할 때 인용문을 사용한다.

그래서 blockquote도 별도로 스타일을 잡았다.

.prose-content blockquote {
  border-left: 4px solid #cbd5e1;
  background: #f8fafc;
}

인용문에는 큰 따옴표 장식도 추가했다.

이렇게 하니 일반 문단과 인용문이 더 잘 구분되었다.

표는 모바일에서 특히 문제가 생기기 쉽다.

가로로 긴 표가 있으면 전체 페이지가 밀릴 수 있기 때문이다.

그래서 표는 가로 스크롤이 가능하도록 만들었다.

.prose-content table {
  display: block;
  overflow-x: auto;
}

6. 이전 글 / 다음 글 네비게이션 추가

글을 다 읽은 뒤 바로 다른 글로 이동할 수 있도록 하단에 이전 글과 다음 글 네비게이션을 추가했다.

게시일 기준으로 글을 정렬하고, 현재 글의 위치를 찾아 연결했다.

newerPost
→ 현재 글보다 더 최근 글

olderPost
→ 현재 글보다 더 오래된 글

글 하단에는 카드 형태로 보여주었다.

← 이전 글
글 제목
글 설명

다음 글 →
글 제목
글 설명

글이 2개뿐이어도 이 구조는 유용하다.

앞으로 글이 많아질수록 방문자가 여러 글을 이어서 읽기 쉬워진다.

7. 같은 카테고리의 관련 글 추가

이전 글 / 다음 글은 시간 순서에 가깝다.

하지만 방문자가 더 관심 있어 할 글은 같은 주제의 글일 수 있다.

그래서 같은 카테고리의 다른 글을 보여주는 영역도 추가했다.

로직은 단순하다.

현재 글 제외
현재 글과 같은 카테고리
최대 3개 표시

예를 들어 현재 글의 카테고리가 운영하기라면, 같은 운영하기 카테고리의 다른 글을 하단에 보여준다.

글이 적으면 이 영역이 안 보일 수 있다.

하지만 글이 쌓이면 자연스럽게 내부 링크 역할을 하게 된다.

8. 모바일 가독성 점검

마지막으로 모바일 화면을 점검했다.

확인한 항목은 다음과 같다.

글 제목이 너무 크지 않은지
본문 좌우 여백이 적당한지
문단 줄간격이 답답하지 않은지
코드블록이 화면을 밀어내지 않는지
테이블이 가로 스크롤되는지
이전/다음 글 카드가 세로로 잘 쌓이는지
관련 글 카드가 자연스럽게 보이는지

모바일에서는 제목 크기를 조금 줄였다.

기존:
text-4xl

변경:
text-3xl md:text-5xl

그리고 코드블록과 표에는 최대 너비를 지정했다.

@media (max-width: 640px) {
  .prose-content pre {
    max-width: calc(100vw - 3rem);
  }

  .prose-content table {
    max-width: calc(100vw - 3rem);
  }
}

이렇게 해서 모바일에서도 본문이 좌우로 밀리지 않도록 했다.

개선 후 좋아진 점

이번 작업으로 글 상세 페이지는 다음 부분이 좋아졌다.

본문 폭이 적당해짐
제목 영역이 안정적으로 정리됨
문단과 제목 간격이 읽기 좋아짐
코드블록이 더 명확하게 보임
인라인 코드가 자연스럽게 표시됨
인용문과 표 스타일이 정리됨
이전 글 / 다음 글 이동이 가능해짐
같은 카테고리 글로 이어질 수 있음
모바일에서 긴 글을 읽기 쉬워짐

마무리

블로그에서 가장 중요한 화면은 결국 글 상세 페이지다.

방문자는 메인 페이지보다 글 페이지에서 더 오래 머문다.

그래서 글 상세 페이지의 가독성은 블로그 전체 품질에 직접적인 영향을 준다.

이번 작업으로 chailmon.com의 글 상세 페이지는 처음보다 훨씬 읽기 편해졌다.

앞으로 글이 늘어나면 목차, 태그 페이지, 검색 기능, OG 이미지 자동 생성 같은 기능도 차례로 개선해볼 예정이다.