Erzsamatory Weblog


최근들어 반응형 스킨을 사용하는 블로그가 많이 늘어나고 있습니다. 이 블로그도 역시 반응형 스킨을 사용하고 있구요. 반응형 스킨을 만들 때에는 일반 스킨보다는 손이 많이 가지만, 한 번 만들어놓으면 유지 및 보수가 쉬워지기 때문에 많은 블로거들이 반응형 스킨을 사용하고 있습니다. 저는 이 블로그에서 사용하고 있는 반응형 스킨을 직접 만들었습니다. 이 스킨을 만들면서 얻었던 노하우를 이 블로그에서 공유하고자 새로운 연재 글 작성을 시작하려고 합니다. 첫 번째 글은 반응형 스킨을 만들면서 꼭 알아 두어야 하는 것들에 관한 글입니다.



블로그 반응형 스킨이란?


반응형 스킨은 다른 글에서도 많이 설명을 했듯이 클라이언트의 해상도에 따라 자동으로 전체적인 레이아웃이 자동으로 변경되는 스킨을 말합니다. 그렇기 때문에 반응형 스킨을 사용하는 경우에는 데스크톱 컴퓨터나 스마트폰 등 해상도가 모두 다른 기기를 통해서 블로그에 접속을 하더라도 방문자에게는 각각의 해상도에 최적화된 서로 다른 레이아웃이 출력되기 때문에, 이에 따라 방문자는 원하는 글을 잘 정리된 화면에서 볼 수 있게 됩니다.

또한 모바일 스킨에서는 제한적이었던 구글 애드센스와 같은 광고 모델을 반응형 스킨에서는 자유롭게 사용할 수 있기 때문에 대부분의 수익형 블로그에서는 반응형 스킨을 사용하고 있습니다.


반응형 스킨을 만드는 방법


반응형 스킨을 만들 때에는 가장 먼저 CSS3를 잘 알고 있어야 합니다. 특히 CSS3에서 사용할 수 있는 미디어쿼리는 반응형 스킨을 만들 때 꼭 필요한 것이므로, 다른 부분들은 잘 모르더라도 미디어쿼리에 대해서는 반드시 알고 있어야 합니다.

CSS3에서 새로 추가된 미디어쿼리 기능은 해상도에 따라 적용되는 스타일을 다르게 하고 싶을 때 사용되는 기능입니다. 예를 들어, 화면의 크기가 작은 스마트폰 환경에서만 블로그의 사이드바를 출력되지 않게 하고자 하는 경우에 미디어쿼리가 사용될 수 있습니다.

미디어쿼리에서 필요로 하는 해상도는 소프트웨어로서의 해상도입니다. 즉, 요즘 출시되고 있는 대부분의 스마트폰은 HD급 이상의 해상도를 가지고 있는데, 이 때 말하는 해상도는 하드웨어로서의 해상도입니다. HD의 하드웨어 해상도는 세로 1280픽셀, 가로 720픽셀입니다. 하드웨어 해상도는 인치당 픽셀수에 영향을 미치는 것이지 본질적인 소프트웨어 해상도에 영향을 미치는 것은 아닙니다.

실제로 많이 사용되는 삼성 갤럭시S4의 하드웨어 해상도는 풀 HD 해상도인 세로 1920픽셀, 가로 1080픽셀입니다. 하지만 안드로이드가 구동되는 소프트웨어 해상도는 세로 640픽셀, 가로 360픽셀입니다. CSS 미디어쿼리에서는 하드웨어로서의 해상도가 아닌 소프트웨어로서의 해상도를 기준으로 합니다.

CSS3의 미디어쿼리 사용 방법


CSS3에서 미디어쿼리는 다음과 같이 사용됩니다.

/* 가로 1024픽셀 이하 해상도에 해당 */
@media screen and (max-width: 1024px) {
    #header {
        background-color: #fff;
    }
}
    
/* 가로 1025픽셀 이상 1300픽셀 이하 해상도에 해당  */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
    #header {
        background-color: #eee;
    }
}
    
