반응형 홈페이지 제작, 화면 폭별 기준과 검수 체크리스트

반응형 홈페이지는 하나의 사이트가 화면 폭에 따라 배치를 스스로 바꾸는 방식입니다. PC용과 모바일용을 따로 만들지 않고, 같은 주소·같은 내용을 화면에 맞게 다시 배치합니다. 방문자 대부분이 휴대폰으로 들어오는 지금은 반응형이 기본입니다.

화면 폭별 기준

폭 기준은 사이트마다 조금씩 다릅니다. 중요한 건 숫자보다 각 폭에서 무엇을 먼저 보여 줄지 정하는 일입니다. 모바일에서는 전화·예약·문의 버튼이 엄지가 닿는 곳에 있어야 합니다.

반응형과 적응형, 모바일 전용의 차이

• 반응형: 한 사이트가 폭에 따라 유연하게 바뀝니다. 관리가 한 번에 끝납니다.
• 적응형: 몇 가지 고정 화면을 미리 만들어 두고 기기에 맞는 것을 보여 줍니다.
• 모바일 전용 사이트: `m.` 주소로 따로 만듭니다. 내용을 두 번 관리해야 하고 요즘은 잘 쓰지 않습니다.

워드프레스 테마와 Elementor 같은 편집기는 대부분 반응형으로 동작해, 화면 폭별로 글자 크기와 배치를 따로 조정할 수 있습니다.

납품 전 검수 체크리스트

1. 글자: 모바일 본문 16px 이상인지
2. 버튼: 손가락으로 누르기 쉬운 크기와 간격인지
3. 이미지: 화면에 맞게 줄고, 모바일에서 빠르게 뜨는지
4. 가로 넘침: 화면이 좌우로 밀리지 않는지

PC 화면을 줄여 보는 것만으로는 부족합니다. 실제 휴대폰으로 메뉴, 폼 입력, 전화 버튼까지 눌러 보세요.

이미지가 많은 사이트는 모바일 속도가 가장 먼저 무너집니다. 위 유아 영어 브랜드 사이트는 로딩 속도 개선부터 손봤습니다.

검수 때는 390px 휴대폰부터 1920px 넓은 모니터까지 화면을 실제로 캡처해, 글자가 넘치거나 본문이 헤더 폭 밖으로 나가는 곳을 찾아 고칩니다.

행사 사이트처럼 현장에서 휴대폰으로 일정과 위치를 확인하는 사이트는 모바일 화면을 먼저 설계합니다.

견적서에서 확인할 것

• 반응형이 기본 포함인지, 옵션 비용인지
• 태블릿 화면까지 검수하는지
• 모바일 전용 요소(고정 전화 버튼, 햄버거 메뉴)가 포함되는지

애니원컴퍼니 DELUXE 패키지는 반응형 맞춤 디자인과 크로스 브라우징 검수를 포함합니다. 가격 구조는 홈페이지 제작 비용 총정리, 실제 화면은 워드프레스 제작 사례에서 휴대폰으로 열어 보세요.

자주 묻는 질문