Erzsamatory Weblog


파워블로거의 특징에 대해서 잘 아시나요? 파워블로거의 가장 대표적인 특징은 바로 블로그 방문 시간을 최대한 늘리기 위하여 방문자를 블로그 내의 다른 글로 유도하는 링크를 즐겨 사용한다는 것입니다. 가장 쉽게 사용할 수 있는 것은 티스토리의 추천글 플러그인일 것입니다. 그리고 더 나아가 본문 글 내부에 연관되는 다른 글로 연결되는 링크를 삽입할 수도 있습니다. 티스토리 대부분의 블로그에는 블로그 추천글이나 연관 글을 출력하는 플러그인이 있지만, 이것은 방문자의 눈에 확 들어오지 않기 때문에 방문자의 체류 시간을 유지하기에는 충분하지 않습니다. 하지만 이 글에서 소개하는 방법은 방문자의 관심을 확 끌어 모을 수 있는 방법입니다.


당신은 제이쿼리(jQuery)를 사용할 수 있는가?


jQuery 다운로드 사이트
http://www.jquery.com/download/

jQuery를 내 블로그에서 사용하는 방법
외부 링크 방식으로 jQuery를 블로그에서 사용하는 방법 소개

jQuery는 자바스크립트와 쿼리의 합성어로, 데이터베이스 쿼리를 입력하는 것과 같이 매우 간편하고 빠르게 자바스크립트의 각종 기능을 구현할 수 있게 해주는 자바스크립트 프레임워크입니다. jQuery와 같은 자바스크립트 프레임워크를 활용하면 사이트 개발 시간을 절약할 수 있으며, 소스코드를 매우 간결하게 만들 수 있다는 장점이 있습니다. 이러한 이유 때문에 요즘 대부분의 사이트에서는 jQuery나 프로토타입과 같은 자바스크립트 프레임워크를 사용하고 있습니다.

네이버에서는 jindo 라고 부르는 자체적으로 개발한 자바스크립트 프레임워크를 사용하고 있습니다. 그런데 왜 이 글에서 jQuery를 언급했을까요? 바로 이 글에서 소개하는 방법이 jQuery를 활용한 방법이기 때문입니다. 이 글에서는 jQuery의 사용 방법에 대해서는 설명하지 않으며, jQuery의 사용 방법에 관한 내용은 [2014. 2. 13 외부 링크 방식으로 jQuery를 블로그에서 사용하는 방법] 글을 참고하시기 바랍니다.


하단에 나타나는 블로그 글 추천 레이어 자바스크립트 소스코드


인터넷 서핑을 통하여 블로그를 많이 돌아다니다보면, 가끔씩 우측 하단에 블로그 글 추천 레이어가 나타나는 것을 발견할 수 있습니다. 이와 같은 블로그 추천 글 레이어는 방문자가 오랫동안 블로그에 체류할 수 있도록 그 동기를 유발하기 위하여, 해당 블로그의 관리자가 직접 추가한 소스코드입니다. 블로그에서 많은 사람들이 읽었던 글을 이와 같은 방법으로 방문자에게 소개를 하면, 그 방문자는 그 글을 읽으러 또 다른 페이지로 이동하겠죠? 이렇게 그 방문자는 계속해서 해당 블로그에 머물게 됩니다.

소스코드가 막 복잡할 것 같지만, jQuery를 활용하면 매우 간단하게 끝낼 수 있습니다. 아래의 예제 소스코드는 레이어 닫기 버튼 활성화나 마우스를 올렸을 때 타이머 작동이 중단되는 것과 같은 부가적인 기능이 적용되지 않은 순정 추천 레이어 소스코드입니다. 따라서 아래의 소스코드는 블로그와 같은 곳에서 직접 사용할 수는 없고, 우측 하단 레이어가 잘 나타나는가를 확인하는 테스트용만으로 사용되어야 합니다. 만약, 아래의 소스코드를 블로그나 사이트에서 사용하고자 한다면, 약간의 수정을 해야 합니다.

$(window).load(function () {
    $('#layer_ad').css({
        'position':'fixed',
        'bottom':0,
        'right':'20px',
        'padding':'10px',
        'font-size':'12px',
        'width':'250px',
        'height':'150px',
        'border-width':'1px 1px 0 1px',
        'border-color':'#aaaaaa',
        'border-style':'solid'
    });
    setInterval(function() {
        if (jQuery('#layer_ad').css('bottom') != '-200px') {
            jQuery('#layer_ad').animate({'bottom':'-200px'}, 'slow');
        } else {
            jQuery('#layer_ad').animate({'bottom':'0px'}, 'slow');
        }
    }, 5000);
});


위 소스코드를 분석하면, 총 두 개의 부분으로 나누어져 있습니다. 추천 레이어를 보기 좋게 꾸며주는 CSS 설정 부분과 5초마다 추천레이어를 나타났다 사라지게 하는 타이머 부분으로 나누어져 있습니다. 이 글에서는 위의 소스코드를 두 부분으로 나누어 설명하도록 하겠습니다. 예제 소스코드에는 매우 간단한 CSS만 포함하고 있으므로, 실제로 블로그에 사용하고자 한다면, 가장 먼저 이 CSS 부분을 수정해야 합니다. 예제 소스코드의 우측 하단 레이어에는 박스라는 것만 알아볼 수 있을 정도의 스타일만 적용되어 있습니다.


