모바일에서 확인하기

글은 대부분 PC에서 씁니다. 그런데 읽는 건 대부분 휴대폰에서 일어납니다. 이 차이 때문에 쓸 때 괜찮아 보였던 글이 실제로는 전혀 다르게 보입니다.

발행 전에 휴대폰으로 한 번 보는 것만큼 효과가 확실한 작업이 없습니다. 5분이면 끝납니다.

PC와 모바일이 다른 지점

같은 문단이 PC에서 3줄, 모바일에서 10줄이 됩니다. PC에서 "이 정도면 짧네" 싶었던 문단이 모바일에서는 벽이 되는 이유입니다.

미리보기 방법

대부분의 블로그에 모바일 미리보기 기능이 있습니다. 네이버 블로그는 발행 화면에서, 티스토리는 관리 메뉴에서 볼 수 있습니다.

없다면 PC 브라우저에서 창을 좁게 줄여 보세요. 폭을 400px 정도로 만들면 모바일과 비슷해집니다. 크롬이나 엣지에서는 F12를 누르고 기기 모드로 바꾸면 더 정확합니다.

가장 확실한 건 실제 휴대폰으로 보는 것입니다. 임시 저장하고 폰에서 열어 보세요.

모바일에서 확인할 것

스크롤하면서

• 글자만 이어지는 구간이 세 화면을 넘지 않는가
• 한 문단이 한 화면을 통째로 차지하지 않는가
• 소제목이 화면마다 하나씩은 보이는가
• 사진이 연달아 세 장 이상 이어지지 않는가

가로로 잘리는 것

• 표가 화면 밖으로 나가지 않는가 — 나간다면 열을 줄이거나 목록으로 바꾸세요
• 긴 주소(URL)가 줄을 밀어내지 않는가
• 코드나 인용문이 옆으로 넘치지 않는가

읽기

• 글자가 작아서 눈이 피로하지 않은가
• 줄간격이 좁아 줄이 붙어 보이지 않는가
• 강조 색이 배경과 구분되는가
• 링크가 손가락으로 누를 만큼 큰가

제목

모바일 검색 결과에서는 제목이 25~35자까지만 보입니다. 실제로 검색해 보고 어디서 잘리는지 확인하세요. 중요한 말이 잘려 나간다면 앞으로 옮겨야 합니다.

자주 발견되는 문제

문단이 뭉쳐 있다

가장 흔합니다. PC에서는 몰랐는데 모바일에서 보면 글자 벽입니다. 2~3문장마다 빈 줄을 넣으세요. 문단 정리기를 쓰면 단어를 건드리지 않고 줄바꿈만 다시 배치할 수 있습니다.

표가 잘린다

열이 다섯 개를 넘으면 모바일에서 거의 못 봅니다. 세 개 이하로 줄이거나, 표를 목록으로 바꾸세요.

가운데 정렬

PC에서는 멋있어 보이는데 모바일에서는 읽기 어렵습니다. 줄마다 시작점이 달라져서 눈이 매번 첫 글자를 찾아야 합니다. 본문은 왼쪽 정렬이 원칙입니다.

줄바꿈을 직접 넣은 경우

PC 화면에 맞춰 문장 중간에 엔터를 넣으면, 모바일에서는 엉뚱한 자리에서 줄이 끊깁니다. 줄바꿈은 문단 단위로만 넣고 나머지는 화면에 맡기세요.

마지막에 한 번 읽어 보세요

점검 항목을 다 봤다면, 마지막으로 휴대폰으로 처음부터 끝까지 읽어 보세요. 눈으로 훑는 게 아니라 실제 독자처럼 읽는 겁니다.

이때 지루해지는 지점이 있으면 그 자리에서 실제 독자도 나갑니다. 오타도 이상하게 이때 잘 보입니다. 화면이 바뀌면 글이 낯설어지기 때문입니다.

전체 점검 항목은 발행 전 점검 목록에 정리해 두었습니다.