[TIL] 반응형웹 VS 적응형웹

반응형 과 적응형의 차이점

반응형 (RWD::Responsive Web Design)

가로사이즈에 맞춰 유동적으로 재배치되는 형태. %단위를 사용하고 크기가 줄거나 커지면 배열도 변경된다.
웹브라우저의 가로넓이에 따라 유동적으로 변하는 레이아웃과 이미지, 그리고 미디어쿼리로 환경에 반응하여 스스로 적응하는 방식.

특징?

1. 하나의 템플릿만을 사용한다.
2. 모든 디바이스에 대한 정보를 가지고 있으며 사용 여부에 따라 다운로드되어 사용된다.
3. 새로운 웹 빌드를 추가하기 쉬우며 사이트를 재구축해야하고 디바이스에 따라 성능이 저하될 수 있다.

적응형(AWD:: Adative Web Design)

웹 페이지를 요청하는 기기를 감지하여 특정 유형의 기기일 경우 해당 뷰포트에 최적화된 페이지 로 리디렉션 시켜줌.
ex) 스마트폰으로 네이버에 접속 할 경우 m.naver.com로 리디렉션

특징?

1. 반응형 웹보다 빠른 속도로 모바일에서 웹사이트 이용 가능.
2. 기존의 사이트를 재구출할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다.
3. 분리 개발한 웹에서 수정사항이 생기면 다른 환경에 최적화된 나머지 웹페이지도 수정해야하는 다소 번거로워질 수 있다.

뷰포트와 미디어 쿼리

뷰포트?

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

미디어쿼리?

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