제작 가이드 · 반응형 홈페이지

반응형 홈페이지, 뜻과 확인하는 법

한 줄 요약반응형 홈페이지는 주소 하나로 PC·태블릿·휴대폰 화면 너비에 맞춰 글자 크기와 배치가 저절로 바뀌는 홈페이지입니다. 지역 업체를 찾는 손님은 휴대폰 비율이 높아서 누수탐지·하수구막힘 검색은 열에 아홉이 휴대폰입니다(네이버 월간 검색수, 2026년 11월 조회). 반응형이 확인됐다면 다음으로 볼 것은 휴대폰 첫 화면에서 전화 버튼이 바로 보이고 눌리는지입니다.

핵심 정리

반응형 홈페이지는 주소 하나에 화면 하나를 만들어 기기 너비에 맞게 배치만 바꿔 보여 주는 방식입니다.
누수탐지 90%·하수구막힘 90%·변기막힘 92%가 모바일 검색이라 업체 홈페이지는 휴대폰 화면이 기준입니다.
반응형이라도 PC 화면을 줄여 보여 주기만 하면 글자가 작고 버튼이 눌리기 어려워서 휴대폰 먼저 설계가 맞습니다.
PC 브라우저 창을 좁히거나 휴대폰으로 열어 옆으로 밀리는지 보면 반응형인지 바로 알 수 있습니다.

반응형 홈페이지 예시: 같은 누수 업체 홈페이지의 PC 화면과 휴대폰 화면 — 같은 주소를 PC와 휴대폰에서 연 화면입니다. 화면 크기에 따라 배치가 바뀝니다.

반응형 홈페이지, 한 문장으로 말하면

반응형 홈페이지는 화면 너비를 읽어서 PC에서는 넓게 펼치고 휴대폰에서는 한 줄로 쌓아 보여 주는 홈페이지입니다.

같은 주소·같은 내용을 쓰고 배치만 바뀝니다. PC에서 사진 세 장이 가로로 나란히 있던 시공사례가 휴대폰에서는 한 장씩 세로로 내려오고 위쪽 메뉴는 버튼 하나로 접히는 식입니다. 문구 하나를 고치면 PC와 휴대폰에 함께 바뀝니다.

반응형이 아닌 홈페이지는 휴대폰에서도 PC 화면을 통째로 작게 줄여 보여 줍니다. 손가락 두 개로 벌려야 글자가 읽히고 화면을 옆으로 밀어야 전화번호가 보입니다. 오래전에 만든 업체 홈페이지 가운데 아직 이런 곳이 남아 있습니다.

손님은 어떤 화면으로 우리 업체를 찾나

아래는 업종별 대표 검색어의 네이버 월간 검색수와 그중 모바일 검색 비율입니다(2026년 11월 조회).

검색어	월간 검색수	모바일 비율
입주청소	48,210	84%
이삿짐센터	39,390	87%
누수탐지	32,640	90%
하수구막힘	29,990	90%
화장실리모델링	19,100	82%
변기막힘	14,110	92%
철거업체	6,780	76%
도배비용	4,720	84%

집에서 생긴 급한 문제일수록 휴대폰 비율이 높습니다. 물이 새거나 변기가 막힌 손님은 그 자리에서 휴대폰으로 검색하고 전화할 곳을 고릅니다. 이런 손님에게 홈페이지는 곧 휴대폰 화면입니다.

예외도 있습니다. 사무실이사는 모바일 비율이 22%·사무실청소는 38%로 PC 검색이 더 많습니다. 회사 담당자가 근무 중에 PC로 업체를 비교하는 업종이라 PC 화면의 견적 문의폼도 같이 챙겨야 합니다. 가정 손님을 받는 업체라면 휴대폰 화면이 먼저입니다.

광고 보고서에서 기기별 클릭을 나눠 보면 시공 업체는 휴대폰 클릭이 많은 쪽이 보통입니다. 홈페이지 시안도 PC보다 휴대폰으로 먼저 열어 보고 결정하세요.

PC용·모바일용을 따로 만드는 방식과 비교

반응형이 널리 쓰이기 전에는 PC용 홈페이지와 m.으로 시작하는 모바일 홈페이지를 따로 만들었습니다. 지금도 그렇게 운영하는 곳이 있어서 차이를 표로 정리했습니다.

