강의팔이 전자책팔이에게 속아서 블로그를 하는 사람들에게 (feat. 랜덤 포스트 썸네일 개선)

오늘은 수정한 코드와 기능에 대한 이야기 자체보다는 다른 잡다한 이야기를 좀 더 많이 하는 포스트가 될 것 같다.

바로 본론으로 들어가자.

구글 블로그 랜덤 추천 포스트 기능 직접 만들기

랜덤 포스트 기능이 없는 구글 블로그에 직접 위젯을 추가하는 방법을 소개합니다. 디자인과 SEO 등이 최적화된 코드를 통해 랜덤 포스트 위젯을 구현하고, 썸네일 문제에 대한 팁까지 함께 얻어가세요.

이전에 구글 블로그에 직접 랜덤 추천 포스트 기능을 구현하는 코드를 공개했다.

그런데 글의 마지막에도 썼었지만 작은 문제점이 남아있는 코드였다.

랜덤 추천 포스트가 외부 이미지를 썸네일로 가져오지 못한다

나의 다른 블로그를 캡처했다.

그 문제점은 바로 랜덤 추천 포스트 기능이 '외부의 이미지를 썸네일로 사용하는 포스트'의 경우에는 썸네일을 가져오지 못한다는 것이었다.

글을 올린 후에 곧바로 썸네일을 가져오는 코드를 개선했지만, 여기에는 올리지 않고 있다가 2주 만에 올린다.

올리지 않고 있었던 이유는 이전에 작성했었던 포스트로 설명이 될 것 같다.

수정한 코드를 올리지 않고 있었던 이유

블로그에 남에게 도움이 되는 글을 쓸 때마다 걱정도 생기는 이유

남에게 도움이 되는 글을 쓸 때마다 걱정과 고민이 커지는 이유. 콘텐츠 도용과 무분별한 AI 글 복제 현상에 대한 현타와 블로그 생태계의 미래에 대한 솔직한 생각을 담았습니다.

내가 올린 코드를 이용해서 블로그를 꾸민 사람이 그 블로그를 이용해서 AI로 작성한 글만 복사・붙여넣기를 하는 방식으로 블로그를 악용하는 게 걱정이 됐기 때문이다.

그래서 2% 부족한 기능만 블로그에 올려두고 제대로 된 코드는 그냥 나만 쓸까 했었다.

이런 걱정을 하는 건 내가 걱정이 많은 사람이라서가 아니다.

블로그로 한 달에 몇백만 원을 벌 수 있다며, 귀 얇은 사람들을 끌어들이고, 강의 영상이나 전자책 등을 팔고 있는 강의팔이들이 늘어나고 있다.

거기에 몇십 or 몇백만 원을 투자하면서(사기 당하면서) AI로 작성한 글을 복사・붙여넣기 하고, 그걸 부업이라고 말하는, 자칭 디지털 노마드라고 생각하는 사람들도 늘고 있다.

그런데 그 피해자들은 단순한 피해자들이 아니다.

웹상에 검증도 안된 쓰레기 같은 글들을 올리면서 검색엔진을 병들게 하는, 진짜 자신의 콘텐츠를 생산해내던 블로거까지 같이 죽이는 암적인 존재들이다.

위에 링크한 포스트에 올렸던 오픈 채팅방은 어떤 블로그 유튜버(강의팔이)가 운영하는 오픈 채팅방이었고, 사람은 몇백 명이나 있었다.

거기 사람들이 매일 서로 '오늘도 화이팅!'이라면서 '나는 오늘 하루에 글을 5개 썼다', '10개를 목표로 할 거다' 이런 대화들을 나누는 걸 보고 있으면 정말 짠하기도 하면서 동시에 한심하기도 하고.. 굉장히 복잡한 기분이 들었다.

아무리 구경이나 하려고 안 나가고 계속 있는 오픈 채팅방이라고 해도, 계속 보고 있으면 나도 이상해지는 것 같고, 블로그가 하기 싫어질 것 같아서 최근에는 그냥 나가버렸다.

내 블로그를 방문하는 사람들에게

혹시 우연히 나의 블로그에 있는 글들을 보고 구글 블로그를 꾸미던 사람들 중에서 그런 식으로 블로그를 운영하고 있는 사람이 있다면 꼭 말해주고 싶다.

강의팔이들은 블로그를 이용해서 돈을 정말 많이 벌 수 있고, 쉽게 벌 수 있어서, 그런 좋은 것을 많은 사람들에게 알리고 싶어서 그러는 것이 아니다.

진짜 그게 돈이 되면 혼자 하지, 미쳤다고 그러고 있겠는가.

