AI에게 화면을 만들어 달라고 했는데, 머릿속 그림과 전혀 다른 결과가 나온 적 있으신가요? “위에 붙어서 따라오는 메뉴”, “뒤가 살짝 비치는 유리 같은 카드”처럼 설명하다 보면 대화만 길어지고 결과는 엉뚱해집니다. 원인은 단순합니다. 이름을 모르기 때문입니다.
그 문제를 풀기 위해 만든 사이트가 VibeRef(바이브레퍼)입니다. 바이브코더를 위한 개발 레퍼런스로, UI 용어 50개 데모와 검증된 개발 레퍼런스 133곳을 한곳에 모았습니다.
이름을 알면, AI에게 정확히 말할 수 있습니다
“상단 메뉴가 스크롤해도 따라오게 해줘”보다 “Sticky Header로 만들어줘”가 훨씬 정확합니다. “유리처럼 반투명한 카드”보다 “Glassmorphism 카드”가 한 번에 통합니다. VibeRef는 바로 이 ‘정확한 이름’을 찾아주는 사전이자, 바로 복사해 쓸 수 있는 AI 요청 문장 모음입니다.
VibeRef 핵심 기능 3가지
1. 직접 만져보는 UI 용어 데모 50개
Sticky Header, Modal, Toast, Skeleton 등 자주 쓰는 UI 패턴을 화면에서 직접 동작시켜 볼 수 있습니다. 각 용어마다 AI에게 그대로 붙여 넣을 수 있는 요청 문장이 함께 제공되어, Claude·Cursor·v0 같은 도구에 바로 활용할 수 있습니다.
2. 검증된 개발 레퍼런스 133곳
검색하면 쏟아지는 수많은 사이트 중에서, 실제로 개발하며 쓸 만한 곳만 골라 분야별로 정리했습니다.
- 디자인·UI/UX – Mobbin, Dribbble, Awwwards, Laws of UX 등
- 개발·기술 스택 – MDN, React·Next.js 문서, Tailwind CSS, shadcn/ui, Supabase 등
- AI·인프라·운영 – Claude Code, Cursor, Hugging Face, Vercel, Cloudflare, Sentry 등
- 학습·개발 도구 – SQLBolt, Postman, JWT.io, Swagger Editor, 눈누(한글 폰트) 등
3. 빠른 검색과 실용 도구
Ctrl + K 한 번으로 전체 레퍼런스를 검색할 수 있고, #폰트 #아이콘 #인증 #배포 #프롬프트 같은 태그로 원하는 자료를 바로 찾을 수 있습니다. 여기에 디바이스 미리보기, 사이트·네트워크 속도 점검 같은 실무 도구와 다크 모드도 지원합니다.
이런 분께 추천합니다
- Claude, Cursor, v0 등 AI로 앱·웹을 만드는 바이브코더
- 원하는 화면을 말로 설명하기 어려운 기획자·디자이너·1인 창업자
- 흩어진 북마크 대신 정리된 개발 레퍼런스가 필요한 개발자
마치며
AI 시대의 개발 실력은 코드를 외우는 능력보다 정확하게 요청하는 능력에서 갈립니다. 그 출발점은 이름을 아는 것입니다. 지금 VibeRef에서 내가 만들고 싶은 화면의 이름부터 찾아보세요. 좋은 사이트를 알고 계시다면 레퍼런스 제안도 환영합니다.
