항상 반응형인 사이트
페이지는 python3 scripts/check_responsive.py (수평 스크롤 없음, 화면 밖으로 튀어나오는 요소 없음, 터치 타겟이 충분히 큼) 검사를 6가지 기준 너비에서 통과해야 완료된 것으로 간주합니다. 이 검사는 CI에서도 실행됩니다. 반응형을 망가뜨리는 PR은 배포될 수 없습니다.
기준 너비 (모두 테스트)
| 너비 | 사용처 |
|---|---|
| 320 px | 소형 안드로이드, iPhone SE (줌 상태) |
| 375 px | 표준 iPhone (1순위 대상: 사용자가 TikTok에서 유입) |
| 414 px | 대형 폰 |
| 768 px | 태블릿 세로 |
| 1024 px | 태블릿 가로 / 소형 노트북 |
| 1440 px | 데스크톱 |
스크립트가 테스트하는 크기: 320×640, 375×667, 414×896, 768×1024, 1024×600 (낮은 화면), 1440×900.
CSS 규칙
- 모바일 우선: 기본 스타일은 320px 기준으로 작성하고
@media (min-width: ...)를 사용하여 확장합니다. 중단점은600px,900px,1200px입니다 (다른 곳에 임의 값 사용 금지; 컴포넌트는@container사용 가능). - 고정 너비 금지: 280px를 초과하는 고정 너비는
min()/max-width: 100%없이 사용하지 마세요:width: min(520px, 100%). - 유동적인 타이포그래피:
clamp()사용: 제목clamp(32px, 7vw, 72px), 본문 텍스트 최소 16px (모바일에서 이보다 작으면 iOS에서 입력 필드 줌 발생). - 높이:
min-height: 100svh사용 (100vh는 모바일 주소 표시줄 아래로 넘어감). 텍스트 블록에 고정height사용 금지. - 측면 여백: 모바일에서 16px 거터 (
space-4), 노치 화면을 위해env(safe-area-inset-left/right)추가 (뷰포트는 이미viewport-fit=cover설정됨). - 긴 텍스트: URL, 명령어, 파일 이름에
overflow-wrap: anywhere; 코드 블록은 블록 내에서overflow-x: auto처리, 페이지 전체에 적용 금지. - 그리드: 튜토리얼 카드에
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr))사용. - 튀어나오는 장식 요소 (
byte/spark블록, 캔버스):position: fixed또는 부모에overflow: clip, 크기는min(vw, px)사용. - 터치: 버튼 및 개별 링크는 ≥ 44 × 44 px (24px = 스크립트 차단 최소값, WCAG 2.2), 두 대상 사이 최소 8px 간격.
:hover에만 의존하는 정보 금지::focus-visible및 터치 상태 제공. - 비디오 및 iframe (YouTube):
aspect-ratio: 16 / 9; width: 100%; height: auto;— TikTok 비디오는9 / 16에max-width: 360px.
이미지
- HTML에 항상
width와height명시 (레이아웃 이동 방지, CLS) + CSS에max-width: 100%; height: auto. - 형식: 로고 및 아이콘은 SVG, 캡처 이미지는 WebP/AVIF,
srcset+sizes사용 (예: 480w, 960w, 1600w). - 스크롤 아래 이미지는
loading="lazy"및decoding="async"; 절대 LCP(주요 이미지)에는 사용 금지, 해당 이미지는fetchpriority="high"사용. - 튜토리얼 썸네일:
aspect-ratio: 16 / 9; object-fit: cover.
Viewport (이미 설정됨, 제거 금지)
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
금지: maximum-scale=1, user-scalable=no (줌 차단, 접근성에 나쁨).
애니메이션 및 모바일 성능
prefers-reduced-motion준수 (프로젝트 규칙).- 캔버스:
devicePixelRatio를 2로 제한하고 600px 미만에서는 밀도 낮춤 (app.js에 이미 구현, 이 원칙 유지). - 모바일에서 무거운
backdrop-filter중첩 금지.
확인하기
# check-site 컨테이너가 :8088에서 실행 중일 때, 또는 인수 없이 (로컬 서버가 site/에서 실행 중일 때)
python3 scripts/check_responsive.py # site/의 모든 페이지 검사
python3 scripts/check_responsive.py --shots /tmp/rs # + 너비별 PNG 캡처
스크립트는 scrollWidth > 너비이거나, 보이는 요소가 가장자리를 넘거나, 터치 대상이 24px 미만이거나 (문장 내 링크는 예외), 본문 텍스트가 16px 미만이면 실패합니다. 푸시하기 전에 320px 및 375px 캡처를 확인하세요.