/* 가로 1025픽셀 이상 해상도에 해당 */
@media screen and (min-width: 1301px) {
    #header {
        background-color: #000;
    }
}
    
#header {
    max-width: 1300px;
    width: 100%;
}


@media 구문은 CSS3에서 미디어쿼리 구문으로 사용됩니다. @media 다음에 오는 screen은 스크린 화면에 미디어쿼리를 적용한다는 것을 의미합니다. 우리가 인터넷을 사용할 때 이용하는 대부분의 기기는 스크린을 이용하고 있기 때문에 @media screen and ~ 와 같이 미디어쿼리를 작성합니다. 스크린이 아닌 다른 곳에도 미디어쿼리를 적용하고 싶을 때에는 @media all and ~ 와 같이 미디어쿼리를 작성하면 됩니다.

max-width와 min-width 구문을 통하여 개발자가 해당 스타일이 적용될 해상도를 지정할 수 있습니다. 두 개를 모두 사용하여 구간을 지정할 수도 있고, 한 개만 사용할 수도 있습니다. max-width와 min-width의 사용 방법은 수학에서의 부등호를 생각하면 이해하기가 쉬울 것입니다.

미디어쿼리에서 width 속성만 사용할 수 있는 것은 아닙니다. height 속성을 사용하여 해상도 높이에 따라 다른 스타일을 적용하는 방법도 있습니다. 하지만 세로 해상도는 레이아웃에 큰 영향을 주지 않기 때문에 미디어쿼리에서 height 속성은 잘 사용되지 않습니다.


반응형 스킨에서의 자바스크립트


CSS 뿐만 아니라 반응형 스킨에서는 자바스크립트도 매우 중요합니다. 왜냐하면 CSS만으로는 해결할 수 없는 문제들은 자바스크립트를 이용하여 해결할 수 있기 때문입니다. 특히 스크롤에 따라 레이아웃의 움직임을 제어하고 싶을 때에는 자바스크립트가 꼭 필요합니다.

반응형 스킨에서 HTML 객체에 스타일을 적용할 때에는 주로 태그의 클래스 속성을 사용합니다. 자바스크립트에서 직접 스타일을 지정할 수도 있겠지만, 이렇게 자바스크립트에서 스타일을 직접 지정하는 경우에는 개발자가 HTML 스타일을 제어하는 것이 매우 어려워지기 때문에 일반적인 경우에는 자바스크립트를 통한 스타일 지정은 잘 사용되지 않습니다. 하지만 블로그 방문자의 행동에 따라 스타일이 동적으로 계속 바뀌어야 하는 경우에는 자바스크립트를 이용합니다. 예를 들어, 다음과 같은 경우에는 반응형 기능을 제어하기 위하여 자바스크립트가 사용됩니다.

<div id="header">
    에르차마토리 다이어리박스
</div>
<div id="menu-container">
    <ul>
        <li><a href="/">HOME</a></li>
        <li><a href="/notice">NOTICE</a></li>
    </ul>
</div>


위와 같은 HTML 소스코드가 있을 때, 메뉴 영역인 menu-container 를 화면 상단에 고정하고 싶다면 CSS만으로는 불가능합니다. 이 때에는 자바스크립트를 활용해야 합니다. 사용자가 스크롤바를 내리는 만큼의 수치를 header와 menu-container의 top 스타일 속성에서 차감을 하다가 header 영역이 완전하게 화면에서 사라지는 때부터는 스크롤바를 내려도 아무런 반응이 없게 한다면 위의 메뉴 영역이 화면 상단에 고정시킬 수 있습니다. 이와 같은 메뉴를 만드는 방법에 대한 자세한 설명은 [2014/08/04 블로그 화면 상단에 부드럽게 고정되는 메뉴를 만드는 방법 / CSS transition 활용] 글을 참고하시기 바랍니다.

