🌱 하나의 템플릿( Templete )으로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹
- 해상도 별로 보여질 화면을 초기 기획 단계에서 꼼꼼하게 정의
- 마크업 작업을 할 때 고정된 px 값이 아닌 em, rem, % 등의 백분율 값으로 작업
- Media Queries ( 미디어 쿼리 )를 사용하여 해상도, 디바이스 등 특정 화면에 따라 레이아웃 변경
- 보통 화면의 가로 넓이에 따라 컨텐츠나 디자인 요소를 조정해 제공
- 반응형 디자인 화면 크기는 크게 웹, 모바일, 태블릿으로 3가지 화면크기에 맞춰 디자인
❓ Adaptive Web( 적응형 웹 )
- 각각의 특정 화면 크기 별로 독립적인 템플릿( Templete )을 별도 제작 후 각각 랜딩되는 웹
- PC, mobile 등 디자인에 맞는 링크 등이 독립적으로 존재
✔️ difference
-
유연성
- 반응형은 유연하게 다양한 화면을 대응
- 화면 별로 레이아웃을 다르게 불러오는 적응형보다 유연
-
SEO( 검색엔진 최적화 )
- 구글의 SEO 정책? 모바일 친화 사이트를 더 상위에 노출
- 반응형 디자인이 구글 검색 결과 순위에서 더 높게 매겨질 가능성이 높음
-
제작 난이도
- 크게 3가지의 화면 타입을 디자인하고 이를 한개의 퍼블리싱 파일로 구현해 제공
- 동일 컨텐츠를 레이아웃만 바꿔 화면별로 대응하기 때문에 상대적으로 쉽게 제작할 수 있지만 모든 장치에서 완전히 작동 시키려면 세밀한 CSS의 조정이 필요
-
레이아웃 조정방식
- 반응형: 사용자의 화면 크기에 따라 레이아웃을 조정해 노출
- 적응형: 개발자의 백엔드 코딩 값을 통해 조정되고 노출
-
로딩 시간
- 반응형: 모든 컨텐츠를 불러와 화면 크기에 따라 자동으로 조정하기 때문에 상대적으로 느림
- 적응형: 각 장치의 특정 레이아웃을 바로 로드하기 때문에 불필요한 컨텐츠를 로딩하지 않아 상대적으로 빠름
❓pros
-
동일한 사용자 경험
- 사용자가 다른 장치에서 접속하더라도 모든 장치에서 균일하고 원활한 사용자 경험을 제공
-
저렴한 구축 비용과 최소한의 유지보수
- 적응형보다 많은 레이아웃이 필요하지 않기 때문에 상대적으로 구축이 쉬움
- WordPress 등 대부분의 사이트에서 반응형 디자인 템플릿을 제공하고 있어, 전문가 없이도 반응형 구축 가능
- 모든 장치에서 동일한 컨텐츠를 보여주기 때문에 컨텐츠 업데이트가 한 번에 이뤄져 상대적으로 유지 관리 비용 저렴
-
SEO 최적화
❓cons
-
느린 로딩 속도
- 모든 컨텐츠를 불러온 후에 화면 크기에 맞춰 자동으로 컨텐츠를 조정하기 때문에 컨텐츠 로딩에 상대적으로 더 많은 시간이 걸림 → 이탈율 증가로 이어질 수 있음
-
동일한 디자인 화면
- 장치별로 최적화된( 디자인된 ) 화면을 제공하지 않기 때문에 디자인이 새롭거나 매력적이지 않을 수 있음
