워드프레스 모바일 가독성, 왜 데스크톱에서 예쁘다고 끝이 아닐까?
워드프레스 글을 Gutenberg 편집기에서 보면 줄간격도 예쁘고 표도 깔끔하다. 문제는 독자의 70% 이상이 모바일로 본다는 점이다.
특히 운영 가이드, 비교 리뷰, 설정 방법처럼 표와 캡처, 코드 경로가 많은 글은 PC에선 읽기 쉬워도 390px 폭의 아이폰에서는 가독성이 급격히 떨어진다. 구글은 2026년 현재도 모바일 친화성과 페이지 경험을 핵심 랭킹 요소로 본다. 즉, 모바일 가독성은 꾸미기가 아니라 SEO다.
이 글은 내가 실제 운영 블로그에서 매 글 발행 전에 확인하는 워드프레스 모바일 가독성 점검 순서를 정리한 것이다.
1단계: 본문 폭과 문단 길이부터 점검한다 – 모바일 가독성의 80%
모바일에서 독자가 이탈하는 가장 큰 이유는 글꼴이 아니라 문단의 압박감이다.
PC에서 4줄인 문단이 모바일에서는 10줄이 된다. 어디를 읽고 있는지 잃어버리면 바로 뒤로가기를 누른다.
점검 순서:
1) 본문 폭과 좌우 여백: 테마 설정 > 사이트 편집기 > 템플릿 > 본문(Content) 폭이 720px∼800px 사이인지 확인한다. 그 후 그룹 블록의 좌우 패딩을 모바일에서 16∼20px로 둔다. 여백이 0이면 글자가 화면 끝에 붙어 답답하고, 32px 이상이면 한 줄에 10자도 안 들어가서 가독성이 더 떨어진다.
2) 문단 분리 원칙: 한 문단엔 한 가지 메시지만 넣는다. 3줄 이상 넘어가면 엔터를 친다. 특히 “다음 행동이 바뀌는 지점”에서는 반드시 H2, H3 소제목이나 불릿 리스트로 잘라야 한다.
3) 글꼴과 웹폰트 FOIT 점검: 워드프레스 테마 기본 폰트(예: Pretendard, Noto Sans KR)를 쓰는 게 가장 안전하다. 웹폰트를 새로 적용했다면 실제 공개 화면에서 새로고침했을 때, 폰트 로딩 때문에 글자가 0.5초 뒤에 깜빡이며 바뀌는지(FOUT/FOIT) 확인한다. font-display: swap 설정은 필수다.
4) 링크와 버튼 터치 영역: 본문 속 링크가 색상만으로 구분되면 모바일에서 잘 안 보인다. 밑줄 + 진한 색상을 유지하고, 문의하기/구매하기 버튼은 높이 48px 이상, 버튼 사이 간격 12px 이상을 확보해야 오터치를 방지한다. 구글 서치콘솔의 모바일 사용 편의성 보고서에서도 이 부분을 지적한다.
2단계: 표(Table)는 압축하지 말고 우선순위를 정한다
워드프레스 운영 글에서 표는 필수지만, 모바일 SEO를 망치는 주범도 표다.
열이 5개 이상인 표는 390px 화면에서 100% 가로 스크롤이 생긴다. 구글은 가로 스크롤을 모바일 사용성 오류로 판단한다.
내가 쓰는 표 개선 3원칙:
1) 열을 3개 이하로 줄인다: 비교표라면 가장 중요한 구분 / 장점 / 추천 대상 3개만 남긴다. 나머지 세부 스펙은 표 아래에 문단이나 토글(Acordion) 블록으로 뺀다.
2) 셀 안의 긴 문장을 밖으로 뺀다: 셀 안에 2줄 이상의 설명을 넣지 않는다. 예를 들어 “색상만으로 상태 표시” 대신 “[상태: 완료]”처럼 텍스트 라벨을 반드시 같이 쓴다. 스크린리더 접근성도 좋아져 SEO에 유리하다.
3) TablePress나 Gutenberg 표 블록 설정: 표 블록 선택 > 고급 > 테이블을 가로로 스크롤 옵션을 켜되, 실제 아이폰 SE(375px)와 갤럭시 폴드 커버 디스플레이에서 가로 스크롤이 생기는지 직접 확인한다. 생긴다면 표를 2개로 나누는 게 답이다.
팁: 모바일에서 표가 꼭 필요하다면
Kadence Table이나Stackable Table처럼 모바일에서 카드 형태로 자동 변환되는 블록을 쓰면 체류시간이 40% 이상 늘어난다.
3단계: 이미지와 관리자 캡처는 확대 없이 읽혀야 한다
워드프레스 관리자 화면 캡처는 신뢰도를 높이지만, 원본 그대로 1200px을 업로드하면 모바일에서 글씨가 깨져 보인다.
점검 순서:
1) 필요한 영역만 크롭(Crop): 전체 관리자 메뉴가 다 필요 없다. 독자가 봐야 할 버튼 주변 600×400 영역만 잘라낸다.
2) 캡션에 방향을 적는다: 이미지 아래 캡션에 워드프레스 > 외모 > 테마 파일 편집기에서 style.css 위치처럼 어디를 봐야 하는지 텍스트로 한 번 더 설명한다. 이미지가 로딩 안 돼도 정보가 전달되고, 이 캡션이 롱테일 키워드가 된다.
3) alt 텍스트는 핵심 요약으로: alt=”워드프레스 관리자 화면 캡처” (X) / alt=”워드프레스 모바일 가독성을 위한 본문 폭 720px 설정 화면” (O) 처럼 구체적으로 쓴다.
4) 이미지 넘침 방지: img { max-width: 100%; height: auto; }가 테마에 있는지 확인한다. 대표 이미지가 16:9가 아니면 모바일 홈에서 잘리므로 1200×675로 통일한다.
4단계: 편집기 미리보기가 아닌, 실제 공개 화면에서 최종 확인한다
이게 가장 중요하다. 워드프레스 편집기의 “모바일 미리보기”는 캐시, 광고, 팝업, 지연 로딩(Lazy Load), 로그인 상태에 따른 상단바를 반영하지 못한다.
발행 전 2분 최종 체크리스트 (실제 시크릿 모드에서):
- 크롬 시크릿 창에서 내 글 URL을 연다. 390px로 폭을 줄인다.
- 제목(H1)과 H2가 한 글자씩 어색하게 줄바꿈되지 않는지 확인한다.
- 본문 글꼴 크기가 16px 이상, 행간 1.7∼1.8인지 확인한다. 15px 이하는 구글도 작다고 판단한다.
- 표 2개가 가로 스크롤 없이 보이는지 확인한다.
- 이미지 캡션과 내부 링크를 엄지손가락으로 눌러본다. 오터치가 나는지 확인한다.
- 글 하단의 “다음 글”, “관련 글” 영역이 손가락으로 이동하기 쉬운지 확인한다.
나는 이 과정을 운영 기록: 2026-09-06 / 390px 폭 확인 / 제목 줄바꿈 정상 / 표 2개 가로 스크롤 확인 완료 / 이미지 캡션 터치 영역 48px 확보 형태로 메모해둔다. 이 기록 자체가 다음 리라이팅 때 큰 도움이 된다.
마무리: 모바일 가독성은 독자의 시간을 아끼는 SEO다
워드프레스 모바일 최적화는 특별한 플러그인을 설치하는 일이 아니다. 독자가 스크롤을 멈추지 않고 정보의 우선순위를 따라가게 만드는 편집의 문제다.
오늘 발행할 글부터 위 4단계 순서대로만 점검해보자. 본문 폭과 문단 분리 → 표 우선순위 → 캡처 크롭 → 실제 기기 확인. 이 순서만 지켜도 모바일 체류시간과 구글 검색 노출이 동시에 개선된다.
다음 글에서는 이 가독성을 유지하면서 헤더 메뉴 최적화와 사이드바 제거가 모바일 전환율에 미치는 영향에 대해 정리하겠다.