01 · 시각 협업
Visual Feedback Collaboration
JS 스니펫 한 줄을 붙이면 그 페이지의 모든 요소가 마커 대상이 됩니다. 마커를 만들면 스크린샷·콘솔 로그·네트워크 응답이 자동으로 Evidence Pack에 묶여 첨부돼요.
- 스니펫 1줄 부착 — React/Vue/Vanilla 어디든
- 마커 + 자동 Evidence Pack (스크린샷·콘솔·네트워크)
- 댓글·리액션·재귀 스레드
마커 → 스크린샷·콘솔 자동 첨부
기능
피드백 받고, 검토하고, 적용하기 — 한 흐름으로
새로운 워크플로우를 강요하지 않습니다. 당신이 이미 쓰는 도구 사이에 끼워 넣으세요.
02 · AI 제안
AI Suggestions
AI 가 마커를 유형·우선순위로 분류하고 짧은 이유를 남겨, 피드백이 처음부터 정리돼 있습니다. JS 스니펫은 저장할 때 분류하고, Chrome 확장에서는 저장 전에 제안을 고칠 수 있으며 제목까지 제안하는 서버 AI 는 동의한 뒤에만 켜집니다.
- 유형·우선순위 + 짧은 이유
- 확장: 저장 전에 무엇이든 수정
- 확장: 서버 AI 는 동의한 뒤에만
마커 → AI 제안 → 저장
03 · CLI
CLI Workflow
받은 피드백을 마커 ID로 호출하면, AI가 정리한 Fix 프롬프트가 클립보드에 복사됩니다. Claude Code나 Cursor에 그대로 붙여 적용하세요. 2px는 수정하지 않고, 안내만 합니다.
- `markers list --status open`
- `markers review <id> --run --model claude`
- Fix 프롬프트 → Claude Code · Cursor 그대로
CLI markers review → Claude Code 적용
분석 모듈
마커 하나에 9 가지 시선이 붙습니다
필요한 시선만 켜고 끄세요. 모든 결과는 단일 Evidence Pack으로 합쳐집니다.
- Accessibility (a11y)
WCAG 위반 + 컬러 대비 + 키보드 트랩
- CSS Quality
중복·미사용·specificity 폭주 감지
- Responsive
5 viewport 동시 렌더 + overflow
- SEO
meta · OG · JSON-LD · canonical
- Semantic HTML
heading 순서 · landmark · ARIA 사용
- Page Errors
console · uncaught · 4xx/5xx 상관관계
- Design Consistency
폰트·간격·색 토큰 이탈 감지
- AI Analyzer
AI 가 제안하는 유형·우선순위와 짧은 이유
- Performance
CWV + LCP/INP/CLS 분해