[CSS]반응형 웹 사이트 / 적응형 웹 사이트 차이?

 

 

 

1. 반응형 웹사이트 :: Response Website

 

하나의 템플릿(Templete)로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹이다.

 

반응형 웹은 해상도 별로 보여질 화면을 꼼꼼하게 정의해야 돼서 초기 기획 단계에서 많은 시간이 든다.

마크업 작업을 할 때 고정된 px값이 아닌 em, rem, % 처럼 백분율 값으로 작업해야 한다.

 

하나의 템플릿으로 만드는 작업이라 미디어쿼리(Media Queries)를 사용해서 해상도, 디바이스 등 특정 화면에 따라 레이아웃을 변경한다.

 

2020년 6월 기준 유튜브 웹사이트에 들어가보니 반응형으로 되어 있네요!

 

 

 

2. 적응형 웹사이트 :: Adaptive Website

모바일용, 데스크탑 등 각각의 디바이스 별로 독립적인 템플릿(Templete)를 만들고

각각의 디바이스에 맞는 페이지를 별도 제작 후 랜딩되는 웹이다.

 

pc 디자인에 맞는 링크와 mobile 디자인에 맞는 링크가 따로따로 독립적으로 만들어져 있다.

daum으로 예를 들면,

pc로 접속했을 때 daum.net으로 랜딩되고

mobile로 접속했을 때 모바일 전용 페이지로 redirection(리디렉션)되어 m.daum.net으로 랜딩된다.

 

디바이스 유형에 따라 독립적인 템플릿이 요구되는 것으로 네이버, 다음 등에서 적응형웹을 사용한다.

 

사용자의 기기에 맞는 템플릿 및 CSS만 다운로드 하므로 데이터 낭비가 적고 로딩 속도가 빠르다.

다만, 각 기기별로 별로의 템플릿을 작성해야 하므로 개발이 복잡해진다.

 

 

3. 차이점

 

디바이스 감지, 리소스 다운로드, 로딩 속도

반응형웹 :

웹사이트에서 쓰이는 모든 콘텐츠를 다운받은 후 현재 해상도에 맞는 화면 랜딩됨

mobile로 접속해도 pc와 mobile 모든 리소스를 다운받음

모든 리소스를 다운받으니 로딩 속도가 느림

 

적응형웹 :

감지된 디바이스에 맞는 필요한 콘텐츠만 다운받은 후 화면 랜딩됨

mobile로 접속하면 pc는 다운받지 않고 mobile 리소스만 다운받음

필요한 콘텐츠만 다운받으니 로딩속도가 빠름

 

 

 

템플릿 

반응형웹 : 

모든 기기에서 하나의 템플릿으로 적용

 

적응형웹 : 

모바일, 패드, 피씨 등 제공하고자 하는 n개의 디바이스에 적합한 n개의 독립적인 템플릿 적용