CSS 설정 부분


스타일은 자바스크립트가 아닌 진짜 CSS 파일이나 내부 HTML 스타일 태그를 이용하여 지정이 가능하지만, 이 글에서는 설명의 편의상 자바스크립트를 이용하여 레이버 박스의 스타일 속성을 지정하였습니다. 위의 소스코드를 보면 css() 메소드를 사용하고 있는 것을 볼 수 있는데, 이 메소드는 jQuery에서 사용할 수 있는 메소드입니다. jQuery가 지원되지 않는 상황에서는 이 메소드를 사용할 수 없습니다. css() 메소드는 jQuery 기반 스크립트에서 HTML 요소에 스타일을 적용시킬 때 자주 사용되는 메소드입니다. 일반적으로 순수 자바스크립트를 이용하여 스타일을 적용시키기 위해서는 매우 복잡한 소스코드가 필요하지만, jQuery에서는 단 한 줄의 소스코드만으로 스타일을 적용시킬 수 있습니다.

CSS 속성 정의 부분에서 가장 중요한 것은 position 속성과 bottom, right 속성입니다. 이 부분이 해당 추천 레이어를 우측 하단에 위치할 수 있게끔 해줍니다.

position 속성을 fixed로 설정하면 레이어가 웹브라우저에 고정이 되기 때문에 스크롤바를 내려도 사라지지 않습니다. 페이스북이나 트위터 등에서 이 기능을 사용하고 있습니다. 그리고 이 블로그에서도 상단 메뉴에 이 속성을 적용하고 있습니다. position 속성을 fixed로 설정하였을 때의 자세한 설명은 [2014. 1. 19 누구나 할 수 있는 CSS를 이용하여 고정 레이어 만드는 방법] 글을 참고하십시오.

bottomright 속성은 해당 레이어 객체를 웹브라우저의 어디에 위치시킬지 결정하는 속성입니다. 추천 레이어는 우측 하단에 위치하게 될 것이므로 여기에서는 bottom을 0으로 지정하였으며, 완전 오른쪽에 딱 붙어 있으면 답답한 느낌이 있기 때문에 right는 20px로 설정하였습니다.

※ 참고: 블로그 글 추천 레이어를 왼쪽에 표시하고 싶다면, right 속성이 아닌 left 속성을 사용하면 됩니다.


타이머 설정 부분


자바스크립트에서는 일정 시간이 지날 때마다 소스코드가 실행되게 할 수 있습니다. 바로 이와 같은 기능을 타이머라고 합니다. 타이머는 페이스북의 알람 기능이라든가 이 블로그에서 볼 수 있는 추천 레이어가 자동으로 나타났다 사라졌다 하는 기능을 구현할 때 자주 사용됩니다.

자바스크립트에서 타이머를 지정할 때에는 setInterval() 이라는 메소드를 사용합니다. 첫 번째 매개변수는 해당 시간이 지날 때마다 실행할 함수가 되어야 하고, 두 번째 매개변수는 반복되어질 시간이 되어야 합니다. 시간은 밀리초를 기준으로 하므로 1초를 반복 시간으로 하고 싶다면 1000을 입력하면 됩니다. (1초 = 1000밀리초)

첫 번째 매개변수로 함수를 전달할 때에는 기존의 함수를 사용할 수도 있지만, 일반적으로는 익명 함수를 전달하는 방법을 사용합니다. 익명 함수 또는 가짜 함수는 함수의 이름이 정해지지 않는 것을 말하는데, 익명 함수는 주로 함수의 정의 그대로를 통째로 메소드의 매개변수로 넘길 때 사용됩니다. 위의 예제 소스코드를 보면, 타이머 설정 메소드를 실행할 때, 함수명이 들어가야 하는 매개변수 자리에 함수 이름이 없는 함수가 정의되어 있는 것을 확인할 수 있을 것입니다. 바로 이것이 익명 함수입니다.


예제 소스코드를 어떻게 적용시킬 것인가?


자바스크립트 소스코드만 있다고 블로그에 적용시킬 수 있는 것은 아닙니다. 예제 소스코드를 사용하기 위해서는 HTML에 관한 기본적인 지식이 필요합니다. 위의 소스코드는 HTML의 <HEAD>와 </HEAD> 사이에 넣어야 합니다. 물론 위의 소스코드는 <SCRIPT>와 </SCRIPT> 사이에 들어가야 합니다. <SCRIPT>와 </SCRIPT> 내부에 넣어야 하는 이유는 위의 소스코드가 자바스크립트이기 때문입니다. ( 이 사실을 모르는 분은 없겠죠? )

그리고, 위에 명시가 되어 있는 것처럼, 추천 레이어로 사용되는 DOM 객체는 layer_ad 라는 ID를 가지는 DOM 객체입니다. 이 객체는 반드시 <BODY>와 </BODY> 사이에 있어야 합니다. 만약 BODY 내부에 layer_ad를 ID로 가지는 태그가 없다면 위의 소스코드는 작동하지 않을 것입니다.

