반응형홈페이지제작, '반응형'은 어디까지 보장하는 말일까요?

저는 이 글에 반응형이라는 말이 실제로 보장하는 범위, 모바일에서 흔히 깨지는 지점, 그리고 계약 전에 숫자로 받아 두어야 할 확인 항목을 적었습니다.

상담에서 자주 듣는 말이 있습니다. "반응형으로 만들었다고 하셨는데 휴대폰에서는 글자가 다 깨져 보입니다."

제작사가 거짓말을 한 경우는 많지 않았습니다. 반응형이라는 말이 약속하는 범위가 생각보다 좁은 쪽이 대부분입니다.

반응형은 화면 폭에 맞춰 배치가 바뀐다는 기술 방식의 이름이고, 모바일에서 쓰기 편하다는 품질 보증서가 아닙니다.

반응형홈페이지제작에서 '반응형'은 정확히 무엇을 뜻하나요?

주소 하나와 같은 문서 하나로 운영하면서 화면 폭에 따라 배치만 바꾸는 제작 방식입니다. 이 말의 범위는 거기까지입니다.

폭이 좁아지면 2단으로 나뉘어 있던 영역이 1단으로 내려오고, 가로로 펼쳐져 있던 메뉴가 버튼 하나로 접힙니다. 내용은 같고 놓이는 자리가 바뀝니다.

그래서 반응형이면 분명히 얻는 것이 있습니다. 주소가 하나라 검색엔진이 같은 글을 두 곳에서 따로 보지 않고, 글을 고칠 때 PC용과 모바일용을 두 번 수정하지 않아도 됩니다.

다만 배치가 바뀌는 것과 모바일에서 읽기 편한 것은 다른 일입니다. 저는 상담에서 이 차이를 가장 길게 설명하게 됩니다.

반응형이면 모바일 최적화가 끝난 건가요?

아닙니다. 반응형이 해 주는 것은 배치까지이고, 속도와 터치와 입력은 별도 작업입니다. 저는 견적서에서 이 항목들이 따로 적혀 있는지를 봅니다.

이 표의 오른쪽 열이 실제로 문의가 새는 구간입니다. 배치는 맞는데 누를 수 없고, 보이기는 하는데 읽히지 않는 상태입니다.

그래서 "반응형 포함"이라는 한 줄만 보고 판단하기 어렵습니다. 같은 문구 안에 폭별 설계와 성능 처리가 다 들어 있을 수도 있고, 템플릿이 알아서 줄여 주는 수준일 수도 있습니다.

반응형·적응형·모바일 별도 주소는 어떻게 다른가요?

같은 내용을 어디에서 바꿔 주는지가 다릅니다. 반응형은 브라우저가 폭을 보고 바꾸고, 적응형은 미리 만들어 둔 몇 개의 화면 중에서 골라 주고, 모바일 별도 주소는 아예 다른 사이트를 보여 줍니다.

현장에서는 세 가지를 뭉쳐서 반응형이라고 부르는 일이 흔합니다. 그런데 나중에 운영 비용이 갈리는 지점이라 처음에 확인해 두는 편이 낫습니다.

저는 전문직 사무소나 지역 사업자 홈페이지라면 대부분 반응형을 권합니다. 보여 줄 내용이 PC와 모바일에서 크게 다르지 않고, 글과 안내 문구를 자주 고치게 되기 때문입니다.

반대로 회원 기능이나 예약 시스템이 무겁게 들어가고 모바일에서 쓰는 흐름이 PC와 완전히 다르다면, 모바일 화면을 따로 설계하는 편이 결국 싸게 끝나는 경우도 있습니다.

모바일에서 가장 흔히 깨지는 지점은 어디인가요?

여섯 군데입니다. 긴 표, 이미지 용량, 지도·영상 삽입물, 상단 고정 메뉴, 입력 폼, 그리고 이미지로 넣어 둔 전화번호입니다.

저는 점검을 시작할 때 휴대폰으로 홈페이지를 열고 가로 스크롤이 생기는지부터 봅니다. 손가락으로 밀었을 때 화면이 좌우로 움직이면 어딘가에 화면보다 넓은 요소가 들어 있다는 뜻입니다.

▲ ▲ 저는 이 여섯 군데를 먼저 확인하고 나머지를 봅니다

여섯 번째는 특히 자주 봅니다. 번호가 분명히 화면에 적혀 있는데 눌러도 아무 일이 없습니다. 광고로 데려온 사람이 전화하려다 그냥 나가는 경우라, 쓰는 비용 대비 손해가 큰 쪽입니다.

반응형홈페이지제작 견적에서 무엇이 금액을 가르나요?

폭별 디자인을 몇 종 만드는지, 이미지와 표와 폼을 모바일 기준으로 다시 짜는지, 그리고 기기별 검수를 하는지 세 가지에서 갈립니다.

페이지 수가 같아도 이 세 가지 포함 여부에 따라 견적이 두 배 넘게 차이 나는 것을 자주 봅니다. 그래서 저는 금액을 비교하기 전에 포함 범위를 같은 기준으로 맞춰 둡니다.

