바이브코딩 용어 사전 — 비개발자를 위한 완벽 가이드

바이브코딩 용어 사전 2026

ChatGPT나 Claude에게 “앱 하나 만들어줘”라고 했는데 원하는 결과가 안 나온 적 있나요? 문제는 AI가 못하는 게 아니라, 우리가 개발 용어를 몰라서 정확하게 주문하지 못한 것입니다. 식당에서 “맛있는 거 주세요”보다 “김치찌개 1인분, 밥 곱빼기, 덜 짜게요”라고 말해야 원하는 게 나오는 것과 같습니다. 이 바이브코딩 용어 사전만 읽으면 코딩을 전혀 몰라도 AI에게 원하는 화면과 기능을 정확히 설명할 수 있습니다.

한눈에 보기

  • 바이브코딩 = 코드를 직접 쓰지 않고 AI에게 말로 설명해서 프로그램을 만드는 것
  • 이 글에서 다루는 것: UI 요소 30개 + 개발 용어 20개 + 실전 대화 예시
  • 각 용어마다 일상 비유 + 실제 화면 설명 + AI에게 요청하는 문장 예시 포함
  • 마지막에 “AI에게 앱 주문하기” 실전 대화 템플릿 제공

바이브코딩이란? — 30초 요약

바이브코딩(Vibe Coding)은 프로그래밍 언어를 배우지 않고, AI에게 자연어(일상 말)로 원하는 프로그램을 설명해서 코드를 생성하는 방식입니다. “로그인 화면 만들어줘”, “할 일 목록 앱 만들어줘”처럼 말하면 AI가 코드를 작성합니다.

그런데 여기서 문제가 생깁니다. “버튼 옆에 그 뭐냐, 켜고 끄는 그 스위치 같은 거 넣어줘”라고 하면 AI가 알아듣기 어렵습니다. “토글 스위치를 버튼 오른쪽에 추가해줘”라고 하면 정확히 원하는 결과가 나옵니다.

즉, 코드를 쓸 줄 몰라도 되지만 개발 용어는 알아야 AI와 소통이 됩니다. 지금부터 그 용어들을 하나씩 쉽게 알려드리겠습니다. 바이브코딩의 개념을 더 알고 싶다면 바이브코딩이란? 2026 완벽 가이드를 참고하세요.

1부: 화면을 구성하는 UI 요소 — “이게 그거였어!”

UI(User Interface)는 사용자가 보고 만지는 화면입니다. 앱이나 웹사이트에서 눈에 보이는 모든 것이 UI 요소입니다. 매일 쓰는 카카오톡, 네이버, 쿠팡 앱에서 이미 이 요소들을 수백 번 사용하고 있습니다. 이름만 몰랐을 뿐입니다.

입력 요소 — 사용자가 정보를 넣는 것들

텍스트박스 (TextBox / Input Field)

  • 일상 비유: 빈칸에 글씨를 쓰는 것. 시험지의 주관식 답란과 같습니다.
  • 어디서 봤나: 네이버 검색창, 카카오톡 메시지 입력칸, 회원가입할 때 이름/이메일 입력하는 칸
  • AI에게 이렇게 말하세요: “이름을 입력하는 텍스트박스를 추가해줘. 플레이스홀더는 ‘이름을 입력하세요’로 해줘.”

텍스트에리어 (TextArea)

  • 일상 비유: 텍스트박스의 큰 버전. 편지지처럼 여러 줄을 쓸 수 있는 넓은 입력칸입니다.
  • 어디서 봤나: 블로그 글 작성란, 고객센터 문의 내용 입력칸, 리뷰 작성란
  • AI에게 이렇게 말하세요: “문의 내용을 입력하는 텍스트에리어를 추가해줘. 5줄 높이로 만들어줘.”

비밀번호 필드 (Password Field)

  • 일상 비유: 텍스트박스인데 입력하면 ●●●●로 보이는 것. ATM 비밀번호 입력과 같습니다.
  • 어디서 봤나: 모든 로그인 화면의 비밀번호 칸
  • AI에게 이렇게 말하세요: “비밀번호 입력 필드를 추가해줘. 눈 아이콘을 눌러 비밀번호를 볼 수 있게 해줘.”

