GeneratePress 본문 가독성 높이는 방법: 폰트·줄 간격·컨테이너 폭 조정

워드프레스 블로그의 가독성은 글의 내용만으로 결정되지 않습니다. 본문 글자가 너무 작거나 줄 사이가 좁고, 한 줄이 지나치게 길면 좋은 글도 읽기 어렵습니다. GeneratePress 테마에서는 사용자 정의 메뉴에서 기본 설정을 바꿀 수 있고, 필요한 경우 추가 CSS로 본문과 컨테이너 폭을 세밀하게 조정할 수 있습니다.

특히 먼저 확인할 부분은 본문 글자 크기와 줄 간격입니다. 그다음 문단 길이, 이미지 배치, 사이드바 유무, 콘텐츠 영역의 너비를 순서대로 살펴보면 화면이 훨씬 안정적으로 정리됩니다.

GeneratePress에서 본문 글자 크기와 줄 간격 바꾸기

관리자 화면에서 모양(외모) > 사용자 정의 > 타이포그래피(Typography) > Body로 이동하면 본문에 적용되는 기본 글꼴 설정을 조정할 수 있습니다. GeneratePress 버전에 따라 메뉴 이름이나 화면 구성이 조금 다르게 보일 수 있지만, 본문 설정은 대체로 Typography 또는 Body 항목 안에 있습니다.

여기서 확인할 값은 다음 세 가지입니다.

• Font size: 본문 글자 크기
• Line height: 줄 사이의 세로 간격
• Paragraph margin: 문단과 문단 사이의 여백

바꿀 값	어디에서	같이 봐야 할 것
본문 글자 크기	사용자 정의 → 타이포그래피 → Body	줄 간격, 컨테이너 폭
줄 간격	같은 화면의 Line height	글자 크기(둘 중 하나만 바꾸면 어색해짐)
문단 여백	Paragraph margin	문단 길이 자체
사이드바 유무	레이아웃 → 사이드바	한 줄에 들어가는 글자 수
컨테이너 폭	레이아웃 → 컨테이너	표·넓은 이미지·코드 블록

글자 크기만 키우고 줄 간격을 그대로 두면 화면이 답답하게 느껴질 수 있습니다. 반대로 줄 간격만 넓히면 글이 지나치게 흩어져 보일 수 있습니다. 두 값을 함께 조금씩 바꾸면서 실제 게시글 화면에서 확인하는 편이 안전합니다. 사용자 정의 화면의 미리보기만으로 판단하기보다, 제목·목록·인용문·이미지가 함께 들어간 실제 글에서 확인해야 합니다.

노트북이나 데스크톱에서 편하게 보이는 크기가 모바일에서는 크게 느껴질 수 있으므로, 모바일 미리보기 역시 확인해야 합니다. 방문자층의 연령대가 높거나 긴 글을 주로 다룬다면 작은 글자보다 약간 넉넉한 본문 크기와 행간이 유리할 수 있습니다.

사용자 정의 CSS로 본문 스타일을 직접 지정하는 방법

테마 설정만으로 원하는 결과가 나오지 않으면 모양(외모) > 사용자 정의 > 추가 CSS에 코드를 넣을 수 있습니다. 예를 들어 게시글 본문의 문단에만 글자 크기와 줄 간격을 적용하려면 다음과 같이 작성합니다.

/* 워드프레스 본문 글자 크기 및 줄 간격 조정 */
.single .entry-content p {
    font-size: 1.13em;
    line-height: 1.9em;
}

1.13em은 현재 기준 글자 크기의 1.13배를 뜻하고, 1.9em은 글자 크기를 기준으로 줄 높이를 계산합니다. 테마의 기본 글꼴 크기나 상위 요소의 설정에 따라 실제 픽셀 크기는 달라질 수 있습니다. 따라서 이 값을 모든 사이트에 그대로 적용하기보다는 저장 후 데스크톱과 모바일에서 읽어 보며 조정해야 합니다.