기간은 보통 4~8주로 잡습니다. 여기서 기기별 검수와 수정에 1~2주를 더 보시는 편이 안전합니다.

저는 오픈 전 검수 일정을 처음부터 따로 떼어 둡니다. 제작 막바지에 몰아서 보면 깨진 곳을 찾아도 고칠 시간이 남지 않습니다.

계약 전에 요구해야 할 확인 항목은 무엇인가요?

여섯 가지입니다. 확인 기기와 화면 폭 목록, 이미지 처리 방식, 표와 폼 처리 방식, 터치 영역과 글자 최소 크기, 검수 결과 제출 방식, 오픈 후 깨짐 수정 조건입니다.

• 확인 기기와 폭 — 브라우저까지 적습니다. 아이폰 사파리, 안드로이드 크롬, 삼성 인터넷 정도는 넣고, 폭은 360·390·768·1280을 기준으로 받으시면 됩니다.
• 이미지 처리 — 모바일에 작은 이미지를 따로 내보내는지 확인합니다. 이 한 줄이 모바일 로딩 시간에서 가장 크게 움직입니다.
• 표와 폼 — 칸이 많은 표를 모바일에서 어떤 형태로 보여 줄지, 입력 폼의 키보드 종류를 칸마다 지정하는지 적어 둡니다.
• 터치와 글자 — 버튼 터치 영역과 본문 글자 최소 크기를 숫자로 받습니다. 확대 금지 설정은 쓰지 않는다는 조건을 함께 넣습니다.
• 검수 결과 — 기기별 스크린샷이나 화면 녹화로 받습니다. "확인했습니다" 한 줄로는 나중에 무엇을 봤는지 알 방법이 없습니다.
• 오픈 후 — 깨짐 수정의 무상 기간을 며칠로 볼지, 그 뒤에는 건당인지 월 관리에 포함인지 적어 둡니다.

여섯 가지 중 하나만 고르라면 저는 첫 번째를 받으시라고 말씀드립니다. 확인할 기기 목록이 없으면 나머지 항목은 "잘 나오던데요"로 끝나기 때문입니다.

어디까지 직접 하고, 어디서 맡기는 편이 나을까요?

점검과 요구 항목 정리는 직접 하시고, 폭별 설계와 이미지·속도 처리는 맡기시는 편이 낫습니다.

직접 하실 부분은 분명합니다. 대표님과 직원들 휴대폰으로 각 페이지를 열어 보고, 이상하게 보이는 화면을 캡처해 목록으로 만드는 일입니다. 저희가 맡는 경우에도 이 목록이 가장 정확한 자료가 됩니다.

임대형 빌더나 워드프레스를 쓰고 계시면 모바일 전용 설정 화면이 따로 있습니다. 글자 크기, 버튼 위치, 고정 메뉴 높이 정도는 거기서 직접 바꾸셔도 됩니다.

반대로 이미지 폭별 처리나 칸 많은 표의 재구성은 손대기 어렵습니다. 테마 안쪽을 고쳐야 하고, 잘못 건드리면 PC 화면이 같이 틀어집니다. 저는 이쪽은 맡기시라고 말씀드립니다.

고친 뒤에는 어떤 숫자로 확인하나요?

기기별 이탈률, 모바일 로딩 시간, 문의 폼 도달률 세 가지를 봅니다. 모바일과 PC를 나눠 보지 않으면 고쳐진 것이 숫자에 묻힙니다.

• 1~2주 — 모바일과 PC의 이탈률을 나눠 봅니다. 모바일만 유독 높으면 아직 깨진 곳이 남아 있습니다.
• 2~4주 — 모바일 로딩 시간을 봅니다. 이미지 처리만 고쳐도 체감이 눈에 띄게 달라지는 구간입니다.
• 4~8주 — 문의 폼까지 도달하는 비율과 전화 버튼 클릭 수를 비교합니다.
• 수정은 한 번에 한 가지만 — 이미지와 폼을 같이 바꾸면 어느 쪽이 효과였는지 알 수 없습니다.

저는 고친 뒤 2주는 숫자를 건드리지 않고 지켜보시라고 말씀드립니다. 며칠만 보고 판단하면 요일 차이를 효과로 읽게 됩니다.

유입이 적은 홈페이지라면 숫자로 차이를 가리기 어렵습니다. 그런 경우에는 직원들 휴대폰 기종별로 다시 열어 보고 깨진 곳이 사라졌는지 확인하는 쪽이 더 확실합니다.

정리하면 반응형은 출발선이고 도착선이 아닙니다. 배치가 바뀌는 것까지가 이 말의 약속이고, 모바일에서 읽히고 눌리는 상태는 이미지 처리와 표·폼 설계, 기기별 검수에서 만들어집니다. 그래서 견적을 비교하실 때는 반응형 포함 여부가 아니라 확인할 기기 목록과 검수 기준이 적혀 있는지를 보시면 됩니다. 저는 상담에서 시안보다 이 두 가지를 먼저 확인합니다.