넘버 인풋 (Number Input)

  • 일상 비유: 숫자만 입력할 수 있는 칸. 옆에 ▲▼ 화살표가 있어서 클릭으로도 숫자를 올리고 내릴 수 있습니다.
  • 어디서 봤나: 쇼핑몰에서 수량 선택할 때 (1개, 2개, 3개…)
  • AI에게 이렇게 말하세요: “수량 선택용 넘버 인풋을 추가해줘. 최소 1, 최대 99로 제한해줘.”

선택 요소 — 사용자가 고르는 것들

버튼 (Button)

  • 일상 비유: 엘리베이터 버튼, TV 리모컨 버튼과 같습니다. 누르면 무언가가 실행됩니다.
  • 어디서 봤나: “로그인”, “구매하기”, “검색” 등 모든 클릭 가능한 사각형 영역
  • 종류가 여러 개:
    • 기본 버튼(Primary) — 가장 중요한 동작. 보통 파란색/진한 색으로 강조 (“결제하기”)
    • 보조 버튼(Secondary) — 덜 중요한 동작. 테두리만 있는 버튼 (“취소”)
    • 아이콘 버튼 — 글자 없이 아이콘만 있는 버튼 (❤️ 좋아요, 🗑️ 삭제)
  • AI에게 이렇게 말하세요: “파란색 ‘저장하기’ 기본 버튼과 회색 테두리의 ‘취소’ 보조 버튼을 나란히 배치해줘.”

체크박스 (Checkbox)

  • 일상 비유: 체크리스트의 네모 칸 ☐. 체크하면 ☑가 됩니다. 여러 개를 동시에 선택할 수 있습니다.
  • 어디서 봤나: “이용약관에 동의합니다 ☑”, 이메일에서 여러 메일 선택할 때
  • AI에게 이렇게 말하세요: “이용약관 동의 체크박스를 추가해줘. 체크하지 않으면 가입 버튼이 비활성화되게 해줘.”

라디오 버튼 (Radio Button)

  • 일상 비유: 시험지의 객관식 ①②③④ 중 하나만 고르는 것. 하나를 선택하면 나머지는 자동 해제됩니다.
  • 어디서 봤나: 배송 방법 선택 (일반배송 ○ / 새벽배송 ○), 결제 수단 선택
  • 체크박스와 차이: 체크박스는 여러 개 선택 가능, 라디오 버튼은 딱 하나만 선택
  • AI에게 이렇게 말하세요: “결제 수단을 라디오 버튼으로 만들어줘. 신용카드, 카카오페이, 무통장입금 3개 옵션으로.”

토글 스위치 (Toggle Switch)

  • 일상 비유: 방 전등 스위치. ON/OFF 두 가지 상태만 있습니다. 밀면 켜지고, 다시 밀면 꺼집니다.
  • 어디서 봤나: 스마트폰 와이파이 켜기/끄기, 다크모드 ON/OFF, 알림 설정
  • 체크박스와 차이: 기능은 비슷하지만 토글은 즉시 적용(저장 버튼 불필요), 체크박스는 보통 저장 버튼과 함께 사용
  • AI에게 이렇게 말하세요: “다크모드 토글 스위치를 설정 화면 상단에 추가해줘. 켜면 즉시 다크모드가 적용되게 해줘.”

드롭다운 / 셀렉트박스 (Dropdown / Select)

  • 일상 비유: 자판기의 음료 선택 버튼. 눌러서 목록을 펼치고 하나를 고르는 것입니다.
  • 어디서 봤나: 회원가입 시 “생년월일” 선택, 쇼핑몰 “사이즈 선택”, 국가 선택
  • AI에게 이렇게 말하세요: “카테고리를 선택하는 드롭다운을 추가해줘. 옵션은 전체, AI 도구, 개발, 블로그 4개로 해줘.”

리스트박스 (ListBox)

  • 일상 비유: 드롭다운과 비슷하지만 목록이 항상 펼쳐져 보이는 것. 게시판 목록처럼 여러 항목이 한 번에 보입니다.
  • 어디서 봤나: 음악 플레이어의 재생 목록, 파일 탐색기의 파일 목록
  • 드롭다운과 차이: 드롭다운은 클릭해야 목록이 보임 (공간 절약), 리스트박스는 항상 목록이 보임 (한눈에 파악)
  • AI에게 이렇게 말하세요: “할 일 목록을 리스트박스로 보여줘. 항목을 클릭하면 선택 표시가 되고, 여러 개 선택 가능하게 해줘.”

