반응형 웹 vs 적응형 웹
근본적으로 웹사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 모바일 사용자 경험을 제공하기 위한 방법이다. 그러나, 적응형 웹과 반응형 웹은 사이트 설계부터 구동까지 많은 차이가 있다.
브라우저 가로길이가 변할 때,
어느 순간 툭 바뀐다? = 적응형. 이미지와 그리드가 실시간 변화한다? = 반응형.
위: 반응형, 아래: 적응형
적응형 웹 (Adaptive Web)
서버나 클라이언트에서 웹에 접근한 기기를 체크해 그 기기에 맞는 템플릿을 제공하는 개념이다. 모바일의 경우 모바일용 템플릿을, 데스크톱의 경우 데스크톱용 템플릿을 제공하는 식이다. 따라서 기기별로 다른 템플릿을 제작해야 할 필요가 있다.
기존에 이미 데스크톱용 템플릿을 작성했다면, 바닥부터 재구축할 필요 없이 다른 기기용 템플릿만 따로 만들면 되어 편리하다. 또, 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드 하므로 데이터 낭비가 적고 로딩 속도가 빠르다.
다만, 각 기기별로 별로의 템플릿을 작성해야 하므로 개발이 복잡해진다.
반응형 웹 (Responsive Web)
반응형 웹은 미디어 쿼리를 사용해 기기 화면의 크기를 확인하고 유연한 이미지와 그리드를 활용해 화면 크기 변화에 따라 페이지의 크기 및 레이아웃을 조절하는 기술을 말한다.
하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점을 가진다. 다만, 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야한다는 점에서 데이터를 낭비하고 로딩 시간을 늘리는 단점을 가진다.
또, 기존에 이미 운영 중이었던 데스크톱용 사이트가 있었다면 사이트를 재구축해야만 한다는 점에서 불편할 수 있다.
| 항목 | 반응형 웹 | 적용형 웹 |
|---|---|---|
| 기기 및 화면감지 방법 | 미디어 쿼리로 기기 감지 | 서버 또는 브라우저에서 기기 감지 |
| 템플릿 | 하나의 템플릿으로 충분 | 기기마다 다른 템플릿 필요 |
| 콘텐츠 | 모든 콘텐츠 다운로드 필요 | 기기에 맞는 콘텐츠만 다운로드 |
| 로딩 속도 | 속도 느림 | 속도 빠름 |
| 기존 사이트 존재시 | 기존 사이트 변경 및 재구축 필요 | 기존 사이트 변경없이 구축 가능 |