스킬 자체의 표현으로
Web Design Reviewer는 브라우저 자동화 도구를 통해 실행 중인 웹사이트를 조작하고, 시각적으로 검사한 다음, 발견한 문제를 소스 코드에서 수정합니다. 정적 사이트, React·Vue·Angular·Svelte 기반 SPA, Next.js와 Nuxt 같은 풀스택 프레임워크, WordPress와 Drupal 같은 CMS 플랫폼, 그 외 모든 웹 애플리케이션을 다룹니다.
워크플로는 네 단계로 구성됩니다. 컨텍스트를 수집하고 프레임워크와 스타일링 방식을 자동으로 감지하는 단계, 시각적 체크리스트에 따라 페이지를 검사하는 단계, P1부터 P3까지 우선순위를 정해 문제를 수정하는 단계, 그리고 재검증 후 반복하는 단계입니다. 발견된 사항은 레이아웃, 반응형, 접근성, 시각적 일관성으로 분류되며 각각 심각도가 부여됩니다. 수정은 최소 변경 원칙을 따르며 마크다운 리뷰 보고서로 마무리됩니다.
산출물
- Web Design Review Results라는 제목의 마크다운 리뷰 결과 보고서입니다.
- 대상 URL, 감지된 프레임워크, 스타일링, 테스트한 뷰포트, 발견된 문제, 수정된 문제를 다루는 요약 표입니다.
- 우선순위, 페이지, 요소, 설명, 수정된 파일 경로, 수정 세부 내용, 전/후 스크린샷을 담은 개별 이슈 항목입니다.
- 각 이슈가 남겨진 이유와 사용자에게 권장하는 조치를 제시하는 미수정 이슈 섹션, 그리고 일반 권장 사항입니다.
작동 방식
- 01컨텍스트 수집 및 스택 감지
URL이 주어지지 않으면 요청하고, 그다음 package.json, tsconfig.json, tailwind.config, next.config, vite.config, nuxt.config 같은 워크스페이스 파일에서 자동으로 감지를 시도하며, 어떤 페이지가 범위에 포함되는지 묻습니다.
- 02탐색 및 캡처
대상 URL을 열고, 스크린샷을 촬영하고, 가능한 경우 DOM 구조나 스냅샷을 가져오며, 사이트 내비게이션을 통해 추가 페이지를 순회합니다.
- 03시각적 체크리스트에 따른 검사
레이아웃, 반응형, 접근성 및 시각적 일관성 문제는 참조 체크리스트를 따라가며 검토되며, 수정 후에는 동일한 체크리스트가 다시 사용됩니다.
- 04각 문제의 원인 위치 찾기
문제가 있는 요소는 클래스명이나 ID로 코드베이스를 검색하거나, 요소 텍스트나 구조로 컴포넌트를 찾거나, 스타일·컴포넌트·페이지 파일 패턴을 필터링하는 방식으로 소스까지 추적됩니다.
- 05수정 후 재검증
프레임워크별 가이드에 따라 수정이 적용된 다음, 브라우저를 새로고침하거나 dev 서버의 HMR을 기다리고, 수정된 영역의 스크린샷을 다시 찍어 수정 전후를 비교합니다.