반응형 웹 디자인은 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식입니다. 반면, 적응형 웹 디자인은 브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형입니다.
반응형 웹 디자인을 사용하면 웹 페이지의 디자인과 레이아웃이 모든 화면 크기에 자동으로 맞춰진다. 하나의 템플릿으로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹을 만든다. 미디어쿼리(Media Queries)를 사용해서 해상도, 디바이스 등 특정 화면에 따라 레이아웃을 변경한다
- 모든 플랫폼에서 일관된 콘텐츠 경험
- 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능
- 각 기기에서 웹사이트가 렌더링되는 방식에 대한 통제가 상대적으로 어려움
- 요소가 잘못된 순서 또는 크기로 재배치되는 경우 시각적 계층 구조를 방해함
- 디자인에 대한 더 많은 전문 지식이 필요함. 플랫폼 간 테스트 및 디자인 조정을 요함
- 동적 콘텐츠를 불러오는 데 더 많은 작업이 요구되어 웹사이트 성능이 저하
적응형 웹 디자인을 사용하면 웹 페이지에서 감지된 기기를 기반으로 미리 만들어진 정적인 레이아웃을 불러올 수 있다. 모바일용, 데스크탑 등 각각의 디바이스 별로 독립적인 템플릿을 만든다. 각각의 디바이스에 맞는 페이지를 별도 제작 후 랜딩되는 웹, pc 디자인에 맞는 링크와 mobile 디자인에 맞는 링크가 따로따로 독립적으로 만들어져 있다.
daum으로 예를 들자면, pc로 접속했을 때 daum.net으로 랜딩되고 mobile로 접속했을 때 모바일 전용 페이지로 redirection되어 m.daum.net으로 랜딩된다.
- 각 플랫폼 및 상황과 맥락에 맞춰 제공되는 완벽한 맞춤화된 경험
- 원하는 기기에 맞게 최적화된 디자인을 할 수 있는 고성능 작업 수행
- 광고 및 타사의 통합 콘텐츠에 대한 간편한 맞춤화
- 콘텐츠가 모든 기기에서 일관되지 않을 경우 SEO에 부정적