[UI/UX] 모바일 환경에서 콘텐츠가 화면에 맞게 표시되지 않는 문제 개선 (반응형 미적용, 뷰포트 대응 부족)

[o-sein]

📝 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 (가로/세로)

[Hyunjin21]

모바일에서 접속할 경우, Statusbar가 모바일 상의 기본 상단바와 중복으로 보일 수 있으므로 제거해서 적용하여야 합니다.

[o-sein]

모바일에서 접속할 경우, Statusbar가 모바일 상의 기본 상단바와 중복으로 보일 수 있으므로 제거해서 적용하여야 합니다.

의견 주셔서 감사합니다!
아직은 모바일 웹앱 형태여서 브라우저로 진입시 상단과 하단에 브라우저 테두리가 보여서,
나중에 앱으로 진행 시에 내용 참고하여 하겠습니다!!

우선은 반응형을 적용하여 사용하는 기기 화면 사이즈에 맞춰져서
앱 콘텐츠 전부가 보이는 걸 위주로 진행하겠습니다~