콤보박스 (ComboBox)

  • 일상 비유: 드롭다운 + 텍스트박스의 합체. 목록에서 고를 수도 있고, 직접 타이핑할 수도 있습니다.
  • 어디서 봤나: 구글 검색창 (타이핑하면 추천 검색어가 아래에 뜸), 주소 입력 시 자동완성
  • AI에게 이렇게 말하세요: “도시 선택용 콤보박스를 추가해줘. 서울, 부산, 대구 등 주요 도시는 목록에 있고, 직접 입력도 가능하게 해줘.”

슬라이더 (Slider / Range)

  • 일상 비유: 오디오 볼륨 조절 바. 막대 위의 점을 좌우로 끌어서 값을 조절합니다.
  • 어디서 봤나: 유튜브 볼륨 조절, 사진 편집 밝기 조절, 쇼핑몰 가격 범위 필터
  • AI에게 이렇게 말하세요: “가격 필터 슬라이더를 추가해줘. 최소 0원부터 최대 100만 원까지, 양쪽 끝을 조절할 수 있는 범위 슬라이더로 만들어줘.”

날짜 선택기 (Date Picker)

  • 일상 비유: 달력에서 날짜를 클릭하는 것. 직접 날짜를 타이핑하지 않고 달력 팝업에서 고릅니다.
  • 어디서 봤나: 항공권 예약 시 출발일/도착일 선택, 호텔 체크인/체크아웃 날짜
  • AI에게 이렇게 말하세요: “예약 날짜를 선택하는 데이트피커를 추가해줘. 오늘 이전 날짜는 선택 불가로 비활성화해줘.”

파일 업로드 (File Upload)

  • 일상 비유: 이력서를 제출 창구에 넣는 것. “파일 선택” 버튼을 눌러 내 컴퓨터의 파일을 올립니다.
  • 어디서 봤나: 이메일 첨부파일, 인스타그램 사진 올리기, 이력서 업로드
  • AI에게 이렇게 말하세요: “프로필 사진 업로드 영역을 추가해줘. 드래그 앤 드롭도 가능하고, JPG/PNG만 허용, 최대 5MB로 제한해줘.”

표시 요소 — 정보를 보여주는 것들

레이블 (Label)

  • 일상 비유: 이름표. “이름:”, “이메일:”, “비밀번호:” 같이 입력칸 옆에 붙어서 이 칸이 뭔지 알려주는 글씨입니다.
  • AI에게 이렇게 말하세요: “각 텍스트박스 위에 레이블을 붙여줘. ‘이름’, ‘이메일’, ‘전화번호’로.”

플레이스홀더 (Placeholder)

  • 일상 비유: 입력칸 안에 연한 회색으로 미리 적혀 있는 안내 문구. 클릭해서 타이핑하면 사라집니다.
  • 어디서 봤나: 검색창에 회색으로 적힌 “검색어를 입력하세요”
  • AI에게 이렇게 말하세요: “이메일 텍스트박스의 플레이스홀더를 ‘example@email.com’으로 설정해줘.”

툴팁 (Tooltip)

  • 일상 비유: 마우스를 올리면 나타나는 말풍선 도움말. 버튼이나 아이콘 위에 마우스를 올리면 설명이 뜹니다.
  • 어디서 봤나: 유튜브에서 아이콘에 마우스를 올리면 “좋아요”, “싫어요” 같은 설명이 뜨는 것
  • AI에게 이렇게 말하세요: “설정 아이콘에 마우스를 올리면 ‘계정 설정’이라는 툴팁이 나오게 해줘.”

배지 (Badge)

  • 일상 비유: 알림 숫자. 카카오톡 아이콘에 빨간 동그라미 안에 “3”이라고 뜨는 것.
  • 어디서 봤나: 앱 아이콘의 알림 숫자, 장바구니 아이콘의 상품 개수
  • AI에게 이렇게 말하세요: “장바구니 아이콘 오른쪽 위에 빨간 배지로 담긴 상품 수를 표시해줘.”

