반응형 홈페이지는 주소와 HTML 이 하나이고, 화면 폭에 따라 같은 페이지의 배치 · 글자 크기 · 이미지 · 메뉴가 바뀌는 웹사이트입니다. 휴대폰에서는 한 줄로, 데스크톱에서는 세 줄로 놓이는 식이고, 방문자는 어느 기기에서 열어도 같은 주소의 같은 내용을 봅니다.
별도 모바일 사이트는 m.회사명.co.kr 처럼 휴대폰용 주소와 페이지를 따로 두는 방식입니다. 예전에는 흔했지만 관리가 두 배이고 검색엔진이 두 주소를 같은 페이지로 묶어 줘야 해서, 지금 새로 만드는 사이트는 거의 반응형입니다.
반응형 홈페이지는 무엇인가요?
반응형(responsive)이라는 말은 화면 폭에 '반응'해 배치가 바뀐다는 뜻입니다. 기술적으로는 CSS 의 미디어 쿼리로 '폭이 768px 보다 좁으면 이렇게' 같은 규칙을 두고, 이미지는 화면 폭에 맞는 크기를 골라 받습니다.
- 주소 하나: 공유 · 검색 · 광고 링크가 기기에 상관없이 같은 주소로 갑니다.
- 내용 하나: 글을 고치면 PC 와 휴대폰에 동시에 반영됩니다.
- 배치는 다르게: 3열 카드가 1열로, 가로 메뉴가 햄버거 메뉴로, 넓은 표가 가로 스크롤로 바뀝니다.
- 앱이 아님: 설치형 앱(PWA)이나 스토어 앱과는 다릅니다. 반응형 사이트를 홈 화면에 추가해 앱처럼 쓰는 것이 PWA 입니다.
별도 모바일 사이트와 무엇이 다른가요?
| 기준 | 반응형 홈페이지 | 별도 모바일 사이트(m.) |
|---|---|---|
| 주소 | 하나(회사명.co.kr) | 둘(회사명.co.kr, m.회사명.co.kr) |
| 관리 | 한 번 고치면 끝 | 두 벌을 따로 고침, 내용이 어긋나기 쉬움 |
| 검색 | 구글이 모바일 버전 기준으로 색인, 반응형 권장 | 두 주소를 서로 가리키는 설정(canonical · alternate)이 필요 |
| 속도 | 휴대폰에 맞는 이미지 크기를 고르면 충분 | 휴대폰용으로 가볍게 만들 수 있지만 이동(리다이렉트)이 한 번 더 |
| 맞는 경우 | 새로 만드는 대부분의 사이트 | 휴대폰과 PC 의 쓰임이 완전히 다른 서비스(드물다) |
구글 검색 센터는 모바일 우선 색인 문서에서 모바일 버전의 콘텐츠를 기준으로 색인한다고 설명하고, 반응형 디자인을 권장합니다. 데스크톱에만 있고 휴대폰 화면에서 숨긴 내용은 검색에서 빠질 수 있다는 뜻이라, '모바일에는 간단하게'가 아니라 '모바일에도 전부'가 기준입니다.
메뉴와 이미지, 문의 폼은 어떻게 달라지나요?
같은 페이지라도 휴대폰에서는 네 가지가 눈에 띄게 바뀝니다. 제작 범위와 검수 항목이 여기서 나옵니다.
| 요소 | 데스크톱 | 휴대폰 | 흔한 문제 |
|---|---|---|---|
| 메뉴 | 가로 한 줄, 드롭다운 | 햄버거 버튼 → 전체 메뉴 | 메뉴 항목이 잘리거나 두 줄로 겹침 |
| 이미지 | 큰 배경 사진, 가로 배너 | 세로로 잘리거나 작은 판으로 교체 | 글자가 들어간 이미지가 읽히지 않음, 큰 원본을 그대로 받아 느림 |
| 표 | 열 4 ~ 5개 | 가로 스크롤 또는 카드로 변환 | 표가 화면 밖으로 넘쳐 페이지 전체가 가로로 흔들림 |
| 문의 폼 · 버튼 | 오른쪽 칸, 호버 효과 | 화면 아래 고정 버튼, 큰 입력칸 | 버튼이 작아 잘못 눌림, 입력할 때 화면이 튐, 전화번호 칸에 숫자 키패드가 안 뜸 |
모바일에서 어떤 작업을 직접 확인하나요?
검수는 브라우저 창을 줄여 보는 것으로 끝나지 않습니다. 실제 휴대폰 두세 종류(안드로이드 · 아이폰, 작은 화면 하나 포함)에서 아래를 직접 해 봅니다.
- 1읽기: 첫 화면에 제목과 버튼이 보이는지, 본문 글자가 확대 없이 읽히는지, 가로로 흔들리는 페이지가 없는지
- 2이동: 메뉴를 열고 닫고, 모든 주요 페이지에 두 번 안에 가는지, 뒤로 가기가 자연스러운지
- 3입력: 문의 폼을 실제로 보내 보고(알림 수신까지), 전화번호 칸에서 숫자 키패드가 뜨는지, 전화 · 지도 버튼이 바로 연결되는지
- 4속도: 모바일에서 첫 화면의 가장 큰 요소가 2.5초 안에 보이는지(LCP). 이미지 크기가 원인인 경우가 많습니다.
- 5표 · 이미지: 가로로 넘치는 표가 없고, 배너 글자가 읽히는지
구글 서치콘솔의 핵심 웹 지표 보고서에서 '개선 필요' 페이지가 늘면(모바일 사용 편의성 보고서는 2023년 12월에 없어졌습니다) 같은 항목을 다시 봅니다. 숫자보다 먼저 휴대폰으로 눌러 보는 쪽이 원인을 빨리 찾습니다.
반응형 제작 범위는 어떻게 견적에 적나요?
'반응형 포함' 한 줄은 범위가 아닙니다. 어느 화면 폭까지 맞추는지, 어떤 요소를 휴대폰용으로 따로 만드는지, 무엇을 검수하는지가 적혀 있어야 나중에 '휴대폰에서 깨진다'는 말이 분쟁이 되지 않습니다.
- 대응 화면: 휴대폰(약 360 ~ 430px) · 태블릿 · 데스크톱 세 구간, 가로 모드 포함 여부
- 휴대폰용으로 따로 만드는 것: 메뉴, 첫 화면 배너, 표의 카드 변환, 하단 고정 문의 버튼
- 이미지: 화면 폭별 크기 생성 여부(큰 원본 하나를 그대로 쓰면 느립니다)
- 검수 기준: 실제 기기 종류와 확인 항목(위 다섯 가지), 오픈 뒤 휴대폰 오류의 무상 수정 기간
- 수정 범위: 디자인 수정 횟수에 휴대폰 화면 수정이 포함되는지
서치웨이는 PC · 모바일 반응형을 모든 제작에 기본으로 넣고, 휴대폰에서 직접 눌러 보는 검수까지 제작 범위에 포함합니다. 다른 업체가 만든 사이트가 휴대폰에서 깨진다면 리뉴얼 점검에서 위 항목부터 봅니다.
자주 묻는 질문
Q.반응형 홈페이지와 모바일 홈페이지는 무엇이 다른가요?
반응형은 페이지 하나가 화면 폭에 맞춰 모양을 바꾸는 방식이고, 모바일 홈페이지(별도 모바일 사이트)는 m.회사명.co.kr 처럼 휴대폰용 주소와 페이지를 따로 만드는 방식입니다. 지금 새로 만드는 사이트는 대부분 반응형입니다.
Q.반응형 홈페이지 제작 비용은 따로 드나요?
서치웨이는 PC · 모바일 반응형을 모든 제작에 기본으로 넣어 따로 받지 않습니다. 다른 업체 견적에서는 '반응형 포함' 한 줄보다 어느 화면 폭까지 맞추는지와 어떤 화면을 검수하는지를 확인하세요.
Q.반응형이면 모바일 검색에 유리한가요?
구글은 모바일 버전을 기준으로 페이지를 색인하고 반응형 디자인을 권장합니다. 유리하다기보다, 휴대폰에서 안 보이는 내용은 검색에서 빠질 수 있으니 모바일 화면에 모든 내용이 있어야 한다는 뜻입니다.
Q.웹 반응형 사이즈 기준은 무엇인가요?
정해진 표준은 없고 보통 휴대폰(약 360 ~ 430px), 태블릿(약 768 ~ 1024px), 데스크톱(1280px 이상) 세 구간에서 배치가 바뀌게 만듭니다. 기준보다 중요한 것은 실제로 쓰는 휴대폰 두세 종류에서 직접 열어 보는 일입니다.
발행
이 글과 관련된 서비스
이 글이 도움이 됐다면 공유해 주세요
