🤷🏻♀️ 반응형 웹이란?
✔️ 사용자의 환경 또는 특정한 행동에 따라 '반응하는 웹'으로 PC, TV, 스마트 기기 등 환경마다 최적화된 웹사이트를 제공해주는 것을 말한다.
→ 다양한 반응형 웹사이트를 만날 수 있는 곳입니다.
🙋🏻♀️ 왜 반응형 웹으로 만들어야 하나요?
✨ 유지보수 간편!
- 반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디자인을 하나의 파일에서 작업하기 때문이다.
✨ 모바일 점유율의 증가!
- 대한민국은 스마트 기기 인터넷 보급률 및 사용률이 90%가 넘는 인터넷 강국이다.
✨ 마케팅에 유리!
- 웹은 언제, 어디서든 스마트 기기로 쉽게 접근할 수 있기 때문에 다양한 마케팅 활동을 펼칠 수 있는 곳이다.
- 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하면 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경하여 보여줄 수 있기 때문에 전달하고자 하는 내용을 확실하게 전달할 수 있다.
- 언제 어디서든 접근이 용이해야 하는 웹 마케팅에서 가장 효과적인 방법인 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하는 것이다.
✨ 검색 엔진 최적화 가능!
- 주소가 두 가지로 나눠지면 동일한 내용의 웹사이트라도 검색 엔진이 판단할 때는 둘 중에 어떠한 주소의 정보가 정확한 정보인지 확인하기 힘들어 검색 결과에서 제외시킨다.
- 주소도 두 가지라 광고 비용 또한 두 배로 늘어난다.
| 모바일 웹사이트 주소의 예 | 데스크톱 웹사이트 주소의 예 |
|---|---|
| m.xxx.com | xxx.com |
🤦🏻♀️ 그렇다면, 미디어 쿼리와 뷰포트란?
→ 화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술 - 미디어 쿼리
→ 화면을 제어하는 기술 - 뷰포트
✔️ 데스크톱은 사용자가 지정한 해상도에 따라 보이는 영역이 결정되지만 스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설저되기 때문에 미디어 쿼리를 사용해도 스마트 기기에서 화며의 크기를 정확히 감지하지 못한다. 이처럼 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 뷰포트라는 기술을 이용하는 것이다.
❗️❗️ 뷰표트 비교하기 (before)
✔️ 데스크톱과 스마트 기기의 보이는 영역의 차이: 데스크톱에서는 문제가 없어 보이지만 스마트 기기에서는 그림이 더 작게 보인다.
💡 이 문제를 해결하기 위해 <head></head> 태그 사이에 뷰포트를 제어하기 위한 <meta> 태그를 작성한다.
❗️❗️ 뷰표트 비교하기 (after)
<meta name="Viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>✔️ 태그를 이용해서 화면의 크기나 배율을 조절해 줘야 미디어 쿼리가 정상적으로 작동한다.
