대상 사이트 열기
페이지 구성
표본을 뽑으려면 먼저 템플릿 유형을 나눠야 합니다. 이 사이트는 네 종류입니다.
| 템플릿 | 페이지 | 특징 |
|---|---|---|
| 공통 페이지 | 홈, 메뉴, 오시는 길 | 모든 방문자가 지나갑니다 |
| 공지 | 목록 1 + 상세 5 | 콘텐츠가 계속 쌓입니다 |
| 핵심 과업 | 클래스 소개 → 신청 → 완료 | 끊기면 매출이 끊깁니다 |
| 상태·변형 | 검색 결과 없음 | 평소에 안 보이는 화면 |
의도적으로 문제를 남겨둔 교보재입니다. 25장 시작 코드의 문제가 그대로 남아 있고, 1년치 운영이 새 문제를 더 얹었습니다. 이 코드를 그대로 가져다 쓰지 마세요.
이 실습에서 눈여겨볼 것
26장이 강조하는 구분이 이 사이트에 실물로 들어 있습니다. 코드를 고쳐야 낫는 문제와 프로세스를 고쳐야 낫는 문제입니다.
- 코드 문제. 카드 컴포넌트, 색 변수 두 개, 확대 차단, 페이지네이션. 한 번 고치면 열세 페이지가 함께 낫습니다.
- 콘텐츠 문제. 관리자가 공지를 올릴 때마다 붙는 이미지의 대체 텍스트입니다. 어떤 공지는 파일명이 그대로 들어갔고, 어떤 공지는 정보를 담은 이미지인데 비어 있고, 어떤 공지는 "여름 음료 사진"처럼 아무것도 알려주지 않습니다. 코드를 고쳐도 다음 달 공지에서 또 생깁니다.
두 번째 것을 어떻게 멈출지가 이 장의 마지막 질문입니다. 10장의 업로드 화면 프롬프트가 힌트입니다.
실습 순서
- 표본 선정. 열세 장을 다 검사하지 말고, 20장의 다섯 그룹으로 대표를 뽑으세요. 콘텐츠가 자주 바뀌는 페이지는 따로 표시해 둡니다.
- 첫 감사. 표본에 자동 검사를 돌리고, 핵심 과업(클래스 신청) 하나는 5분 루틴과 스크린리더로 직접 완주합니다.
- 개선 스프린트. 페이지별 결과를 한꺼번에 넘겨 가로지르는 원인부터 찾게 하세요.
- 다시 나빠지지 않게. 정기 검사와 기준선을 세웁니다.