반응형 홈페이지 제작, 데스크톱에서 먼저 만들면 모바일이 깨집니다

반응형 홈페이지 제작은 PC용과 모바일용을 따로 만드는 일이 아닙니다. 주소 하나와 내용 한 벌을 그대로 두고, 보는 화면 폭에 따라 배치만 바뀌게 만드는 일입니다. 그래서 만드는 순서가 결과를 가릅니다. 데스크톱 화면을 먼저 완성해 놓고 나중에 모바일을 손보면, 이미 고정해 둔 폭 숫자와 사진 비율 때문에 글자가 잘리고 버튼이 겹칩니다. 모바일 폭에서 먼저 내용 순서를 잡고 넓은 화면을 채우는 쪽이 고칠 일이 훨씬 적습니다.

핵심 요약

• 반응형은 주소 1개·HTML 1벌로 가는 방식입니다. 화면마다 다른 사이트를 만드는 방식이 아닙니다.
• 구글은 모바일 화면을 기준으로 내용을 읽어 갑니다. 모바일에서 숨긴 글은 검색에서도 없는 글이 됩니다.
• 손가락으로 눌리는 버튼의 최소 치수는 가로세로 48dp(약 9mm)입니다. 이 숫자를 먼저 정하면 메뉴와 전화 버튼이 겹치지 않습니다.
• 한국은 PC와 모바일 방문이 거의 반반입니다. 한쪽을 버리는 선택이 아니라 한 벌로 양쪽을 맞추는 문제입니다.

반응형 홈페이지 제작이란 무엇인가요?

하나의 주소, 하나의 HTML 파일로 PC·태블릿·휴대폰을 전부 받는 방식입니다. 글과 사진은 한 벌만 두고, 화면이 좁아지면 가로로 놓였던 칸이 세로로 내려오고 글자 크기와 여백이 줄어듭니다. 내용을 고칠 때 한 곳만 고치면 모든 화면에 같이 반영됩니다.

반대쪽 방식도 있습니다. 모바일 전용 주소를 따로 두고 휴대폰으로 들어오면 그쪽으로 보내는 방식입니다. 예전에는 흔했지만 이제는 관리할 것이 두 배가 됩니다. 글을 한 번 고치면 두 곳을 고쳐야 하고, 제목과 설명문도 두 쌍을 맞춰야 합니다.

구글은 공식 안내에서 반응형 방식을 권하는 이유를 “가장 만들기 쉽고 유지하기 쉬운 형태”라고 적어 두었습니다. 기술이 더 좋아서가 아니라, 손댈 곳이 하나라서 틀어질 일이 적다는 뜻입니다.

PC로 보는 사람이 절반인데, 왜 모바일 화면부터 맞춰야 하나요?

보는 사람과 읽어 가는 쪽이 다르기 때문입니다. 스탯카운터 집계(2026년 9월, 대한민국)로는 데스크톱 51.14%, 모바일 47.83%, 태블릿 1.03% 입니다. 사람 눈으로는 PC가 아직 조금 더 많습니다. 그런데 구글은 2023년 10월에 모바일 우선 색인 전환이 끝났다고 알렸습니다. 지금은 휴대폰 화면을 기준으로 내용을 읽어 가고, 그 내용으로 순위를 정합니다.

그럼 PC 화면과 모바일 화면, 어느 쪽을 먼저 만들어야 할까요? 질문부터가 모순이 있는 질문입니다. 눈으로 보는 사람은 PC가 조금 더 많고, 글을 읽어 가는 쪽은 모바일만 봅니다. 한쪽을 먼저 고르는 순간 나머지 한쪽을 나중에 억지로 끼워 맞추게 됩니다. 그래서 먼저 정할 것은 화면이 아닙니다.

“먼저 정할 것은 어느 화면을 꾸밀지가 아니라, 두 화면에 같은 내용이 들어가는지입니다.”

마치 이사 갈 집에 들어갈 가구를 먼저 사 버리는 것과 같습니다. 큰 방에 맞춰 사 두면 작은 방에서는 문이 안 닫힙니다. 작은 방에 들어가는 치수로 고르면 큰 방에서는 여백이 남을 뿐 쓰는 데 문제가 없습니다. 화면 폭도 같습니다. 좁은 쪽이 기준이 되면 넓은 쪽은 여백으로 해결됩니다.

반응형 한 벌과 모바일 주소를 따로 두는 방식, 무엇이 다른가요?

