반응형홈페이지·웹사이트 제작 반응형 홈페이지 발주 전, 어디까지 확인해야 할까요?

반응형으로 제작한다는 견적서를 받았는데 업체마다 결과물이 다르다는 이야기가 있습니다. 모두 반응형 홈페이지라고 설명하지만 막상 스마트폰으로 열어보면 메뉴가 겹치거나, 화면을 좌우로 밀어야 하거나, 문의 폼이 불편한 경우가 생깁니다. 반응형이라는 표현 자체가 일정 수준의 품질을 보장하는 것은 아닙니다. 화면 크기에 따라 레이아웃이 달라지는 제작 방식에 가깝습니다. 실제 완성도는 어떤 화면 구간까지 고려했는지, 모바일 조작성을 어떻게 설계했는지, 납품 전에 어느 정도까지 검수했는지에 따라 달라집니다.

포트폴리오는 스마트폰으로 직접 확인하는 게 빠릅니다
제작사를 비교할 때 PC 화면의 포트폴리오 이미지만 보는 경우가 많습니다. 가능하면 업체가 실제 제작한 사이트를 스마트폰으로 직접 열어보는 편이 좋습니다. 메뉴를 열어보고, 서비스 페이지를 끝까지 내려보고, 문의 폼에 직접 입력해보면 화면 캡처만으로는 알기 어려운 부분이 보입니다. 가로 스크롤이 생기는지, 버튼이 너무 작거나 가까이 붙어 있지는 않은지, 키보드가 올라왔을 때 입력 영역이나 제출 버튼을 가리지는 않는지도 확인할 수 있습니다. 브라우저 개발자 도구의 모바일 화면은 제작 과정에서 유용하지만 실제 기기 테스트를 완전히 대신하기는 어렵습니다. 최종 납품 단계에서는 아이폰과 안드로이드 등 실제 사용 환경에서도 주요 기능을 확인하는 것이 안전합니다.

화면을 좌우로 움직여야 한다면 원인을 봐야 합니다
모바일 홈페이지에서 페이지 전체를 좌우로 움직여야 콘텐츠를 읽을 수 있다면 반응형 처리를 다시 확인할 필요가 있습니다. WCAG의 Reflow 기준은 세로로 읽는 일반적인 콘텐츠의 경우 320 CSS px 상당의 폭에서도 정보나 기능 손실 없이 이용할 수 있고, 특별한 예외를 제외하면 양방향 스크롤을 요구하지 않도록 규정합니다. 이는 특정 스마트폰 모델의 제작 규격이라기보다 좁은 화면이나 확대 환경에서도 콘텐츠를 이용할 수 있도록 하는 접근성 기준입니다. 이미지나 배너에 고정 폭이 들어가 있거나, 긴 문자열·표·팝업 등이 화면 폭을 넘어가면 가로 스크롤이 생길 수 있습니다. 따라서 단순히 ‘모바일 페이지가 나온다’가 아니라 좁은 화면에서도 주요 정보와 기능을 정상적으로 사용할 수 있는지를 확인하는 것이 중요합니다.

버튼은 보이는 크기보다 실제 조작성을 확인해야 합니다
PC에서는 마우스로 쉽게 누를 수 있는 버튼도 스마트폰에서는 이야기가 달라집니다. 메뉴 아이콘이나 페이지 이동 버튼, 체크박스 등이 지나치게 작거나 서로 붙어 있으면 다른 항목을 잘못 누르기 쉽습니다. WCAG 2.2의 Target Size 기준은 포인터 입력 대상에 대해 기본적으로 24×24 CSS px 이상의 크기를 제시하며, 이보다 작은 경우에도 충분한 간격 등 예외 조건을 두고 있습니다. 따라서 모든 버튼 디자인을 무조건 24px 이상으로 만들어야 한다는 의미로 이해하기보다는 실제 터치 영역과 주변 요소의 간격을 함께 보는 것이 정확합니다. 포트폴리오를 확인할 때도 눈으로만 보지 말고 메뉴, 슬라이드 버튼, 문의 버튼 등을 직접 눌러보는 것이 좋습니다. 실제 사용 과정에서 불편한 부분이 훨씬 빨리 드러납니다.

모바일이라고 핵심 콘텐츠가 빠져서는 곤란합니다
PC에서는 서비스 설명과 포트폴리오가 충분히 나오는데 모바일에서는 화면을 단순하게 만든다는 이유로 주요 내용을 없애는 경우도 있습니다. 화면이 좁기 때문에 배치 방식이 달라지는 것은 자연스럽습니다. 긴 내용을 접어두거나 탭 형태로 정리하는 방식도 사용할 수 있습니다. 다만 방문자가 의사결정에 필요한 핵심 서비스 설명이나 주요 링크 자체를 모바일에서 제거하는 것은 별개의 문제입니다. 반응형 홈페이지를 검수할 때는 PC와 모바일을 나란히 열어보고 핵심 콘텐츠와 주요 기능이 동일하게 제공되는지 확인하는 것이 좋습니다.

‘반응형 제작 포함’보다 검수 범위를 확인해야 합니다
발주 단계에서 가장 애매한 문구가 ‘반응형 제작 포함’입니다. 이 문장만으로는 어느 화면 구간까지 검수하는지, 어떤 브라우저와 실제 기기를 확인하는지 알기 어렵습니다. 계약이나 기획 단계에서 PC·태블릿·모바일 검수 범위, 주요 브라우저 지원 범위, 가로 스크롤 여부, 메뉴와 문의 폼 같은 핵심 기능의 실기기 테스트 여부를 확인해두는 편이 좋습니다. 태블릿도 768~1024px처럼 숫자만 정하기보다 실제 레이아웃이 깨지는 구간을 함께 점검하는 방식이 현실적입니다. 결국 반응형 홈페이지의 품질은 ‘모바일에서도 열린다’로 판단하기 어렵습니다. 화면이 좁아져도 콘텐츠를 읽는 데 문제가 없는지, 버튼과 메뉴를 편하게 조작할 수 있는지, PC에서 제공하던 핵심 정보가 유지되는지, 문의 같은 주요 행동을 끝까지 완료할 수 있는지를 봐야 합니다. 반응형웹사이트제작 납품 전 PC·태블릿·모바일 환경에서 주요 화면과 기능을 확인하고, 가로 스크롤·터치 영역·콘텐츠 유지 여부를 기본 검수 항목으로 점검합니다. 감사합니다. 

희명웹 드림. 

참고할만한 인사이트 칼럼링크 : 홈페이지 제작 이후의 전환율, 하나의 숫자보다 이탈 구간을 봐야 하는 이유