AI 기반 웹사이트 종합 진단 도구 'SiteVett' 개발기

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

Playwright와 Gemini를 활용해 웹사이트의 기술적 오류부터 AI 기반 시각적 UX까지 69가지 항목을 자동 점검하는 도구이다.

배경

사용자가 'vibecoding'을 통해 웹사이트의 기술적 결함과 UX를 종합 점검하는 'SiteVett'이라는 도구를 직접 개발하여 커뮤니티에 공유했다.

의미 / 영향

AI 비전 모델을 웹사이트 QA 프로세스에 도입함으로써 기존 자동화 도구가 놓치던 시각적 결함을 효율적으로 감지할 수 있음을 확인했다. 특히 Playwright와 같은 브라우저 자동화 도구와 LLM의 결합은 웹 개발 워크플로우의 품질 관리 단계를 단축시키는 실무적 대안이 된다.

커뮤니티 반응

사용자가 직접 개발한 도구의 상세한 기능 목록에 대해 긍정적인 반응이며, 추가할 기능에 대한 의견을 구하는 중이다.

합의점 vs 논쟁점

합의점

웹사이트 품질 관리를 위해 자동화된 전수 조사가 필요하다는 점에 동의한다.
AI 비전 기술이 기존의 정적 분석이 해결하지 못한 시각적 UX 점검에 유용하다는 인식이 형성됐다.

실용적 조언

웹사이트 배포 전 SiteVett을 통해 .env 파일 노출이나 SSL 만료 같은 보안 취약점을 자동으로 점검할 수 있다.
Gemini AI 비전 기능을 활용해 모바일과 데스크톱 간의 레이아웃 일관성을 수동 확인 없이 검증 가능하다.

섹션별 상세

SiteVett은 Playwright를 사용하여 웹페이지를 실제 브라우저 환경에서 렌더링한다. 단순히 HTML 소스를 가져오는 방식과 달리 자바스크립트 실행 후의 최종 DOM 상태를 확인하며, 이를 통해 404 오류, 끊긴 이미지, 전화번호 및 이메일 링크의 유효성을 전수 조사한다. 크롤링 과정에서 사이트의 모든 페이지를 탐색하여 정적 분석만으로는 발견하기 어려운 런타임 결함을 잡아내는 것이 특징이다.

시각적 및 UX 품질 점검을 위해 Gemini AI 모델을 활용한다. 데스크톱, 태블릿, 모바일 등 다양한 뷰포트의 스크린샷을 분석하여 레이아웃 틀어짐, 브랜드 일관성 결여, 이미지 잘림, CTA 버튼 배치 적절성 등을 평가한다. 이는 기존의 규칙 기반 도구들이 감지하기 어려운 디자인적 감성 품질 문제를 자동화된 방식으로 해결한다.

보안 및 성능 측면에서 69가지 이상의 세부 체크리스트를 실행한다. HTTPS 리다이렉트, SSL 인증서 만료 여부, 노출된 .env/.git 파일, HSTS/CSP 헤더 누락 등을 점검하며 Google PageSpeed Insights를 통한 Lighthouse 점수도 통합하여 제공한다. 개발자가 수동으로 확인해야 했던 복잡한 보안 설정을 한 번의 스캔으로 요약 리포트화하여 관리 효율성을 높인다.

실무 Takeaway

SiteVett은 Playwright와 Gemini AI를 결합하여 웹사이트의 기술적 결함과 시각적 UX 문제를 동시에 진단하는 자동화 도구이다.
단순한 홈페이지만이 아닌 사이트 전체를 크롤링하여 SEO, 보안, 접근성, 성능 등 10개 카테고리에 걸쳐 69가지 항목을 전수 조사한다.
무료 티어는 월 3회 스캔 및 30페이지를 지원하며, 유료 플랜에서는 AI 비전 분석과 폼 테스트 기능을 추가로 제공한다.

언급된 도구

SiteVett추천

Website auditing

Playwright중립

Web rendering and crawling

Gemini추천

AI-powered visual and UX checks

LanguageTool중립

Spelling and grammar checking