반응형 웹 디자인(Responsive Web Design)은 하나의 HTML/CSS로 모바일부터 데스크탑까지 모든 화면에 최적화된 레이아웃을 제공하는 방식입니다. Google web.dev의 공식 가이드와 Smashing Magazine의 레퍼런스를 바탕으로, 실무 디자이너가 반응형 웹 디자인 시 체크해야 할 핵심 항목을 정리했습니다.
레이아웃 & 그리드
- 뷰포트 메타 태그 확인:
<meta name="viewport" content="width=device-width, initial-scale=1">가 없으면 모바일에서 레이아웃이 깨집니다. - 고정 픽셀 너비 금지: 컨테이너 너비를 px 고정값이 아닌 %, max-width 조합으로 설정합니다.
- 브레이크포인트 최소화: 320px, 768px, 1024px, 1440px 4개 정도로 기기별이 아닌 콘텐츠 기반으로 설정합니다.
- 모바일 퍼스트 접근: 작은 화면을 먼저 설계하고 점진적으로 확장하는 방식이 구조적으로 더 안전합니다.
타이포그래피 & 여백
- 폰트 크기 유연성: px 대신 rem 단위를 사용하면 사용자의 시스템 폰트 설정을 존중합니다.
- 모바일 최소 폰트: 본문 최소 16px, 캡션은 12px 이상을 유지합니다.
- 줄 길이(Line Length): 한 줄당 45~75자를 넘지 않도록 max-width를 설정합니다.
- 터치 타겟 크기: 버튼, 링크 등 인터랙티브 요소는 최소 44×44px 이상을 확보합니다.
이미지 & 미디어
- 유연한 이미지:
max-width: 100%를 기본으로 설정해 컨테이너를 벗어나지 않게 합니다. - srcset 활용: 화면 해상도에 따라 적절한 크기의 이미지를 로드하면 성능이 개선됩니다.
- 비율 유지:
aspect-ratio속성으로 이미지 영역의 비율을 고정하면 레이아웃 깨짐을 방지합니다. - WebP 포맷 우선: JPEG/PNG 대비 30~40% 파일 크기가 줄어 모바일 로딩 속도가 개선됩니다.
내비게이션 & 인터랙션
- 햄버거 메뉴 접근성: 모바일 메뉴는 키보드 탐색과 스크린 리더가 접근 가능해야 합니다.
- Hover 의존 금지: 터치 환경에서 hover가 작동하지 않으므로 핵심 기능을 hover에만 의존하지 않습니다.
- 스크롤 방향 고려: 모바일에서 가로 스크롤이 생기면 사용자 경험이 크게 저하됩니다.
성능 & 검수
- 실기기 테스트: 크롬 개발자 도구 외에 실제 iOS/Android 기기에서 반드시 확인합니다.
- Lighthouse 점수: 구글 Lighthouse로 성능, 접근성, SEO 점수를 정기적으로 확인합니다.
- 폼 입력 편의성: 이메일 입력창에
type="email", 전화번호에type="tel"을 지정하면 모바일 키보드가 자동 전환됩니다. - 하단 내비게이션 영역 확보: iOS 홈 인디케이터, 안드로이드 내비게이션 바와 겹치지 않도록 safe area를 고려합니다.