Lintapple이 AI가 만든 화면의 UI 규칙을 검사한다

Node.js 22 이상에서 실행되는 Lintapple은 웹 화면의 글꼴, 대비, 버튼 크기와 배치 등을 검사한다. 앱의 UI가 정한 규칙을 따르는지 확인하려는 개발자라면 자동 검사에 활용할 수 있다.

Lintapple은 무엇을 검사하나?

Lintapple은 화면 요소의 크기와 위치, 글꼴 같은 UI 기준을 확인하는 도구다. 화면 검사는 교정자가 정해 둔 기준표에 맞춰 틀린 곳을 찾는 일에 빗대면 쉽다. 각 결과에는 규칙, 요소, 측정값과 권장 수정 방법이 표시된다.

글꼴, 대비, 컨트롤 크기, 화면 경계 검사는 별도 표시 없이 작동한다. 요소 사이 간격이나 정렬처럼 레이아웃 정보가 필요한 검사는 다음 속성을 화면 요소에 추가해 사용할 수 있다.

정책 파일의 controlContainers를 사용해 기존 버튼 컨테이너를 선택할 수도 있다. 예시 스타일에서 관련 예를 볼 수 있다.

설치하고 실행하려면

앱 프로젝트 디렉터리에서 설치와 초기화를 실행한다.

npm install -D lintapple && npx lintapple init

이 명령은 ui-policy.json과 lint:ui 스크립트를 만든다. 기존 설정은 유지된다. 정책 파일에서 앱에 맞는 글꼴과 글자 크기를 지정하고, lint:ui 스크립트에 앱 주소를 설정해야 한다. 기본 주소는 http://localhost:3000이다.

앱을 실행한 뒤 다음 명령으로 검사한다.

npm run lint:ui

검사 결과 종료 코드는 0이면 통과, 1이면 발견 사항이 있음, 2면 검사가 완료되지 않았음을 뜻한다. 다른 주소를 검사하거나 JSON 보고서를 저장할 때는 다음처럼 실행한다.

npx lintapple http://localhost:3000 --json

페이지가 비동기적으로 로드되면 준비 완료 시 표시되는 선택자를 --ready에 전달한다.

npx lintapple http://localhost:3000 --ready '[data-app-ready]'

Playwright 테스트에도 넣을 수 있나?

Playwright(브라우저 자동화 도구)를 사용하는 기존 테스트에서 페이지가 준비된 뒤 다음 코드를 추가하면 된다. 발견 사항이 있으면 테스트가 실패하고 JSON 보고서가 첨부된다. 도우미 함수는 ui-policy.json을 읽는다.

import { expectUI } from 'lintapple/playwright';

await expectUI(page, testInfo);

Playwright 테스트 예시도 제공된다. 설치 방법과 도구 설명은 Lintapple 저장소, 배포 패키지는 npm, 실행 가능한 화면은 데모에서 확인할 수 있다. 라이선스는 MIT이며 LICENSE를 따른다.

사용하려면 Node.js 22 이상인지, ui-policy.json의 글꼴·글자 크기와 검사할 앱 주소가 맞는지 확인하면 된다. 원문은 가격이나 검사 규칙의 전체 목록, 지원하는 브라우저 범위를 밝히지 않는다.