반응형 웹 vs 적응형 웹

1. 적응형 웹(AWD, Adaptive Web Design)

특정 뷰포트의 크기에 맞게끔 설계된 웹 페이지를 만들어서 별도로 제공하는 것.

 

1) 방법

(HTTP GET 요청의 user-agent 헤더 정보를 이용해) 웹 페이지를 요청하는 기기를 감지하여 특정 유형의 기기일 경우 해당 뷰포트에 최적화된 페이지로 리디렉션 시켜줌. 

ex. 스마트폰으로 네이버에 접속할 경우 m.naver.com로 리디렉션 시킴. 

 

2) 특징

• 기존의 사이트를 재구출할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다.
• 디바이스에 적절한 페이지 혹은 시스템을 각각 제작해야한다.
• 분리 개발한 웹에 수정사항이 발생하면 다른 환경에 최적화된 나머지 웹페이지도 수정,변경해야 하므로 개발자로선 다소 번거로워질 수 있다. 
• 화면에 담길 콘텐츠의 양을 조절하고 기기에 최적화된 디자인을 함으로써 가독성을 높이는데 상대적으로 자유롭다. 따라서 콘텐츠 양이 많은 웹사이트를 제작할 때 적합하다.
• 반응형 웹보다 빠른 속도로 모바일에서 웹사이트를 이용할 수 있다.
• 제작한 기기에 해당하는 CSS스타일과 개발 소스만 로드하기 때문에 상대적으로 성능 이슈가 적다.

 

2. 반응형 웹(RWD, Responsive Web Design)

 

하나의 웹 페이지가 뷰포트의 크기에 반응하여 크기와 레이아웃을 그때그때 변경되는 디자인

 

1) 방법

미디어 쿼리를 이용해 뷰포트의 크기 변화에 반응하여 레이아웃과 크기가 시시각각 바뀜.

 

2) 특징

• 하나의 템플릿만을 사용한다.
• 모든 디바이스에 대한 정보를 가지고 있으며 사용 여부에 따라 다운로드되어 사용된다.
• 사용자는 하나의 디바이스를 사용하고 있지만 모든 디바이스를 위한 페이지가 모두 로드 될때까지 기다려야 하기 때문에 웹을 사용하는 사용자가 많을 경우 속도가 느려질 수 있다.
• 기존에 운영중인 사이트가 있다면 재구축을 해야 하고 사용이 가능한 모든 장치에 대한 사용자 정의를 해야 하기에 디자인하고 테스트하는 것이 어려울 수 있다.
• 반응형 웹의 특징으론 새로운 웹 빌드를 추가하기 쉬우며 사이트를 재구축해야하고 디바이스에 따라 성능이 저하될 수 있다.

 

3) 뷰포트와 미디어 쿼리

- 뷰포트 : 화면을 제어하는 기술로, 미디어 쿼리로 수 많은 기기의 화면 크기를 감지해야 할 때 꼭 필요하다.

- 미디어 쿼리

• 화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술
• 컴퓨터나 기기의 한경 또는 종류를 감지해 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제작할 때 반드시 필요한 기술이다.

<style>
/*웹 브라우저의 크기에 따라 배경색 변경*/
@media all and (min-width:320px){
body{
background:#e65d5d; //빨강
}
}
@media all and (min-width:768px){
body{
background:#2dcc70; //초록
}
}
@media all and (min-width:960px){
body{
background:#6fc0d1; //파랑
}
}
</style>