[UI/UX] 모바일 환경에서 콘텐츠가 화면에 맞게 표시되지 않는 문제 개선 (반응형 미적용, 뷰포트 대응 부족) #21
Description
📝 Description
현재 페이지는 데스크탑 환경에 맞춰져 있어 모바일 기기에서 접속 시
시작 화면부터 콘텐츠가 화면 크기에 맞게 축소되지 않고 가득 차버려,
주요 콘텐츠가 처음부터 보이지 않는 문제가 발생함.
발생 조건
- 모바일(스마트폰) 혹은 태블릿 화면 비율(예: 375px ~ 768px)에서 접속 시
- 시작 화면(홈/메인)부터 콘텐츠가 화면 밖으로 밀려 정상적으로 표시되지 않음
예상 원인
- 반응형 레이아웃 관련 CSS 미적용
- meta viewport 태그 누락 또는 설정 오류
- 고정된 px 단위 사용으로 인한 크기 조정 불가
- 미디어 쿼리 미적용
📌 Checklist
- 시작 화면(홈/메인)에서 모바일 기기 접속 시 콘텐츠 정상 표시 확인
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">적용 여부 확인 - CSS 미디어 쿼리 추가 (min-width / max-width 기준)
- 고정 px 대신 % 또는 rem 단위로 변경 검토
- 이미지/버튼/텍스트가 화면 크기에 맞게 줄어드는지 확인
- 주요 페이지(리뷰 작성, 상세 페이지 포함) 모바일 테스트 완료
📸 문제 재현 화면
- 시작 화면에서 모바일 접속 시 콘텐츠가 화면 가득 차서 주요 내용이 보이지 않음
*아이폰 se2
*아이패드 10.5 (가로/세로)
