워드프레스 반응형(Responsive) 테마에 대한 이해

Ugly Infographic about Responsive Web Design by HwangC
Ugly Infographic about Responsive Web Design by HwangC

바일로 인터넷 서핑을 하다보면 화면 사이즈가 작아서 웹사이트 글씨를 읽기 어렵거나 잘못된 클릭을 하는 경우가 있습니다. 고정폭으로 디자인된 웹사이트는 화면 사이즈가 작아질 때 웹사이트의 사이즈도 동시에 같이 작아지기 때문에 모바일과 같은 작은 화면에서는 사용의 불편함이 있습니다.

반면  반응형으로 디자인된 사이트는 웹사이트의 전반적인 Look&Feel은 유지하면서 기기의 해상도에 맞게 사이트의 구성을 변경하기 때문에 방문자들은 어떤 기기에서도 편리하게 웹사이트를 이용할 수 있습니다. 


Responsive Web Design(RWD)

반응형 이전에는 보통 데스크탑에 맞춰 웹사이트를 고정폭으로 디자인하였기 때문에 모바일에서는 사용이 불편했습니다. 모바일의 활성화가 점차 가속화 되면서 웹사이트 운영자들은 데스크탑모바일용 두가지 사이트를 만들어 운영하는 경우가 많았죠. 이는 사이트 제작 및 관리 비용을 두배로 증가시키는 요인이 되었습니다.

이러한 비효율적인 웹사이트 운영에 종지부를 찍게된 것은 2011년 Ethan Marcotte에 의해 Responsive Web Design이 소개된 이후부터 입니다. ( 참고: Responsive Web Design )

RWD의 기본적인 개념은 하나의 웹사이트를 어떠한 기기에서도 사람이 쉽게 읽고 사용할 수 있도록 디스플레이 하는 것입니다. 조금 더 풀어서 설명을 하면 웹사이트의 구성 요소들을 디스플레이할 때 화면 사이즈에 적합하게 확대, 축소, 또는 삭제하거나 요소들간의 배열을 변경하는 것입니다.

이러한 화면의 재구성은 자동으로 이뤄지는 것은 아니고 웹사이트 디자인 단계에서 기기의 화면 사이즈에 따라 최적의 화면을 구성하였기 때문에 가능한 것입니다. RWD의 디자인을 위해서는 기본적으로 Fluid GridMedia Query의 이해가 필요합니다.

Fluid Grid

일반적으로 Grid는 웹사이트의 구성 요소들을 정해진 규격에 맞춰 가지런히 배열할 때 사용합니다. Grid를 만들 때는 웹사이트의 전체 가로폭(width)을 일정한 폭(width)의 세로축(column)과 세로축간의 간격(gutter)으로 나누어 구성합니다.

Fluid Grid가 일반 Grid와 다른점은 세로축의 가로폭(width)을 고정폭(fixed)이 아닌 요소간 비율(%)로 지정하여 화면 사이즈가 변경되면 그 화면에 맞는 비율로 gird가 재구성되는 것입니다.

Fluid grid VS 일반 grid 일반 Grid와 Fluid Grid를 비교해보세요. 아래의 링크를 열고 웹브라우져의 사이즈를 줄여보시면 차이를 쉽게 확인할 수 있습니다.
Fluid grid 생성기 rwd-variable-grid
Grid의 디자인을 눈으로 보면서 하고 싶은 경우에는 Variable Grid System에서 원하는 값을 넣으면 바로 Grid를 확인해볼 수 있습니다. 또한 설계한 Grid를 Fluid Grid의 CSS로 다운로드 받을 수 있습니다.

Bootstrap fluid grid 지난 포스트에서 소개한 Bootstrap (참고: 워드프레스용 트위터 Bootstrap 테마 10선) 에도 fluid grid가 적용되어있습니다. Bootstrap의 Fluid Grid에서 fluid grid의 움직임을 확인하실 수 있으며 원하는 Grid 시스템을 설정하고 싶으시다면 직접 customize를 하실 수도 있습니다.
rwd-bootstrap-grid

Media Query

RWD 디자인을 위해 꼭 필요한 것이 CSS3의 Media Query입니다. Media Query를 이용해서 기기의 화면 사이즈에 따라 웹사이트 구성 요소의 스타일을 정해놓으면 웹사이트를 접속하는 기기의 화면 사이즈에 따라 자동으로 구성 요소의 스타일을 적용합니다.

예를 들어 content의 사이즈를 가로폭 960px이하의 기기에서 볼 때는 54.2%로 768px 이하에서는 70%로 320px 이하에서는 100%로 보여주고자 할 때 다음과 같이 기기의 사이즈에 따라 요소의 값을 변경할 수 있습니다.