이 선택자는 일반적으로 단일 글 페이지의 본문 문단을 대상으로 합니다. 홈페이지 요약문, 위젯, 댓글 영역까지 바꾸려는 목적이라면 별도의 선택자가 필요할 수 있습니다. CSS를 적용했는데 변화가 없다면 브라우저 캐시, 캐시 플러그인, 더 우선순위가 높은 테마 스타일이 원인일 수 있습니다. 처음부터 !important를 붙이기보다는 개발자 도구에서 실제로 어떤 규칙이 적용되는지 확인하는 편이 좋습니다.

긴 문단은 폰트보다 먼저 정리해야 한다

가독성이 낮은 원인이 항상 테마 설정에 있는 것은 아닙니다. 한 문단에 여러 주장과 조건을 몰아넣으면 글자 크기를 키워도 읽기 어렵습니다. 한 문단에는 하나의 중심 내용만 두고, 설명의 방향이 바뀌는 지점에서 문단을 나누는 것이 효과적입니다.

예를 들어 다음과 같이 추상적인 표현과 긴 수식어가 이어지는 문장은 핵심을 찾기 어렵습니다.

이 연구는 핵심적인 난제들을 해결하기 위한 방안으로서, 다차원적인 접근법과 혁신적인 기술의 융합을 통해 지속 가능한 발전과 환경 보호에 기여할 수 있는 새로운 패러다임을 제시하고자 하며, 이를 위해 전문가들의 깊이 있는 통찰과 체계적인 연구가 필수적임을 강조합니다.

이런 문장은 목적, 방법, 기대 효과, 필요한 조건을 나누어 쓰는 편이 낫습니다. 짧은 문장을 무조건 많이 만드는 것이 목표는 아닙니다. 다만 문장 하나가 지나치게 길어져 주어와 서술어의 관계가 흐려지지 않도록 해야 합니다. 어려운 용어를 줄이고, 독자가 실제로 해야 할 행동이나 확인할 조건을 앞부분에 배치하면 글자 크기를 크게 바꾸지 않아도 읽는 부담이 줄어듭니다.

이미지와 문단 사이에 시각적 휴식 넣기

텍스트만 이어지는 긴 글은 화면에서 덩어리처럼 보입니다. 내용과 관련된 이미지, 도표, 화면 캡처를 두세 문단 뒤에 배치하면 독자가 잠시 시선을 옮길 수 있습니다. 다만 이미지를 많이 넣는다고 항상 가독성이 좋아지는 것은 아닙니다. 본문과 관계없는 장식 이미지는 오히려 집중을 방해하고 페이지 로딩에도 영향을 줄 수 있습니다.

이미지를 사용할 때는 다음 부분을 함께 확인해야 합니다. 이미지의 가로 폭이 본문 영역을 넘지 않는지, 모바일에서 축소되는지, 대체 텍스트가 입력되어 있는지 살펴보면 됩니다. 화면 캡처를 넣는 경우 글씨가 너무 작아지지 않도록 원본 해상도와 표시 폭을 조정해야 합니다.

긴 글이라면 소제목, 짧은 문단, 이미지, 목록을 적절히 섞는 구성이 좋습니다. 반대로 모든 문단 뒤에 이미지를 넣으면 글의 흐름이 끊길 수 있으므로 내용 전환이 있는 지점에 배치하는 편이 자연스럽습니다.

사이드바를 없애면 글 읽는 폭도 달라진다

GeneratePress의 기본적인 2단 레이아웃은 콘텐츠와 사이드바를 함께 보여주는 Content / Sidebar 구조입니다. 사이드바에는 검색창, 카테고리, 최근 글 등을 넣을 수 있지만, 본문을 읽는 동안 시선이 옆으로 분산될 수 있습니다.

게시글 집중도를 높이고 싶다면 모양(외모) > 사용자 정의 > 레이아웃(Layout) > 사이드바(Sidebars)에서 Content (no sidebars)를 선택할 수 있습니다. 사이트 전체가 아니라 게시글에만 적용하려면 Single Post Sidebar Layout에서 단일 글의 레이아웃을 따로 지정하면 됩니다.

