반응형 홈페이지는 하나의 URL, 하나의 HTML, 하나의 코드로 PC·태블릿·모바일 화면에 자동으로 맞춰지는 구조입니다. 화면 폭에 따라 CSS가 배치를 바꿀 뿐 주소도 콘텐츠도 갈라지지 않습니다. 그래서 검색엔진이 보는 페이지와 사용자가 보는 페이지가 같고, 수정할 때도 한 곳만 고치면 됩니다.
문제는 "반응형으로 만들었다"는 말과 "모바일에서 제대로 보인다"가 같은 뜻이 아니라는 점입니다. 폭만 줄어들고 글자는 작고, 표는 화면을 비집고 나가고, 버튼은 손가락으로 눌리지 않는 사이트가 흔합니다. 아래에서는 제작 방식·비용·절차를 먼저 정리하고, 오픈 전에 휴대폰으로 직접 확인해야 할 7가지를 합격 기준과 함께 다룹니다.
반응형 홈페이지와 적응형, m.도메인은 무엇이 다른가
세 가지 모두 "모바일에서 보이게 만드는 방법"이지만 구조가 다릅니다.
- 반응형(Responsive)
- 주소 하나, 코드 하나. CSS 미디어쿼리로 화면 폭에 따라 배치만 달라진다
- 적응형(Adaptive)
- 주소는 같지만 서버가 기기를 판별해 다른 HTML을 내려준다. 기기 판별이 틀리면 엉뚱한 화면이 간다
- 모바일 별도 사이트(m.도메인)
- PC용과 모바일용 주소가 아예 다르다. 같은 내용이 두 주소에 존재한다
구분 | 반응형 | 적응형 | m.도메인 |
|---|---|---|---|
URL 수 | 1개 | 1개 | 2개 |
콘텐츠 관리 | 한 번 수정 | 조건별 분기 관리 | 두 벌 관리 |
중복 콘텐츠 처리 | 불필요 | 불필요 | canonical·alternate 필수 |
링크 신호 | 한 주소로 모임 | 한 주소로 모임 | 두 주소로 분산 |
외부에서 들어오는 링크와 공유가 두 주소로 쪼개지는 것이 m.도메인의 가장 큰 손해입니다. 새로 만드는 사이트라면 특별한 사정이 없는 한 반응형이 기본값입니다.
반응형으로 만들어야 하는 네 가지 이유
첫째, 모바일 우선 색인입니다. 구글은 사이트를 평가할 때 모바일 화면에서 보이는 내용을 기준으로 삼습니다. 모바일 중심 색인 생성 권장사항은 모바일 버전과 데스크톱 버전의 콘텐츠가 같아야 한다고 안내합니다. 모바일에서 접어 두거나 빼 버린 본문은 평가 대상에서도 사라질 수 있습니다.
둘째, 신호가 분산되지 않습니다. 주소가 하나면 외부 링크, 공유, 방문 기록이 한 페이지에 쌓입니다.
셋째, 사용자 경험입니다. 확대·축소 없이 읽히는 화면은 이탈률에 직접 영향을 줍니다.
넷째, 유지관리 비용입니다. 공지 하나를 올려도 두 벌로 관리하는 구조는 시간이 지날수록 내용이 어긋납니다.
반응형 홈페이지 제작 방법 — 다섯 가지 선택지와 실제 비용·기간
아래 수치는 백링크하이가 실제로 진행한 제작 건들을 기준으로 한 방식별 범위입니다. 페이지 수와 기능에 따라 같은 방식 안에서도 폭이 생깁니다.
제작 방식 | 비용 범위 | 기간 | 수정 편의·확장성 |
|---|---|---|---|
빌더(아임웹·이즈웹·윅스) | 150만~250만원 | 1~2주 | 수정 쉬움, 구조 변경은 제한적 |
워드프레스(테마 기반) | 250만~400만원 | 3~6주 | 플러그인 확장 넓음, 관리 부담 있음 |
커스텀 디자인 + CMS | 350만~550만원 | 6~10주 | 디자인 자유도 높고 관리 화면 제공 |
자체 개발(맞춤 코딩) | 300만~500만원 | 2~3개월 이상 | 확장성 최상, 유지보수 의존도 큼 |
임대형 쇼핑몰 | 200만~350만원 | 2~4주 | 결제·주문 기능 기본 제공, 커스텀 제약 |
빌더는 템플릿 자체가 반응형이라 모바일 대응이 빠릅니다. 대신 템플릿이 전제한 구조를 벗어나기 어렵고, 이미지 원본을 그대로 올리면 모바일 전송 용량이 급격히 커집니다.
워드프레스는 유연하지만 설치 직후 상태에서는 검색 최적화 설정이 사실상 비어 있습니다. 주소 구조(퍼머링크)가 기본값이면 글 주소에 의미가 담기지 않고, 사이트맵과 robots 설정, 페이지별 제목·설명, 구조화 데이터를 따로 잡아야 합니다. 설치만 하고 넘기면 이 항목들이 빈 채로 남습니다.
비용이 달라지는 이유
견적 차이는 디자인 취향보다 아래에서 갈립니다.
- 페이지 수(고유 레이아웃이 몇 종인지가 실제 작업량)
- 기능(결제·회원·예약·게시판·다국어)
- 맞춤 디자인 여부(템플릿 수정 vs 시안 제작)
- 데이터 이전·기존 콘텐츠 마이그레이션 분량
- 투입 인력 구성(기획·디자인·퍼블리싱·개발 분리 여부)
제작비와 별개로 반복 비용이 있습니다. 도메인 연 1회, 호스팅 월 또는 연 단위, 유지보수비(월정액 또는 건당 수정비), SSL·보안 업데이트, 빌더라면 플랜 요금입니다. 계약 전에 무상 수정 기간과 그 이후 수정 단가를 문서로 받아 두면 분쟁이 줄어듭니다. 더 세분한 금액 구조는 홈페이지 제작 비용 산정 기준에 정리해 두었습니다.
제작 절차와 단계별 소요 기간
- 기획·구조 설계 — 메뉴 트리, 페이지 목록, 전환 동선 (3~7일)
- 디자인 시안 — 주요 페이지 먼저, PC와 모바일 두 벌 (5~14일)
- 퍼블리싱 — HTML·CSS로 반응형 구현, 브레이크포인트 적용 (5~10일)
- 개발·CMS 연동 — 게시판, 폼, 결제 등 기능 (기능량에 비례)
- 검수 — 실기기 테스트, 링크·폼·속도 점검 (2~5일)
- 오픈·색인 요청 — 서치콘솔 등록, 사이트맵 제출
- 유지보수 — 콘텐츠 추가, 보안 업데이트
발주자가 준비물을 늦게 주면 2번부터 전부 밀립니다. 착수 전에 메뉴 구성안, 페이지별 원고, 로고·사진 원본, 필요한 기능 목록 네 가지는 미리 모아 두세요. 방식별 일정 차이는 홈페이지 제작 기간별 일정 정리에서 더 자세히 비교했습니다.
모바일에서 확인할 7가지 — 각 항목의 합격 기준
오픈 직전, 실제 휴대폰과 크롬 개발자도구 기기 모드 두 가지로 확인합니다. 항목마다 "왜 보는지 → 어떻게 보는지 → 합격선" 순으로 정리했습니다.
1. 가로 스크롤
왜: 화면을 좌우로 밀어야 하는 순간 사용자는 읽기를 멈춥니다. 고정 폭 표, 폭을 지정한 이미지, 긴 영문 URL이 주범입니다.
확인: 실기기에서 각 페이지를 끝까지 내리며 좌우로 밀어 봅니다. 개발자도구에서는 기기 모드로 폭 360px을 설정합니다.
합격: 모든 페이지에서 가로 스크롤 0회. 표는 가로 스크롤 가능한 영역으로 감싸거나 카드형으로 재배치합니다.
2. 글자 크기와 줄 간격
왜: 확대해야 읽히는 본문은 체류 시간을 깎습니다.
확인: 개발자도구에서 본문 단락의 계산된 font-size를 확인합니다.
합격: 본문 16px 이상, 줄 높이 1.5 이상. 각주·캡션도 13px 아래로 내려가지 않게 합니다.
3. 터치 영역과 간격
왜: 버튼이 작으면 옆 링크가 눌립니다. 메뉴와 전화 버튼처럼 전환에 직결된 요소일수록 치명적입니다.
확인: 개발자도구에서 요소를 선택해 실제 박스 크기를 봅니다.
합격: 터치 가능한 요소는 가로세로 44px 이상, 인접 요소와 8px 이상 간격.
4. viewport 설정과 브레이크포인트
왜: viewport 메타태그가 없으면 브라우저가 PC 화면을 통째로 축소해 보여 줍니다. 미디어쿼리를 아무리 써도 소용이 없습니다.
확인: 페이지 소스에서 viewport 메타태그가 있는지, width=device-width가 들어가 있는지 봅니다.
합격: 모든 페이지에 viewport 설정 존재. 브레이크포인트는 기기 이름이 아니라 레이아웃이 깨지는 폭을 기준으로 잡습니다(대략 360·768·1024·1280).
5. 이미지 대응과 전송 용량
왜: 모바일에서 2,000px 원본을 그대로 내려받으면 데이터와 시간이 그대로 소모됩니다. 빌더·템플릿 제작물에서 가장 자주 나오는 결함입니다.
확인: 개발자도구 네트워크 탭에서 캐시를 비우고 새로고침해 총 전송량과 요청 수를 봅니다. 대응 방법은 MDN의 반응형 이미지 가이드에 srcset·sizes·picture 사용법이 정리돼 있습니다.
합격 기준의 감을 잡으려면 실측값이 필요합니다. 백링크하이 사이트는 휴대폰으로 한 페이지를 열 때 실제로 388~477KB를 내려받고, 서버에 30번 안팎 요청하며, 화면이 다 그려지기까지 0.9~1.1초가 걸립니다(2026년 8월 25일, 아이폰13 규격 실제 브라우저 자동화 측정). 홈 388KB, 서비스 소개 390KB, 홈페이지 제작 안내 388KB, 가이드 목록 477KB였습니다. 이미지가 많은 페이지라도 1MB를 크게 넘긴다면 원본 그대로 올라가고 있는지부터 의심하세요.
6. 체감 속도 지표와 서버 응답
왜: 반응형으로 잘 짜 놓아도 서버 첫 응답이 느리면 모바일 체감은 무너집니다. 구글은 Core Web Vitals로 로딩(LCP), 반응성(INP), 시각적 안정성(CLS)을 함께 봅니다.
확인: 실제 휴대폰에서 3G 제한을 걸고 열어 보고, 서치콘솔의 Core Web Vitals 보고서로 실사용자 데이터를 확인합니다.
참고로 백링크하이는 자사 사이트를 직접 개발해 운영하며 주요 페이지의 첫 응답 시간을 서버에서 직접 측정합니다. 2026년 8월 25일 측정에서 홈 0.010초, 서비스 소개 0.006초, 홈페이지 제작 안내 0.006초, 회사 소개 0.004초였고 가장 느린 페이지도 0.091초였습니다. 페이지를 미리 만들어 두고 재사용하는 정적 생성 방식을 쓰기 때문입니다.
합격: CLS는 글꼴 교체·광고 삽입으로 글이 밀리지 않을 것, 이미지에 width·height 지정. 팝업으로 본문을 가리는 전면 광고는 모바일에서 특히 불리합니다.
7. 자바스크립트를 꺼도 본문이 남는가
왜: 모바일 화면이 스크립트로만 그려지면, 크롤링 시점에 본문이 빈 페이지로 읽힐 수 있습니다.
확인: 브라우저에서 자바스크립트를 끄고 페이지를 연 뒤 본문이 남는지 봅니다. 서치콘솔 URL 검사의 렌더링된 HTML도 함께 확인합니다.
백링크하이 사이트는 스크립트를 전부 제거한 뒤 남은 글자 수를 세어 확인했습니다 — 홈 3,858자, 서비스 소개 10,973자, 홈페이지 제작 안내 9,721자, 광고대행 안내 8,509자, 회사 소개 9,111자(2026년 8월 25일 측정). 검색 로봇이 자바스크립트를 실행하지 못하는 상황에서도 내용이 읽힌다는 뜻입니다.
합격: JS를 끈 상태에서 제목·본문·내부 링크가 그대로 보일 것.
기존 사이트를 반응형으로 전환할 때 유입을 지키는 법
리뉴얼에서 가장 흔한 실패는 디자인이 아니라 주소입니다. 기존 URL이 사라지면 그동안 쌓인 검색 유입도 함께 사라집니다.
- 현행 분석 — 서치콘솔 실적 보고서에서 유입이 있는 URL을 전부 뽑습니다
- 대응표 작성 — 옛 주소마다 새 주소를 1:1로 지정합니다. 대응할 페이지가 없으면 가장 가까운 상위 페이지로 보냅니다
- 리다이렉트 구현 — 301로, 중간 경유 없이 한 번에 도착(1홉) 하게 설정합니다
- 검증 — 옛 주소를 직접 열어 최종 도착지와 응답 코드를 확인합니다
- 사이트맵 제출과 재크롤링 요청
백링크하이도 자사 사이트를 새로 만들면서 옛 주소 44건을 새 주소로 이어지도록 대응표를 만들어 옮겼습니다. 이때 중간에 한 번 더 거치지 않고 한 번에 도착하도록 만들었습니다. 두 번 이상 거치면 원래 주소가 쌓아 둔 신호가 희석되고 속도도 느려집니다. 구체적인 처리 방식은 리디렉션 및 Google 검색 문서를 기준으로 삼으면 됩니다.
리뉴얼 견적을 받을 때 "기존 URL 대응표를 만들어 주시나요"를 반드시 물어보세요. 이 한 줄이 견적서에 없으면 오픈 다음 달 유입이 떨어져도 책임 소재가 불분명해집니다.
오픈 전 모바일 검수 체크리스트
백링크하이는 사이트를 넘기기 전에 40가지 항목을 도구로 자동 점검합니다. 글꼴이 실제로 적용됐는지, 글자와 배경의 명도 대비가 접근성 기준(WCAG AA)을 넘는지, 메뉴가 실제로 동작하는지, 파비콘·미리보기 이미지(OG)가 제대로 나오는지, 구조화 데이터에 오류가 없는지, 깨진 링크가 없는지, 주소 이전(리다이렉트)이 한 번에 끝나는지, 이미지가 실제로 그려지는지, 가로 스크롤이 생기지 않는지, 문의 폼이 되돌아온 방문자에게도 동작하는지 등입니다.
발주자 입장에서 그대로 요구할 수 있게 항목을 추렸습니다.
- [ ] 모든 페이지 가로 스크롤 없음(폭 360px 기준)
- [ ] 본문 글자 16px 이상, 링크·버튼 터치 영역 44px 이상
- [ ] viewport 메타태그 전 페이지 적용
- [ ] 모바일 메뉴 열림·닫힘·하위메뉴 동작
- [ ] 이미지 전 항목 렌더링 확인(깨짐·빈 칸 없음), 모바일용 크기 제공
- [ ] 문의 폼 전송 성공 및 재방문 상태에서도 동작
- [ ] 글자·배경 명도 대비 WCAG AA 충족
- [ ] 내부 링크 깨짐 0건
- [ ] 옛 주소 → 새 주소 1홉 리다이렉트 전수 확인
- [ ] 파비콘·공유 미리보기 이미지 정상 노출
- [ ] 자바스크립트 비활성 상태에서 본문 노출
- [ ] 사이트맵 제출 및 색인 요청 완료
공공·기관 사이트라면 여기에 웹접근성 요건이 더해집니다. 장애인차별금지법 제21조가 정보통신 접근의 정당한 편의 제공을 규정하고 있어, 적용 대상이라면 기획 단계부터 반영해야 비용이 덜 듭니다.
견적 요청할 때 물어볼 질문
- 모바일 실기기 테스트는 어떤 기기로, 몇 종에서 하나요
- 이미지는 모바일용 크기를 따로 생성하나요
- 소스 코드와 디자인 원본의 소유권은 누구에게 있나요
- 무상 수정 기간과 이후 수정 단가는 어떻게 되나요
- 호스팅·보안 업데이트는 유지보수에 포함되나요
- (리뉴얼이라면) 기존 URL 대응표와 리다이렉트 작업이 포함되나요
답변을 구두로 듣지 말고 견적서에 문장으로 넣어 달라고 하세요. 업체 비교 기준은 홈페이지 제작 업체 선택 9가지 점검에 따로 정리해 두었습니다.
자주 묻는 질문
반응형이면 SEO가 자동으로 되나요
아닙니다. 반응형은 구조적 전제일 뿐입니다. 제목·설명, 사이트맵, 내부 링크, 콘텐츠 품질은 별개로 작업해야 합니다. 반응형은 그 작업이 분산되지 않게 해 주는 바탕입니다.
웹빌더로 만들어도 괜찮나요
페이지 수가 적고 기능이 단순하면 충분합니다. 다만 이미지 용량, 템플릿이 자동 생성하는 메타 정보, 제목 태그 구조는 손을 봐야 합니다.
제작 기간은 얼마나 걸리나요
빌더 1~2주, 워드프레스 3~6주, 커스텀 디자인+CMS 6~10주, 자체 개발 2~3개월 이상이 백링크하이 실제 진행 건 기준 범위입니다. 원고가 늦으면 전 일정이 밀립니다.
적응형이나 m.도메인을 이미 쓰고 있으면 바꿔야 하나요
당장 성과가 나오고 있다면 급하지 않습니다. 다만 개편 시점이 오면 반응형으로 합치는 쪽이 이후 관리 비용이 낮습니다. 이때 URL 통합과 리다이렉트 계획이 핵심입니다.
반응형 홈페이지를 모바일 점검 기준과 검색 구조까지 맞춰 만들고 싶다면 SEO 되는 홈페이지 제작 안내에서 진행 방식과 포함 범위를 확인해 보세요.
