반응형 홈페이지가 뭔가요?PC·휴대폰 화면 차이와 확인 방법

반응형 홈페이지는 하나의 홈페이지가 보는 화면의 크기에 맞춰 배치를 스스로 바꾸는 홈페이지입니다. PC 모니터에서는 내용이 가로로 넓게 펼쳐지고, 휴대폰에서는 같은 내용이 세로 한 줄로 차곡차곡 쌓입니다. 주소도 하나, 내용도 하나이고 달라지는 것은 보여 주는 모양뿐입니다.

가게 진열에 비유하면

같은 물건을 넓은 매장과 좁은 매대에 진열한다고 생각해 보세요. 넓은 매장에서는 선반 서너 개를 옆으로 나란히 놓고, 좁은 매대에서는 같은 물건을 위아래로 쌓습니다. 물건은 그대로이고 놓는 방식만 바뀝니다. 반응형 홈페이지도 같습니다. 글·사진·버튼은 그대로 두고, 화면 폭에 맞춰 칸을 나란히 놓을지 위아래로 쌓을지를 홈페이지가 알아서 정합니다.

'반응형'이라는 말은 화면 크기에 '반응한다'는 뜻입니다. 손님이 손가락으로 화면을 키우거나 옆으로 밀지 않아도 글이 읽히는 것이 목표입니다.

PC·태블릿·휴대폰에서 달라지는 것

홈페이지는 화면의 가로 폭을 보고 모양을 바꿉니다. 아래 폭은 흔히 쓰는 기준을 예로 든 것이고, 제작사마다 조금씩 다릅니다.

배치 말고도 휴대폰에서는 이런 것들이 함께 바뀝니다.

• 글자 크기와 줄 간격 — 손에 들고 읽기 좋게 본문 글자를 PC와 비슷하거나 조금 크게 맞춥니다.
• 버튼 크기 — 마우스가 아니라 손가락으로 누르므로 버튼과 버튼 사이를 넉넉히 둡니다.
• 전화번호 — 누르면 바로 전화가 걸리게 하고, 화면 아래에 상담 버튼을 고정해 두기도 합니다.
• 사진 — 가로로 긴 첫 화면 사진은 휴대폰에서 가운데 중요한 부분이 보이도록 잘라서 보여 줍니다.

달라지지 않는 것

모양은 바뀌어도 주소, 내용, 고치는 곳은 하나입니다. 관리자 화면에서 가격을 한 번 고치면 PC와 휴대폰에 동시에 바뀝니다. 손님이 PC에서 본 주소를 카카오톡으로 보내도, 받은 사람의 휴대폰에서는 휴대폰 모양으로 열립니다. 검색엔진도 주소 하나에 내용 하나로 읽기 때문에 검색 정보가 둘로 나뉘지 않습니다.

모바일 전용 사이트와의 차이

반응형이 널리 쓰이기 전에는 PC용 홈페이지와 휴대폰용 홈페이지를 따로 만들었습니다. 휴대폰으로 들어오면 'm.'이 붙은 다른 주소로 보내는 방식으로, 이것을 모바일 전용 사이트라고 합니다. ('모바일 웹'은 휴대폰에서 보는 웹 전반을 가리키기도 해서, 이 글에서는 따로 만든 휴대폰용 홈페이지를 '모바일 전용 사이트'라고 부릅니다.) 두 방식은 겉으로는 비슷해 보여도 운영할 때 차이가 큽니다.

모바일 전용 사이트에서 자주 생기는 일이 있습니다. 가격을 PC용에서만 고쳐 휴대폰 손님에게는 예전 가격이 보이거나, 휴대폰용에는 메뉴 몇 개가 빠져 있어 손님이 찾던 내용이 없는 경우입니다. 휴대폰용 주소를 PC에서 열면 화면 가운데에 좁은 띠처럼 보이기도 합니다. 반응형은 처음부터 하나이므로 이런 어긋남이 생기지 않습니다.

이럴 때 차이가 드러납니다

많은 손님이 네이버 지도나 인스타그램 프로필의 링크를 눌러 휴대폰으로 홈페이지에 들어옵니다. 반응형이 아닌 홈페이지라면 PC 화면이 그대로 작게 줄어 보입니다. 글씨가 개미만 해서 두 손가락으로 키워야 하고, 키우면 문장이 화면 밖으로 넘어가 옆으로 밀며 읽어야 합니다. 전화번호를 눌러도 전화가 걸리지 않아 번호를 외워서 다시 눌러야 합니다. 이 과정이 번거로우면 뒤로 가기를 누르고 다른 가게를 찾는 손님도 생깁니다. 숙박·예약 업종에서 휴대폰 화면이 특히 중요한 이유는 펜션 홈페이지 제작 — 예약 전환을 만드는 6가지 조건에서 볼 수 있습니다.

