코딩 에이전트가 지루한 AI 페이지 대신 프로급 웹사이트를 만들게 하는 설계 감각
단순한 프롬프트 하나로 기업 웹사이트를 만들라고 하면, 대개 비슷한 레이아웃과 무성의한 텍스트가 섞인 결과물이 나옵니다. 이 도구는 에이전트가 실제 브라우저에서 페이지를 확인하고, 디자인 규칙을 강제하며, 완성도를 검증하는 과정을 거치게 합니다. 결과물은 특정 산업에 맞는 팔레트와 타이포그래피, 그리고 실제 사진과 아이콘이 담긴 정제된 웹페이지가 됩니다.
2.5 버전의 새로운 검증 체계
최근 업데이트된 2.5 버전은 단순히 코드를 생성하는 것을 넘어, 실제 브라우저 환경에서 품질을 통제하는 데 초점을 맞춥니다. 에이전트는 페이지를 작성한 후 헤드리스 크롬을 통해 여러 해상도에서 렌더링을 실행합니다. 이때 비어 있는 시각 요소, 깨진 셰이더, 대비 부족, 정렬 오류, 그리고 느린 네트워크에서의 이미지 로딩 문제를 자동으로 감지합니다. 모든 수정 가능한 오류가 해결될 때까지 최대 3회까지 검사를 반복하는 '피니시 게이트'가 적용되어, 완성되지 않은 페이지가 전달되는 것을 막습니다.
산업별 맞춤형 디자인 토큰과 레이아웃
이 도구는 클라이언트의 업종을 소프트웨어, 게이밍, 테크, 제품, 서비스, 장소 등 여섯 가지로 분류합니다. 업종에 따라 팔레트와 구글 폰트 조합, 그리고 히어로 섹션의 레이아웃이 자동으로 결정됩니다. 예를 들어 소프트웨어나 테크 페이지에는 셰이더 효과와 3D 오브젝트가 허용되지만, 카페나 호텔 같은 서비스 페이지는 사진과 타이포그래피 중심의 조용한 디자인으로 제한됩니다. 이러한 규칙은 에이전트가 과도한 효과를 남용하지 않도록 제어하며, 각 페이지에 맞는 적절한 시각적 강도를 유지하게 합니다.
실제 자산과 오프라인 지원
사진과 아이콘은 클라이언트가 제공하지 않는 경우에도 빈칸으로 두지 않습니다. 위키미디어 커먼스와 언스플래시에서 선별된 사진 라이브러리를 사용하며, 출처를 푸터에 명시합니다. 소프트웨어 페이지에는 실제 브랜드 아이콘과 인터페이스 SVG를 로컬에서 해결하여 사용합니다. 번들된 사진은 오프라인에서도 작동하며, 추가 사진이나 아이콘을 다운로드할 때만 네트워크 접근이 필요합니다. API 키나 추가 설치 과정 없이 노드 22 이상과 크롬 계열 브라우저만 있으면 실행할 수 있습니다.
적용 전 확인해야 할 환경과 한계
이 도구는 Claude Code, Codex, Cursor 등 에이전트 기반 코딩 환경에서 작동하도록 설계되었습니다. 노드 22 이상과 Chrome, Edge, Chromium 중 하나가 설치되어 있어야 하며, WebP 출력이나 히어로 사진 크롭을 위해 ffmpeg가 선택적으로 필요합니다. 기존 React, Vue, Svelte 프로젝트에는 해당 스택 내에서 빌드되며, Next.js는 정적 내보내기로 처리됩니다. 라이선스는 MIT이며, 공식적인 토큰이나 암호화폐 프로젝트와 무관합니다. 에이전트가 디자인 결정을 내리는 과정이 자동화되므로, 최종 결과물의 미적 판단은 여전히 개발자의 검토를 거치는 것이 좋습니다.