의외로 속는 사람들이 많아서 돈이 되니까 그러는 거다.

하루에 1,000명 넘게 들어오는 블로그 운영해봤자 한 달에 10만원 벌면 많이 버는 거다.

하루에 1,000명 들어오는 블로그 하나 키우기도 얼마나 힘든 건데, 그걸 AI가 쓴 글로 도배한 블로그로 가능할 거라고 생각하는가..

블로그는 부업 수단이 아니다.

작고 귀여운 수익은 부수적인 거고, 그냥 글을 쓰는 게 즐겁고 재밌는 사람들이 하는 거다.

본인이 어느 한 분야에 지식을 가지고 있고, 그걸 나누는 것 자체가 즐겁고 보람이 있는 사람들이 하는 거다.

랜덤 추천 포스트 기능, 썸네일 가져오는 코드 개선

<div class="PopularPosts">
  <div id="random-posts-list"></div>
</div>

<script>
  function getRandomPosts(data) {
    var posts = data.feed.entry;
    var numPosts = posts.length;
    var randomIndexes = [];
    var limit = 6;

    // 랜덤 뽑기 (while 방식)
    while (randomIndexes.length < limit) {
      var randomIndex = Math.floor(Math.random() * numPosts);
      if (randomIndexes.indexOf(randomIndex) === -1) {
        randomIndexes.push(randomIndex);
      }
    }

    var randomPosts = [];
    for (var i = 0; i < limit; i++) {
      var post = posts[randomIndexes[i]];
      var postTitle = post.title.$t;
      var postUrl = post.link.filter(link => link.rel === 'alternate')[0].href;

      /* 작성 날짜 */
      var postDate = new Date(post.published.$t);
      var formattedDateISO = postDate.toLocaleString('sv-SE', { timeZone: 'Asia/Seoul' }).replace(' ', 'T') + '+09:00';
      var formattedDate = (postDate.getMonth() + 1) + '월 ' + ('0' + postDate.getDate()).slice(-2) + ', ' + postDate.getFullYear();

      /* 썸네일 추출 */
      var postImageUrl = '';
      if (post.content && post.content.$t) {
        var content = post.content.$t;

        // 1. alt="포스트 썸네일 이미지" 찾기 (우선)
        var thumbImgMatch = content.match(/<img[^>]+alt=["']포스트 썸네일 이미지["'][^>]*src=["']([^"']+)["']/i);
        if (thumbImgMatch && thumbImgMatch[1]) {
          postImageUrl = thumbImgMatch[1];
        } 
        // 2. media$thumbnail 사용
        else if (post.media$thumbnail) {
          postImageUrl = post.media$thumbnail.url.replace(/\/s\d+-c/, "/w120");
        } 
        // 3. 일반 첫 번째 <img> src
        else {
          var imgMatch = content.match(/<img[^>]+src=["']([^"']+)["']/i);
          if (imgMatch && imgMatch[1]) {
            postImageUrl = imgMatch[1];
          }
        }

        // 4. 유튜브 썸네일 등 default.jpg 치환
        if (postImageUrl) {
          postImageUrl = postImageUrl.replace(/[^\/]*default\.jpg$/i, 'default.jpg');
        }
      }

      // 썸네일 없을 경우 기본 이미지
      if (!postImageUrl) {
        postImageUrl = 'https://4.bp.blogspot.com/-eALXtf-Ljts/WrQYAbzcPUI/AAAAAAAABjY/vptx-N2H46oFbiCqbSe2JgVSlHhyl0MwQCK4BGAYYCw/s120/nth-ify.png';
      }

      var posterImage = '<span class="post-thumb lazy-ify" data-image="' + postImageUrl + '" style="background-image:url(' + postImageUrl + ')"></span>';

      randomPosts.push(
        '<article class="popular-post post">' +
          '<div class="post-image-wrap">' +
            '<a aria-label="' + postTitle + '" class="post-image" href="' + postUrl + '">' +
              posterImage +
            '</a>' +
          '</div>' +
          '<div class="post-header">' +
            '<div class="post-meta">' +
              '<time class="post-date published" datetime="' + formattedDateISO + '">' + formattedDate + '</time>' +
            '</div>' +
            '<h2 class="post-title"><a href="' + postUrl + '">' + postTitle + '</a></h2>' +
          '</div>' +
        '</article>'
      );
    }

    document.getElementById('random-posts-list').innerHTML = randomPosts.join('');
  }

  function loadScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  // default feed (본문 전체 포함)
  loadScript('/feeds/posts/default?alt=json-in-script&max-results=100&callback=getRandomPosts');
</script>

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.