https://media.vlpt.us/images/hoho_0815/post/ebc53785-2194-4795-a49d-ef9ad7666caf/html.webp
반응형(Responsive) 웹과 적응형(Adaptive) 웹
- 반응형 웹은 하나의 템플릿을 사용해 모든 기기에 대응 합니다.
- 적응형 웹은 선별된 기기 유형에 따라 별도의 독립적인 템플릿이 요구 됩니다.
반응형
: 미디어 쿼리를 사용해 기기 화면의 크기를 확인하고 유연한 이미지와 그리드를 활용해 화면 크기 변화에 따라 페이지의 크기 및 레이아웃을 조절하는 기술 입니다.
반응형의 장점
- 유지보수> 하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어, 하나의 소스를 수정하면 모든 기기 사이즈에 맞추어 콘텐츠가 최적화 됩니다.
- 사용자가 기기에 구애를 받지 않습니다.
반응형의 단점
- 데이터를 낭비하고 로딩 시간이 있습니다.> 사이트에 사용되는 모든 콘텐츠를 다운 받은 후 사용 하기 때문에 로딩 속도가 느립니다.
- 기존에 이미 운영 중이었던 데스크톱용 사이트가 있었다면 사이트를 재구축해야만 한다는 점에서 불편할 수 있습니다.
적응형
: 서버나 클라이언트에서 웹에 접근한 기기를 체크해 그 기기에 맞는 템플릿을 제공하는 개념 입니다. 모바일의 경우 모바일용 템플릿을, 데스크톱의 경우 데스크톱용 템플릿을 제공 합니다.
적응형의 장점
- 디자인을 하기에 자유로움> 기기마다 별도의 템플릿을 사용하기 때문 입니다.
- 감지된 디바이스에 맞는 콘텐츠만 다운 받아 실행하기 때문에 로딩 속도가 빠릅니다.
적응형의 단점
- 적응형 웹은 반응형 웹에 비해 적은 기획과 소스가 필요하지만 모든 스크린 사이즈에 최적화시키기에는 정교함이 조금 덜 하다는 단점이 있습니다.
반응형과 적응형 이미지
참고
Coding is playing!