반응형 홈페이지는 PC 화면을 먼저 완성한 뒤 폰에 맞추는 것보다, 폰 화면을 먼저 만들고 PC로 넓히는 순서가 손이 덜 갑니다. 좁은 화면에서 먼저 추려 놓으면 넓힐 때는 여백과 단 수만 늘리면 되지만, 반대로 하면 이미 채워 넣은 요소를 어디에 숨기고 어디로 접을지부터 다시 정해야 하기 때문입니다.
핵심 요약
- 폰 화면을 먼저 만들고 태블릿, PC 순으로 넓히면 다시 만드는 구간이 줄어듭니다.
- 구글은 모바일 버전 페이지를 기준으로 색인하므로 PC에만 있는 내용은 검색에서 빠질 수 있습니다.
- 국내는 데스크톱 조회 비중이 세계 평균보다 높아, 폰만 확인하고 끝내면 안 됩니다.
- 화면 확인 도구는 브라우저에 이미 들어 있어 별도 비용이 들지 않습니다.
폰부터 만들되 PC를 버리면 안 되는 이유
스탯카운터(Statcounter Global Stats) 집계를 보면 2026년 7월 전 세계 웹 조회에서 모바일이 52.61%, 데스크톱이 45.89%, 태블릿이 1.5%였습니다. 그런데 같은 기간 한국만 떼어 보면 순서가 뒤집힙니다. 데스크톱 61.24%, 모바일 37.84%, 태블릿 0.92%입니다.
| 기기 | 전 세계 | 한국 |
|---|---|---|
| 모바일 | 52.61% | 37.84% |
| 데스크톱 | 45.89% | 61.24% |
| 태블릿 | 1.5% | 0.92% |
확인 기준 : 2026년 9월 (수치는 스탯카운터 2026년 7월 집계)
이 두 줄의 숫자가 알려 주는 결론은 하나입니다. 만드는 순서는 폰이 먼저지만, 국내 방문자를 상대하는 사이트라면 데스크톱 화면을 덤으로 취급하면 안 된다는 것입니다. 폰에서 예쁘게 접히는 대신 PC에서 글자가 화면 끝까지 늘어지는 사이트는 국내에서 손해가 더 큽니다.
검색 쪽 사정은 반대 방향입니다. 구글 검색 공식 문서는 사이트의 모바일 버전 콘텐츠를 스마트폰 크롤러로 수집해 색인과 순위에 사용한다고 밝히고 있습니다. 같은 문서는 모바일 페이지의 내용이 데스크톱보다 적으면 트래픽 손실을 예상할 수 있다고 적었고, 구현과 관리가 가장 쉽다는 이유로 반응형 웹 디자인을 권장한다고 명시하고 있습니다. 정리하면 검색은 폰 화면을 보고, 국내 방문자의 다수는 PC 화면을 봅니다. 양쪽을 한 벌로 만드는 것이 반응형이고, 그래서 순서가 중요해집니다.
1단계 폰 화면에 남길 것을 먼저 고릅니다
폰은 한 번에 보이는 영역이 좁습니다. 그래서 처음 만들 때는 무엇을 넣을지가 아니라 무엇을 빼도 되는지를 먼저 정합니다. 첫 화면에서 방문자가 알아야 할 것은 대체로 네 가지입니다.
- 여기가 어떤 곳인지 한 줄로 알려 주는 문장
- 어디에 있고 언제 여는지 같은 기본 정보
- 전화, 예약, 문의처럼 바로 누를 수 있는 버튼 하나
- 분위기를 보여 주는 사진 한 장
이 네 가지가 스크롤 없이 보이면 폰 화면은 절반쯤 끝난 것입니다. 회사 소개 문단, 연혁, 배너 여러 장은 아래로 내립니다. 여기서 미리 덜어 두지 않으면 나중에 PC 화면을 만들 때가 아니라, 폰에서 무엇을 접을지 정할 때마다 계속 발목이 잡힙니다.
2단계 가로로 나란히 두지 말고 세로로 쌓습니다
PC에서 세 칸으로 나뉘어 있던 영역을 폰에서 그대로 세 칸으로 두면 글자가 잘리거나 사진이 우표만 해집니다. 폰에서는 한 줄에 하나씩, 위에서 아래로 쌓는 것을 기본으로 잡습니다. 표도 같습니다. 칸이 네 개를 넘는 표는 폰에서 가로로 밀어야 읽히므로, 항목마다 한 덩어리로 풀어 쓰는 편이 낫습니다.
글자 크기와 버튼 간격도 이 단계에서 정합니다. 폰에서 본문을 읽다가 손가락으로 확대해야 한다면 그 글자는 작은 것입니다. 버튼은 손가락 끝으로 눌러도 옆 버튼이 같이 눌리지 않을 만큼 떨어뜨립니다. 이 두 가지는 PC 화면에서는 티가 나지 않다가 폰에서만 문제가 되는 항목이라, 폰을 먼저 만들 때 잡는 것이 순서상 맞습니다.
3단계 태블릿 폭에서 두 단으로 벌립니다
폰 화면이 끝나면 화면 폭을 조금씩 넓히면서 어디서 어색해지는지 봅니다. 한 줄에 하나씩 쌓아 둔 카드가 지나치게 길쭉해지는 지점이 오는데, 그 지점이 두 단으로 벌릴 자리입니다. 기준점 숫자를 먼저 정해 놓고 거기에 맞추는 것보다, 화면이 어색해지는 지점을 찾아 기준을 잡는 편이 결과가 낫습니다.
이 구간에서 메뉴 처리도 정합니다. 폰에서 접어 두었던 메뉴를 언제부터 펼쳐 보여 줄지, 메뉴 항목이 많다면 어디까지 줄일지를 여기서 결정하면 PC 폭으로 넘어갈 때 다시 손댈 일이 없습니다.
4단계 PC 폭에서는 여백과 최대 너비를 정합니다
PC 화면에서 흔한 실수는 본문을 화면 끝까지 늘어뜨리는 것입니다. 한 줄이 길어지면 눈이 다음 줄 첫 글자를 찾기 어려워 읽다가 놓칩니다. 본문 영역에 최대 너비를 두고 양옆을 비우면 폭이 넓은 모니터에서도 읽는 느낌이 유지됩니다.
앞에서 본 국내 데스크톱 비중을 생각하면 이 단계를 대충 넘기면 안 됩니다. 폰 화면만 다듬고 PC는 자동으로 늘어나게 두면, 국내 방문자 다수가 보는 화면이 가장 허술한 상태로 남습니다.
5단계 실제 기기로 마지막에 확인합니다
크롬 개발자도구 공식 문서는 기기 모드를 두고 실제 기기에서 어떻게 보이고 느껴지는지에 대한 1차 근사치로 생각하라고 적고 있습니다. 모바일 기기의 처리 성능까지 그대로 흉내 내지는 못하기 때문에, 정확한 확인은 실제 기기에서 하라고 안내합니다. 마지막 점검은 손에 있는 폰으로 합니다. 안드로이드 한 대, 아이폰 한 대면 대부분의 문제가 걸립니다.
확인할 것은 화면만이 아닙니다. 전화 버튼이 실제로 전화 앱을 여는지, 지도 링크가 지도 앱으로 넘어가는지, 문의 폼에서 키보드가 올라올 때 입력창이 가려지지 않는지처럼 손으로 만져야 알 수 있는 것들이 있습니다.
폰 화면을 무료로 확인하는 도구 5가지
- 크롬 개발자도구 기기 모드 - 브라우저에 기본으로 들어 있습니다. 폭을 끌어 바꿔 가며 어느 지점에서 배치가 깨지는지 찾을 때 씁니다.
- 파이어폭스 반응형 디자인 모드 - 크롬과 다른 렌더링 엔진에서 어떻게 보이는지 교차 확인하고 싶을 때 씁니다.
- 사파리 웹 개발자 도구 - 맥이 있고 아이폰에서만 나는 증상을 잡아야 할 때 씁니다.
- 구글 서치 콘솔 URL 검사 - 구글이 실제로 수집해 간 화면이 어떤 모습인지 볼 때 씁니다. 내 브라우저에서는 보이는데 검색에는 안 잡히는 경우에 쓸모가 있습니다.
- 실제 폰 두 대 - 누르는 감각, 글자 크기, 스크롤 걸림처럼 도구로는 안 잡히는 것을 볼 때 씁니다. 마지막 관문은 항상 이쪽입니다.
다섯 가지 모두 따로 결제할 것이 없습니다. 반응형 확인 때문에 유료 도구를 먼저 알아볼 필요는 없다는 뜻입니다.
이런 경우엔 이렇게 3가지
- 이미 PC 화면만 있는 사이트라면 - 전부 다시 만들기보다 첫 화면과 문의 경로부터 폰에 맞춥니다. 방문자가 폰에서 이탈하는 지점은 대부분 이 두 곳입니다.
- 사진이 많은 업종이라면 - 폰에서는 가로로 넘기는 갤러리보다 세로로 이어지는 사진이 덜 답답합니다. 원본을 그대로 올리지 말고 크기를 줄여 올립니다.
- 당장 폰에서 열어 보는 것이 급하다면 - 도메인을 먼저 사지 말고 임시 주소로 올려 확인합니다. 아이비전트 AI 호스팅은 결제 즉시 xxx.ibigent.com 형태의 주소가 하나 나오고 무료 SSL이 자동 발급되며 14일 무료체험이 있어, 주소를 정하기 전에 폰에서 먼저 확인해 볼 수 있습니다.
반응형 홈페이지 제작, 꼭 폰부터 만들어야 하나요?
반드시 그래야 하는 규칙은 아니지만, 고쳐야 하는 횟수로 보면 폰이 먼저인 쪽이 유리합니다. 좁은 화면에서 살아남은 요소만 넓은 화면으로 옮기면 되기 때문입니다. 예외는 사내 업무용 화면이나 자료를 넓게 펼쳐 봐야 하는 페이지처럼 데스크톱에서만 쓰이는 사이트인데, 이때도 폰에서 최소한 내용이 읽히기는 해야 합니다.
PC용과 모바일용 사이트를 따로 만들면 안 되나요?
만들 수는 있지만 관리가 두 배가 됩니다. 내용을 고칠 때마다 양쪽을 맞춰야 하고, 한쪽에만 있는 내용이 생기면 검색 쪽에서 손해를 봅니다. 구글 문서가 반응형을 권장하는 이유도 성능이 아니라 구현과 유지가 가장 쉽다는 점이었습니다. 사람 손이 적을수록 반응형 한 벌이 유리합니다.
순서를 지키면 줄어드는 작업
반응형에서 시간을 잡아먹는 일은 새로 만드는 작업이 아니라 이미 만든 것을 다시 접는 작업입니다. 폰 화면에서 남길 것을 먼저 고르고, 세로로 쌓고, 폭을 넓히며 두 단으로 벌리고, PC에서 여백을 잡고, 마지막에 실제 기기로 확인하는 다섯 단계는 그 되돌아가는 구간을 줄이기 위한 순서입니다. 화면을 말로 만들어 보고 싶다면 대화로 화면을 만들고 고치는 IBIGENT AI로 첫 화면을 잡아 본 뒤, 위 순서대로 폰과 PC를 맞춰 나가면 됩니다.
확인 기준 : 2026년 9월