※ 참고: jQuery에서 DOM 객체를 불러올 때 #을 붙이는 것은 해당 ID를 가진 객체를 의미하고, .을 붙이는 객체는 해당 CLASS를 가진 객체를 의미합니다. 예를 들어, jQuery에서 #layer 객체를 불러온다고 하면 id="layer" 를 가진 DOM 객체를 불러올 것이고, .layer 객체를 불러온다고 하면 class="layer" 를 가진 모든 DOM 객체를 불러올 것입니다. jQuery의 자세한 사용 방법은 [2014. 2. 13 외부링크 방식으로 jQuery를 블로그에서 사용하는 방법] 글을 참고하시기 바랍니다.


위에서 설명했던 모든 것들이 적용된 실제 HTML 예제는 다음과 같습니다. 다음 내용을 HTML 파일에 모두 복사/붙여넣기 한 후 실행하면 우측 하단에 박스로 된 레이어 한 개가 일정한 간격으로 나타났다 사라지는 것을 반복하는 모습을 두 눈으로 직접 확인할 수 있을 것입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(window).load(function () {
            $('#layer_ad').css({
                'position':'fixed',
                'bottom':0,
                'right':'20px',
                'padding':'10px',
                'font-size':'12px',
                'width':'250px',
                'height':'150px',
                'border-width':'1px 1px 0 1px',
                'border-color':'#aaaaaa',
                'border-style':'solid'
            });
            setInterval(function() {
                if ($('#layer_ad').css('bottom') != '-200px') {
                    $('#layer_ad').animate({'bottom':'-200px'}, 'slow');
                } else {
                    $('#layer_ad').animate({'bottom':'0px'}, 'slow');
                }
            }, 5000);
        });
    </script>
</head>
<body>
    <div id="layer_ad">이곳에 추천할 포스트 목록을 넣습니다.</div>
</body>
</html>

마무리


지금까지 블로그 우측 하단에서 일정한 간격으로 자동으로 나타났다 사라지는 것을 반복하는 블로그 글 추천 레이어를 만드는 방법에 대해서 알아보았습니다. 실제로 블로그에 이와 같은 레이어가 적용된다면 방문자의 이목을 집중시켜 블로그에 체류하는 시간을 늘리는데에 큰 도움이 될 것입니다.

이 글에서는 이와 같은 레이어를 jQuery를 활용하여 매우 간단하게 구현하였지만, 이 방법은 자바스크립트 프레임워크를 사용하는 것이기 때문에 속도면에 있어서는 느릴 수 있습니다. 자바스크립트 프레임워크는 기본적으로 방대한 분량의 자바스크립트를 필요로 하기 때문에 적용된 사이트의 속도가 느려질 수도 있습니다. 따라서 이 기능을 본인의 블로그에 적용할 예정이라면, 본인의 블로그 로딩 속도에 대해서 먼저 체크해보는 것이 좋습니다.
http://www.erzsamatory.net/trackback/41

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/02/07 08:09
    다운로드를 누르면 창이 뜨면서 외계인용어가 나오네요;;
    어찌 따라해야 할지 엄두가 안 나네요;;
    설치만 하면 코드는 카피해서 쓰면 될거 같긴한데 말이죠;
    • 2014/02/07 08:25
      아 그 블로그에 있는 코드만 적용하면 되나요?
      그것을 적용하고, 위 내용을 입혀봤는데도...
      아무것도 뜨지 않더라구요ㅠㅠ
      추천글에 아무것도 입력을 하지 않아서 그런가요?ㅠㅠ
    • Walter E.
      Walter E.
      2014/05/06 09:57
      추천글 태그에 내용을 입력해야 잘 뜰거에요.

      위에있는 소스코드에서 jQuery 부분만 제대로된 경로로 해주시고 테스트해보시면 잘 뜰겁니다. 디자인은 그 때부터 해야지요 ㅎㅎ
    • Walter E.
      Walter E.
      2014/05/06 09:58
      꼭 다운로드할 필요는 없고 구글에서 제공하는 링크로 연결만 해도 됩니다. ^^ 위 링크따라 가보시면 아마 있을거에요.

      jQuery에 대해서 직접 건드리는 부분은 없으니 너무 겁먹지 않으셔도 됩니다 ^^
  2. 2014/02/08 06:58
    그냥 설치하면 되는게 아니라, 디자인도 해야 하는거였군요ㅠㅠ
    좀 더 내공을 쌓아서 도전해야겠네요ㅠㅠ
    • Walter E.
      Walter E.
      2014/05/06 09:57
      디자인 방법도 나중에 올려드리도록 하겠습니다.

      즐거운 주말 보내세요 ~
  3. 2014/02/08 18:13
    안녕하세요, 정보 감사합니다.설치 해보고 싶어요.
    • Walter E.
      Walter E.
      2014/05/06 09:57
      감사합니다 ^^
      설치가 그렇게 어렵진 않을 겁니다.