바이브 코딩 용어 사전 · 117개 용어
이름은 몰라도 괜찮아요.
모양을 보고 찾으세요.
헤더, 드로어, 배포, 환경 변수… AI에게 원하는 걸 정확히 말하려면 이름을 알아야 해요. 움직이는 그림으로 익히고, 요청 문장은 복사해 가세요.
01
모양으로 찾기
'옆에서 나오는 메뉴', '가려져요'처럼 생각나는 대로 검색하세요.
02
움직임으로 이해하기
모든 용어가 움직이는 그림으로 보여요. 몇몇은 직접 눌러 볼 수도 있어요.
03
AI에게 복사하기
정확한 용어가 들어간 요청 문장을 그대로 붙여 넣으세요.
분류별로 둘러보기
- 🧱화면 구조 9페이지를 위·가운데·아래로 나누는 큰 덩어리
- 🧭메뉴·이동 10메뉴를 열고 닫고, 원하는 곳으로 이동하는 방법
- 🧩화면 요소 21버튼, 입력창처럼 화면에 올려놓는 부품들
- ✨움직임·효과 7마우스를 올리거나 스크롤할 때 생기는 변화
- 🎨꾸미기 16여백, 정렬, 색, 글꼴 — '예쁘게'를 정확히 말하는 법
- 🛠️개발 기본 17AI가 자꾸 말하는 그 단어들: 프론트, 깃, 터미널…
- 🗄️데이터·로그인 14저장하고, 불러오고, 로그인하고, 결제하기
- 🚀배포·운영 10인터넷에 올리고, 주소 달고, 검색에 나오게
- 🤖AI 코딩 요령 13AI에게 일을 잘 시키는 방법과 용어
전체 용어 찾기
🔍
117개의 용어
- 화면 구조헤더Header페이지 맨 위에 있는 띠. 로고와 메뉴가 주로 들어가요.
- 화면 구조내비게이션 바Navigation Bar (Navbar)다른 페이지로 이동하는 메뉴 링크를 한 줄로 모아 둔 막대예요.
- 화면 구조히어로 섹션Hero Section헤더 바로 아래, 첫 화면을 크게 차지하는 큰 제목과 버튼 영역이에요.
- 화면 구조바디 (본문)Body / Main Content헤더와 푸터 사이, 실제 내용이 들어가는 가운데 영역이에요.
- 화면 구조섹션Section본문을 주제별로 나눈 한 덩어리. '소개', '가격', '후기'가 각각 하나의 섹션이에요.
- 화면 구조사이드바Sidebar본문 옆(주로 왼쪽)에 세로로 길게 붙어 있는 메뉴 영역이에요.
- 화면 구조푸터Footer페이지 맨 아래에 있는 띠. 회사 정보, 연락처, 저작권 표시가 들어가요.
- 화면 구조반응형Responsive Design화면 크기(휴대폰·태블릿·PC)에 맞춰 배치가 알아서 바뀌는 것이에요.
- 화면 구조랜딩 페이지Landing Page광고나 링크를 눌러 처음 '착륙'하는 한 장짜리 소개 페이지예요.
- 메뉴·이동햄버거 메뉴Hamburger Menu줄 세 개(☰) 아이콘. 누르면 숨겨 둔 메뉴가 나타나요.
- 메뉴·이동드로어Drawer (Off-canvas)화면 옆에서 스르륵 밀려 나오는 메뉴 판이에요.
- 메뉴·이동드롭다운Dropdown Menu버튼을 누르면 아래로 툭 떨어지듯 펼쳐지는 작은 메뉴예요.
- 메뉴·이동탭Tabs같은 자리에서 버튼을 눌러 내용만 바꿔 보여 주는 방식이에요.
- 메뉴·이동스무스 스크롤Smooth Scroll메뉴를 누르면 해당 위치까지 '뚝' 끊기지 않고 미끄러지듯 이동해요.
- 메뉴·이동고정 헤더Sticky Header아래로 스크롤해도 헤더가 화면 위에 계속 붙어 있어요.
- 메뉴·이동페이지네이션Pagination목록이 길 때 1, 2, 3… 번호로 페이지를 나눠 보여 주는 방식이에요.
- 메뉴·이동무한 스크롤Infinite Scroll끝까지 내리면 다음 내용이 자동으로 계속 붙어서 나와요.
- 메뉴·이동브레드크럼Breadcrumb'홈 › 상의 › 티셔츠'처럼 지금 내가 어디에 있는지 경로를 보여 줘요.
- 메뉴·이동하단 탭바Bottom Navigation (Tab Bar)휴대폰 앱 맨 아래에 고정된 아이콘 메뉴 줄이에요. 홈·검색·마이페이지 같은 것.
- 화면 요소CTA 버튼CTA Button (Call to Action)'지금 시작하기', '구매하기'처럼 방문자가 꼭 눌렀으면 하는 가장 눈에 띄는 버튼이에요.
- 화면 요소카드Card사진·제목·설명을 네모 상자 하나에 묶어 놓은 덩어리예요.
- 화면 요소모달 (팝업)Modal / Dialog화면 가운데 뜨는 창. 뒤 화면은 어둡게 가려지고 이 창부터 처리해야 해요.
- 화면 요소토스트 알림Toast Notification화면 구석에 잠깐 떴다가 저절로 사라지는 작은 알림이에요.
- 화면 요소아코디언Accordion제목을 누르면 아래 내용이 펼쳐지고, 다시 누르면 접혀요.
- 화면 요소캐러셀 (슬라이더)Carousel / Slider여러 장의 이미지나 카드를 옆으로 넘겨 가며 보여 주는 판이에요.
- 화면 요소툴팁Tooltip마우스를 올리면 작은 말풍선으로 설명이 뜨는 것이에요.
- 화면 요소스켈레톤 로딩Skeleton Loading내용을 불러오는 동안 회색 뼈대 모양을 먼저 보여 주는 것이에요.
- 화면 요소로딩 스피너Loading Spinner기다리는 동안 빙글빙글 도는 동그라미예요.
- 화면 요소진행 막대Progress Bar얼마나 진행됐는지 막대가 차오르며 보여 줘요.
- 화면 요소배지Badge아이콘 귀퉁이의 빨간 숫자, 또는 'NEW', 'SALE' 같은 작은 딱지예요.
- 화면 요소태그 · 칩Tag / Chip'#여행', '서울' 처럼 작고 둥근 알약 모양 이름표. 누르면 거르기(필터)가 되기도 해요.
- 화면 요소입력창 (폼)Form / Input Field이름, 이메일처럼 사용자가 글자를 써 넣는 칸과 그 묶음이에요.
- 화면 요소셀렉트 박스Select (Dropdown List)눌러서 여러 보기 중 하나를 고르는 상자예요. 지역, 사이즈 선택 같은 것.
- 화면 요소체크박스 · 라디오 버튼Checkbox / Radio Button체크박스는 여러 개를 고를 수 있고(☑), 라디오 버튼은 딱 하나만 골라요(◉).
- 화면 요소토글 스위치Toggle Switch켜기/끄기를 바꾸는 옆으로 미는 스위치예요.
- 화면 요소검색창Search Bar돋보기 아이콘과 함께 검색어를 입력하는 긴 칸이에요.
- 화면 요소아바타 (프로필 사진)Avatar사용자를 나타내는 작은 동그라미 사진이에요. 사진이 없으면 이름 첫 글자를 보여 줘요.
- 화면 요소표 (테이블)Table / Data Table가로줄(행)과 세로줄(열)로 데이터를 정리해서 보여 주는 표예요.
- 화면 요소빈 화면 안내Empty State보여 줄 내용이 없을 때 '아직 아무것도 없어요' 하고 안내하는 화면이에요.
- 화면 요소플로팅 버튼Floating Action Button (FAB)스크롤해도 화면 구석에 둥둥 떠 있는 동그란 버튼이에요.
- 움직임·효과호버 효과Hover Effect마우스를 올렸을 때 색이 바뀌거나 살짝 커지는 반응이에요.
- 움직임·효과트랜지션Transition색이나 크기가 '뚝' 바뀌지 않고 정해진 시간 동안 부드럽게 바뀌게 하는 설정이에요.
- 움직임·효과애니메이션Animation (Keyframes)정해 둔 움직임을 처음부터 끝까지 재생하는 것. 반복하거나 자동으로 움직일 수 있어요.
- 움직임·효과스크롤 페이드인Fade-in on Scroll스크롤해서 내용이 화면에 들어올 때 서서히 나타나는 효과예요.
- 움직임·효과패럴랙스Parallax Scrolling스크롤할 때 배경과 앞쪽 물체가 서로 다른 속도로 움직여 입체감이 생겨요.
- 움직임·효과흐르는 띠 (마퀴)Marquee / Ticker로고나 글자가 옆으로 끝없이 흘러가는 띠예요.
- 움직임·효과다크 모드Dark Mode배경은 어둡게, 글자는 밝게 바꾼 화면이에요. 스위치로 왔다 갔다 할 수 있어요.
- 꾸미기안쪽 여백 (패딩)Padding상자 테두리와 안의 내용 사이의 빈 공간이에요.
- 꾸미기바깥 여백 (마진)Margin상자와 상자 사이를 띄우는 바깥쪽 빈 공간이에요.
- 꾸미기정렬 (가운데 정렬)Alignment (Center)글자나 상자를 왼쪽·가운데·오른쪽 어디에 맞출지 정하는 거예요.
- 꾸미기플렉스박스Flexbox상자들을 한 줄(가로 또는 세로)로 나란히 늘어놓는 배치 방법이에요.
- 꾸미기그리드Grid Layout상자들을 바둑판처럼 가로·세로 칸에 맞춰 배치하는 방법이에요.
- 꾸미기글꼴 (폰트)Font / Typography글자의 모양(서체), 크기, 굵기, 줄 간격을 정하는 것이에요.
- 꾸미기색상 팔레트Color Palette / Theme Colors사이트에서 쓸 메인 색, 보조 색, 배경 색을 미리 정해 둔 묶음이에요.
- 꾸미기그라데이션Gradient한 색에서 다른 색으로 자연스럽게 번지듯 바뀌는 색칠이에요.
- 꾸미기그림자Box Shadow상자 아래에 그림자를 깔아서 떠 있는 것처럼 보이게 해요.
- 꾸미기둥근 모서리Border Radius상자의 뾰족한 모서리를 둥글게 깎는 거예요.
- 꾸미기테두리Border상자 둘레에 그리는 선이에요. 굵기, 색, 실선·점선을 정할 수 있어요.
- 꾸미기아이콘Icon🔍 ❤️ 🛒 처럼 뜻을 그림으로 보여 주는 작은 기호예요.
- 꾸미기유리 효과Glassmorphism (Backdrop Blur)뒤가 뿌옇게 비치는 반투명 유리 같은 상자예요.
- 꾸미기겹침 순서 (z-index)z-index (Stacking Order)상자들이 겹칠 때 어떤 게 위로 올라올지 정하는 번호예요.
- 꾸미기말줄임표Text Ellipsis (Truncate)글이 너무 길면 뒤를 '…'으로 잘라서 칸 밖으로 넘치지 않게 해요.
- 꾸미기디자인 시스템Design System / UI Library버튼, 색, 글꼴, 여백 규칙을 미리 정해 둔 '디자인 규칙 모음'이에요.
- 개발 기본프론트엔드Frontend사용자 눈에 보이고 손으로 누르는 '화면' 쪽 전부를 말해요.
- 개발 기본백엔드Backend눈에 안 보이는 뒤쪽에서 저장, 계산, 로그인 확인 같은 일을 처리하는 부분이에요.
- 개발 기본서버Server24시간 켜져 있으면서 사람들의 요청을 받아 응답해 주는 컴퓨터예요.
- 개발 기본HTML · CSS · 자바스크립트HTML / CSS / JavaScript웹페이지를 이루는 세 가지 언어. HTML은 뼈대, CSS는 꾸미기, JS는 움직임이에요.
- 개발 기본프레임워크Framework웹사이트를 빨리 만들 수 있게 기본 뼈대와 규칙을 갖춰 놓은 도구예요. React, Next.js 같은 것.
- 개발 기본컴포넌트Component버튼, 카드처럼 한 번 만들어 두고 여러 곳에서 다시 쓰는 화면 부품이에요.
- 개발 기본라우팅 (페이지 주소)Routing / URL'/about', '/products/12'처럼 주소마다 어떤 페이지를 보여 줄지 정하는 거예요.
- 개발 기본패키지 · 라이브러리Package / Library (npm)다른 사람이 미리 만들어 둔 기능 묶음. 설치해서 가져다 써요.
- 개발 기본로컬호스트Localhost내 컴퓨터 안에서만 열리는 연습용 사이트 주소예요. 보통 localhost:3000.
- 개발 기본터미널Terminal / Command Line마우스 대신 글자 명령어를 쳐서 컴퓨터를 움직이는 검은 창이에요.
- 개발 기본깃 (커밋)Git / Commit코드를 바꿀 때마다 '세이브 포인트'를 남겨서 언제든 예전으로 돌아갈 수 있게 해 주는 도구예요.
- 개발 기본브랜치Branch원본은 그대로 두고, 복사본 가지를 따로 만들어 실험하는 거예요.
- 개발 기본저장소 (레포)Repository (GitHub)프로젝트 코드와 커밋 기록을 통째로 보관하는 곳. 보통 GitHub에 올려 둬요.
- 개발 기본환경 변수 · API 키Environment Variable / API Key비밀번호, API 키처럼 코드에 직접 쓰면 안 되는 비밀 값을 따로 보관하는 곳이에요.
- 개발 기본디버깅 (버그 잡기)Bug / Debugging프로그램이 이상하게 동작하는 문제(버그)를 찾아서 고치는 일이에요.
- 개발 기본에러 메시지Error Message무엇이 잘못됐는지 알려 주는 (주로 빨간) 글. 겁먹지 말고 그대로 복사하면 돼요.
- 개발 기본개발자 도구 (콘솔)DevTools / Console브라우저에서 F12를 누르면 열리는 창. 숨겨진 에러와 기록을 볼 수 있어요.
- 데이터·로그인APIAPI (Application Programming Interface)프로그램끼리 정해진 방식으로 '이것 좀 줘', '이거 저장해 줘' 하고 주고받는 창구예요.
- 데이터·로그인데이터베이스 (DB)Database회원 정보, 글, 주문 내역처럼 계속 남아 있어야 하는 데이터를 정리해 보관하는 창고예요.
- 데이터·로그인JSONJSON데이터를 { "이름": "철수", "나이": 20 } 처럼 이름표와 값으로 적는 형식이에요.
- 데이터·로그인CRUDCRUD (Create · Read · Update · Delete)데이터를 다루는 네 가지 기본 동작: 만들기, 읽기, 고치기, 지우기.
- 데이터·로그인ORMORM (Prisma, Drizzle)어려운 DB 명령어(SQL) 대신 익숙한 코드로 데이터베이스를 다루게 해 주는 통역사예요.
- 데이터·로그인로그인 (인증)Authentication (Auth)'이 사람이 누구인지' 확인하는 과정. 회원가입, 로그인, 로그아웃이 여기에 속해요.
- 데이터·로그인소셜 로그인Social Login (OAuth)'카카오로 시작하기', '구글로 로그인'처럼 다른 서비스 계정으로 로그인하는 거예요.
- 데이터·로그인쿠키 · 세션Cookie / Session사이트가 '이 사람 아까 로그인했지' 하고 기억하려고 브라우저에 남기는 작은 메모예요.
- 데이터·로그인캐시Cache자주 쓰는 데이터를 가까운 곳에 임시로 저장해 두고 빠르게 꺼내 쓰는 거예요.
- 데이터·로그인파일 저장소 (업로드)File Storage / Upload사진, 동영상, PDF 같은 파일을 올려서 보관하는 곳이에요.
- 데이터·로그인웹훅Webhook다른 서비스에서 일이 생기면 내 서버로 '방금 이런 일 있었어!' 하고 자동으로 알려 주는 거예요.
- 데이터·로그인결제 연동Payment Integration (PG)사이트에서 카드·간편결제로 돈을 받을 수 있게 결제 서비스를 붙이는 거예요.
- 데이터·로그인백엔드 서비스 (BaaS)BaaS (Supabase, Firebase)데이터베이스, 로그인, 파일 저장을 직접 만들지 않고 빌려 쓰는 서비스예요.
- 데이터·로그인관리자 페이지Admin Page / Dashboard운영자만 들어가서 회원, 주문, 글을 관리하는 숨겨진 화면이에요.
- 배포·운영배포Deploy내 컴퓨터에서만 보이던 사이트를 인터넷에 올려서 누구나 볼 수 있게 하는 거예요.
- 배포·운영호스팅Hosting (Vercel, Netlify)사이트 파일을 올려 두고 24시간 서비스해 주는 곳을 빌리는 거예요.
- 배포·운영서버리스Serverless서버를 직접 켜 두고 관리하지 않고, 쓸 때만 자동으로 켜지고 쓴 만큼만 돈을 내는 방식이에요.
- 배포·운영도메인Domain'myshop.com'처럼 사람이 기억하기 쉬운 사이트 주소예요.
- 배포·운영HTTPS (보안 연결)HTTPS / SSL주소창의 자물쇠 🔒 표시. 주고받는 내용이 암호화돼서 엿볼 수 없어요.
- 배포·운영빌드Build내가 쓴 코드를 배포할 수 있는 최종 결과물로 '포장'하는 과정이에요.
- 배포·운영SEO (검색 노출)SEO (Search Engine Optimization)구글·네이버 검색 결과에 내 사이트가 잘 나오도록 다듬는 작업이에요.
- 배포·운영링크 미리보기 (OG 이미지)Open Graph (OG Image)카톡이나 SNS에 링크를 보낼 때 뜨는 제목·설명·썸네일 카드예요.
- 배포·운영파비콘Favicon브라우저 탭 제목 옆에 보이는 아주 작은 사이트 아이콘이에요.
- 배포·운영방문자 분석Analytics (GA)몇 명이 왔는지, 어떤 페이지를 많이 보는지 기록하고 보여 주는 도구예요.
- AI 코딩 요령바이브 코딩Vibe Coding코드를 직접 쓰는 대신, AI에게 말로 원하는 걸 설명해서 프로그램을 만드는 방식이에요.
- AI 코딩 요령프롬프트PromptAI에게 보내는 요청 문장이에요. 구체적일수록 결과가 좋아요.
- AI 코딩 요령컨텍스트Context (Context Window)AI가 지금 대화에서 기억하고 참고할 수 있는 정보의 양이에요.
- AI 코딩 요령토큰TokenAI가 글을 읽고 쓰는 단위. 사용량과 요금이 토큰 수로 계산돼요.
- AI 코딩 요령할루시네이션HallucinationAI가 없는 기능이나 틀린 정보를 그럴듯하게 지어내는 현상이에요.
- AI 코딩 요령AI 에이전트AI Agent (Coding Agent)대답만 하는 게 아니라 직접 파일을 만들고, 명령어를 실행하고, 고치기까지 하는 AI예요.
- AI 코딩 요령MCPMCP (Model Context Protocol)AI가 구글 드라이브, 데이터베이스, 브라우저 같은 외부 도구를 쓸 수 있게 연결해 주는 표준 플러그예요.
- AI 코딩 요령규칙 파일Rules File (CLAUDE.md, AGENTS.md)AI가 매번 읽는 '우리 프로젝트 규칙' 메모 파일이에요.
- AI 코딩 요령계획 먼저 시키기Plan Mode / Planning바로 코드를 짜게 하지 말고, 무엇을 어떻게 할지 계획부터 보여 달라고 하는 방법이에요.
- AI 코딩 요령되돌리기 (체크포인트)Checkpoint / RollbackAI가 망가뜨렸을 때 잘 되던 예전 상태로 돌아가는 거예요.
- AI 코딩 요령리팩토링Refactoring겉으로 보이는 기능은 그대로 두고, 속 코드를 깔끔하게 정리하는 거예요.
- AI 코딩 요령스크린샷으로 요청하기Screenshot / Reference Image말로 설명하기 어려울 때 참고 사이트 캡처나 손그림을 AI에게 보여 주는 방법이에요.
- AI 코딩 요령AI 모델AI Model (LLM)Claude, GPT, Gemini처럼 대답을 만들어 내는 AI 그 자체예요. 모델마다 잘하는 게 달라요.