반응형 홈페이지는 화면 크기별로 사이트를 여러 벌 만드는 방식이 아닙니다. 한 벌로 만들어 두고, 보는 사람의 화면 가로 폭에 따라 배치만 바뀌게 하는 방식입니다. 그래서 제작 방식을 고를 때 실제로 갈리는 지점은 디자인이 아니라, 문구 하나를 고쳤을 때 PC와 모바일에 한꺼번에 반영되는 구조인가 하는 점입니다.
핵심 요약
- 반응형은 사이트를 두 벌 만드는 것이 아니라 한 벌을 접었다 펴는 방식입니다.
- 한국은 접속의 절반 이상이 아직 PC이고, 검색 색인은 모바일 화면 기준이라 한쪽만 맞추면 나머지를 잃습니다.
- 제작 방식은 다섯 가지로 나뉘며, 차이는 완성도보다 수정할 때 손대는 곳이 한 벌인가 두 벌인가에서 벌어집니다.
- 화면 기준선은 보통 576px부터 1400px 사이에 두세 개만 잡아도 충분합니다.
PC에서 잘 보이는 사이트와 모바일에서 잘 보이는 사이트, 어느 쪽을 먼저 맞춰야 할까요?
질문부터가 모순이 있는 질문입니다. 두 화면은 서로 다른 사람이 보는 것이 아니라, 같은 사람이 상황에 따라 바꿔 드는 화면이기 때문입니다.
숫자를 보면 더 분명해집니다. 스탯카운터 집계(2026년 8월)에서 한국의 웹 접속은 데스크톱 62.09%, 모바일 37.91%였습니다. 같은 달 전 세계 수치는 모바일 49.36%, 데스크톱 49.11%, 태블릿 1.54%로 거의 반반이었습니다. 한국은 오히려 PC 비중이 높은 편입니다. 모바일만 신경 쓰면 된다는 말이 한국에서는 절반만 맞는 셈입니다.
반대쪽도 있습니다. 구글은 2023년 10월 공식 블로그에서 모바일 우선 색인 전환이 끝났다고 알렸습니다. 검색 로봇이 읽어 가는 화면은 모바일 화면입니다. 방문은 PC가 더 많은데, 검색에 들어가는 자료는 모바일 화면에서 뽑힙니다.
그래서 고를 것은 화면이 아닙니다. “먼저 맞출 화면을 고르는 대신, 한 번 고치면 양쪽에 같이 반영되는 구조를 고르면 됩니다.”
반응형 홈페이지 제작이란 무엇인가요?
하나의 HTML과 하나의 CSS로 만들어 두고, 화면 폭이 어느 지점을 넘어가면 배치를 바꾸도록 규칙을 적어 두는 방식입니다. 가로로 세 칸이던 메뉴가 좁은 화면에서는 세로로 쌓이고, 두 단으로 나뉘던 본문이 한 단으로 합쳐지는 식입니다.
마치 손님 수에 따라 펼쳤다 접었다 하는 식탁과 같습니다. 식탁을 두 개 사서 하나는 창고에 두는 방식이 아니라, 한 개를 놓고 필요할 때 날개를 펴는 방식입니다. 식탁보를 바꾸고 싶을 때 한 장만 사면 된다는 점이 실제 차이입니다.
배치가 바뀌는 지점을 기준선이라고 부릅니다. 많이 쓰이는 부트스트랩 5.3 공식 문서의 기준선은 아래와 같습니다.
| 기준선 이름 | 최소 가로 폭 | 대체로 해당하는 화면 |
|---|---|---|
| sm | 576px | 가로로 돌린 스마트폰 |
| md | 768px | 태블릿 세로 화면 |
| lg | 992px | 작은 노트북 |
| xl | 1200px | 일반 데스크톱 모니터 |
| xxl | 1400px | 폭이 넓은 모니터 |
확인 기준 : 2026년 9월, 부트스트랩 5.3 공식 문서
다섯 개를 다 쓰라는 뜻은 아닙니다. 한 장짜리 소개 페이지라면 768px과 1200px 두 곳만 나눠도 대부분 해결됩니다. 기준선을 늘릴수록 나중에 확인할 화면도 같이 늘어납니다.
모바일에서 깨져 보일 때 실제로 어긋난 것 4가지
모바일에서 이상하다는 느낌은 대체로 네 가지 중 하나입니다. 원인을 알면 고칠 곳이 한 군데로 좁혀집니다.
- 가로 스크롤이 생깁니다. 폭이 숫자로 고정된 이미지나 표가 화면보다 넓을 때 나타납니다.
- 글자가 작아 손가락으로 확대하게 됩니다. 본문 글자를 PC 기준으로만 잡아 둔 경우입니다.
- 버튼이 서로 붙어 옆 것이 눌립니다. 크롬에 들어 있는 라이트하우스 점검 기준으로 48×48px 이상이면 이 항목에서 걸리지 않고, 항목 사이 간격은 8px이 시작점이라고 구글 공식 문서에 적혀 있습니다.
- PC에서는 보이던 안내가 모바일에서만 사라집니다. 좁은 화면에서 숨기도록 처리한 영역이 있는 경우이며, 검색 쪽에서는 없는 내용으로 읽힐 수 있습니다.
1. 템플릿 기반 빌더
업종별 템플릿을 고른 뒤 문구와 사진만 바꾸는 방식입니다. 반응형 규칙이 템플릿 안에 이미 들어 있어 기준선을 직접 다룰 일이 거의 없습니다. 문을 열 날짜가 정해져 있고 페이지가 다섯 장 안쪽이면 맞는 방식입니다. 주의점은 템플릿이 정해 놓은 배치를 크게 벗어나기 어렵다는 점입니다.
2. 대화로 만들어 정적 파일로 배포하는 방식
AI에게 원하는 화면을 말해 HTML을 만들고, 그 파일을 그대로 올려 공개하는 방식입니다. 만들어진 결과물이 HTML과 CSS 한 벌이라 PC와 모바일이 같은 파일을 씁니다. 배치를 자유롭게 잡고 싶지만 코드를 직접 만지기는 어려운 경우에 맞습니다. 주의점은 처음 나온 화면이 좁은 폭에서 어떻게 접히는지 직접 확인해야 한다는 점입니다. 아이비전트의 AI 호스팅도 이 방식이며, 다른 도구로 만든 정적 사이트를 ZIP으로 올려 배포하는 것도 같은 범주입니다.
3. 설치형 테마를 쓰는 방식
워드프레스처럼 프로그램을 서버에 설치하고 테마를 입히는 방식입니다. 확장이 넓고 게시판·회원 기능을 붙이기 쉽습니다. 글을 꾸준히 쌓아 갈 계획이면 잘 맞습니다. 주의점은 테마와 플러그인이 각자 반응형 규칙을 갖고 있어, 하나를 바꾸면 다른 쪽 화면이 틀어지는 일이 생긴다는 점입니다. 업데이트를 누가 볼지 미리 정해 두셔야 합니다.
4. HTML과 CSS를 직접 쓰는 방식
기준선과 배치 규칙을 처음부터 직접 적는 방식입니다. 원하는 대로 나오고 불필요한 코드가 붙지 않습니다. 화면 디자인이 이미 정해져 있고 그대로 구현해야 하는 경우에 맞습니다. 주의점은 수정할 때마다 같은 사람이 필요하다는 점입니다. 만드는 시간보다 고치는 시간이 길어지는 쪽입니다.
5. PC용과 모바일용을 따로 만드는 방식
주소를 나눠 모바일 방문자를 별도 페이지로 보내는 방식입니다. 각 화면에 딱 맞는 배치를 만들 수 있다는 장점이 있습니다. 다만 문구 한 줄을 고칠 때 두 벌을 모두 고쳐야 하고, 한쪽만 고친 채 잊으면 그때부터 두 사이트가 서로 다른 말을 하게 됩니다. 검색 색인이 모바일 화면 기준이므로 모바일 쪽 내용이 줄어 있으면 그것이 기준이 됩니다. 기능이 완전히 다른 서비스가 아니라면 지금은 권할 만한 방식이 아닙니다.
고르기 전에 확인하는 순서 4단계
어떤 방식으로 가든, 결정 전에 아래 순서대로 한 번만 확인해 보시면 판단이 빨라집니다.
- 후보 서비스로 만든 실제 사이트를 열고, PC 브라우저 창 폭을 손으로 줄여 봅니다. 배치가 언제 바뀌는지, 가로 스크롤이 생기는지 바로 보입니다.
- 같은 주소를 휴대폰에서 열어 메뉴와 문의 버튼을 손가락으로 눌러 봅니다. 옆 항목이 같이 눌리면 간격 문제입니다.
- 문구 한 줄을 고칠 수 있는 화면이 몇 개인지 셉니다. 한 곳에서 고쳐 양쪽에 반영되면 한 벌, 각각 고쳐야 하면 두 벌입니다.
- 고친 것을 되돌릴 방법이 있는지 확인합니다. 되돌리기가 없으면 확인하기 전에는 손대기 어려워집니다.
만든 뒤에 더 자주 겪는 일
반응형에서 실제로 시간을 잡아먹는 쪽은 처음 제작이 아니라 공개 후 수정입니다. 여름에 만든 배너를 가을에 바꾸고, 전화번호가 바뀌고, 사진 한 장을 갈아 끼우는 일이 계속 생깁니다. 이때 두 벌을 관리하고 있으면 작업이 그대로 두 배가 됩니다.
아이비전트 요금제를 기준으로 말씀드리면, 모든 요금제에서 대화로 생성·화면에서 바로 편집·ZIP 업로드 배포·무료 SSL 자동 발급·방문자 분석·배포 이력 되돌리기·문의 폼을 쓸 수 있습니다. 배치를 고치다 화면이 틀어져도 이전 배포로 되돌릴 수 있다는 점이 수정이 잦은 사이트에서는 실질적인 차이가 됩니다. 커스텀 도메인 연결과 광고 배너 제거는 월 3,300원(VAT 포함) 베이직부터이고, SEO·GEO·AEO 진단은 스탠다드부터 월 5회·100쪽, 프리미엄은 월 10회·200쪽입니다. 시작 전 14일 무료체험이 있으니 위 4단계를 직접 해보고 판단하시면 됩니다.
결론 — 화면을 고르지 말고 구조를 고르면 됩니다
한국에서는 아직 PC로 보는 사람이 더 많고, 검색은 모바일 화면을 읽습니다. 그래서 어느 화면을 우선할지 정하는 일은 의미가 크지 않습니다. 목적을 먼저 정하고, 그 목적에 필요한 수정이 몇 번쯤 생길지를 기준으로 위 다섯 가지 중에서 고르시면 됩니다. 페이지가 적고 자주 안 고칠 것이라면 템플릿 쪽이, 문구와 배치를 계속 손볼 것이라면 한 벌로 유지되는 쪽이 편합니다.
정적 사이트를 한 벌로 만들어 공개하는 방식이 궁금하시면 비전트 AI 호스팅 안내에서 제공 범위를 확인하실 수 있습니다.
확인 기준 : 2026년 9월