프로그레스 바 (Progress Bar)

  • 일상 비유: 파일 다운로드할 때 0%에서 100%까지 채워지는 막대. 작업 진행 상황을 시각적으로 보여줍니다.
  • 어디서 봤나: 파일 다운로드, 설문조사 진행률 (3/10 완료), 프로필 완성도
  • AI에게 이렇게 말하세요: “파일 업로드 시 프로그레스 바로 진행률을 보여줘. 퍼센트 숫자도 함께 표시해줘.”

스피너 / 로딩 (Spinner / Loading)

  • 일상 비유: 빙글빙글 돌아가는 원. “잠깐만 기다려주세요”라는 뜻입니다.
  • 어디서 봤나: 웹페이지 로딩 중, 앱에서 데이터 불러올 때 도는 원
  • AI에게 이렇게 말하세요: “데이터를 불러오는 동안 화면 가운데에 스피너를 보여줘.”

아바타 (Avatar)

  • 일상 비유: 프로필 사진이 들어가는 동그란 원. 사진이 없으면 이름 첫 글자가 표시됩니다.
  • 어디서 봤나: 카카오톡 프로필 사진, Gmail 오른쪽 상단의 동그란 프로필
  • AI에게 이렇게 말하세요: “댓글 목록에서 각 댓글 왼쪽에 사용자 아바타를 표시해줘. 사진이 없으면 이름 첫 글자를 보여줘.”

구조/레이아웃 요소 — 화면을 배치하는 것들

헤더 (Header)

  • 일상 비유: 신문의 상단 제목 영역. 웹사이트 맨 위에 로고, 메뉴가 있는 줄입니다.
  • AI에게 이렇게 말하세요: “상단에 헤더를 만들어줘. 왼쪽에 로고, 가운데에 메뉴(홈/소개/연락처), 오른쪽에 로그인 버튼.”

푸터 (Footer)

  • 일상 비유: 책의 맨 마지막 페이지에 있는 출판사 정보. 웹사이트 맨 아래에 저작권, 연락처 등이 있는 영역입니다.
  • AI에게 이렇게 말하세요: “하단에 푸터를 추가해줘. 저작권 문구, 개인정보처리방침 링크, SNS 아이콘을 넣어줘.”

사이드바 (Sidebar)

  • 일상 비유: 옆에 붙어있는 서랍장. 보통 왼쪽이나 오른쪽에 세로로 긴 메뉴 영역입니다.
  • 어디서 봤나: Gmail 왼쪽의 받은메일함/보낸메일함 목록, 유튜브 왼쪽 메뉴
  • AI에게 이렇게 말하세요: “왼쪽에 사이드바를 추가해줘. 대시보드, 회원관리, 설정 메뉴를 세로로 배치해줘.”

카드 (Card)

  • 일상 비유: 명함 한 장. 이미지, 제목, 설명이 하나의 사각형 박스에 묶여 있습니다.
  • 어디서 봤나: 쿠팡 상품 목록, 인스타그램 피드, 뉴스 카드
  • AI에게 이렇게 말하세요: “상품 목록을 카드 형태로 보여줘. 각 카드에 이미지, 상품명, 가격, 장바구니 버튼을 넣어줘. 한 줄에 3개씩 배치해줘.”

모달 / 팝업 (Modal / Popup)

  • 일상 비유: 화면 위에 뜨는 작은 창. 뒤쪽 화면이 어두워지면서 앞에 새 창이 나타납니다. 닫기 전까지 뒤의 화면을 조작할 수 없습니다.
  • 어디서 봤나: “정말 삭제하시겠습니까?” 확인 창, 로그인 팝업, 쿠폰 팝업
  • AI에게 이렇게 말하세요: “삭제 버튼을 누르면 확인 모달을 띄워줘. ‘정말 삭제하시겠습니까?’ 메시지와 확인/취소 버튼을 넣어줘.”

탭 (Tab)

  • 일상 비유: 서류철의 색인 탭. 같은 공간에서 여러 페이지를 탭으로 나눠 볼 수 있습니다.
  • 어디서 봤나: 크롬 브라우저의 탭, 쿠팡 상품 페이지의 “상품정보 | 리뷰 | 문의”
  • AI에게 이렇게 말하세요: “상품 상세 페이지에 탭 3개를 추가해줘. ‘상품 설명’, ‘리뷰’, ‘문의’ 탭으로, 클릭하면 해당 내용이 나오게 해줘.”

