반응형웹 만들기

개요

예전에는 보통 홈페이지라고 하면 일반 PC에서 접속해서 보는 경우가 많기 때문에, 주로 일반 모니터 기준으로만 홈페이지 제작 하는경우가 많았습니다.
이후, 스마트폰이 보급되면서 스마트폰으로 일반 홈페이지로 접속해서 서핑 하기에는 글자 및 이미지가 너무 작기 때문에 이를 보안하기위해 모바일 웹이라는게 생겼습니다.

하지만 이것도 잠시, 스마트패드 7~10인치, 스마트폰 5인치등 해상도가 높은 기기(디바이스)가 다양하게 출시 되면서 사용자는 모바일 웹이 아닌 다시 일반 PC 웹으로 접속해서 보는 경향이 많아 졌습니다.

이유는 스마트 패드10인치 에서 모바일 웹으로 접속해서 보기에는 불 필요한 여백이 많아 정보 수집에 오히려 불편하다는 것 이었습니다.

이런 불편한 점을 해결 하기위해 스마트 폰, 스마트 패드, 일반 LCD 모니터등 어떤 해상도라도 홈페이지가 동적으로 자동 최적화 되는 홈페이지를 개발하게 되었습니다.

필자는 이번 시간에는 반응형 웹 사이트를 구현 하기 앞서 무엇이 반응형 웹 인지 간단한 개념 정도만 설명 하고 본문으로 들어 가도록 하겠습니다.

반응형 웹(Responsive Web)?

하나의 홈페이지로 스마트폰, 스마트 패드, 일반 모니터 등 모든 해상도에 맞춰 자동으로 리사이징 및 재구성되는 홈페이지를 반응형 웹(Responsive Web) 입니다.


반응형 웹으로 제작 아래와 같은 이점이 있습니다.

  • 데스크탑, 노트북, 넷북, 태블릿, 스마트폰 등 사용자가 이용하는 모든 기기와 브라우저에 친화적인 화면을 제공 합니다.
  • 사이트 유입 트래픽, 이용자 통계를 통합적으로 관리할 수 있습니다.
  • PC웹+모바일웹은 따로따로 관리해야 하지만 반응형웹은 하나의 소스(컨텐츠)로 관리 되기 때문에 관리의 편의성을 증대 시키고 사용자의 혼란을 줄일 수 있습니다.
  • 하나의 주소로 운영되기 때문에, 검색엔진 최적화는 물론, 키워드 광고 전략을 통합 적으로 펼칠 수 있습니다.
  • 끊임없이 진화되고 있는 모바일 기기의 디스플레이 환경에 대비하여, 선명한 화질을 제공할 수 있습니다.

미디어 쿼리(Media Query)?

보통 홈페이지 제작시 <head>에 CSS 파일을 따로 불러와서 관리 합니다.
반응형 웹도 일반 홈페이지처럼 CSS를 불러 오는데 조금 다른게 있다면 홈페이지 접속자의 해상도에 따라 CSS 파일을 다르게 불러 온다는 겁니다.
예를 들어 접속자의 화면 해상도가 640px이하 일때 폰트 크기를 20px로 출력 하고, 640px이상 일때 폰트 크기를 12px로 출력 하는 소스입니다.
아래 소스를 그대로 복사해서 실행해 보시기 바랍니다.

<style type="text/css">
/* screen의 width가 640px이하일때 아래와 같은 옵션을 적용 */
@media screen and (max-width:640px) {
	.article {background:#fff; font-size:20px; color:#000}
??}

/* width가 최소640 최대 640px로도 지정가능 */
@media screen and (min-width:640px) and (max-width:640px) {
	.article {background:#fff; font-size:12px; color:#000}
}
</style>

<span class='article'>안녕하세요. 반응형웹입니다.</span>

어떤가요? 화면 해상도에 따라서 글자 크기가 변경 되나요?
"미디어 쿼리" 말만 들었을 때 생소하게 느낄 수 있지만 원리는 접속자의 해상도에 따라서 CSS 속성을 다르게 불러오게 하는 속성을 말합니다.

미디어 쿼리 사용 방법

위에서 설명드린 방식은 한 페이지에 모든 소스를 다 넣는 방식이므로 사실 관리하기 매우 비효율적인 방식입니다.
이번에 소개 해드릴 방식은 각 해상도 별로 CSS파일을 따로 관리 해서 불러오는 방식 입니다.
CSS파일 불러올 때 일반 홈페이지와 동일한데 media라는 속성이 하나 더 추가 됩니다.


<link rel="stylesheet" type="text/css" href="css의 경로" media="all" />

위 소스를 보시면 뒤 쪽에 media="all" 이라는 속성이 추가 되어 있습니다. 이 속성은 모든 해상도에서 적용 한다는 명령어라고 보시면 됩니다.
즉 3.5인치 스마트폰부터 일반 PC모니터 까지 모두 적용되므로 공통적으로 사용되는 스타일 속성만 모아 두는게 좋겠죠? ^^


<link rel="stylesheet" type="text/css" href="css_pc의 경로" media="only all and (min-width:768px)" />

이렇게 설정해 주시면 브라우저의 최소 넓이가 768px 이상 일 때 까지의 스타일이 적용이 됩니다.
이런 방식으로 접속자의 해상도가 350px 이상, 768px 이상, 1024px이상, 1200px이상등 원하는데로 여러 단계로 나뉘어서 CSS 파일을 불러올 수 있습니다.
어떤가요? 미디어 쿼리 어렵지 않죠?
단순히 해상도에 따라 CSS파일을 불러올 뿐 그렇게 특별하거나 대단하지 않은 것 같습니다.
스타일시트 문법만 아는 사람 이라면 누구나 쉽게 반응형 웹을 만들 수 있을꺼라 믿어 의심치 않습니다.^^;;;


ps. 미디어쿼리는 꼭 접속자의 해상도에 따라서 분기 되는것 뿐만 아니라 흑백/컬라 지원여부, 그리드 지원여부, 화소수등 다양한 조건문 등이 제공 됩니다.


자세한 내용은 아래 링크를 통해 습득 하시기 바랍니다.
http://naradesign.net/wp/2012/05/30/1823/

필자는 해상도 분기만 하더라도 충분 할 것으로 보입니다.^^ 그냥 이런 추가 기능이 있구나 하고 넘어가도 될 것 같습니다.^^


top