주소·HTML은 하나, 모양만 바뀝니다
어느 기기로 열든 같은 주소·같은 HTML이고 폭에 맞춰 배치만 달라집니다. 글은 한 곳만 고치면 모든 기기에 반영됩니다.
온다마케팅 · 광고 운영 자료
반응형 홈페이지 뜻과 확인법, 화면 크기에 맞춰 바뀌는 구성 기준
반응형 홈페이지 뜻은 반응형 웹 디자인(Responsive Web Design)으로 만들어, 주소와 HTML 하나로 휴대폰·태블릿·PC 화면 폭에 맞춰 배치와 글자·사진 크기가 바뀌는 홈페이지입니다. Google 검색 센터도 구현과 유지보수가 가장 쉬운 방식으로 권하며, 만든 뒤에는 크롬 기기 모드와 실제 휴대폰으로 폭마다 메뉴·표·버튼을 눌러 봅니다.
지금 사이트가 휴대폰에서 어떻게 보이는지부터 함께 확인합니다. 카카오톡으로 반응형 홈페이지 상담 →
함께 확인할 자료: 반응형·적응형·모바일 전용 차이 표 · 크롬 기기 모드로 폭별 확인 순서 · 휴대폰에서 깨지는 화면 고치기
이해를 돕는 기획 이미지
이 페이지에서 확인할 내용
반응형 홈페이지
화면 폭이 바뀌면 무엇이 달라지나요?
검색은 휴대폰 화면이 기준입니다
Google은 스마트폰 에이전트로 크롤링한 모바일 버전으로 색인과 순위를 정합니다(모바일 중심 색인 생성). 휴대폰 화면에서 빠진 설명은 검색에서도 빠질 수 있습니다.
반응형 웹은 모바일 홈페이지와 같은 말인가요?
반응형 웹은 화면 폭을 알아보는 스타일 규칙(미디어 쿼리)으로 한 페이지가 폭마다 모양을 바꾸게 하는 설계 방식입니다. 모바일 홈페이지는 휴대폰에서 보기 좋게 만든 사이트를 두루 이르는 말이라 m. 같은 별도 주소의 사이트도 포함합니다. Google 검색 센터는 휴대폰 대응을 반응형 웹 디자인·동적 게재·별도 URL로 나누며, 흔히 말하는 적응형처럼 같은 주소에서 기기별로 다른 HTML을 보내면 동적 게재에 해당합니다.
과학기술정보통신부·한국지능정보사회진흥원 「2025 인터넷이용실태조사」에서 최근 1개월 안에 모바일기기로 인터넷을 쓴 만 3세 이상 인구는 94.1%였고, 컴퓨터(데스크톱·노트북·태블릿PC 등)를 쓴 비율도 76.0%라 휴대폰부터 챙기되 태블릿·PC 폭까지 함께 봅니다. 만드는 순서는 홈페이지 만들기 자료에서 다룹니다.
반응형·적응형·모바일 전용은 어떻게 다른가요?
네 가지 화면 방식의 차이
| 방식 | 어떻게 바뀌나 | 관리할 때 |
|---|---|---|
| 반응형 | 같은 주소·HTML이 폭에 맞춰 배치 변경 | 한 번 고치면 모든 기기에 반영 |
| 적응형(같은 주소면 동적 게재) | 기기를 알아보고 미리 만든 화면을 보냄 | 기기별 화면을 각각 손봄 |
| 모바일 전용(별도 URL) | m. 같은 다른 주소에 휴대폰 화면을 둠 | 두 주소의 글·제목·설명을 맞춤 |
| PC 화면 고정 | 휴대폰에서 PC 화면이 통째로 줄어 보임 | 글자·버튼부터 손봄 |
구분은 Google 검색 센터·web.dev 기준 · 2026년 10월 19일 확인 · 관리 칸은 온다마케팅 제작 기준입니다.
바꿀 화면과 쪽 수를 알려주시면 견적으로 안내합니다.
모바일 홈페이지 제작을 맡기기 전에 무엇을 확인하나요?
주로 여는 기기
방문 분석 도구가 있으면 휴대폰·태블릿·PC 방문 수를 나눠 보고, 많이 여는 폭부터 점검합니다.
손님이 먼저 누를 버튼
전화·문자·카카오톡·문의 폼 가운데 하나를 골라 휴대폰 첫 화면 안에 둡니다.
그림으로 올린 안내
가격표·영업시간을 그림으로 올렸다면 휴대폰에서 글자도 함께 줄어드니 글로 옮길 목록을 적습니다.
관리자 계정 주인
도메인·서버·관리자 화면 계정이 누구 이름이고 지금 로그인되는지 봅니다.
현장에서 자주 막히는 곳은 원본 자료입니다. 가격표를 그림으로만 받아 글을 다시 쳐야 하거나, 사진이 작아 태블릿 폭에서 흐려지거나, 예전 담당자 계정이라 화면을 못 고치는 일이 생깁니다. 첫 상담에서는 주소 → 어긋난 쪽 → 원본 → 계정 순서로 빈칸을 채웁니다.
점검에는 어떤 자료가 필요한가요?
- 사이트 주소·관리자 접속 권한
- 어긋난 쪽 주소와 기종 메모
- 가격표·공지 글 원본
주의할 점: Google 검색 센터 문서는 스와이프·클릭·입력 같은 사용자 상호작용이 있어야 불러오는 콘텐츠는 Google이 불러오지 않는다고 밝힙니다. 휴대폰에서 쪽을 짧게 보이려고 상품 설명을 눌러야 불러오게 만들면 검색에서 빠질 수 있습니다. 반응형은 두 버전의 콘텐츠와 메타데이터가 같지만, m. 주소를 따로 쓰면 title·메타 설명·구조화된 데이터를 같게 맞춰야 합니다.
휴대폰에서 깨지는 화면은 어떻게 고칠까요?
옆으로 넘치는 표와 사진 정리
web.dev 문서는 사용자가 세로 스크롤에는 익숙해도 가로 스크롤에는 익숙하지 않다고 설명합니다. 가상의 동네 떡집이라면 떡 종류·가격 표가 옆으로 넘칠 때 칸을 줄이거나 한 줄을 카드로 바꾸고, 사진은 최대 너비를 화면 폭에 맞춥니다.
누르기 쉬운 버튼과 PC용 연락 동선
버튼은 손가락으로 누르기 쉽게 키우고 사이를 띄웁니다. 전화 버튼은 PC에서 통화로 이어지지 않을 수 있어 PC 폭에서는 번호를 글자로 두거나 문의 폼·카카오톡을 앞에 둡니다. 광고에서 들어오는 랜딩페이지는 휴대폰 첫 화면 안에 약속 한 줄과 문의 버튼이 함께 들어오게 합니다.
그림 속 글자를 글로 옮기기
가격표·주문 마감 안내를 글로 옮기면 폭이 좁아져도 읽을 크기로 줄이 바뀌고, 가격이 바뀌는 날 관리자 화면에서 바로 고칠 수 있습니다.
폭별 화면은 어떤 순서로 확인하나요?
- 기기 모드로 폭 바꿔 보기
- 실제 휴대폰으로 눌러 보기
- 가로 화면·PC 폭 다시 보기
크롬 개발자 도구에서 기기 툴바 전환 아이콘을 누르면 반응형 크기에 너비·높이를 넣거나 기기를 고를 수 있고, 회전 버튼으로 가로 화면도 봅니다. 옵션 더보기 > 미디어 쿼리 표시를 켜면 배치가 바뀌는 지점(중단점)이 막대로 보이니, 기종 크기보다 글과 표가 무너지는 폭을 찾습니다. 막힐 때 볼 것: Chrome 문서는 기기 모드가 1차 근사치일 뿐 휴대기기에서 코드를 실행하지 않으니 확실하지 않으면 실제 기기에서 열어 보라고 권합니다. 유지보수로 글·사진을 바꾼 날에도 휴대폰 폭으로 다시 엽니다.
지금 필요한 것부터
반응형 홈페이지 점검 상담 준비 자료
준비할 자료: 지금 사이트 주소 · 어긋난 쪽 목록 · 그림으로 올린 안내 원본. 현재 준비된 내용부터 함께 살펴봅니다.
폭별 화면 점검 메모
내 확인 메모 만들기
확인한 항목을 선택하세요. 선택하지 않은 항목은 추가 질문으로 정리됩니다. 입력은 이 브라우저에서만 처리되며 전송·저장되지 않습니다.
작성·자료 기준
Google·Chrome·web.dev·한국지능정보사회진흥원 자료 기준 · 2026년 10월 19일 확인 · 온다마케팅 기획 안내 · 2026년 10월 19일 작성.
자주 묻는 질문
4개 질문
이 문서는 반응형 웹의 뜻, 적응형·별도 주소 방식과의 차이, 폭별 확인 순서를 떡집 예시로 정리했습니다. 근거는 공식 문서와 인터넷이용실태조사 원문에서 열어 본 범위만 옮겼습니다.
- 반응형 웹이란 무엇이고 반응형 디자인과 같은 말인가요?
- 반응형 웹은 한 주소의 같은 HTML이 화면 폭에 맞춰 배치를 바꿔 보이게 하는 방식이고, 그렇게 설계하는 일을 반응형 디자인이라고 합니다. 이렇게 만든 사이트는 반응형 사이트·반응형 웹사이트, 그 안의 한 쪽은 반응형 웹페이지라고 부릅니다.
- 반응형 홈페이지 제작 비용은 얼마인가요?
- 휴대폰 대응을 따로 사지 않고 쪽 구성 항목으로 금액이 정해집니다. 온다마케팅 가격 가이드 기준 A안 80만 원·B안 163만 원·C안 349만 원(부가세 별도)이며 어느 견적이든 전 페이지 모바일 대응이 0원으로 들어갑니다. 일반 서브페이지를 더하면 1개에 6만 원, 최소 금액은 40만 원이고, 완성 뒤 1개월 수정 기간이 끝나면 월 유지보수가 월 11만 원입니다(모두 부가세 별도).
- 우리 홈페이지가 반응형인지 어떻게 확인하나요?
- PC에서 브라우저 창을 좁혀 배치가 따라 바뀌면 반응형에 가깝고, 휴대폰에서 주소가 m. 같은 다른 주소로 바뀌면 별도 주소의 모바일 홈페이지입니다. PC 화면이 통째로 작게 보이면 뷰포트 메타 태그가 빠졌을 수 있습니다. web.dev 문서는 이 태그가 없으면 휴대폰 브라우저가 데스크톱 폭(대개 약 980px)으로 그려 줄인다고 설명합니다.
- 반응형 홈페이지 예시를 보면 화면이 어떻게 바뀌나요?
- 가상의 동네 떡집이라면 PC에서 펼쳐져 있던 메뉴가 휴대폰에서는 버튼 하나로 접히고, 세 칸이던 상품 카드는 한 줄에 하나씩, 나란히 있던 지도는 주문 안내 아래로 내려갑니다. 전화·카카오톡 버튼은 화면 아래에 붙습니다. 공개 제작 시안은 홈페이지 제작 레퍼런스 자료에서 봅니다.
지금 필요한 것부터
반응형 홈페이지 점검 상담 준비 자료
준비할 자료: 지금 사이트 주소 · 어긋난 쪽 목록 · 그림으로 올린 안내 원본. 현재 준비된 내용부터 함께 살펴봅니다.