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

by hfkais | 2009. 10. 24. | 9 comments

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

Creating 'After the jump' summariesPrint – Blogger Help

 

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

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

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

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

 

Read more 기능을 쓰기 위한 준비

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

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

snap_0365

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

수정이 끝났으면, 이제 '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의 끝없는 진화를 항상 기대해 봅니다.

댓글 9개:

  1. blogspot으로 이번에 새로 이사오게 되었습니다. 설정이 국산 설치형 혹은 서버형 블로그들과 좀 달라서 애를 먹고 있었는데, 좋은 자료들 보고 많은 도움을 얻고 있습니다. 더 좋은 글들 많이 부탁드리구요 종종 들르겠습니다 :)

    답글삭제
  2. 안녕하세요~ 저는 처음으로 블로그를 시작하는 사람입니다.
    첫 블로그를 구글블로그로 결정하게 됬습니다! 많은 정보 얻어가겠습니다 :D

    답글삭제
  3. 넵 많은 도움 되길 바랍니다.

    답글삭제
  4. 안녕하세요..처음 이사와서 모르는 게 많은 데 여러가지를 배워갑니다..그런데 저 기능은 한 포스팅 당 한 번 밖에 쓸 수가 없어서 방법을 찾고 있는데 쉽지 않네요.. read more 기능을 한 포스팅 안에서 여러번 쓸 수 있는 방법이 있을까요? 초면에 질문드려서 죄송합니다. 앞으로도 여러번 여쭤보게 될 거 같아요. 이런 방면으로는 무지해서...^^;;;잘 부탁드립니다.

    답글삭제
  5. Cafe 님 / 음 글쎄요, 기본적으로 이 기능은 블로그의 메인화면에서 포스트 전체를 보여주는 게 아닌 일부만 보여주기 위해 있는 기능이라서 여러번 쓸 필요가 있나요? 혹시 다른 블로그 툴에 있는 '보이기/감추기' 기능 때문이라면 다르게 구현해야 할 것 같아요.

    답글삭제
  6. 안녕하세요. 이번에 구글 블로그를 처음 시작했는데 미숙해서 조언얻고자 댓글 남깁니다. 누가 이미 만들어놓은 탬플릿을 적용했는데 기존 설정이 요약이 되게끔 되어있어서요. 저는 반대로 메인페이지에서 요약없이 포스트 전체가 보였으면 좋겠는데 어떻게 무엇을 수정하면 될까요?

    답글삭제
    답글
    1. 프로필에 있는 'neul bomnal' 블로그를 보니 기본 테마 중 'Contempo' 라는 테마를 쓰고 계신 것 같습니다. 기본적으로 메인화면에서 본문 일부만 보여주게 되어있는데, 아래와 같이 직접 코드를 수정해 본문 전체가 보이도록 바꿀 수 있습니다.
      1. Blogger 설정 - 테마 - 주황색 '맞춤설정' 옆의 화살표를 눌러 'HTML편집'으로 들어갑니다.
      2. div class='post' 라는 부분을 찾습니다. 3556번째 줄 근처에 보일 거예요.
      3. 바로 아래에서 if cond='data:view.isSingleItem' 라는 부분을 찾습니다. 만약 아이템(게시물)이 한개일 때를 묻는 조건문이에요. 이 조건문에 따라 include data='post' name='postBody' 또는 include data='post' name='postBodySnippet' 가 표시됩니다. 메인화면에서 본문을 요약해 보여주는게 바로 이 postBodySnippet 이에요.
      4. else 밑에 있는 name='postBodySnippet' 을 name='postBody' 로 바꿔줍니다. 이렇게 하면 어느 조건이든 동일하게 게시물 본문을 둘 다 보여줄 거예요.

      삭제
    2. 그런데 이 'Contempo' 라는 테마는 기본적으로 '추천글' 위젯을 쓰고 있기 때문에, 'Blogger 설정 - 레이아웃' 메뉴에서 '추천 게시물 가젯'을 표시 안함으로 설정해야 합니다. 그러면 원하는 모양대로 표시할 수 있을 거예요. 아래 링크는 같은 템플릿으로 게시물 본문이 모두 표시되도록 만든 테스트 블로그입니다. https://hfkaisphotosssss.blogspot.com/

      삭제
    3. 와아 한참 해매던게 hfkais님 덕분에 단번에 해결돼서 속이 너무 시원해요ㅠㅠ 시간들여 답변해주시고 이렇게나 상세하고 쉽게 가르쳐주셔서 감사합니다! 컴알못에게 정말 큰 도움이 되셨어요... 좋은 주말 보내세요 :)

      삭제

- 스팸 방지를 위해 보안문자(캡차) 확인을 사용하고 있습니다.
- 스팸댓글이 너무 많이 달려 댓글 검토 기능을 쓰고 있습니다. 입력하신 댓글이 당장 화면에 나타나지 않아도, 블로그 주인장은 댓글을 보고 있으니 안심하세요. 1~3일 내에 검토가 완료되면 댓글이 게시됩니다.

덧글 페이지로 이동합니다. 스팸방지를 위해 '단어확인'을 사용하고 있습니다.