gholtzap/lintapple

lintapple – 개발자를 위한 UI 린팅 도구

정의 – lintapple은 ui-policy.json 파일에서 정의한 시각적 디자인 규칙 집합에 대해 웹 앱의 사용자 인터페이스를 검사하는 Node 기반 명령줄 유틸리티입니다. AI가 생성할 수 있는 UI 문제를 잡아내어 "AI가 나쁜 UI를 만드는 것이 불가능해야 한다"는 것을 보장하는 것을 목표로 합니다.

사용 방법

1. dev-dependency로 설치합니다 (Node 22+). init 명령은 ui-policy.json 파일을 스캐폴드하고 lint:ui npm 스크립트를 추가합니다.
2. 앱이 서빙되는 동안 스크립트를 실행합니다 (기본값 http://localhost:3000). 도구는 페이지를 크롤링하고 글꼴, 대비, 컨트롤 크기, 간격, 정렬, 모서리 반경 등을 측정하고 결과 목록을 출력합니다.
3. 각 결과는 위반된 규칙, 관련 요소, 측정값 및 권장 수정 사항을 보여줍니다. 종료 코드는 CI가 실행이 통과했는지(0), 문제가 발견되었는지(1), 또는 완료에 실패했는지(2)를 알 수 있게 합니다.
4. JSON 보고서를 출력하거나(--json) 도구를 다른 URL로 지정할 수 있습니다.
5. 비동기적으로 로드되는 페이지의 경우 CSS 선택자(--ready)로 페이지가 준비된 시점을 lintapple에 알릴 수 있습니다.

Playwright와의 통합 – 작은 헬퍼(expectUI)를 Playwright 테스트에서 가져올 수 있습니다. 페이지가 준비된 후 await expectUI(page, testInfo)를 호출합니다. UI 위반이 있으면 테스트가 실패하고 JSON 보고서가 테스트 출력에 첨부됩니다.

마크업 헬퍼 – 대부분의 검사는 추가 마크업 없이 작동하지만 데이터 속성을 추가하여 린터에 더 많은 레이아웃 컨텍스트를 제공할 수 있습니다:

• data-ui-stack, data-ui-actions, data-ui-container – 간격 검사를 위한 그룹.
• data-ui-number – 동일한 너비의 숫자가 필요한 숫자.
• data-ui-content – 텍스트가 경계 내에 유지되어야 하는 컨테이너.
• data-ui-align / data-ui-align-item – 정렬 그룹.
• data-ui-radius / data-ui-radius-inner – 일관된 모서리 반경과 내부 관계를 강제합니다.

정책 파일에서 controlContainers를 구성하여 기존 버튼 컨테이너를 대상으로 지정할 수도 있습니다.

중요성 – UI 일관성은 수동으로 강제하기 어렵습니다. 특히 UI 코드가 AI 도구에 의해 생성되거나 수정될 때 더욱 그렇습니다. lintapple은 코드가 출시되기 전에 시각적 표준(글꼴 크기, 대비 비율, 버튼 크기, 정렬 등)이 준수되는지 자동으로 검증하는 방법을 개발자에게 제공하며 기존 테스트 파이프라인에 직접 연결됩니다.

라이선스 – MIT.

---

모든 세부 사항은 리포지토리의 README에서 직접 가져왔습니다.