반응형 스킨에서 자바스크립트를 이용하여 HTML 객체의 스타일을 바꾸어야 할 때에는 위에서와 같이 특수한 경우를 제외하고는 HTML 태그의 클래스 속성을 바꾸는 방법을 사용합니다. jQuery의 hasClass(), addClass(), removeClass(), toggleClass() 메소드를 이용하면 매우 쉽게 HTML 객체에 클래스를 추가하거나 삭제할 수 있습니다.

예를 들어, 방문자 스크롤바를 어느 정도 내렸을 때 메뉴 영역의 배경색을 바꾸고 싶을 때에는 다음과 같은 소스코드를 사용할 수 있습니다.

$(window).on('scroll', function() {
    var _currentScroll = $(window).scrollTop();
    if (_currentScroll > 100) {
        if (!$('#menu-container').hasClass('on')) {
            $('#menu-container').addClass('on');
        }
    } else {
        if ($('#menu-container').hasClass('on')) {
            $('#menu-container').removeClass('on');}
        }
    }
});


방문자가 스크롤바를 101픽셀 이상 내렸을 때에는 메뉴 영역인 #menu-container에 on 클래스를 추가합니다. 스크롤바가 100픽셀 이내에 있을 때에는 on 클래스를 제거합니다. CSS에서 #menu-container.on 클래스를 어떻게 정의하였느냐에 따라 메뉴 영역의 디자인이 완전히 바뀔 수도 있습니다.

jQuery의 toggleClass() 메소드는 자바스크립트에서 선택된 개체가 해당 클래스를 가지고 있는지 자동으로 확인한 후, 가지고 있지 않을 경우에만 해당 클래스를 추가하고, 가지고 있는 경우에는 해당 클래스를 삭제하는 기능을 합니다. hasClass(), addClass(), removeClass() 메소드를 하나로 합쳐놓은 것이 바로 toggleClass() 메소드라고 할 수 있겠습니다.


반응형 스킨을 테스트하는 방법


반응형 스킨은 다양한 해상도를 지원하는 스킨입니다. 따라서 반응형 스킨을 만들 때에는 여러 가지 해상도에 대해서 모두 테스트를 해보아야 합니다. 그런데 현실적으로는 모든 형태의 컴퓨터 모니터나 스마트폰 등을 가지고 있을 수는 없습니다.

재정적 지원을 받을 수 있는 기업에서의 반응형 스킨 개발에서는 다양한 해상도의 다양한 기기들을 제공 받을 수 있겠으나, 일반적으로 반응형 스킨은 개인이 혼자 만드는 것이기 때문에 이러한 지원은 받을 수 없습니다. 따라서 반응형 스킨을 개발할 때 가장 많이 사용되는 방법은 웹브라우저의 화면을 줄였다 늘렸다 하는 방법입니다. 이 방법은 반응형 스킨을 개발할 때 매우 유용하지만, 특정한 기기에서 어떻게 보이는지는 확인할 수 없기 때문에 개발자로서는 조금 답답할 수 있습니다.

다음 트로이를 이용하면 인터넷에서 반응형 웹을 테스트할 수 있습니다.

다음 트로이를 이용하면 인터넷에서 반응형 웹을 테스트할 수 있습니다.



다음 트로이는 반응형 스킨을 테스트할 때 매우 유용하게 사용될 수 있습니다. 다음 트로이에서는 국내에서 가장 많이 사용되는 스마트폰 해상도를 확인할 수 있고, 그 해상도에서 본인의 블로그가 어떻게 출력되는지를 직접 확인할 수 있습니다.

또한 파이어폭스의 개발자도구를 이용하여 반응형 스킨을 테스트할 수도 있습니다. 구글 크롬의 개발자도구에서도 반응형 웹 미리보기 기능을 지원하고 있고 파이어폭스에서도 역시 자체적으로 개발자도구에서 반응형 웹 미리보기 기능을 지원하고 있습니다. 파이어폭스를 이용하여 반응형 웹을 테스트하는 방법은 웹만두님의 간단하게 파이어폭스로 반응형 웹 테스트하기 글을 참고해보시기 바랍니다. 파이어폭스 뿐만 아니라 인터넷익스플로러 11 이상 버전에서도 반응형 웹 미리보기 기능을 지원하고 있습니다. 이제는 모든 웹브라우저에서 지원하고 있는 기능입니다.

