반응형 웹 vs 적응형 웹

📢 노마드코더의 CSS Layout Masterclass 에서 골라준 예쁜 사이트를 클론하면서 내가 만든 사이트는 사이즈를 줄이면 매쉬드 포테이토마냥 다 으깨지는 짜릿한 경험을 하였다. 내가 만들 모바일 앱은 으깨지면 안된다. 이에 반응형 웹에 대한 조사를 시작한다.

한 마디로

반응형: 길이 조절이 가능한 낚시대 1개
이거 하나면 끝나

적응형: 길이가 다양한 여러개의 낚시대
뭘 좋아할지 몰라서 다 준비해봤어

기기 감지

반응형: 미디어쿼리
적응형: 서버 또는 브라우저

콘텐츠 최적화

반응형: 전부 다운로드 후 일부만 사용
적응형: 필요한 것만 다운로드

템플릿

반응형: 한 개
적응형: 기기마다 따로 준비

로딩 속도

반응형: 모두 다운받은 뒤 필요한 것만 사용 -> 상대적 느림
적응형: 필요한 리소스만 다운받아 사용 -> 상대적 빠름

개발/배포

반응형: 전면 리뉴얼
적응형: 기기별 새로운 템플릿 제작