모바일 콘텐츠 요소 리플로 점검 로그
코드 블록·넓은 표·이미지가 좁은 화면에서 페이지를 가로로 밀지 않는지 실측한 기록.
개발 로그 사이트라 첫 실글에 코드 블록·표·이미지가 반드시 들어온다. published 글에 이런 요소가 없어서 화면이 안 깨져 보였을 뿐이라, 요소 스타일이 없으면 첫 실글에서 바로 깨진다. 그래서 이 요소들을 담은 published 픽스처 한 편으로 360px 뷰포트 실측을 걸었다.
긴 줄이 있는 코드 블록#
가로 스크롤이 페이지가 아니라 블록 안에서 일어나야 한다.
npx astro build && py -3 scripts/verify_site_build.py && py -3 scripts/site_usability_probe.py # 한 줄로 이어 붙인 긴 명령이 pre 안에서만 스크롤되고 페이지를 옆으로 밀지 않아야 한다인라인 code 도 배경 토큰을 받는다.
열이 많은 표#
좁은 화면에서 표 자체가 스크롤되어야 하고, 페이지 전체가 가로로 밀리면 안 된다.
| 단계 | 게이트 | 도구 | 대상 | 판정 | 비고 |
|---|---|---|---|---|---|
| 빌드 | 산출물 | verify_site_build.py | dist | pass/fail | 링크·canonical |
| 스키마 | 프런트매터 | schema.mjs | content | pass/fail | safeParse |
| 프로브 | 렌더링 | site_usability_probe.py | 브라우저 | pass/fail | 대비·리플로 |
| 게시 | 승인 | validate_publish.py | manifest | pass/fail | privacy |
합성 테스트 이미지#
개인 사진이 아니라 합성 이미지다. 좁은 화면에서 컨테이너를 넘지 않아야 한다.
스타일이 존재하는지가 아니라, 계산된 값과 실측 리플로 결과를 단정한다.
세 요소를 한 페이지에 모아 360px 프로브가 실제로 측정할 표적을 만들었다.