📐 브레이크포인트 표준

• 모바일: ~640px (디자인 기준 375)
• 태블릿: 641~1024px
• 데스크톱: 1025px~
• 대형: 1440px~

Tailwind 표준: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536. 외우세요.

📱 모바일 퍼스트 원칙 5가지

① 터치 타겟 최소 44px

Apple HIG / Material 표준. 버튼 사이 간격도 최소 8px.

② 폰트 16px 이하 금지

iOS는 16px 미만이면 입력 폼 클릭 시 자동 줌. 본문은 17~18px 권장.

③ 한 줄 콘텐츠 너비 좁히기

한 줄 50~75자가 가독성 최고. 모바일은 자연스럽고, 데스크톱은 max-width:680px 같은 식.

④ 햄버거 메뉴 신중하게

핵심 메뉴 3개 이하면 하단 탭바가 낫습니다. 햄버거는 발견율 낮음.

⑤ 이미지 srcset 필수

모바일에 1920px 이미지 보내지 마세요. 다운로드 속도 = 이탈률.

🔧 CSS 패턴

/* 모바일 기본 */
.container { padding: 1rem; }

/* 태블릿 이상 */
@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 720px; margin: 0 auto; }
}

/* 데스크톱 */
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

🛠 도구

• 디바이스 mockup: 아이폰 mockup
• 이미지 리사이즈: 리사이즈
• SNS 사이즈: 사이즈 계산기

💡 검증법: Chrome DevTools 디바이스 모드만 믿지 마세요. 실제 폰으로 봐야 합니다. 친구 폰 빌려서라도.