웹 개발을 하다보면 반응형 웹에 대해서 자주 듣게 됩니다.
그런데 적응형 웹이 있다는 것도 알고 계셨나요?

반응형 웹, 적응형 웹의 개념과 둘의 차이점에 대해서 알아봤습니다.

반응형 웹 (Responsive Web)

PC, 태블릿, 스마트폰 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹

웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응합니다.
CSS 미디어쿼리를 사용해 디바이스 크기에 따라 스타일을 다르게 구성할 수 있습니다.

👍 장점

• 각각 별개로 개발할 필요가 없으며 유지보수가 더 쉽다.

👎 단점

• 적응형 웹보다 다운로드해야 하는 것이 더 많아 로드 시간이 더 길다.

적응형 웹 (Adaptive Web)

웹에 접근한 디바이스를 체크해 그 디바이스에 최적화된 디스플레이를 보여주는 웹

반응형 웹처럼 CSS 미디어 쿼리를 사용하지 않고 웹에 접근한 디바이스를 체크합니다.
적응형 웹은 화면 크기를 감지하고 그에 적합한 레이아웃을 로드합니다. 일반적으로 6가지의 적응형 웹사이트를 디자인합니다.
처음 로드되면 응답하지 않는 정적 레이아웃을 사용합니다.

👍 장점

• 기존 웹사이트를 모바일 친화적으로 수정하기 쉽다.

👎 단점

• 디바이스 크기별로 적응형 사이트를 디자인해야 한다.