반응형(Responsive) & 적응형(Adaptive)

반응형 & 적응형

• 반응형 웹은 하나의 템플릿을 사용해 모든 기기에 대응 합니다.
• 적응형 웹은 선별된 기기 유형에 따라 별도의 독립적인 템플릿이 요구 됩니다.

 

반응형

• 미디어 쿼리를 사용해 기기 화면의 크기를 확인하고 유연한 이미지와 그리드를 활용해 화면 크기 변화에 따라 페이지의 크기 및 레이아웃을 조절하는 기술 입니다.

 

반응형의 장점

1. 유지보수
2. 하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어, 하나의 소스를 수정하면 모든 기기 사이즈에 맞추어 콘텐츠가 최적화 됩니다.
3. 사용자가 기기에 구애를 받지 않습니다.

 

반응형의 단점

1. 데이터를 낭비하고 로딩 시간이 있습니다.
2. 사이트에 사용되는 모든 콘텐츠를 다운 받은 후 사용 하기 때문에 로딩 속도가 느립니다.
3. 기존에 이미 운영 중이었던 데스크톱용 사이트가 있었다면 사이트를 재구축해야만 한다는 점에서 불편할 수 있습니다.

 

적응형

• 서버나 클라이언트에서 웹에 접근한 기기를 체크해 그 기기에 맞는 템플릿을 제공하는 개념 입니다. 모바일의 경우 모바일용 템플릿을, 데스크톱의 경우 데스크톱용 템플릿을 제공 합니다.

 

적응형의 장점

1. 디자인을 하기에 자유로움
2. 기기마다 별도의 템플릿을 사용하기 때문 입니다.
3. 감지된 디바이스에 맞는 콘텐츠만 다운 받아 실행하기 때문에 로딩 속도가 빠릅니다.

 

적응형의 단점

1. 적응형 웹은 반응형 웹에 비해 적은 기획과 소스가 필요하지만 모든 스크린 사이즈에 최적화시키기에는 정교함이 조금 덜 하다는 단점이 있습니다.

 

반응형과 적응형 이미지

 

참고

• 반응형(Responsive) 웹과 적응형(Adaptive) 웹, 그리고 모바일 퍼스트 디자인
• http://www.openads.co.kr/content/contentDetail?contsId=2666
• https://born-dev.tistory.com/29
• 반응형웹과 적응형웹의 차이점은 무엇이 있나요?