동네 가게 사장님이 폰으로 열어도 안 깨지는 한 페이지 홈페이지입니다. 가상의 헤어살롱 예시이고 구성은 실제 납품과 같습니다(소개-가격-작업-오시는 길-예약 문의). 직접 구현한 부분 - 375px에서 먼저 완성하고 넓히는 순서. 미디어쿼리를 min-width 로만 써서 "폰에서만 깨지는" 문제를 막음 - 가격을 표가 아니라 카드로 세워 좁은 화면에서 가로로 넘치지 않게 함 - 예약 문의 폼 - 형식 검증, 틀린 칸으로 포커스 이동, 완료 안내를 스크린리더가 읽게 처리 - 터치 목표 44px 이상, 색만으로 정보를 구분하지 않음, 모션 최소화 설정 존중 - 메타태그-오픈그래프-지역업체 구조화 데이터 "반응형입니다"라고 하지 않습니다. 375-768-1280px에서 문서 폭과 화면 폭을 재고, 화면 밖으로 나간 요소-작은 터치 목표-콘솔 에러를 코드로 셉니다. 세 폭 전부 가로 스크롤 0, 콘솔 에러 0건. React 19 - TypeScript - Vite - 정적 배포