홈페이지 제작 가이드 › 반응형 홈페이지 제작
홈페이지를 보러 오는 손님 대부분은 휴대폰으로 옵니다. 그런데 만드는 사람은 PC 앞에 앉아 있습니다. 이 어긋남 때문에 사고가 납니다. 반응형이 정확히 무슨 뜻이고, 무엇을 확인해야 하는지 적었습니다.
최종 수정 2026년 8월 24일
반응형은 하나의 페이지가 화면 크기에 맞춰 스스로 정렬을 바꾸는 방식입니다. 옛날처럼 모바일용 사이트를 따로 만들지 않습니다.
요즘 빌더로 만들면 대부분 기본이 반응형입니다. 그래서 "반응형으로 만들어 주세요"보다 "휴대폰에서 안 깨지는지 확인했나요"가 실제로 물어야 할 질문입니다.
가장 많이 깨지는 세 곳은 긴 제목, 표, 큰 사진입니다. 이 셋만 확인해도 대부분 잡힙니다.
| 기준 | 반응형 | 모바일 전용 따로 만들기 |
|---|---|---|
| 만드는 횟수 | 한 번 | 두 번 |
| 내용 수정 | 한 곳만 고침 | 두 곳 다 고쳐야 함 |
| 주소 | 하나 | 따로 생기기도 함 |
| 검색 | 한 주소에 힘이 모임 | 나뉘어 불리할 수 있음 |
지금 새로 만드신다면 굳이 모바일용을 따로 만들 이유가 없습니다.
| 어디가 | 어떤 증상으로 보이나 |
|---|---|
| 긴 제목 | 단어 한가운데서 잘려 "사용해보 / 세요"처럼 보입니다. |
| 표 | 오른쪽 칸이 화면 밖으로 밀려 안 보입니다. 가격 칸이 잘리면 치명적입니다. |
| 큰 사진 | 화면 전체가 좌우로 움직입니다. 손가락으로 밀면 흰 여백이 나옵니다. |
| 버튼 | 너무 작거나 서로 붙어 있어 옆 버튼이 눌립니다. |
| 메뉴 | 항목이 많으면 두 줄로 넘치거나 눌러도 안 열립니다. |
하나의 페이지가 보는 화면 크기에 맞춰 스스로 정렬을 바꾸는 방식입니다. PC용과 모바일용을 따로 만들지 않습니다.
반응형은 한 번만 만들고 한 곳만 고치면 됩니다. 따로 만들면 두 번 만들고 수정할 때마다 두 곳을 고쳐야 하며, 주소가 나뉘어 검색에 불리할 수 있습니다.
휴대폰으로 열고 좌우로 밀어 보십시오. 화면이 옆으로 움직이면 어딘가 넘친 것입니다.
긴 제목이 단어 중간에서 잘리는지, 표의 오른쪽 칸이 잘리는지도 함께 보십시오.
네. 편집기 안에서 모바일 미리보기로 확인하실 수 있습니다. 다만 발행 전에 실제 휴대폰으로 한 번 여셔서 확인하시는 편이 확실합니다.
아니요. 모든 블록이 모바일에서 자동으로 재배치됩니다. 다시 만드실 필요가 없습니다.