사이드바 제거가 모든 사이트에 적합한 것은 아닙니다. 카테고리 탐색이나 관련 글 이동이 중요한 사이트라면 사이드바가 탐색을 돕기도 합니다. 반면 긴 정보성 글을 한 가지 흐름으로 읽게 하는 것이 우선이라면 1단 레이아웃이 더 단정하게 보일 수 있습니다. 광고 배치나 수익 변화는 사이트 구조와 방문자 행동에 따라 달라지므로, 사이드바를 없애면 항상 수익이 늘어난다고 단정하기는 어렵습니다.

1단 레이아웃에서는 컨테이너 폭을 다시 확인하기

사이드바를 제거하면 콘텐츠가 화면 전체로 넓어질 수 있습니다. 2단 레이아웃에서 약 1100px 내외로 사용하던 컨테이너 폭은 1단 레이아웃에서는 본문 한 줄이 너무 길게 느껴질 수 있습니다. 이때는 모양(외모) > 사용자 정의 > 레이아웃(Layout) > 컨테이너(Container)에서 폭을 1000px 이하로 줄여 적절한 값을 찾을 수 있습니다.

컨테이너 폭은 본문 글자 크기와 함께 봐야 합니다. 폭이 넓은데 글씨가 작으면 한 줄에 너무 많은 글자가 들어가고, 폭이 지나치게 좁은데 글씨와 행간이 크면 스크롤이 길어집니다. 데스크톱 화면뿐 아니라 태블릿과 모바일에서도 본문이 자연스럽게 줄바꿈되는지 확인해야 합니다.

추가 CSS로 폭 지정하기

GeneratePress 설정에서 더 작은 폭을 직접 지정하기 어렵다면 추가 CSS를 사용할 수 있습니다.

/* GeneratePress 콘텐츠 컨테이너 폭 지정 */
body .grid-container {
    max-width: 620px;
}

620px은 데스크톱에서도 모바일에 가까운 좁은 본문 폭을 만들 때 사용할 수 있는 예시입니다. 모든 사이트에 적합한 고정값은 아닙니다. 긴 표나 넓은 이미지, 코드 블록이 많은 글에서는 지나치게 좁아질 수 있으므로 콘텐츠 유형에 맞춰 조정해야 합니다.

데스크톱에서도 모바일 메뉴를 표시할 때의 조건

컨테이너를 좁게 설정해 PC에서도 모바일 화면과 비슷한 구성을 만들고 싶다면 메뉴의 모바일 전환 기준도 함께 바꿔야 합니다. GeneratePress에서는 모바일 메뉴 브레이크포인트가 기본적으로 768px로 설정된 경우가 많습니다. 이 값보다 큰 화면에서는 데스크톱 메뉴가 계속 표시될 수 있습니다.

모바일 메뉴 브레이크포인트를 높이면 태블릿과 데스크톱에서도 햄버거 메뉴가 나타나도록 구성할 수 있습니다. 다만 메뉴를 접으면 방문자가 카테고리나 주요 페이지를 찾기 어려워질 수 있습니다. 콘텐츠 읽기 화면을 단순하게 만드는 대신 탐색 단계가 하나 늘어나는 셈입니다.

따라서 설정을 바꾼 뒤에는 다음 화면을 직접 확인해야 합니다. 게시글 본문 폭, 제목의 줄바꿈, 메뉴 열림 상태, 이미지와 표의 표시 방식, 모바일에서의 가로 스크롤 여부입니다. 글자 크기와 행간만 조정해도 개선되는 사이트가 많지만, 화면이 여전히 답답하다면 문단 구조와 컨테이너 폭, 사이드바까지 함께 손보는 것이 순서입니다. GeneratePress가 아닌 다른 테마도 본문 선택자와 사용자 정의 메뉴 이름은 다를 수 있지만, 타이포그래피·레이아웃·추가 CSS를 나누어 점검하는 접근은 대부분 비슷하게 적용할 수 있습니다.