관리할 개수가 다릅니다. 디자인 취향 문제가 아니라, 나중에 몇 군데를 고쳐야 하는지의 문제입니다.

확인 기준 : 2026년 10월

맨 아랫줄이 핵심입니다. 주소를 두 개로 나눠도 구글이 읽는 쪽은 결국 모바일 한 개입니다. 두 벌을 관리하면서 평가는 한 벌로 받는 구조라, 들인 손이 그대로 값으로 돌아오지 않습니다.

그래서 선택은 이렇게 갈립니다.

1. 글·사진이 자주 바뀌고 혼자 관리한다면 → 반응형 한 벌이 맞습니다. 고칠 곳이 한 곳이라 빠뜨리지 않습니다.
2. 모바일에서만 쓰는 기능이 따로 있다면 → 그 기능만 별도 페이지로 두고, 나머지는 한 벌로 둡니다.
3. 이미 모바일 주소를 따로 두고 운영 중이라면 → 두 쪽의 글이 같은지부터 맞추고, 그다음에 합칠 계획을 세우시면 됩니다.

1. 화면 폭 설정 — 이 한 줄이 없으면 모든 글자가 축소되어 보입니다

휴대폰 브라우저는 기본적으로 넓은 화면인 척하고 페이지를 받습니다. 그래서 문서 앞쪽에 폭을 기기 폭에 맞추고 처음 확대 비율을 1로 둔다는 설정 한 줄이 없으면, PC 화면을 그대로 축소한 모습이 나옵니다. 글자는 개미만 해지고, 손으로 벌려서 확대해야 읽힙니다.

직접 만든 HTML을 올리는 경우에 가장 많이 빠지는 한 줄입니다. 빌더나 템플릿으로 만들면 보통 기본으로 들어 있습니다. 확인하는 방법은 간단합니다. 휴대폰으로 열었을 때 손가락으로 벌리지 않고도 본문이 읽히면 설정이 들어 있는 것입니다.

주의할 점이 있습니다. 확대를 아예 막아 두는 설정을 함께 넣는 경우가 있는데, 눈이 불편한 사람은 그 페이지를 읽을 방법이 없어집니다. 확대는 열어 두시는 편이 좋습니다.

2. 글자와 줄바꿈 — 제목 한 줄이 두 줄로 바뀌는 자리를 미리 정합니다

PC에서 한 줄로 딱 맞던 제목은 모바일에서 거의 두 줄이 됩니다. 문제는 어디서 끊기는지입니다. 회사 이름 가운데가 갈라지거나, 끝 글자 하나만 다음 줄로 내려가면 급하게 만든 느낌이 납니다.

그래서 긴 제목은 처음부터 두 덩어리로 나눠 적어 두는 쪽이 안전합니다. 한 덩어리 안에서는 줄이 갈라지지 않게 묶어 두면, 좁은 화면에서도 읽는 단위가 유지됩니다.

본문은 글자 크기보다 줄 길이가 먼저 눈에 걸립니다. 넓은 화면에서 한 줄이 끝까지 늘어나면 눈이 다음 줄 첫 글자를 못 찾습니다. 본문 영역의 최대 폭을 정해 가운데로 모으고, 남는 공간은 여백으로 두면 양쪽 화면이 다 편해집니다.

3. 버튼 크기 — 눌리는 최소 치수는 48dp입니다

구글 접근성 안내는 눌러야 하는 요소의 가로세로를 최소 48dp로 두라고 적어 두었습니다. 48dp는 화면 크기와 상관없이 실제 약 9mm 정도이고, 손끝이 닿는 크기의 하한선으로 쓰입니다.

이 숫자가 중요한 이유는 디자인이 아니라 오작동 때문입니다. 글자 링크를 여러 개 붙여 놓으면 PC 마우스로는 정확히 눌리지만, 손가락으로는 옆 링크가 눌립니다. 전화 걸려던 사람이 엉뚱한 페이지로 넘어가고, 그 사람은 다시 돌아오지 않습니다.

확인할 것은 세 가지입니다.

1. 버튼이 보이는 크기가 작아도 눌리는 영역은 48dp 이상으로 넓혀 둡니다. 안쪽 여백으로 키우면 모양은 그대로입니다.
2. 버튼끼리 붙어 있으면 사이에 간격을 둡니다. 영역이 겹치면 둘 다 잘못 눌립니다.
3. 전화·문의처럼 중요한 버튼은 한 손으로 닿는 아래쪽에 둡니다.

