PC로 만들고 만족스러워서 링크를 보냈는데, 상대가 폰으로 열어보고 "글자가 다 겹쳐 보여요"라고 합니다. 제가 겪은 일입니다. 손님의 대부분은 폰으로 봅니다. 그런데 만드는 사람은 PC로 만듭니다. 여기서 사고가 납니다.
📐 반응형이 뭐냐면
화면 크기에 따라 배치가 알아서 바뀌는 걸 말합니다. PC에서 가로로 나란히 있던 세 칸이, 폰에서는 위아래로 한 줄씩 쌓이는 식이죠. 예전처럼 모바일 전용 사이트를 따로 만드는 대신, 하나로 다 대응하는 방식입니다.
핵심은 고정 크기를 안 쓰는 것입니다. "가로 1200픽셀"이라고 못 박아두면 폰 화면에서 잘립니다. "화면의 90%"처럼 상대적으로 정해두면 화면이 좁아질 때 같이 좁아집니다. 이 차이 하나가 깨짐의 대부분을 만듭니다.
📱 실제로 깨지는 곳은 정해져 있습니다
제가 매번 당한 곳들입니다. 표가 제일 심합니다. 가로로 긴 표는 폰에서 답이 없습니다. 옆으로 스크롤되게 하거나 아예 다른 형태로 보여줘야 합니다.
긴 영어 단어나 URL도 범인입니다. 안 끊기고 쭉 뻗어서 화면을 밀어냅니다. 그러면 페이지 전체가 가로로 흔들립니다. 큰 이미지도 마찬가지고요.
그리고 버튼 크기. PC에선 마우스로 정확히 찍지만 폰에선 손가락입니다. 작은 버튼은 눌러도 안 눌립니다. 링크끼리 너무 붙어 있으면 옆 걸 누르게 되고요. 문의 버튼이 이러면 그대로 손해입니다.
🔍 확인은 이렇게 했습니다
브라우저 창을 좁게 줄여보는 것만으로 대부분 잡힙니다. 마우스로 창 오른쪽을 잡고 폰 폭만큼 줄여보세요. 깨지는 게 있으면 바로 보입니다.
다만 이건 흉내일 뿐이라, 실제 폰으로 한 번은 열어봐야 합니다. 터치가 되는지, 글자가 읽히는지는 손가락으로 만져봐야 압니다. 이 단계를 빼먹으면 손님이 대신 발견해줍니다.
👉 정리하면
반응형은 기술이라기보다 습관에 가깝습니다. "내 화면에서 괜찮다"를 믿지 않는 습관이요.
레이블웹스로 만든 사이트는 모바일 화면에 맞춰 나옵니다. 프로필 링크로 들어오는 사람은 100% 폰이니까 사실 이쪽이 기본이어야 맞습니다. 직접 만드시든 아니든, 완성했다고 생각한 순간에 폰으로 한 번 열어보세요. 저는 그때마다 뭔가를 발견했습니다.
📚 함께 보면 좋은 글
인스타 프로필 링크 거는법 — 한 줄짜리 그 자리, 제대로 쓰는 법
포트폴리오 사이트 만들기 — 뭘 넣고 뭘 빼야 연락이 오나
웹빌더 추천 — 뭘 만들 거냐에 따라 갈리는 선택 기준
개인사업자 홈페이지 만들기 — 사업자라면 빠지면 안 되는 것들
'홈페이지 제작 사례' 카테고리의 다른 글
| 모바일 청첩장 셀프 제작 — 업체 안 끼고 직접 만들어본 후기 (0) | 2026.07.17 |
|---|---|
| 랜딩페이지 전환율 — 문의가 실제로 들어오는 페이지의 공통점 (0) | 2026.07.17 |
| 무료 CRM 프로그램 — 도입 전에 따져봐야 할 세 가지 (0) | 2026.07.17 |
| 고객 관리 프로그램 무료 — 엑셀로 버티다 한계가 오는 지점 (0) | 2026.07.17 |
| 도메인 DNS 설정 — 산 주소를 내 사이트에 연결하기 (0) | 2026.07.17 |