웹개발입문
반응형 웹Responsive Web Design
DEFINITION
반응형 웹은 하나의 URL과 하나의 HTML로 PC·태블릿·휴대폰 화면 크기에 맞춰 레이아웃이 바뀌도록 만든 웹사이트 구성 방식입니다.
- URL
- 기기와 관계없이 하나
- Google 권장 방식
- 반응형 웹 디자인
- 평가 기준 화면
- 모바일 (모바일 우선 색인)
01한 페이지가 화면 크기에 맞춰 모양을 바꾸는 방식
반응형 웹은 CSS 미디어 쿼리로 화면 너비에 따라 배치를 바꿉니다. PC에서는 3단으로 보이던 카드가 휴대폰에서는 1단으로 쌓이는 식입니다. 주소와 HTML이 하나라서 관리할 페이지도 하나입니다.
| 방식 | URL | 관리 | SEO 관점 |
|---|---|---|---|
| 반응형 웹 | 하나 (example.com) | 한 벌 | Google 권장, 신호가 한 URL에 모임 |
| 동적 서빙 | 하나, 기기별 HTML 다름 | 두 벌 | Vary 헤더 등 설정 실수 위험 |
| 별도 모바일 사이트 | 둘 (m.example.com) | 두 벌 | canonical·alternate 연결과 내용 일치 필요 |
02Google은 이제 휴대폰 화면을 기준으로 사이트를 읽는다
Google은 모바일 우선 색인으로 전환해, 색인과 순위 판단에 주로 모바일 버전 페이지를 사용합니다. 그래서 PC 화면에만 있고 모바일에서 빠진 본문·이미지·구조화 데이터는 평가에 반영되지 않을 수 있습니다. 반응형 웹은 두 화면의 내용이 원래 같기 때문에 이 문제가 생기지 않습니다.
03반응형인데도 모바일에서 손해 보는 경우
- 모바일에서
display: none으로 숨긴 본문이 많아 정작 핵심 내용이 접혀 있다 - PC용 큰 이미지를 그대로 내려받아 모바일 LCP가 느리다
- 버튼·링크가 너무 붙어 있어 손가락으로 누르기 어렵다
- 가로 스크롤이 생기거나 글자가 너무 작아 확대해야 읽힌다
04오픈 전 반응형 점검
<meta name="viewport" content="width=device-width, initial-scale=1">가 있는가- 360~430px 너비에서 가로 스크롤이 생기지 않는가
- 모바일과 PC의 본문·제목·구조화 데이터가 같은가
- 모바일에서 이미지 크기와 Core Web Vitals를 따로 확인했는가
GO DEEPER · NODELIX 가이드
SOURCES · 공식·권위 출처
