구글 Blogger에 새롭게 추가된 Read more 기능

구글의 한국어 메인 페이지에는 Blogger가 아닌 텍스트큐브의 링크가 걸려 있습니다만, 여전히 전세계를 대상으로 한 구글의 주력 블로그 서비스는 Blogger입니다. 그만큼 사용자 수도 많고, 업데이트도 꾸준히 이루어지고 있습니다. 최근에는 'Read more(더 보기, 자세히 알아보기)' 기능을 새롭게 추가했는데요, 오늘은 이 새 기능에 대해 알아보도록 하겠습니다.

Creating 'After the jump' summariesPrint – Blogger Help

 

글 길이에 따라 너무 길어지는 Blogger의 메인 페이지

Blogger에는 세 개의 페이지 타입이 존재합니다. 메인(인덱스) 페이지, 아카이브 페이지, 게시물(포스트) 페이지가 그것입니다. 메인 페이지는 블로그에 접속했을 때 가장 먼저 보여지게 되는데, 여러 개의 글들을 한 화면에 날짜 순서대로 보여줄 수 있습니다. 제 블로그에는 6개의 글을 보여주도록 설정되어 있지요.

최신 글들을 블로그의 첫 화면에 보여준다는 점에서 매우 편리한 기능이지만, 가끔은 이게 불편할 때도 있습니다. 바로 글 내용이 매우 길 때 입니다. 최신 글들의 일부분만 보여주는 것이 아니라 글 내용 전체를 다 보여주기 때문에, 블로그 메인 페이지의 스크롤이 엄청나게 길어지는 것입니다. 이는 곧 커다란 트래픽을 유발하게 되고, 방문자로 하여금 '블로그의 속도가 느리다' 라고 느껴지게 합니다. 심지어 Blogger는 해외 서버에서 운영되고 있죠. 때문에 메인 페이지에 나타날 글의 개수를 적게 조절하거나, 저처럼 글 내용의 일부만 표시되게 꼼수를 쓰는 경우도 있습니다.

이러한 상황에서 read more 기능은 전부터 많은 이용자들이 바랐던 기능입니다. 그리고 드디어 추가되었죠. 불필요한 트래픽을 줄이고 블로그를 최적화 하는 데 많은 도움이 될 것입니다. 그럼, 이 기능을 어떻게 사용하는지 자세히 알아볼까요?

 

Read more 기능을 쓰기 위한 준비

이 기능을 쓰려면 몇 가지 준비 과정이 필요합니다. 그리 어렵지 않으니 천천히 따라 하시면 됩니다.

우선 블로그 설정을 확인합니다. 대시보드에서 '레이아웃' – '페이지 요소' 메뉴를 선택해, '페이지 요소 추가 및 정렬' 화면으로 들어갑니다. 화면에 나타난 페이지 요소 중 '블로그 게시물'에서 '수정' 버튼을 눌러, 블로그 게시물 구성에 대한 옵션을 확인합니다. (아직 설정-서식 메뉴엔 추가되지 않았습니다)

위 스크린샷과 같이 '게시물 페이지 링크 텍스트'가 보일 것입니다. 기본값은 '자세히 알아보기'로 되어있는데, 다른 문구를 쓰고 싶다면 수정합니다.

수정이 끝났으면, 이제 'HTML 편집' 메뉴를 눌러 템플릿 수정 화면으로 들어갑니다. '도구 템플릿 확장'에 체크하고, <data:post.body/> 태그를 찾습니다. 브라우저의 검색 기능(단축키 Crtl + F)을 이용하면 편리합니다. 코드 내에 이 태그가 여러 개 있을 수 있는데, <div class='post'> 등의 태그 아래쪽에 위치한 것을 찾으면 됩니다. 찾은 태그 바로 아래에, 다음 태그를 입력해 줍니다.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

글 내에 more 태그 데이터가 있을 경우, 자동으로 read more 링크를 생성해주는 태그입니다. 입력이 완료되었으면 '템플릿 저장' 버튼을 눌러 저장합니다.

 

감출 부분 지정은 간단한 주석으로

템플릿을 수정했으니, 이제 read more 기능을 사용할 수 있게 되었습니다. 그럼 실제 글에서는 이 기능을 어떻게 사용할까요? 만약 Blogger의 새 위지윅 편집기를 사용하고 있다면, 간단하게 툴바의 버튼을 눌러 사용할 수 있습니다(종이가 찢어진 모양의 아이콘). 구형 편집기나 HTML편집을 사용하고 있어도 걱정은 없습니다. 실제 이 기능을 사용하기 위해 쓰이는 태그는 엄청나게 간단하거든요.

<!-- more -->

이 한 줄의 주석이 전부입니다. 이 주석의 위쪽에 쓰여진 글은 메인 페이지에서도 그대로 나타나고, 주석의 아래쪽에 쓰인 글은 메인 페이지에 나타나지 않습니다. 실제 적용된 모습은 이 게시물을 통해 보실 수 있습니다. 메인 페이지와 게시물 페이지에서 어떻게 나타나는지 비교해 보세요.

 

'내용 감추기' 용이 아닌 메인 페이지 축약용

현재 제 블로그엔 이 기능의 사용을 위해 템플릿 수정이 완료된 상태고, 테스트를 위한 게시물이 임시로 올려져 있습니다. 간단하게 read more 기능이 구현되는 걸 확인하실 수 있습니다. 메인 페이지나 아카이브 페이지에서는 read more 주석 윗부분의 내용만 표시되고, 나머지 내용은 게시물(포스트) 페이지에서 표시되는 걸 볼 수 있습니다. 제 블로그엔 메인 페이지를 간략하게 표시해주기 위한 별도의 코드를 쓰고 있기 때문에, 템플릿 수정에서 태그를 두 번 넣어야 했죠.

보시면 아시겠지만, Blogger의 read more 기능은 다른 블로그 서비스들의 '긴 글 감추기' 기능과 약간 다릅니다. 다른 블로그 서비스들은 게시물 페이지 내에서도 글의 일부분을 숨기거나 표시할 수 있지만, Blogger에서는 메인 페이지와 아카이브 페이지에서만 감출 수 있습니다. 게시물 페이지 내에서는 무조건 표시되는 것 같네요.

그리고 다른 블로그 서비스들에서는 감출 부분을 CSS나 자바스크립트로 보이지 않게 처리하고 있는데(실제 감추어진 내용은 이미 로딩되고 화면에서만 보이지 않음), Blogger에서는 아예 로딩자체를 하지 않고 있습니다. 즉 트래픽과 최적화 측면에서 볼 때 좀 더 유리한 방법입니다.

제 블로그에서 쓰고 있는 '메인페이지 간략하기 하기'도 실질적으론 모든 데이터를 로딩하고, CSS에서 보이지만 않게 하는 것입니다. 트래픽이나 최적화 측면에서 볼 때 그다지 나을 게 없는 방식이죠. 게시물마다 more 주석을 넣어주어야 한다는 불편함이 있긴 하지만, 새롭게 추가된 read more 기능은 분명 쓸만해 보입니다.

향후 자동으로 몇 글자 까지만 표시되도록 하는 기능이 추가된다면 더더욱 좋을 것입니다. Blogger의 끝없는 진화를 항상 기대해 봅니다.