구분	반응형	PC·모바일 따로
주소	하나	두 개(예: 업체.com과 m.업체.com)
내용 수정	한 번 고치면 끝	두 곳을 각각 고쳐야 하고 한쪽을 빠뜨리기 쉬움
검색엔진 평가	주소 하나에 모임	두 주소가 같은 페이지라고 알려 주는 설정이 따로 필요
광고 연결 주소	기기와 상관없이 하나	기기별 연결 주소를 따로 관리
제작비	화면 하나 값	화면 두 개 값이 드는 경우가 많음
태블릿·접는 휴대폰	너비에 맞춰 배치가 따라감	PC와 모바일 중 하나로 보여 어색할 수 있음

따로 만드는 방식도 쓸 수는 있지만 작은 업체가 두 화면을 관리하기는 번거롭습니다. 전화번호를 바꿨는데 모바일 화면에는 예전 번호가 그대로 남아 있는 홈페이지를 실제로 종종 봅니다.

반응형이라고 다 같지 않습니다

견적서에 "반응형"이라고 적혀 있어도 결과물은 크게 다를 수 있습니다. 갈리는 지점은 어느 화면을 먼저 설계했느냐입니다.

PC 화면을 먼저 완성하고 휴대폰에서는 그것을 줄이고 쌓기만 하면 첫 화면이 큰 사진과 회사 소개로 가득 차고 전화 버튼은 한참 아래로 밀립니다. 휴대폰 화면을 먼저 설계하면 손님이 엄지로 무엇을 누를지부터 정해 놓고 배치합니다.

PC 먼저 만든 반응형

첫 화면: 가로로 긴 사진과 "고객 감동을 실천합니다"
전화번호: 맨 아래 회사 정보 속 작은 글자
메뉴: 접히기는 하지만 항목이 열 개 넘음
상담폼: 칸이 많아 화면을 여러 번 내려야 끝남

휴대폰 먼저 만든 반응형

첫 화면: 무엇을 하는 업체인지 한 줄과 출동 지역
전화번호: 첫 화면 버튼과 화면 아래 고정 버튼
메뉴: 손님이 실제로 찾는 서너 개
상담폼: 이름·연락처·내용 정도로 짧게

요한기획 홈페이지는 모두 휴대폰 화면을 먼저 설계합니다. 화면 아래에 상담 버튼이 따라다니고 전화·카카오톡 버튼이 기본으로 들어갑니다. 누수 업체 견본을 휴대폰으로 열어 보면 어떤 모습인지 바로 확인할 수 있습니다.

우리 홈페이지가 반응형인지 확인하는 순서

휴대폰으로 직접 열기: 손가락으로 벌리지 않아도 글자가 읽히고 옆으로 밀리지 않으면 일단 통과입니다.
PC에서 창 너비 줄이기: 크롬이나 엣지 창의 오른쪽 끝을 잡고 천천히 좁혀 봅니다. 배치가 한 줄로 바뀌면 반응형이고 아래쪽에 가로 스크롤 막대가 생기면 반응형이 아닙니다.
주소 보기: 휴대폰에서 열었을 때 주소 앞이 m.으로 바뀌면 모바일 화면을 따로 만든 방식입니다.
개발자 도구로 여러 크기 보기: PC 크롬에서 F12를 누른 뒤 Ctrl+Shift+M을 누르면 휴대폰 크기 화면이 나옵니다. 위쪽 기기 목록에서 크기를 바꿔 가며 깨지는 곳이 없는지 봅니다.
가로로 돌려 보기: 휴대폰을 가로로 눕혔을 때도 글자와 버튼이 겹치지 않는지 봅니다.
다른 휴대폰으로 한 번 더: 안드로이드와 아이폰은 같은 화면도 조금씩 다르게 보입니다. 가족이나 직원 휴대폰으로도 열어 보세요.

세 번째까지만 해 봐도 반응형인지 대부분 가려집니다. 반응형이 아니라면 고치기보다 새로 만드는 편이 빠른 경우가 많으니 홈페이지 리뉴얼 판단 기준을 같이 보세요.

휴대폰 화면 점검표

반응형이 확인됐다면 아래 항목을 휴대폰으로 하나씩 눌러 보며 표시하세요. 광고를 켜기 전에 한 번·홈페이지를 고친 뒤에 한 번 보면 좋습니다.