아코디언 (Accordion)

  • 일상 비유: 접었다 펼치는 부채. 제목을 클릭하면 내용이 아래로 펼쳐지고, 다시 클릭하면 접힙니다.
  • 어디서 봤나: FAQ 자주 묻는 질문 페이지 (질문을 클릭하면 답변이 펼쳐지는 것)
  • AI에게 이렇게 말하세요: “FAQ 섹션을 아코디언으로 만들어줘. 질문을 클릭하면 답변이 펼쳐지게 해줘.”

토스트 / 스낵바 (Toast / Snackbar)

  • 일상 비유: 화면 구석에 잠깐 나타났다 사라지는 알림. 토스터에서 빵이 “톡” 올라오듯이 메시지가 잠깐 뜹니다.
  • 어디서 봤나: “저장되었습니다” 알림, “링크가 복사되었습니다” 알림
  • AI에게 이렇게 말하세요: “저장 완료 시 화면 하단에 ‘저장되었습니다’ 토스트 메시지를 3초간 보여줘.”

내비게이션 바 / 네브바 (Navigation Bar / Navbar)

  • 일상 비유: 건물 안내 표지판. 어디로 가야 하는지 방향을 알려주는 메뉴 줄입니다.
  • 어디서 봤나: 웹사이트 상단의 “홈 | 제품 | 가격 | 문의” 메뉴, 모바일 앱 하단의 아이콘 메뉴 바
  • AI에게 이렇게 말하세요: “모바일 화면 하단에 네브바를 추가해줘. 홈, 검색, 알림, 프로필 4개 아이콘으로 만들어줘.”

브레드크럼 (Breadcrumb)

  • 일상 비유: “헨젤과 그레텔”의 빵 부스러기 길. 내가 어디를 거쳐 여기까지 왔는지 경로를 보여줍니다.
  • 어디서 봤나: 쿠팡 “홈 > 전자제품 > 노트북 > 삼성 갤럭시북” 경로 표시
  • AI에게 이렇게 말하세요: “페이지 상단에 브레드크럼을 추가해줘. ‘홈 > 카테고리 > 현재 페이지’ 형태로.”

2부: 핵심 개발 용어 20개 — AI와 대화할 때 필요한 말

UI 요소의 이름을 알았다면, 이제 AI에게 “기능”을 설명할 때 필요한 개발 용어를 알아야 합니다.

앱의 구조를 설명하는 용어

프론트엔드 (Frontend) — 사용자 눈에 보이는 화면 전체. 식당의 홀(고객이 앉는 곳)에 해당합니다.

백엔드 (Backend) — 화면 뒤에서 돌아가는 서버와 로직. 식당의 주방에 해당합니다. 주문을 받아 요리를 만들고 결과를 내보냅니다.

데이터베이스 (Database, DB) — 데이터를 저장하는 창고. 식당의 냉장고에 해당합니다. 회원 정보, 게시글, 주문 내역이 여기에 저장됩니다.

API (Application Programming Interface) — 프론트엔드와 백엔드가 소통하는 통로. 식당의 주문서에 해당합니다. 홀 직원(프론트엔드)이 주문서(API)를 주방(백엔드)에 전달하면 요리(데이터)가 나옵니다.

서버 (Server) — 인터넷에 연결된 컴퓨터로, 앱을 24시간 실행하는 역할. 식당 건물 자체에 해당합니다.

화면 동작을 설명하는 용어

라우팅 (Routing) — 주소(URL)에 따라 다른 화면을 보여주는 것. /home은 홈 화면, /about은 소개 화면.

  • AI에게: “로그인하면 /dashboard 페이지로 이동하게 라우팅을 설정해줘.”

반응형 (Responsive) — 화면 크기에 따라 레이아웃이 자동으로 바뀌는 것. PC에서 3열, 태블릿 2열, 스마트폰 1열로 변합니다.

  • AI에게: “이 페이지를 반응형으로 만들어줘. PC는 3열, 모바일은 1열로.”

