[바이브코딩 HTML 웹앱 20일 챌린지] 16일차 - 모바일에서도 보기 좋은 화면으로 바꾸기
16일차에서는 모바일 화면에서도 보기 좋은 반응형 레이아웃을 적용합니다. 데스크톱에서는 괜찮던 구성도 작은 화면에서는 답답해질 수 있어서, 화면 크기에 맞춰 구조를 바꾸는 CSS 전략이 필요합니다.
오늘은 `media query`를 중심으로 카드 배치, 여백, 버튼 크기, 입력창 너비를 조정해 스마트폰에서도 자연스럽게 사용할 수 있는 웹앱으로 개선합니다.
1. 오늘 만들 기능 소개
오늘 목표는 모바일 가독성과 조작성을 높이는 것입니다. 카드가 가로로 길게 배치되어 있다면 세로 스택으로 바꾸고, 작은 화면에서 텍스트와 버튼이 겹치지 않도록 간격을 재조정합니다.
2. AI에게 요청할 프롬프트
브레이크포인트와 변경 항목을 함께 요청하면 결과가 정확합니다.
하루 관리 웹앱 16일차 작업이야.
style.css에 반응형 미디어쿼리(max-width: 768px)를 추가해줘.
카드 레이아웃을 세로로 바꾸고, 버튼/입력창/폰트 크기를 모바일에 맞게 조정해줘.
기존 데스크톱 스타일은 유지하면서 모바일에서만 변경되게 작성해줘.3. 코드 작성과 실행 과정
우선 데스크톱 기본 스타일을 유지한 채 파일 하단에 media query를 추가합니다. 모바일 구간에서는 컨테이너 패딩을 줄이고 카드 간격을 늘려 터치 오작동을 줄입니다. 버튼은 최소 높이를 확보하고 입력창은 100% 너비로 확장해 조작성을 개선합니다.
| 영역 | 모바일 변경 | 체크 포인트 |
|---|---|---|
| 레이아웃 | 가로 배치 → 세로 배치 | 가로 스크롤 제거 |
| 입력/버튼 | 폭 확대, 높이 조정 | 터치 편의성 |
| 타이포/여백 | 글자/간격 미세 조정 | 가독성 유지 |
4. 코드 이해하기
오늘 핵심은 "기본 스타일 우선 + 조건부 덮어쓰기"입니다. 먼저 데스크톱 기준을 안정적으로 잡고, 모바일 조건에서 필요한 속성만 재정의해야 유지보수가 쉬워집니다.
반응형은 화면 축소가 아니라 사용자 맥락 전환이라는 점이 중요합니다. 모바일에서는 빠른 입력과 터치 정확도가 데스크톱보다 더 중요한 UX 기준이 됩니다.
5. 오늘 만든 내용 정리
오늘은 media query를 적용해 웹앱을 모바일 친화적으로 개선했습니다. 작은 화면에서도 카드와 입력 요소가 안정적으로 보이게 되었고, 실제 사용 환경에서의 완성도가 크게 높아졌습니다. 다음 17일차에서는 코드 파일을 정리하고 구조를 리팩토링해 유지보수성을 강화하겠습니다.
6. 자주 묻는 질문
Q1. 모바일에서 글자가 너무 작게 보여요.
media query 안에서 본문 폰트와 버튼 폰트 크기를 재정의하세요. 기본값을 유지하면 작은 화면에서 가독성이 떨어질 수 있습니다.
Q2. 화면이 좌우로 밀려서 스크롤이 생겨요.
고정 폭 요소(width px) 때문에 발생할 수 있습니다. 모바일 구간에서는 `width: 100%`와 `box-sizing`을 점검해보세요.
Q3. 데스크톱 스타일이 깨졌어요.
media query 범위 밖 스타일을 수정했을 가능성이 있습니다. 모바일 변경은 반드시 media query 내부에만 두는 방식으로 분리하세요.