4. 사진 — 가로로 긴 사진은 모바일에서 가운데만 남습니다

PC 화면 맨 위에 넣는 큰 사진은 보통 가로로 깁니다. 이 사진이 좁은 화면에 들어가면 두 가지 중 하나가 일어납니다. 전체가 축소되어 띠처럼 얇아지거나, 폭을 채우려고 양옆이 잘려 가운데만 남습니다. 사람 얼굴이 사진 왼쪽에 있었다면 모바일에서는 사라집니다.

그래서 중요한 것은 사진의 품질이 아니라 중심입니다. 꼭 보여야 하는 대상을 사진 가운데에 두면 어느 쪽이 잘려도 살아남습니다. 글자가 박힌 사진은 특히 위험합니다. 잘린 글자는 읽히지도 않고 검색에도 걸리지 않습니다. 중요한 문구는 사진 안에 박지 말고 사진 위에 글로 올려 두시는 편이 낫습니다.

구글 안내에는 사진에 대한 조건도 적혀 있습니다. 모바일 쪽에 너무 작거나 해상도가 낮은 사진을 쓰지 말라는 것, 사진 설명문을 PC와 같게 두라는 것, 두 화면에서 같은 사진 주소를 쓰라는 것입니다. 모바일에서만 작은 사진으로 바꿔 끼우면 그 사진은 제대로 평가받지 못합니다.

5. 표와 가격 안내 — 칸이 많은 표는 좁은 화면에서 무너집니다

요금표나 비교표는 칸이 늘어날수록 모바일에서 읽기 어려워집니다. 칸을 억지로 좁히면 숫자가 두 줄로 쪼개지고, 그냥 두면 화면 밖으로 밀립니다.

푸는 방법은 두 가지입니다. 표를 가로로 밀어 볼 수 있게 두는 방법, 그리고 좁은 화면에서는 표를 항목별 카드로 바꿔 쌓는 방법입니다. 가로로 밀 때는 밀 수 있다는 것이 보여야 합니다. 첫 칸만 깔끔하게 보이면 그게 전부라고 생각하고 지나갑니다.

한 가지 더. 표의 값 칸은 되도록 숫자로 채우시는 편이 좋습니다. 제한 있음, 서비스마다 다름 같은 말만 적힌 표는 사람도 못 쓰고 검색 결과에도 쓰이지 않습니다. 숫자를 못 찾은 항목은 그 줄을 빼는 쪽이 낫습니다.

6. 메뉴 — PC의 가로 메뉴를 그대로 접으면 아래 항목이 사라집니다

PC 상단에 가로로 놓인 메뉴는 모바일에서 보통 접히는 메뉴로 바뀝니다. 여기서 두 가지 사고가 자주 납니다. 하위 메뉴가 펼쳐지지 않아 안쪽 페이지로 갈 길이 막히는 경우, 그리고 메뉴를 열었을 때 화면 아래쪽 항목이 잘려 스크롤이 안 되는 경우입니다.

확인 순서는 네 가지입니다.

1. 메뉴를 열고 맨 아래 항목까지 손가락으로 내려가 봅니다.
2. 하위 메뉴가 있는 항목을 눌러 펼쳐 봅니다.
3. 메뉴를 닫고 원래 보던 자리로 돌아오는지 봅니다.
4. 메뉴 안의 항목 간격이 손끝으로 구분되는지 봅니다.

7. 모바일에서 숨긴 내용 — 숨기면 검색에서도 없는 내용이 됩니다

좁은 화면이 답답해 보여서 설명 문단이나 표를 모바일에서 감추는 경우가 있습니다. 이게 반응형 제작에서 가장 비싼 실수입니다. 구글 안내는 모바일 쪽에 데스크톱과 같은 내용이 들어 있어야 한다고 못 박아 두었습니다. 제목과 설명문도 두 화면에서 같아야 하고, 수집을 막는 설정도 같아야 합니다.

즉 PC에만 있는 글은 공들여 써도 값이 되지 않습니다. 모바일 화면이 기준이기 때문입니다. 접어 두는 것과 없애는 것은 다릅니다. 눌러서 펼치는 형태로 접어 두는 것은 괜찮지만, 사람이 눌러야만 비로소 불러오는 방식으로 주요 내용을 두면 읽히지 않습니다. 구글 안내에도 주요 내용을 사용자 동작에 맡겨 뒤늦게 불러오지 말라고 적혀 있습니다.

