Overview
실제로 떠 있는 dev 서버 위에 항시 연결된 AI 에이전트를 띄워, UI 컴포넌트를 드래그·리사이즈하면 소스의 Tailwind 클래스가 결정론적으로 수정되는 비주얼 리팩토링 도구. `npx wigss --port 3000` 한 줄로 실행되는 npm 패키지(Trae.ai 해커톤 2026 출품작).
Highlights
- 5가지 자율 에이전트 행동 — 컴포넌트 자동 인식 / 디자인 제안(신뢰도 점수) / 실시간 편집 피드백 / 채팅 상담 / 코드 리팩토링 — 도구가 아닌 항시 연결 에이전트로 동작
- WebSocket 기반 양방향 스트리밍(`ws-server.ts` + mutex 큐) — 드래그/리사이즈 이벤트가 실시간으로 GPT-4o에 흘러가고 'X px 차이납니다, 맞출까요?' 같은 능동적 제안이 다시 흘러옴
- AI 없는 결정론적 리팩토링 — Save 시 `fullClassName` 기반 줄 단위 매칭 + Tailwind 토큰 매핑(TW_MAP)으로 diff 생성, fs로 직접 적용. 코드 변경의 안정성과 예측 가능성을 AI 외부에 둠
- iframe-overlay 비주얼 에디터 — dev 서버를 iframe으로 감싸고 오버레이에서 컴포넌트 박스를 렌더, 30fps 스로틀로 라이브 미리보기 + Undo/Redo 50단계 히스토리
- 보안 가드 — origin 검증, rate limit, 경로 순회 공격 방지, diff 검증(className/style만, JS 변경 거부), `.bak` 백업 자동 생성으로 사용자 코드 보호
- Zero-install 배포 — `npx wigss@latest --port 3000` 한 줄로 즉시 실행, `--demo` 플래그로 기존 프로젝트 없이도 체험 가능, 키 미제공 시 대화형 입력
- npm 패키지 공식 배포 (`wigss`) + Apache 2.0 라이선스, Vitest 단위 테스트 포함
Deep Dive
Trae.ai 해커톤 2026 ('에이전트' 주제) 출품작. 출발점은 코딩 에이전트(Cursor/Claude Code/Trae)로 화면을 대충 만드는 건 잘 되지만 '디자인을 다듬는 단계'는 여전히 고통이라는 관찰이었습니다 — '이 카드를 좀 더 크게'를 정확히 말로 옮기기 어렵고, CSS 수정 → 새로고침 → 확인 루프는 느립니다. WIGSS는 Figma 없이, CSS 수동 수정 없이, 그냥 화면에서 드래그하면 소스가 바뀌는 경험을 목표로 합니다.
핵심 아키텍처는 두 개의 구분 — '제안과 대화'는 AI(GPT-4o function calling)에 맡기되, '실제 코드 변경'은 결정론적 매핑(`refactor-client.ts`)으로 처리합니다. 드래그 후 Save를 누르면 `fullClassName`을 키로 소스 줄을 매칭하고 Tailwind 토큰 변환표(TW_MAP)로 px↔클래스를 양방향 변환해 CodeDiff[]를 생성합니다. 이 분리 덕분에 AI가 환각해도 사용자 파일이 망가지지 않습니다.
통신 계층은 항시 연결 WebSocket(`ws` 포트 4001) + mutex 큐로 동시성 안전 — 일반 AI 도구가 'request → response' 모델이라면 WIGSS는 항시 연결 + 능동적 개입에 가깝습니다. 드래그/리사이즈 이벤트가 30fps로 스로틀되어 흐르고, GPT-4o가 'X px 차이납니다, 맞출까요?' 같은 정렬 보정 제안을 실시간으로 돌려줍니다. Editor/Agent 두 개의 Zustand 스토어로 상태가 분리되어 있고, 50단계 Undo/Redo 히스토리를 지원합니다.
운영 안전성은 다층 가드 — origin 검증, rate limit, 경로 순회 공격 방지, diff 검증(className/style만 허용·JS 변경 거부), `.bak` 자동 백업으로 사용자 코드 변경을 안전 범위 안에 가둡니다. 배포는 `npx wigss --port 3000` 한 줄 실행을 목표로 commander 기반 CLI 진입점과 Next.js instrumentation으로 부팅 시 WS 서버 + 에이전트를 자동 기동합니다. `--demo`로 데모 페이지 즉시 체험 가능, npm 패키지로 정식 배포됐습니다.