다음 트로이나 파이어폭스 개발자도구와 같은 반응형 웹 미리보기 프로그램을 이용할 때의 가장 큰 장점은 본인이 사용하고 있는 모니터의 해상도보다 큰 해상도에서 출력되는 화면까지 테스트할 수 있다는 점입니다.

웹브라우저의 화면을 조절하여 반응형 웹을 테스트할 때에는 모니터에서 지원하지 않는 해상도에서는 테스트해볼 수 없습니다. 왜냐하면 컴퓨터 모니터 해상도 이상으로 윈도우의 크기를 키울 수는 없기 때문입니다. 하지만 반응형 웹 미리보기 프로그램을 이용하면 스크롤바가 생기긴 하겠지만 화면 해상도보다 큰 화면에서의 반응형 웹을 테스트해볼 수 있습니다.


다른 반응형 스킨들을 벤치마킹


현재 국내에서 사용할 수 있는 공개된 반응형 스킨들을 몇 개 있습니다. 가장 대표적으로는 FastBoot 스킨스켈레톤 스킨이 있습니다. FastBoot 스킨은 겉으로 보기에 매우 다양한 기능을 가지고 있는 반응형 스킨이고 스켈레톤 스킨은 흰 색 계열의 색상을 사용하여 매우 깔끔하게 잘 정리된 모습을 보이는 반응형 스킨입니다. 이 둘 반응형 스킨에 대한 자세한 설명은 [2014/05/19 티스토리에서 사용할 수 있는 반응형 스킨에 대해서 알아보자] 글을 참고하시기 바랍니다.

위에서 언급했던 반응형 스킨들은 매우 우수한 성능을 보이고 디자인적으로도 매우 깔끔하게 잘 정리된 블로그 스킨입니다. 따라서 많은 블로거들의 위의 스킨들을 그대로 사용하거나 블로거 본인의 취향에 맞게 약간 수정하여 사용하고 있습니다. 이렇게 공식적으로 공개된 반응형 스킨은 비록 몇 개에 지나지 않지만 블로거들이 이 몇 개의 스킨들을 수정하여 사용하고 있기 때문에 실제로 인터넷에는 매우 많은 블로그 반응형 스킨이 있습니다.

블로그 반응형 스킨을 개발하고자 할 때에는 반응형 스킨을 사용하고 있는 다른 블로그에 방문하여 그 스킨이 어떠한 장점이 있는지, 어떤 부분이 불편하지를 자세하게 분석할 필요가 있습니다. 이렇게 분석을 마친 후, 현재 자신이 개발하고 있는 반응형 스킨에 다른 스킨들의 장점만을 반영시킨다면 인터넷에서 가장 쓸만 한 반응형 스킨이 탄생할 수 있을 것입니다.


마무리


블로그 반응형 스킨은 개발하는 과정이 어려울 뿐이지, 한 번 만들어놓으면 유지 및 보수가 매우 쉽습니다. 애드센스를 사용하고 있다면 반응형 스킨이 수익 극대화에 많은 도움을 주기도 합니다. 이처럼 반응형 스킨은 블로그를 운영할 때 매우 중요한 존재입니다. 인터넷에서 배포되고 있는 반응형 스킨을 그대로 사용할 수도 있겠으나, 블로그는 개인의 개성이 드러나는 것이 좋기 때문에, 스킨 역시도 본인이 직접 만드는 것이 가장 좋습니다.

비록 처음에는 스킨 개발이 매우 오래 걸릴 수도 있겠으나, 처음부터 하나 하나씩 배워가다보면 재미있게 스킨을 완성할 수 있을 것입니다. HTML이나 CSS가 생각보다 크게 어렵지 않아서 초보자도 쉽게 배울 수 있으며, 조금만 배우면 고수의 경지에 다다를 수도 있습니다. 반응형 스킨을 만들고 싶다면 이 글에서 언급했던 것들을 꼭 기억하십시오.
http://www.erzsamatory.net/trackback/136

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