첫 화면에서 무엇을 하는 업체인지 한 줄로 보인다
첫 화면에 전화 버튼이 있고 누르면 전화 걸기 화면이 바로 뜬다
전화번호가 사진에 박힌 글자로만 들어가 있지 않다
화면을 내려도 아래쪽에 상담 버튼이 따라온다
카카오톡 버튼을 누르면 카카오톡 채팅으로 바로 넘어간다
본문 글자를 손가락으로 벌리지 않고 읽을 수 있다
버튼이 엄지로 누르기 넉넉한 크기이고 서로 붙어 있지 않다
시공사례 사진이 휴대폰 데이터로도 금방 뜬다
상담폼 연락처 칸을 누르면 숫자 자판이 뜬다
상담 신청을 보내면 완료 화면이 뜨고 알림이 실제로 온다
옆으로 밀리는 화면·잘리는 표·겹친 글자가 없다
작업 지역과 상호·사업자 정보가 화면 어딘가에 있다

이 가운데 전화 버튼 클릭과 상담 신청 완료는 광고 효과를 재는 기준점이기도 합니다. 버튼이 어느 광고에서 눌렸는지까지 보려면 전환 추적 설정이 따로 필요합니다.

반응형 홈페이지 제작을 맡길 때 물어볼 것

시안을 휴대폰으로 열어 볼 수 있는 실제 주소로 주는지
휴대폰 화면이 기본인지 추가 비용인지
휴대폰 첫 화면에 들어갈 버튼과 문구를 같이 정하는지
사진 용량을 줄여서 올려 주는지
나중에 문구를 고치면 PC와 휴대폰에 함께 바뀌는지

요한기획은 1페이지형 199,000원·여러 페이지형 600,000원(부가세 별도) 모두 반응형이 기본이라 휴대폰 화면 추가비가 없습니다. 시안은 실제로 열리는 주소로 보내 드리니 사장님 휴대폰으로 직접 눌러 보고 결정하시면 됩니다.

자주 묻는 질문

반응형으로 만들면 PC 화면은 허전해 보이지 않나요?

PC에서는 넓은 화면에 맞춰 사진과 글을 옆으로 나란히 놓기 때문에 허전하게 보이지 않습니다. 휴대폰을 기준으로 설계하면 PC 화면도 군더더기가 적고 간결해지는 편입니다. 사무실 손님이 많은 업종이라면 PC 화면의 상담폼 위치를 따로 챙깁니다.

네이버 홈페이지형 블로그도 반응형인가요?

홈페이지형 블로그는 PC 화면을 꾸미는 방식이라 휴대폰에서는 블로그 기본 화면으로 보이는 경우가 많습니다. 휴대폰 손님에게는 꾸민 대문이 잘 보이지 않는다는 뜻입니다. 블로그는 후기 글을 쌓는 데 쓰고 연락받는 화면은 반응형 홈페이지로 두는 구성을 많이 씁니다.

반응형이면 검색에 더 잘 나오나요?

반응형이라서 순위가 오른다고 말할 수는 없고 검색 순위는 누구도 보장할 수 없습니다. 다만 구글은 휴대폰 화면을 기준으로 페이지를 읽는다고 밝히고 있어서 휴대폰 화면에서 내용이 빠지지 않는 구성이 안전합니다.

태블릿이나 접는 휴대폰에서도 제대로 나오나요?

반응형은 화면 너비를 기준으로 배치를 바꾸기 때문에 태블릿과 접는 휴대폰에서도 배치가 따라 바뀝니다. 제작할 때 여러 너비에서 글자와 버튼이 깨지는 곳이 없는지 확인합니다.

지금 홈페이지를 반응형으로만 고쳐 주실 수 있나요?

오래된 홈페이지를 반응형으로 바꾸려면 화면 구조를 처음부터 다시 짜야 해서 고치는 비용이 새로 만드는 비용과 비슷하거나 더 드는 경우가 많습니다. 요한기획은 기존 문구와 사진을 받아 반응형으로 새로 만들고 지금 쓰는 주소를 그대로 연결해 드립니다.

휴대폰에서 홈페이지가 느린 건 반응형이라서인가요?

대부분은 큰 사진·영상·무거운 효과가 원인입니다. 휴대폰으로 찍은 사진을 줄이지 않고 그대로 올리면 장마다 용량이 커서 데이터로 볼 때 늦게 뜹니다. 구글 PageSpeed Insights에 주소를 넣으면 휴대폰 속도와 느린 원인을 볼 수 있습니다.

우리 업체에 맞는 구성이 궁금하신가요?
업종과 지역만 알려 주시면 어울리는 견본부터 보여 드립니다.

상담 신청 010-8482-6038 카톡 상담