워드프레스 반응형 테마를 사용하시는 분들은 테마의 style.css에서 media query를 쉽게 확인하실 수 있습니다. 만일 반응형 테마가 없으시다면 기본 테마인 twenty twelve의 style.css를 확인해보세요.

모든 기기에 웹사이트를 맞춰보이도록 하는 것이 가장 좋겠지만 웹사이트 방문자의 대부분이 데스크탑 이용자라면 시간과 노력을 낭비하는 것일 수도 있으니 현재 웹사이트의 타겟을 분석하셔서 그 타겟에 맞는 media query를 작성하시는 것이 좋습니다.

마치며

반응형 웹 디자인은 그 자체로 특정한 기술은 아니지만 현존하는 기술을 적절히 활용해서 웹사이트 디자인에 새로운 패러다임을 제시하였습니다. 구글에서도 하나의 도메인 주소로 모든 기기에서 웹사이트에 접속하는 것을 추천하고 있으니 반응형 웹은 꾸준히 증가할 것으로 보입니다.

여러분의 사이트도 다양한 기기에서 원활하게 사용되기를 원하신다면 반응형 테마를 사용해보세요.

그럼 오늘도 즐거운 블로깅 하세요!

*참고하세요.

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“워드프레스 반응형(Responsive) 테마에 대한 이해”에 대한 16개의 생각

  1. 항상 좋은 글 감사합니다.
    그런데 저는 facebook은 아직도 responsive 가 아닌것이 약간은 불만입니다.

    예를 들면 아래 그림같이 ‘좋아요’ 버튼을 누르면 공유시에 첨부할 코멘트 입력창이 잘리는 현상 말이죠…
    그래도 PC에선 공유 버튼이라도 보이니 문제가 없겠는데, 스마트폰에선 아예 공유 버튼이 보이질 않아서 난감한 경우가 많습니다.
    (어떤 때에는 플러그 인에서 제공하는 창 크기 조절 만으로도 도저히 해결이 안되는 경우가 종종 있더라구요 )
    저의 짧은 생각으론 글 입력창을 포스트 창의 위로 보이게 하도록 테마에서 코드를 변경하면 해결 할수도 있을 것 같은데 좋은 방법 없으신가요?

    1. 페이스북 공유 창의 위치는 좋아요 버튼 위치를 어디에 두느냐에 따라 달라지는 것으로 알고있습니다. 버튼의 위치를 고려해봐야겠네요. 🙂

  2. 안녕하세요~ 황씨선생님
    워드프레스 제작하는데 많은 도움을 받고 있습니다.
    정말 너무 감사합니다.
    제가 지금 제작하면서 막히는 부분이 있는데 어떻게 해결해야하는지 몰라
    이곳저곳에서 검색해보았지만 찾지못하였습니다.
    cafe24에서 wordpress 자동설치한 후 /wp를 없애는 방법으로 도메인을 지정해놓았는데요.
    모바일에서 http://www.imagestorming.co.kr로 들어가면 pc버전으로 나오고
    http://www.imagestorming.co.kr/wp로 들어가야만 모바일에 최적화된 뷰가 나옵니다.
    이게 왜 이렇게 되는지 잘모르겠습니다. (테마는 SCRN을 사용하였습니다.)
    도움 부탁드립니다. 감사합니다. 좋은 하루 되세요~~

  3. 안녕하세요 황씨님.
    heeyeul.cafe24.com/wp/
    모바일로 접속해보시면
    메뉴가 반응형으로 수직으로 정렬이 되긴하는데..
    이거를 펼쳤다 접었다 할 수 있는 상자 형태로 변행되게끔은 못바꿀까요??

  4. 황씨님 사이트에 많은 도움을 받고 사이트를 만들었습니다. 그런데 한 가지 문제가 있습니다. 테마가 트웬티 일레븐입니디만, 컴퓨터로 접속할 때는 이상이 없는데, 아이폰으로 접속을 하면 상단 메뉴바의 자식테마들(하위 메뉴(카테고리))이 터치(클릭)이 안 되고 누르면 그냥 사라져 버립니다. http://www.parkjinjoo.com입니다만, 이 문제 해결할 수 있을까요?
    wptouch로 해결하려고 했지만, 제 사이트가 wptouch로는 실행이 안 되는 상태라 플러그인의 도움없이 해결해야 할 것 같습니다.

    1. 테마를 수정하시면서 문제가 생길 수도 있겠네요. twenty eleven은 기본적으로 스마트폰에서도 메뉴가 제대로 작동합니다. 테마를 수정하셨다면 다시 한번 확인해보시고 다른 플러그인과의 충돌도 테스트해보세요. 🙂

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.