비밀글로 작성하기
  1. 2014/08/13 05:03
    내용이 알차게 구성되어있어서 Walter E님의 최신 포스트는 항상 기다려집니다.

    미디어쿼리를 사용한 웹 페이지를 처음 접했을때 신세계! 라고 생각을 했었는데 요즘은 일거리가 더 생겼구나라고 생각합니다. ㅋㅋㅋ 그래도 모바일 페이지를 하나 더 만드는것보다 미디어쿼리로 CSS를 요리조리 잘 꾸미면 대충 디자인은 나오기때문에 편하기는 하네요.

    옴레기 이전에 PPC를 쓸때만해도 모바일 디바이스가 이렇게 활성화 될지는 몰랐는데 참 알다가도 모를 일입니다.
    넘 유익한 포스트 잘 읽고 갑니다 :)
    • Walter E.
      Walter E.
      2014/08/13 06:39
      군대 갔더니 다들 페이스북을 하고 밖에서도 유행하는 겁니다.
      입대 전에는 분명히 싸이월드가 더 유행하고 있었던 것 같았는데, 입대하고 1, 2개월 지나니 페이스북이 유행하고 스마트폰이 대중화되더라구요.

      전역하고 보니 이제 스마트폰 없이는 못 사는 세상이 되었더라는.. ㅋㅋ

      다음 글은 기본 레이아웃 잡는 법을 쓸까 하는데 구성하는 것이 조금 힘드네요.. 소스코드만 덩그러니 넣는 것은 아닌 것 같고...

      그래서 일단은 다른 글 먼저 적어보려고 합니다. ^^ ;;
  2. 2014/08/13 22:08
    쉬운 부트스트랩만으로 반응형 블로그를 만들어봐서 저는 그것으로만 반응형 스킨을 만들 수 있다는 것이 안타깝습니다. 나중에 부트스트랩을 사용하지 않고 스킨을 만들 그날을 기약해야겠습니다.
    • Walter E.
      Walter E.
      2014/08/13 23:31
      저는 부트스트랩을 사용하지 않고 만들어봤는데, 정말 시행착오가 많았습니다.
      부트스트랩을 사용하면 이와 같은 시행착오는 없을 것 같습니다.
      많은 분들이 반응형 스킨을 만들고 계신 것 같은데 이제 조금만 있으면 다양한 스킨이 나올 것 같습니다.
  3. 2014/09/01 00:31
    반응형스킨 깔끔하고 좋네요 그리고 반응형 스킨 관련 정보도 잘 얻어 갑니다
    • Walter E.
      Walter E.
      2014/09/01 00:33
      감사합니다 ^^
  4. 존경합니다
    존경합니다
    2015/07/27 04:41
    안녕하세요
    반응형이면 모바일과 pc에 나타나는게 같아야 하는게 아닌가요?
    Walter E님의 글을 보면 PC에서는 애드센스 광고가 2개 연달아 있는데 모바일로 보면
    하나는 아예 다른 위치에 있는데 어떻게 하신건가요??
    • Walter Erzsa
      Walter Erzsa
      2015/07/27 10:11
      자바스크립트를 이용하여 위치를 이동시켰기 때문입니다.
      해상도가 낮은 기기에서 접속할 경우에는 미리 지정한 위치에 광고가 이동할 수 있도록 하였습니다.

      "해상도에 따라서 구글 애드센스 광고 위치를 재설정하는 방법" 글
      http://www.erzsamatory.net/72
      을 참고해보시기 바랍니다. ^^
  5. 2015/11/17 17:40
    좋은 정보 감사합니다
    • Walter Erzsa
      Walter Erzsa
      2015/11/20 21:54
      제 블로그에 방문해주셔서 감사합니다. ^^