TIL. 반응형 웹 vs 적응형 웹

참고 :https://studio-jt.co.kr/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%A0%81%EC%9D%91%ED%98%95-%EC%9B%B9/
https://chaewonkong.github.io/posts/responsive-adaptive.html

반응형 웹? 적응형 웹?

근본적으로 웹사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 모바일 사용자 경험을 제공하기 위한 방법이다.

그러나, 적응형 웹과 반응형 웹은 사이트 설계부터 구동까지 많은 차이가 있다!

🧐 어떤 차이가 있을까?

적응형 웹은 서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 다바이스에 최적화된 마크업을 호출한다.
적응형 웹의 특징으로는 기존의 사이트를 재구축할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다.
반면, 반응형 웹은 미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드로 화면 크기의 변화에 따라 그에 맞는 크기가 된다.

반응형웹 장단점

하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점을 가진다. 그러나, 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야하니 데이터를 낭비하고 로딩시간을 늘리는 단점을 가진다.

또, 기존에 이미 운영중이었던 데스크톱용 사이트가 있었다면 사이트를 재구축해야만 한다는 점에서 불편할 수 있다.

적응형웹 장단점

기존에 이미 데스크톱용 템플릿을 작성했따면 처음부터 재구축할 필요없이 다른 기기용 템플릿만 따로 만들면 된다. 또한 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드하므로 데이터 낭비가 적고 로딩 속도가 빠르다.
다만, 각 기기별로 별도의 템플릿을 작성해야하므로 개발이 복잡해진다.