AI 화면 검사와 수정

기존 화면을 자동으로 검사한 뒤 수정 전후를 같은 조건에서 확인합니다.

학습 카드 1장

이 단원의 학습 카드

모든 학습 카드 내용을 아래에서 차례로 볼 수 있습니다.

01 실습 화면 검사와 수정 Impeccable로 기존 화면 검사하고 다듬기 기존 화면을 자동 검사하고, 범위를 정해 고친 뒤 같은 검사로 결과를 다시 확인할 수 있습니다.

Impeccable은 기존 화면을 검사하고 수정한 뒤 같은 조건에서 다시 확인하는 작업 흐름입니다.

실제 예제에서는 기준판의 결정형 검사 2건이 적용판에서 0건으로 줄었습니다. axe-core 자동 접근성 검사와 가로 넘침 검사도 데스크톱·모바일에서 0건이었습니다.

Codex와 Claude Code 모두 /impeccable로 시작합니다. Codex가 설치한 프로젝트 훅의 승인을 요구하면 /hooks에서 내용을 확인하고 승인해야 검사 명령이 이어집니다.

이 결과는 모든 접근성과 디자인 판단을 통과했다는 뜻이 아닙니다. 사용한 명령, 검사 기록, 남은 위험은 전체 Impeccable 실습에서 확인할 수 있습니다.

프로젝트 폴더에서 `npx impeccable install`을 실행하고 사용 중인 AI 도구를 다시 엽니다. Codex에서 프로젝트 훅 승인을 묻는다면 `/hooks`를 열어 내용을 확인한 뒤 승인합니다.
`/impeccable init`을 실행해 화면의 대상과 디자인 기준을 기록합니다.
원본 파일을 남기고 `npx impeccable detect index.html`로 첫 검사 결과를 저장합니다.
`/impeccable polish index.html`로 실행합니다. 유지할 내용과 바꾸지 말아야 할 범위를 함께 적습니다.
같은 detect 명령을 다시 실행해 정해진 문제 모양이 줄었는지 확인합니다.
`/impeccable audit index.html`을 실행합니다. 1440픽셀과 390픽셀 화면, 키보드 이동, 가로 잘림도 직접 확인합니다.

이 단계의 실제 화면

화면에서 확인할 것 같은 화면 크기에서 수정 전후를 비교하고 자동 검사 밖의 항목도 직접 확인합니다. Impeccable f88b283 · 2026-08-05

연습

내 화면 하나를 검사한 뒤 자동 검사 결과와 사람이 직접 판단할 항목을 두 칸으로 나눠 적습니다.

수정 전후에 같은 검사와 같은 화면 크기를 사용하고, 남은 위험을 한 줄로 적으면 통과합니다.

알아두면 좋습니다

검사 결과가 0건이어도 좋은 디자인이나 전체 접근성을 통과했다고 말하지 않습니다. 자동 검사는 정해진 코드 모양만 찾습니다.