그러니 모바일이 길어지는 것을 겁내지 않으셔도 됩니다. 길어서 안 읽는 것이 아니라, 순서가 뒤엉켜서 안 읽습니다. 맨 위에 무엇을 둘지만 다시 정하면 됩니다.

반응형 홈페이지 제작 비용과 기간은 얼마나 드나요?

맡기는 방식과 직접 만드는 방식의 값 차이가 큽니다. 업체에 맡기는 제작비는 페이지 수와 기능에 따라 업체마다 다르고, 빌더 구독료도 서비스마다 다릅니다. 확인할 길이 없는 금액을 적는 것보다, 무엇이 값을 올리는지 아는 쪽이 도움이 됩니다.

값을 올리는 항목은 대체로 네 가지입니다.

1. 페이지 수 — 한 장짜리와 열 장짜리는 손이 다릅니다.
2. 게시판·회원가입처럼 저장이 필요한 기능 — 정적 페이지보다 비용이 올라갑니다.
3. 사진·글의 준비 여부 — 글과 사진을 직접 주면 기간이 줄고, 맡기면 늘어납니다.
4. 공개 뒤 수정 — 매번 업체를 불러야 하는 구조면 유지비가 계속 나갑니다.

아이비전트 요금제는 14일 무료체험으로 시작해서 베이직·스탠다드·프리미엄으로 나뉩니다. 요금제마다 달라지는 숫자는 아래와 같습니다. 반응형으로 보이게 만드는 기능 자체는 요금제를 나누지 않고, 공개한 뒤 검색·광고 쪽에서 쓸 수 있는 양이 달라집니다.

확인 기준 : 2026년 10월 (www.ibigent.com/pricing/ 안내 기준)

반응형으로 만드는 순서 — 1단계부터 6단계까지

1단계 모바일 폭에서 내용 순서를 먼저 적습니다

디자인보다 순서가 먼저입니다. 좁은 화면에서는 모든 것이 위에서 아래로 한 줄로 내려옵니다. 그래서 무엇이 첫 화면에 보일지, 두 번째가 무엇인지 종이에 적는 것으로 시작합니다. 보통은 무엇을 하는 곳인지 한 줄, 그다음 연락 방법, 그다음 사례나 메뉴 순서가 무난합니다.

2단계 화면 폭 설정을 확인합니다

휴대폰으로 열어 손가락으로 벌리지 않고 본문이 읽히는지 봅니다. 축소된 PC 화면처럼 보이면 폭 설정이 빠진 상태입니다. 빌더로 만들었다면 보통 들어 있고, 직접 만든 HTML을 올렸다면 여기서 걸립니다.

3단계 제목과 본문의 줄바꿈을 맞춥니다

좁은 폭에서 제목이 어디서 끊기는지 보고, 어색한 자리는 덩어리를 나눠 묶습니다. 본문 영역의 최대 폭도 이때 정합니다.

4단계 눌리는 요소를 48dp 기준으로 키웁니다

메뉴 항목, 전화 링크, 문의 버튼을 하나씩 눌러 봅니다. 옆 것이 눌리면 간격이나 영역이 부족한 것입니다. 전화번호는 글자로만 두지 말고 링크로 걸어 둡니다.

5단계 사진을 두 비율로 준비합니다

맨 위 큰 사진은 가로로 긴 것과 세로로 긴 것, 두 장을 준비하는 쪽이 안전합니다. 한 장으로 가야 한다면 중요한 대상을 가운데로 모읍니다. 사진 설명문은 두 화면에서 같게 둡니다.

6단계 PC 화면을 채우고, 두 화면의 내용이 같은지 맞춰 봅니다

마지막에 넓은 화면을 채웁니다. 여기서 새 글을 추가하고 싶어지는데, 추가하면 모바일에도 같이 들어가야 합니다. PC에만 있는 문단이 생기지 않았는지 확인하고 공개하시면 됩니다.

자주 묻는 질문

모바일에서 글자가 잘리는 건 왜 생기나요?

글자 자체가 잘리는 경우는 대개 폭이 숫자로 고정되어 있기 때문입니다. 칸의 폭을 400처럼 고정해 두면 화면이 그보다 좁아져도 칸은 줄지 않아 바깥으로 밀려 나갑니다. 폭을 비율이나 남는 공간 기준으로 바꾸면 해결됩니다.

가로로 자꾸 밀리는 화면은 어떻게 찾나요?

