블로그 모바일 수익을 놓치지 않으려면 가독성을 높이자.

블로그 모바일 수익을 놓치지 않으려면 가독성을 높이자.

 

요즘 모바일이 대세입니다. 우리가 시간을 떼울 때 가장 즐겨 찾는 것이 바로 스마트폰입니다. 최근 필자는 외이염으로 이비인후과에서 30분~1시간 정도 기다립니다. 기다리는 시간이 무료하고 지루해 밖에 나가서 산책을 하거나 스마트폰으로 웹서핑을 주로 합니다.

모바일이 우리 생각을 깊숙히 파고 들어 블로그 광고 수익을 생각하면 모바일 환경을 절대 무시할 수 없다. 모바일 환경으로 접속한 방문자가 모바일 콘텐츠에 만족을 느끼지 못한다면 명약관화하게도 그 공간을 떠나게 될 것입니다.

필자 블로그, 최근 한달 통계 

필자가 가지고 있는 블로그를 대상으로 통계를 내어보면 특히 방문자 수가 많은 블로그의 경우 점유율 반 이상을 모바일이 차지하고 있습니다. 여러분의 블로그 또한 별반 다르지 않을 것입니다. 갈수록 모바일이 사용량이 더 많아지고 있으니까요. 

모바일 환경을 고려해서 우리는 여러가지 준비를 해야합니다. 모바일 화면에서 가로로 긴 728x90 광고는 쓰지 않는지, 동영상이 알맞은 크기로 보이는지 확인해 봐야합니다. 우리는 모바일에서 가독성을 높이기 위해 모바일 친화적인 환경을 만들어야 합니다.  

티스토리 블로그를 둘러보니 모바일 화면에서 720x90 광고를 쓰시는 분이 있는데 이는 정책위반입니다. 이럴 때 반응형 애드센스 광고를 게재하면 해결 됩니다. 모바일 친화적인 동영상을 만드는 방법은 아래 글을 참조하세요.

HTML 반응형 비디오 코드 동영상 모바일 적용

애드센스 정책 위반, 구글 ADX, 일치하는 콘텐츠

 

모바일 수익을 놓치지 않으려면 가독성에 신경을 써야하는데요, 그 중 하나가 바로 표입니다. PC화면에서는 별문제가 되지 않는 표가 모바일로 넘어가면 문제가 생겨요.

모바일 환경 체크: 1. 광고 단위 2. 동영상 크기 3. 표 크기

 

검색 엔진 최적화 (영어 : Search Engine Optimization , SEO)에서는 표를 가급적이면 그림으로 만들지 말라고 경고하고 있습니다. 필자는 이 말을 지키기 위해 부단히 애썼습니다. 왠만하면 그림 대신 검색에 유리한 표를 사용해왔습니다. SEO에서는 텍스트가 이미지 안으로 들어가면 어떤 글자가 있는지 알 수 없기 때문에 검색에 불리하다고 보는 것이지요.

 

구글에서 “잠실이 야구장”이라고 검색하면 1페이지에 “잠실 야구장 얼마나 크길래?”라는 문서를 찾아볼 수 있을 겁니다. 이 문서에서는 표로 그림으로 만들지 않았습니다. 위 글 안에는 그림 대신 표로 되어 있으니 아무래도 검색이 잘되는 문서라고 볼 수 있습니다.

 

누군가 이 글을 야구 게시판에 링크시켰고 사람들에게 모바일로 보면 중요한 정보가 담긴 표가 보이지 않으니 꼭 PC 화면에서 보라고 권했습니다.

 

오른쪽 부분 짤려나간 중요한 정보

이 이야기를 듣고 무릎을 치고 말았습니다. 사람들은 모바일을 많이 사용하고 있는데 필자는 이부분을 놓치고 있었습니다. 이때부터 모바일 환경에 많은 관심을 가지고 글을 쓴 후에 늘 확인하면서 이상은 없는지 살펴보았습니다. 역시 가장 큰 문제가 되는 것이 동영상이나 표였습니다.

PC 화면에서는 정상적으로 보인다.

필자는 모바일에서 오른쪽이 짤리는 표가 짤리는 것을 보완하게 위해 표 대신 문자로 나열시켰습니다. 예를 들면 위 표를 아래처럼 문자로 만듭니다. 표 대신 문자 나열로 표현할 수 있다면 표로 만들지 않는 것이 좋습니다.

1 / 휴스턴 애스트로스 / 미닛 메이드 파크 / 315, 435, 426

위와 같이 표대신 문자로 나열하면 모바일에서 보이지 않을 경우 나머지 글자가 아래로 내려옵니다. 밑으로 내려오는 게 예쁘지는 않지만 중요한 정보를 놓치지 않고 볼 수 있습니다.

1 / 휴스턴 애스트로스 / 미닛 메이드 파크 / 

315, 435, 426

 

만약 표로 만들 내용이 복잡하고 검색에 큰 의미가 없다면 그림으로 만드는 것도 하나의 방법입니다. 이럴 때 가로로 길게 만들면 위 표처럼 모바일에서 오른쪽 부분이 보이지 않게 됩니다. 모바일 가독성을 위해서 이럴 때는 세로 위주로 표 그림을 만들고 내용이 독립적이라면 짤라서 조각조각 냅니다.

 

세로 위주로 그림을 만들라고 이야기해놓고 위 표에서는 세로 본능이 아니라 왜 가로 본능을 하고 있냐고요? 위 내용은 독립적이라 표 그림 3개로 나누었고 그림 3개를 PC 화면에서 가독성을 높이기 위해 가로로 붙였습니다. 그 결과 모바일 화면에서 아래와 같이 세로로 보이게 됩니다. 마치 반응형 코드를 쓴 것 같이 유연하게 반응하고 있습니다. 

 

가독성을 위해서 PNG 파일을 쓰는 것이 좋습니다. 그 이유는 아래 글을 참조하세요.

JPG보다 PNG가 더 좋은 이유

 

표 대신 그림을 사용하면 좋은 점이 있습니다. 글꼴 및 색상 등을 아름답게 만들 수 있습니다. 표로 만들면 조금 촌스럽게 보이는데 그림으로 만들어 예쁘게 꾸미면 프로페셔널하게 보여질 것입니다. 

표 그림의 단점은 그림 안에 아무런 정보가 없다는 것입니다. ALT 태그를 이용해서 표 그림 안에 검색 정보를 넣어주면 검색에 도움이 됩니다. 특히 구글에서 이미지 검색을 할 때 많은 도움을 주지요. 티스토리 경우 아래 그림과 같이 편하게 보다 편하게 ALT 정보를 넣을 수 있습니다. 

alt="모바일, 데스크탑, 테블릿 검색 점유율"

지금까지 “모바일 수익을 놓치지 않으려면 가독성을 높이자”라는 제목으로 표에 대해서 중점적으로 살펴보았습니다.

 

정리하면 다음과 같습니다.

1.     표 내용이 비교적 간단하다면 그림 대신 검색에 문자로 나열해라. 문자는 검색에 유리하다.

2.     표를 그림으로 만들 때 가로로 길게 만들지 말고 세로 본능으로 만들자.

3.     가독성을 위해 PNG 파일을 쓰고 그림의 장점을 최대한 살려 최대한 예쁘게 꾸미자.

4.   ALT 태그를 이용해 표 그림 안에 검색 정보를 넣어주자.