내 홈페이지가 반응형인지 확인하는 방법

1. 휴대폰으로 열어 봅니다. 손가락으로 키우지 않아도 본문 글자가 편하게 읽히는지 봅니다.
2. 옆으로 밀어 봅니다. 화면이 좌우로 움직이거나 오른쪽이 잘려 있다면 휴대폰 폭에 맞지 않는 것입니다.
3. 주소창을 봅니다. 휴대폰에서 주소 앞에 'm.'이 붙는다면 모바일 전용 사이트일 가능성이 큽니다.
4. PC에서 창을 좁혀 봅니다. 인터넷 창의 오른쪽 끝을 잡고 천천히 줄였을 때 사진과 글이 아래로 내려가며 배치가 바뀌면 반응형입니다. 메뉴가 세 줄 버튼(☰)으로 접히는 경우가 많지만, 메뉴 모양은 홈페이지마다 다를 수 있습니다. 반대로 창을 줄여도 화면이 그대로 잘리기만 한다면 반응형이 아닙니다.
5. 휴대폰을 가로로 돌려 봅니다. 돌렸을 때도 배치가 다시 맞춰지는지 확인합니다.

반응형이어도 자주 빠뜨리는 것

반응형으로 만들었다고 모든 화면이 저절로 편해지지는 않습니다. 아래는 휴대폰에서 자주 놓치는 곳입니다.

• 사진 속 글자 — 배너 사진 안에 글을 넣으면 휴대폰에서 사진과 함께 작아져 읽기 어렵습니다. 중요한 문구는 사진 위가 아니라 글자로 따로 넣습니다.
• 넓은 표 — 칸이 많은 가격표는 휴대폰에서 넘칩니다. 꼭 필요한 칸만 남기거나 표를 둘로 나누면 옆으로 밀지 않고도 가격이 한눈에 보입니다.
• 화면을 가리는 알림 창 — PC에서는 한쪽에 뜨던 알림이 휴대폰에서는 화면 전체를 덮고, 닫기 버튼이 너무 작을 수 있습니다.
• 상담 신청서 — 입력 칸이 작거나 전화번호 칸에 숫자 자판이 뜨지 않으면 손님이 중간에 그만둡니다.
• 첫 화면 속도 — 휴대폰은 PC보다 연결이 느린 곳에서 열리기도 합니다. 사진은 화질은 그대로 두고 용량만 줄여 올리면 빨리 열립니다.

만들거나 고칠 때 순서

새로 만들 때는 시안을 받으면 PC보다 휴대폰으로 먼저 봅니다. 업종에 따라 차이는 있지만 휴대폰으로 처음 들어오는 손님이 많기 때문입니다. 원하는 느낌을 전달하는 방법은 홈페이지 디자인 요청하는 법에, 휴대폰 화면은 보통 제작비 안에 함께 들어 있으며, 그 제작비가 어떻게 정해지는지는 반응형 홈페이지 제작 비용에 따로 적었습니다. 지금 홈페이지가 휴대폰에서 불편하다면 부분 수정으로 될지 뼈대를 바꿔야 할지부터 판단합니다. 그 기준은 홈페이지 리뉴얼, 언제 해야 하나요?에서 다룹니다. 모바일 전용 사이트를 반응형으로 바꿀 때는 'm.' 주소로 들어오는 손님과 검색 결과가 새 주소로 이어지도록, 옛 주소를 새 주소로 넘겨주는 설정을 함께 해 둡니다.

팬텀디자인 구독에서는

월 99,000원(VAT 별도) 홈페이지 구독에는 PC·모바일 반응형이 기본으로 포함돼 있어, 휴대폰 화면을 따로 신청하지 않아도 됩니다. 관리자 페이지에서 한 번 고치면 모든 화면에 반영되고, 올리는 사진은 화질은 그대로 두고 용량만 줄여 저장됩니다. 실제 화면은 작업 사례를 휴대폰으로 열어 확인해 보세요.

정리하면

반응형 홈페이지는 주소와 내용은 하나로 두고 화면 폭에 맞춰 배치만 바꾸는 방식입니다. 오늘 휴대폰으로 내 홈페이지를 열어 확대 없이 읽히는지, 옆으로 밀리지 않는지, 전화번호가 바로 눌리는지 세 가지만 확인해 보셔도 지금 상태를 알 수 있습니다.