(요약/배경)

홈페이지 제작을 의뢰하였더니 반응형 홈페이지로 화면이 커지면 그에따라 최적화 시켜주고 모바일에서도 사이즈 변화에 따라 정리해주는 스타일로 제작해 준다고 한다. 반응형 홈페이지란 무엇인가?

(반응형 웹디자인이란?)

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. 반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)이다. 반대말은 적응형 웹(adaptive web)이다.

(반응형 웹디자인이 대세인 이유는?)

다양한 디바이스가 출시중이다. 스마트폰, 타블렛PC, 노트북 각각의 디바이스도 사이즈가 제각기 인경우가 많다. 이렇게 많은 디바이스와 화면사이즈에 맞게 제작을 한다는건 사실 불가능하고 설령 그렇게 제공한다고 해도 추후에 사이트 관리포인트가 너무나도 많다. 이렇게 다양하게 많은 디바이스와 다양한 사이즈의 형태로 출시되는 상황에서 하나의 웹사이트 구축으로 다양한 디바이스와 다양한 화면사이즈에서 최적화 구현 되는 웹사이트는 관리가 쉽기 때문에 요즘 반응형 웹사이트가 인기인 이유이다.

(반응형 웹과 모바일웹의 차이점은?)

반응형웹은 하나의 홈페이지를 말씀하신 것처럼 사이즈가 자동으로 최적화 되도록 코딩이 된 것이고 모바일웹은 PC용 홈페이지와 별도로 모바일용 홈페이지를 제작하기 때문에 각각의 홈페이지에 모바일 전용 도메인주소를 적용하는 것이다. 보통 모바일웹은 m.도메인주소 또는 도메인주소/mobile로 주소가 표기된다. 반응형은 화면 사이즈가 자동으로 최적화 되기 때문에 디자인적 요소가 다소 제한적일 수 있습니다. 물론 모바일웹은 별도로 제작하기 때문에 디자인적 요소가 반응형웹 보다는 좀 더 자유롭다. 기존의 홈페이지 리뉴얼을 고려하면서 고민하시는 부분이라면 반응형웹 또는 모바일웹 추가를 취향에 따라 선택하시면 되지만, 리뉴얼이 필요 없다면 모바일웹만 추가하는 것이 비용 면에서 나을 듯 하다.

Tip

반응형 웹이라고 무조건 100%자동으로 최적화되어 각각의 화면에 구현되지는

않는다. 각각의 디바이스의 특징에 따라 구형되어지기 때문에 그에 따르는

자세한 사항은 작업과정에서 체크해주어야한다.

<참고자료·문헌>

1.http://blog.naver.com/PostView.nhn?blogId=marasyl&logNo=220561189241

반응형 웹관련서적

2.http://terms.naver.com/entry.nhn?docId=2070850&cid=50376&categoryId=50376

반응형 웹 용어해설 네이버지식백과

3.http://www.ithinknext.com/response/onepage/t1/ 반응형 웹사이트 개발업체

<전문용어>

RESPONSIVE WEB DESIGN, MOBILE WEB, PC WEB, 웹퍼블리셔, 웹표준