대부분의 경우 모바일용 홈페이지를 따로 만들 필요는 없습니다. 반응형 홈페이지는 하나의 주소와 하나의 화면 코드가 PC·태블릿·휴대폰의 화면 폭에 맞춰 배치를 바꾸는 방식이라, 한 사이트만 만들어도 여러 기기에서 볼 수 있습니다.
다만 반응형이라는 말만으로 모든 화면이 편해지는 것은 아닙니다. 폭이 좁아질 때 메뉴·사진·표·버튼이 각각 어떻게 바뀔지 정하고, 제작 중에 그 모습을 직접 확인해야 실제로 읽고 누르기 편한 화면이 됩니다.
반응형 홈페이지는 정확히 무엇이 바뀌는 건가요?
바뀌는 것은 내용이 아니라 배치입니다. 구글의 웹 개발 안내서인 web.dev는 반응형 디자인을 기기에 맞춰 사이트의 배치를 바꾸는 방식으로 설명하며, 휴대폰에서는 한 줄로, 넓은 화면에서는 여러 칸으로 보여 주는 예를 듭니다. 화면 크기뿐 아니라 손가락으로 누르는 터치 화면 같은 조작 방식도 함께 고려합니다.
예를 들어 PC에서 서비스 소개 카드 세 개가 가로로 놓여 있다면, 태블릿에서는 두 개씩, 휴대폰에서는 한 개씩 세로로 쌓입니다. 가로로 펼쳐 있던 메뉴는 휴대폰에서 메뉴 버튼 안으로 들어가고, 큰 사진은 화면 폭에 맞춰 줄어듭니다. 문장과 사진, 문의 방법 자체는 같습니다.
이렇게 되려면 화면 코드에 휴대폰 화면 폭을 기준으로 그리라는 설정(뷰포트 설정)이 들어가야 합니다. web.dev는 이 설정이 없으면 휴대폰에서 페이지가 크게 축소된 채 열려, 손가락으로 확대해야 글을 읽을 수 있다고 안내합니다.
모바일 전용 사이트를 따로 만드는 방식과는 무엇이 다른가요?
PC용 사이트와 별도로 'm.'으로 시작하는 모바일 전용 주소를 두는 방식도 있습니다. 구글 검색 센터의 모바일 우선 색인 안내는 모바일 대응 방식을 세 가지로 나눕니다. 같은 주소에서 같은 화면 코드를 보내고 배치만 바꾸는 반응형, 같은 주소에서 기기에 따라 다른 화면 코드를 보내는 방식, 기기마다 다른 주소와 화면 코드를 쓰는 방식입니다.
같은 안내에서 구글은 반응형을 구현하고 유지하기 가장 쉬운 방식이라고 권장합니다. 운영하는 쪽에서 보면 차이는 관리할 사이트가 몇 벌이냐입니다. 모바일 전용 사이트를 따로 두면 가격 안내나 공지 하나를 바꿀 때도 두 곳을 고쳐야 하고, 한쪽만 고치면 PC와 휴대폰에서 다른 내용을 보게 됩니다. 반응형은 한 곳만 고치면 모든 화면에 반영됩니다.
물론 앱처럼 휴대폰에서만 쓰는 기능이 따로 필요하거나, 이미 운영 중인 모바일 전용 사이트가 있는 경우처럼 사정이 다를 수 있습니다. 그런 경우에는 어떤 화면을 어떤 방식으로 만들지 제작 범위를 정할 때 따로 확인합니다.
화면 폭은 휴대폰 기종에 맞춰 정하나요?
그렇지 않습니다. 배치가 바뀌는 지점을 개발에서는 '브레이크포인트'라고 부르는데, web.dev는 이 지점을 특정 기기 종류나 제품·브랜드 이름에 맞추지 말고 내용에 맞춰 정하라고 안내합니다. 기종에 맞춰 나누면 화면 코드를 관리하기 어려워진다는 이유입니다. 새 기종은 계속 나오고 화면 크기도 제각각입니다.
안내서가 권하는 순서는 가장 작은 화면에서 먼저 보기 좋게 만든 뒤, 화면을 조금씩 넓히면서 배치가 어색해지는 지점에서 바꾸는 것입니다. 예를 들어 한 칸으로 쌓인 카드 사이에 빈 공간이 지나치게 커지면 두 칸으로 바꾸는 식입니다. 넓은 화면에서 글 한 줄이 지나치게 길어지면 읽기 어려우므로, 글이 놓이는 폭을 적당히 제한하는 것도 같은 원리입니다.
그래서 제작사와 이야기할 때는 "어떤 기종에 맞추나요"보다 "화면이 좁아지면 이 구간은 어떻게 바뀌나요"를 묻는 편이 실제 화면을 확인하는 데 도움이 됩니다.
제작할 때 폭마다 무엇을 확인해야 하나요?
화면 폭마다 같은 질문을 반복해서 확인하면 빠지는 곳이 줄어듭니다. 시안이나 개발 중인 화면을 볼 때 휴대폰·태블릿·PC에서, 또는 PC 브라우저 창을 좁혔다 넓혔다 하며 아래 여섯 가지를 확인해 보세요.
- 가로로 밀리지 않나요: 사진이나 표가 화면보다 넓으면 화면이 옆으로 밀립니다. web.dev는 사람들이 위아래 스크롤에는 익숙하지만 가로 스크롤은 불편해한다고 설명합니다.
- 확대하지 않고 읽히나요: 휴대폰에서 손가락으로 키우지 않아도 본문을 읽을 수 있는지 봅니다.
- 잘리거나 겹친 곳이 없나요: 제목이 어색하게 끊기거나 글자가 사진·버튼과 겹치지 않는지 봅니다.
- 메뉴를 열고 닫을 수 있나요: 메뉴 버튼 안으로 들어간 메뉴가 모두 보이고, 원하는 페이지로 이동하는지 확인합니다.
- 버튼과 링크가 누르기 편한가요: 손가락으로 누를 때 옆 링크가 함께 눌리지 않는지, 전화 버튼이 실제로 전화 연결로 이어지는지 봅니다.
- 표와 긴 사진은 어떻게 보이나요: 가격표나 비교표처럼 칸이 많은 내용은 좁은 화면에서 줄을 바꿀지, 내용을 나눌지 정합니다.
이미 공개해 운영 중인 홈페이지라면 휴대폰으로 직접 읽고 누르고 문의해 보는 점검 방법을 함께 참고하세요.
반응형이면 모바일 문제가 저절로 해결되나요?
반응형은 화면 폭에 맞춰 배치를 바꿀 수 있게 만드는 방식일 뿐, 휴대폰에서 무엇을 먼저 보여 줄지까지 대신 정해 주지는 않습니다. PC 화면을 그대로 세로로 쌓기만 하면 휴대폰에서는 첫 화면에 사진만 보이고 무엇을 하는 곳인지는 한참 내려가야 나오는 일이 생길 수 있습니다.
그래서 휴대폰에서 첫 화면에 남길 문장과 버튼, 아래로 내려도 되는 내용을 따로 정하는 편이 좋습니다. 문의 버튼이 휴대폰에서 어디에 보일지도 같은 이유로 미리 정해 둡니다. 반응형으로 만들었다는 사실이 검색 노출이나 문의 증가를 보장하지도 않습니다.
뉴클리어웹은 반응형 화면을 어떻게 확인하나요?
뉴클리어웹은 신규 홈페이지 제작에서 문구와 정보 순서, 디자인과 함께 모바일 사용성과 문의 동선을 설계하고, PC·태블릿·모바일에서 읽기와 탐색을 확인합니다. 확정한 페이지와 기능, 반응형 화면의 범위는 착수 전에 정합니다.
구현 단계에서는 합의한 기능과 문의 동선을 만든 뒤 PC·태블릿·모바일에서 읽기, 링크, 화면 잘림과 겹침, 필요한 동작을 확인합니다. 합의한 화면에서 잘림이나 겹침이 발견되면 구현 오류로 보고 보완합니다. 단계별 진행은 제작 안내에 정리되어 있습니다.
휴대폰에서 꼭 먼저 보여야 할 내용이나 지금 사이트에서 불편했던 화면이 있다면 상담 때 함께 알려 주세요. 문의 방법은 무료 상담 신청하기 페이지에 있으며, 전화 010-5611-8632로 바로 상담하실 수 있습니다.
자주 묻는 질문
반응형으로 만들면 검색에 유리한가요?
구글은 모바일 대응 방식 가운데 반응형을 구현하고 유지하기 쉬운 방식으로 권장하지만, 반응형이라는 이유만으로 검색 순위나 노출이 보장되지는 않습니다. 휴대폰과 PC에서 같은 내용을 보여 주고, 휴대폰에서도 읽기 편한 화면을 만드는 것이 기본입니다.
태블릿 화면도 따로 확인해야 하나요?
네, 확인하는 편이 좋습니다. 태블릿은 휴대폰과 PC 사이의 폭이라 카드가 어정쩡하게 두 칸으로 나뉘거나 사진이 지나치게 커지는 등 휴대폰과 PC에서 보이지 않던 문제가 나타나기도 합니다. 가로·세로로 돌렸을 때도 한 번씩 봅니다.
앱처럼 보이는 모바일 화면을 원하면 따로 만들어야 하나요?
하단 메뉴처럼 앱에서 익숙한 배치는 반응형 홈페이지 안에서도 휴대폰 폭에서만 보이게 만들 수 있습니다. 다만 설치형 앱이나 휴대폰에서만 쓰는 별도 기능이 필요하다면 일반 홈페이지 제작과는 범위가 달라지므로, 원하는 기능을 먼저 정리해 상담에서 확인하는 것이 좋습니다.
