바이브코딩으로 웹사이트를 만들면
기능은 멀쩡한데 디자인에서
묘하게 AI 티가 날 때가 있습니다.
버튼은 너무 많고,
여백과 폰트 크기는 제각각이고,
모바일에서는 갑자기 깨집니다.
Vercel Labs에는 이런 문제를
AI가 직접 점검하게 만드는
web-design-guidelines Skill이 있습니다.
Vercel Agent Skills
/
github.com
GitHub - vercel-labs/agent-skills: Vercel's official collection of agent skills
[댓글 @cc.dev_]
1/
설치는 한 줄이면 됩니다.
npx skills add github.com/verce… --skill web-design-guidelines
Codex, Claude Code, Cursor처럼
Agent Skills를 지원하는 환경에서
설치해서 사용할 수 있습니다.
[댓글 @cc.dev_]
2/
이 Skill의 용도는
웹사이트를 새로 만드는 것보다
이미 만들어진 UI를 검토하고
문제점을 찾아내는 데 가깝습니다.
“현재 웹사이트 디자인을
web-design-guidelines 기준으로
전체 검토해주세요.”
이렇게 요청하면 됩니다.
[댓글 @cc.dev_]
3/
검사 범위도 단순히
“예쁜가?”에서 끝나지 않습니다.
레이아웃과 타이포그래피,
폼과 버튼,
애니메이션과 이미지,
접근성과 모바일 UX까지
실제 웹서비스에서 놓치기 쉬운
부분들을 함께 확인합니다.
[댓글 @cc.dev_]
4/
예를 들어 클릭 가능한 요소인데
키보드로 접근할 수 없거나,
이미지에 적절한 alt가 없고,
입력창에 Label이 빠져 있다면
단순 디자인 문제가 아니라
접근성 문제로 찾아낼 수 있습니다.
[댓글 @cc.dev_]
5/
모바일에서 자주 생기는
문제도 점검할 수 있습니다.
버튼의 Touch Target이 너무 작거나,
화면 밖으로 콘텐츠가 튀어나오거나,
모바일에서 Hover에 의존하는 UI처럼
실제 사용성이 떨어지는 부분을
찾는 데 활용할 수 있습니다.
[댓글 @cc.dev_]
6/
바이브코딩할 때는
이런 방식으로 쓰는 게 좋습니다.
“현재 UI를 먼저 검토해주세요.
문제점을 심각도 순으로 정리하고
파일 경로와 수정 이유를 알려주세요.
아직 코드는 수정하지 마세요.”
먼저 Audit만 시키는 겁니다.
[댓글 @cc.dev_]
7/
검토 결과를 확인한 다음에는
“Critical과 High 문제부터 수정하고
모바일과 데스크톱에서 다시 검증해주세요.”
처럼 범위를 좁혀서
수정을 맡기면 됩니다.
처음부터 전체 디자인을
뜯어고치는 것보다 안전합니다.
[댓글 @cc.dev_]
8/
특히 AI에게
“좀 더 세련되게 만들어주세요.”
라고 반복해서 요청하는 것과
이 방식은 꽤 다릅니다.
막연한 취향으로 디자인을 바꾸기보다
정해진 Web Design Guidelines를 기준으로
무엇이 잘못됐는지부터
찾아내게 하는 방식입니다.
[댓글 @cc.dev_]
9/
한 가지 더 알아둘 점이 있습니다.
이 Skill의 Guidelines는
고정된 문서만 보는 구조가 아니라
Vercel이 관리하는 최신 Guidelines를
가져와 검토하도록 설계돼 있습니다.
웹 디자인 기준이 업데이트돼도
Agent의 오래된 기억에만
의존하지 않도록 만든 겁니다.
[댓글 @cc.dev_]
10/
바이브코딩에서는 기능 하나를
더 붙이는 것보다
한 번 멈추고 전체 UI를
검토하는 시간이 필요합니다.
기능은 AI가 빠르게 만들어주지만
좋은 UX까지 자동으로
보장되는 건 아니기 때문입니다.
사이트가 어느 정도 완성됐다면
“기능 하나 더 만들어줘” 대신
“지금까지 만든 화면부터
제대로 검토해줘.”
이 요청을 한번 해볼 만합니다.