휴대폰으로 열고 페이지를 왼쪽으로 밀어 봅니다. 밀린다면 어딘가에 화면보다 넓은 요소가 있습니다. 보통 표, 큰 사진, 긴 영문 주소 중 하나입니다. 세 가지를 차례로 지워 보면 범인이 금방 나옵니다.

태블릿용 화면도 따로 만들어야 하나요?

스탯카운터 집계로 태블릿 비중은 1.03%입니다. 보통은 따로 만들지 않고, 모바일과 PC 사이 폭에서 한 번 열어 어색한 데가 없는지만 봅니다.

반응형이면 검색 순위가 올라가나요?

반응형이라서 올라가는 것은 아닙니다. 다만 구글이 모바일 화면을 기준으로 읽기 때문에, 모바일에서 내용이 빠져 있으면 내려갈 수 있습니다. 반응형은 점수를 더 받는 장치가 아니라 깎이지 않게 하는 방식입니다.

모바일에서 사진을 줄여서 올리면 안 되나요?

파일 용량을 줄이는 것은 괜찮습니다. 문제는 모바일 쪽에만 해상도가 낮은 다른 사진을 끼워 넣는 경우입니다. 구글 안내는 두 화면에서 같은 사진 주소를 쓰라고 적어 두었습니다.

만들다가 화면이 망가지면 어떻게 되돌리나요?

직접 서버에 올리는 방식이면 이전 파일을 따로 보관해 두어야 합니다. 아이비전트는 모든 요금제에서 배포 이력 되돌리기를 제공해, 공개된 상태를 이전 배포로 되돌릴 수 있습니다.

아이비전트로 만들면 반응형은 어디까지 되나요?

대화로 화면을 만들고, 만들어진 화면에서 고칠 부분만 골라 바꾸는 방식입니다. 예를 들어 첫 화면 문구를 바꾸고 싶으면 그 문구만 골라 고치면 됩니다. 저장하면 바로 공개 주소에 반영되고, 전용 주소가 먼저 나오기 때문에 도메인을 사기 전에도 휴대폰으로 열어 확인할 수 있습니다.

직접 만든 HTML·CSS·JS 가 이미 있다면 압축해서 올리는 방식도 모든 요금제에서 됩니다. 이때는 화면 폭 설정이 파일 안에 들어 있는지 직접 확인하셔야 합니다. 올리는 쪽은 파일을 그대로 배포하므로, 빠진 설정을 대신 채워 주지는 않습니다.

공개한 뒤에 쓰는 것들도 같은 계정에서 이어집니다. 무료 SSL 자동 발급, 방문자 분석, 배포 이력 되돌리기, 문의 폼은 모든 요금제에 들어 있습니다. 내 도메인 연결과 광고 배너 제거, 광고비 관리와 부정클릭 방지는 베이직부터입니다. 쪽수를 들여다보는 SEO·GEO·AEO 진단은 스탠다드부터 월 5회·100쪽, 프리미엄은 월 10회·200쪽입니다.

한 가지는 분명히 적어 두겠습니다. 저장되는 기능이 필요한 사이트, 즉 게시판이나 회원가입이 있어야 하는 경우는 정적 사이트로는 해결되지 않습니다. 그때는 게시판·회원관리가 들어 있는 빌더 쪽을 보셔야 합니다. 반응형이냐 아니냐보다 먼저 갈리는 지점입니다.

모바일에서 먼저 열어 보고, 같은 내용인지 맞춰 보시면 됩니다

반응형 홈페이지 제작에서 어려운 부분은 기술이 아닙니다. 어느 화면을 기준으로 삼을지 정하지 않고 시작하는 것입니다. 보는 사람은 PC와 모바일이 거의 반반이고, 읽어 가는 쪽은 모바일 하나입니다. 그러니 좁은 쪽에서 순서를 정하고 넓은 쪽을 여백으로 채우는 순서가 손이 덜 갑니다.

공개 전에 휴대폰으로 한 번 열어 세 가지만 보시면 됩니다. 벌리지 않고 읽히는가, 버튼이 옆 것과 겹치지 않는가, PC에 있던 글이 여기에도 있는가. 이 세 가지가 통과하면 나머지는 취향 문제입니다. 목적에 맞는 방식부터 정하고 비교해서 고르시면 됩니다.

직접 만들어 보면서 확인하려면 비전트 AI 호스팅 안내에서 전용 주소로 먼저 공개해 보시면 됩니다.

확인 기준 : 2026년 10월