이벤트 (Event) — 사용자가 뭔가를 하는 행동. 클릭, 입력, 스크롤, 마우스 올리기 등.

  • AI에게: “버튼 클릭 이벤트에 저장 기능을 연결해줘.”

상태 (State) — 화면이 기억하고 있는 현재 값. “로그인됨/안됨”, “다크모드 켜짐/꺼짐” 같은 것.

  • AI에게: “로그인 상태에 따라 헤더에 ‘로그인’ 버튼 또는 ‘내 프로필’ 버튼을 보여줘.”

유효성 검사 (Validation) — 입력값이 올바른지 확인하는 것. 이메일에 @가 있는지, 비밀번호가 8자 이상인지 등.

  • AI에게: “이메일 입력에 유효성 검사를 추가해줘. @가 없으면 빨간색으로 ‘올바른 이메일을 입력하세요’ 메시지를 보여줘.”

데이터 관련 용어

CRUD — 데이터 처리의 4가지 기본 동작: 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete).

  • AI에게: “게시판 CRUD를 만들어줘. 글 작성, 목록 조회, 수정, 삭제 기능.”

JSON — 데이터를 주고받는 형식. {“이름”: “홍길동”, “나이”: 30} 처럼 중괄호와 쌍점으로 데이터를 표현합니다.

로컬 스토리지 (Local Storage) — 브라우저에 데이터를 저장하는 공간. 서버 없이도 데이터를 기억합니다. 다크모드 설정, 장바구니 임시 저장 등에 사용.

  • AI에게: “다크모드 설정을 로컬 스토리지에 저장해서 새로고침해도 유지되게 해줘.”

배포/운영 관련 용어

배포 (Deploy) — 만든 앱을 인터넷에 공개하는 것. 요리를 접시에 담아 손님 테이블에 내보내는 것.

  • AI에게: “이 프로젝트를 Vercel에 배포하는 방법을 알려줘.”

호스팅 (Hosting) — 앱을 올려놓는 인터넷 공간을 빌리는 것. 가게를 임대하는 것에 비유됩니다.

도메인 (Domain) — 인터넷 주소. naver.com, google.com처럼 사람이 읽을 수 있는 주소입니다.

SSL / HTTPS — 데이터를 암호화해서 안전하게 통신하는 것. 주소창에 🔒 자물쇠가 있으면 SSL이 적용된 것입니다.

깃 (Git) — 코드의 변경 이력을 관리하는 시스템. 문서 작업에서 “되돌리기(Ctrl+Z)”를 무한으로 할 수 있는 버전입니다.

깃허브 (GitHub) — Git으로 관리하는 코드를 인터넷에 올려두는 저장소. 구글 드라이브의 코드 버전이라고 생각하면 됩니다.

3부: AI에게 앱 주문하기 — 실전 대화 예시

이제 배운 용어들을 활용해서 AI에게 실제로 앱을 주문해봅시다. “할 일 목록(To-Do) 앱”을 만드는 전체 대화 과정입니다.

대화 1: 전체 구조 설명

대화 2: 기능 추가 요청

대화 3: 디자인 수정 요청

이렇게 3번의 대화만으로 실제 동작하는 할 일 앱이 완성됩니다. 코드를 한 줄도 직접 쓰지 않았지만, 정확한 용어 덕분에 AI가 원하는 결과를 만들어냈습니다.

바이브코딩 용어 — 이것만 기억하세요

이 글에서 다룬 용어를 전부 외울 필요는 없습니다. AI에게 요청할 때 “그거 있잖아, 뭐냐 그거…”라고 하는 대신 이 글을 열어서 정확한 이름을 찾아 쓰면 됩니다. 바이브코딩 용어를 아는 것과 모르는 것의 차이는 이것입니다:

  • ❌ “켜고 끄는 그 스위치 같은 거 넣어줘” → AI가 추측해서 엉뚱한 결과
  • ✅ “토글 스위치를 추가해줘” → 정확히 원하는 결과

용어를 알면 AI와의 소통 품질이 올라가고, 소통 품질이 올라가면 만들 수 있는 것의 범위가 넓어집니다. 바이브코딩의 진정한 시작은 코드를 배우는 것이 아니라, AI에게 정확히 말하는 법을 배우는 것입니다.

📌 함께 읽으면 좋은 글:

위로 스크롤