Vibe Dictionary
바이브 코딩·디자인 용어집
바이브 코딩과 디자인 시스템의 개념을 디자이너의 언어로 풀어냈습니다. 막혔을 때 찾아보세요. 전체 187개 용어.
데이터 모델
관계형 DB (Relational Database)테이블 (Table)컬럼 (Column)행 (Row, Record)데이터 형태 (스키마, Schema)기본 키 (Primary Key, PK)외래 키 (Foreign Key, FK)NOT NULL 제약UNIQUE 제약인덱스 (Index)1:N 관계 (One-to-Many)N:N 관계 (Many-to-Many)JOIN (조인)참조 무결성 (Referential Integrity)마이그레이션 (Migration)SQL (Structured Query Language)데이터 모델 (Data Model)더미 데이터DDL (Data Definition Language)ERD (Entity Relationship Diagram)데이터베이스 (Database, DB)
백엔드
클라이언트-서버 모델HTTPHTTP 메서드 (GET/POST/PUT/DELETE)상태 코드 (Status Code)API (Application Programming Interface)REST APIJSON비동기와 async/await인증 (Authentication)인가 (Authorization)세션과 토큰JWT (JSON Web Token)OAuth (소셜 로그인)BaaS (Backend as a Service)Endpoint프론트엔드 (Frontend)백엔드 (Backend)URL쿠키 (Cookie)로컬 스토리지 (localStorage)AuthGuard (인증 가드)Data API (PostgREST)사용량 기록 (audit log)Rate Limiting (한도 정책)
Supabase
design thinking
바이브 코딩 (Vibe Coding)바이브 디자인 (Vibe Design)프롬프트 정밀도묘사 vs 조립UX 5계층 (JJG 5 Planes)전략 (Strategy Plane)범위 (Scope Plane)구조 (Structure Plane)뼈대 (Skeleton Plane)표면 (Surface Plane)VDL 3단 계층 (기획·UX·비주얼 디렉션)Project Summary 문서UX Flow 문서비쥬얼 디렉션 문서추상화의 역사안드레이 카파시 (Andrej Karpathy)제시 제임스 개럿 (Jesse James Garrett, JJG)결정의 3계층 (기획 → UX → 비주얼 디렉션)AI 협업 3원칙설계가 곧 구현 (Design as Build)컨텍스트 엔지니어링이터레이션 (Iteration)
디자인 시스템
디자인 시스템컴포넌트 / 마스터 컴포넌트Props (속성)State (상태)Variant디자인 토큰스타터키트스토리북 (Storybook)글래스모피즘 (Glassmorphism)MUI (Material UI)디자인 택소노미에어비앤비 디자인 시스템 (DLS)조합 폭발스토리북 4단계 계층스토리북 컨트롤 (4종)스토리북 템플릿네오브루탈리즘 (Neobrutalism)Open Peeps앱셸 (AppShell)GNB (Global Navigation Bar)반응형 (Responsive)브레이크포인트 (Breakpoint)Figma히어로 섹션 (Hero Section)CTA (Call To Action)랜딩 페이지 (Landing Page)마키 (Marquee)argTypesAutodocs비주얼 해킹 (Visual Hacking)
웹 기초
ReactjQueryAJAXHTML (구조)CSS (스타일)JavaScript (동작)import / exportReact Hook (useState · useEffect)DOM (Document Object Model)Provider (전역 상태 공유)브라우저 (Browser)라이브러리 vs 프레임워크패키지 (Package)JSX (JavaScript XML)Framer MotionNext.js (프레임워크)CSR (Client Side Rendering)SSR (Server Side Rendering)데이터 fetch 훅 (useResource 패턴)
개발 환경
Node.jsNPM터미널 (CLI)GitCommitGitHubClaude CodeIDE (작업 환경 4영역)AntigravityCursorGoogle AI Studio에러 레벨 1 (실행 단계 빨간 에러)에러 레벨 2 (콘솔 에러)에러 레벨 3 (의도 불일치)브라우저 개발자 도구되돌리기 4가지 경로git resetgit push (원격 저장소로 올리기)git init (저장소 시작)git remote (원격 저장소 등록)git clone (원격 저장소 받아오기)로컬호스트 (localhost)Vite스모크 테스트 (Smoke Test)
AI 에이전트
Skill (작업 가이드)Rule (자동 적용 규칙)MCP (Model Context Protocol)supabase-integration 스킬서브에이전트 (Sub-agent)Task tool (위임 호출 도구)격리 컨텍스트 (Isolated Context)Audit Report (감사 보고서)AUTO-FIX vs REPORT-ONLY 경계design-system-auditor 서브에이전트.claude/agents/ 디렉토리에이전트 frontmattersub-agent-generator 스킬/project-planning 스킬/component-work 스킬/og-setup 스킬og-auditor 서브에이전트