적응형 홈페이지vs반응형 홈페이지

여러분 벌써 금요일이네요. 참 시간이 빨리 갑니다. 휙휙

오늘은 적응형 홈페이지와 반응형 홈페이지에 대해서 공부해 보았어요.

아직까진 저도 미흡한 문외 안이라 흑 많은 정보를 습득하진 못했지만.

오늘도 케이디자인의 자문을 받아 나름 제 머리를 굴려 습득해보았습니다.

먼저 제 머릿속에 적응형 홈페이지란 말 그대로 모바일 홈페이지구나...라고 

각인이 되었답니다. (이게 맞아? ㅎㅎㅎ)

 

 

 

케이 디자인

적응형 웹이란 

 

보통 쇼핑몰처럼 보여주고 싶은 콘텐츠가 많다면, 적응형 웹이 적절하다고 합니다.

서버 또는 브라우저를 기반으로 기기를 감지하는 방법을 사용하고 각 기기의 적합한

UI 템플릿을 제공하는 방식으로 기기의 유형에 따라 별도의 독립적인 템플릿을 제작

하여야 하며, 별도 페이지 제작이 필요합니다.

 

쉬운 예로 네이버 같은 포털 사이트를 생각하면 PC에서 접속하거나 모바일에서 접속할 시에

화면 구성이 달라지며, 모바일 환경에서 PC 사이트 주소로 접속할 경우 자동으로 감지하며

모바일 전용 페이지로 리디렉션하여 보여 줍니다. 

 

 

1.

서버나 브라우저에서 기기를 감지한다.

각 기기에 적합한 UI 템플릿을 각각 제공

 

2.

필요한 컨텐츠만 다운로드

감지된 기기에 최적화된 리소스만 다운로드 

 

3.

기기마다 다른 템플릿

사이트 동작은 기기 유형에 따라 변경

 

4.

각 기기에 필요한 리소스만 다운로드하여 사용하기 때문에 

로딩 속도가 빠름

 

5.

기존 사이트 변경없이 개발 가능

기존 사이트 기반으로 기기별 새로운 템플릿을 만들 수 있다.

높은 수준의 개발 전문성이 요구되며 각 기기마다

최적화된 컨텐츠와 리소스 제작이 필요하여 기획과 디자인 단계에서 보다 많은 시간이 소요된다.

 

 

케이 디자인

 

 

반응형 웹이란 

한 가지 웹사이트로 다양한 종류의 기기에서 최적화된 화면을 보여주는 방식으로 

PC나 모바일 태블릿과 같은 디바이스에 관계없이 화면에 맞추어 콘텐츠를 

자동으로 조절하여 보여줍니다. 보통은 이런 특성 때문에 기업 소개형 사이트나

스토리형 콘텐츠를 담은 웹사이트에서 주로 활용한다고 합니다. 

 

1.

미디어 쿼리로 기기 화면 해상도 크기 감지

화면 크기에 맞게 하나의 UI 템플릿을 각각 제공

 

2.

모든 콘텐츠 다운로드

기기 최적화 상관없이 다운로드되지만,

일부 콘텐츠만 사용

 

3.

하나의 템플릿

기기와 상관없이 적용되며 사이트 동작은 별도 감지에

따른 변경이 아닐 경우 동일 적용

 

4.

기기에 상관없이 모든 리소스 다운로드하여 사용하기 때문에

로딩 속도 느림

 

5.

기존 사이트를 전면 리뉴얼하여 개발

모든 기기에서의 사용자 인터렉션을 기획과 디자인 단계에서

부터 면밀하게 검토하고 고려해야 한다.

 

 

케이디자인

오늘도 적응형과 반응형 홈페이지에 대해 알아보았습니다.

다들 꿀 같은 주말 보내시고 다들 행복하세요

 

케이 디자인 바로가기 

 

케이디자인