바이브코딩 용어·통역 사전 — AI 말 알아듣기

바이브코딩 용어·통역 사전 — 전체 용어

모를 땐 그냥 되묻기 — AI가 어려운 말을 쓰면 부끄러워하지 말고 “방금 그거 쉽게 다시 설명해줘”라고 되물으면 됩니다. AI는 몇 번이고 다시, 더 쉽게 설명해줘요. 사람 상담원과 달

구체적으로 시키기 — “예쁘게 해줘”보다 “버튼을 파란색으로, 더 크고 모서리 둥글게”처럼 구체적일수록 원하는 결과가 한 번에 나옵니다. 식당에서 “맛있게요”보다 “덜 맵게, 밥은 곱

한 번에 다 말고, 단계로 — 큰 걸 한 번에 시키면 엉키기 쉽습니다. “먼저 화면부터 만들고 보여줘, 그다음 단계로 갈게”처럼 끊어 시키면 안전해요. 중간에 이상하면 그 단계만 고치면 됩니다

태그 (tag) — 글에 “여기는 제목”, “여기는 문단”이라고 붙이는 이름표예요. <h1>제목</h1>처럼 시작·끝 이름표로 내용을 감쌉니다.

div — 내용을 담는 “투명 상자”예요. 여러 요소를 한 묶음으로 만들 때 씁니다. 정리함의 한 칸 같은 것.

패딩 (padding) — 글자·내용과 상자 테두리 “사이 안쪽 여백”이에요. 액자 속 사진 둘레의 흰 여백을 떠올리면 됩니다.

마진 (margin) — 요소 “바깥쪽” 여백 — 옆 요소와의 거리예요. 안쪽 여백인 패딩과 짝입니다. 사람 사이 ‘거리두기’ 같은 것.

플렉스박스 (flexbox) — 여러 요소를 가로로 줄 세우거나 가운데로 모으는 “정렬 도구”예요. 책꽂이에 책을 나란히 꽂는 것과 같습니다.

함수 (function) — “이 버튼 누르면 이렇게 해”를 묶어 둔 “동작 묶음”이에요. 전자레인지 버튼 하나에 ‘데우기’ 동작이 들어 있는 것과 같습니다.

이벤트 (event) — “클릭했다”, “글자를 입력했다” 같은 사용자의 행동 신호예요. 초인종을 누르면 ‘방문’ 신호가 가는 것과 같습니다.

커밋 (commit) — 지금 상태에 “저장 도장”을 찍어 기록하는 거예요. 게임의 세이브포인트와 같아서, 나중에 이 지점으로 되돌아올 수 있습니다.

되돌리기 (undo) — 마지막 저장 지점으로 코드·화면을 “되감기” 하는 거예요. 타임머신처럼. 실수해도 두렵지 않은 이유가 이겁니다.

브랜치 (branch) — 원본은 그대로 두고 “복사본 작업 공간”에서 실험하는 거예요. 시험지 옆 연습장 같은 것. 잘되면 합치고, 망하면 버리면 됩니다.

요소 (element) — HTML 화면을 이루는 '레고 블록 한 개'처럼, 낱개의 부품 하나하나를 요소라고 해요. 보통 시작표시(<p>)와 끝표시(</p>), 그리고 그 사이의 내용까지

속성 (attribute) — 요소에 추가로 붙이는 '세부 설정값'이에요. 사진 요소엔 어떤 파일을 보여줄지, 링크엔 어디로 이동할지 같은 정보를 시작 태그 안에 적어 넣습니다. 보통 `이름=

아이디 (id) — 한 페이지 안에서 딱 하나뿐인 ‘고유 이름표’를 요소에 붙이는 속성이에요. 같은 id는 한 화면에 한 번만 써야 하므로, ‘바로 이 요소 하나’만 콕 집어 가리킬

클래스 (class) — 여러 요소에 똑같이 붙일 수 있는 '공통 꼬리표'예요. 예를 들어 'card'라는 클래스를 여러 박스에 붙이면, 그 박스들을 한 번에 똑같이 꾸밀 수 있습니다.

링크 / 하이퍼링크 (a / href) — 눌렀을 때 다른 페이지나 위치로 이동하게 해주는 요소가 <a>(앵커)이고, '어디로 갈지' 주소를 적는 속성이 href예요. 예를 들어 <a href="https

이미지 (img) — 화면에 사진이나 그림을 띄우는 요소예요. 그런데 img 자체가 그림 파일을 품고 있는 게 아니라, src 속성에 적힌 파일 주소를 "가져와서 보여줘"라고 가리키기

버튼 (button) — 사용자가 눌러서 어떤 동작을 일으키는 요소예요. 폼을 제출하거나, 화면을 바꾸거나, 메뉴를 여는 식으로 '클릭하면 뭔가 일어나게' 하는 출발점입니다. 그냥 글자가

폼과 인풋 (form / input) — 사용자가 직접 글자를 입력하거나 선택하는 '입력 양식'이에요. input은 이름·이메일을 적는 한 칸 한 칸이고, form은 그 칸들을 묶어 '제출' 버튼을 누르

시맨틱 태그 (semantic) — 이름만 봐도 "무슨 역할인지" 알 수 있게 만든 의미 있는 요소들이에요. 머리말은 <header>, 본문은 <main>, 메뉴는 <nav>, 바닥글은 <foote

메타 태그와 뷰포트 (meta / viewport) — 화면에 직접 보이진 않지만 페이지 머리(head)에 들어가는 '설명 쪽지'예요. 검색결과에 뜨는 페이지 소개 글, 한글이 안 깨지게 하는 인코딩 설정, 휴대폰에서

선택자 (selector) — 화면 속 수많은 요소 중에서 '누구를 꾸밀지' 콕 집어 가리키는 지목 방법이에요. CSS는 항상 '누구를(선택자) + 어떻게(스타일)' 두 부분으로 짝을 이룹니다

색상 / 헥스코드 (color / hex) — 글자색·배경색을 정하는 값이에요. 디자인에서는 색을 '#2563EB' 같은 여섯 자리 코드(헥스코드)로 정확히 표현하는데, 빨강·초록·파랑의 양을 섞은 번호표라고

폰트 (font-family) — 글자의 '서체(글씨체)'를 정하는 거예요. 같은 말도 손글씨냐 명조체냐에 따라 인상이 달라지듯, 어떤 폰트를 쓰느냐에 따라 화면 분위기가 확 달라집니다. 한글은

박스 모델 (box model) — 웹의 모든 요소는 사실 네모난 '상자'예요. 그 상자는 안에서 밖으로 내용 → 안쪽 여백(패딩) → 테두리(보더) → 바깥 여백(마진) 순서로 4겹이 겹쳐 있어요

둥근 모서리 / 테두리 (border-radius / border) — border는 요소를 빙 둘러싸는 '선(테두리)'이고, border-radius는 그 네모의 '모서리를 둥글게' 깎는 값이에요. 각진 명함 모서리를 가위로 둥글게

그림자 (box-shadow) — 요소 뒤에 옅은 그늘을 깔아 화면에서 살짝 '떠 보이게' 만드는 효과예요. 맑은 날 물체 아래 생기는 그늘처럼, 카드나 버튼이 평평한 종이가 아니라 바닥에서 입체

그리드 (grid) — 요소들을 '가로줄과 세로줄(행·열)'이 있는 표·바둑판처럼 가지런히 배치하는 도구예요. 사물함이나 달력처럼 칸이 격자로 정해져 있어, 무엇을 넣어도 가로·세로 줄

반응형 / 미디어쿼리 (media query) — 화면 너비에 따라 디자인을 다르게 적용하는 장치예요. 넓은 PC에선 3칸으로 보여주고, 좁은 휴대폰에선 1칸으로 자동으로 바뀌게 하는 것이 미디어쿼리이고, 이렇게

전환 효과 / 호버 (transition / hover) — hover는 '마우스를 올렸을 때'의 상태를 말하고, transition은 색이나 크기가 바뀔 때 '뚝' 끊기지 않고 부드럽게 스르륵 변하게 해주는 거예요. 버튼

z-인덱스 / 쌓임 순서 (z-index) — 요소들이 서로 겹칠 때 '누가 위로 올라올지' 앞뒤 순서를 정하는 값이에요. 책상 위에 종이를 겹쳐 놓으면 맨 위 장이 아래 장을 가리는 것처럼, z-index

변수 (variable) — 값을 담아두고 이름표를 붙여 보관하는 상자예요. 한 번 담아두면 나중에 그 이름표만 부르면 안에 든 값을 그대로 꺼내 쓸 수 있죠. 예를 들어 '내이름'이라는 상

값과 타입 (value & type) — 프로그램이 다루는 데이터에는 종류(타입)가 있어요. 글자(문자열 string), 숫자(number), 참/거짓(불리언 boolean)처럼요. 겉보기에 같은 5라도

배열 (array) — 여러 값을 순서대로 줄 세워 한 묶음으로 담는 목록이에요. 칸마다 0번, 1번, 2번 번호가 매겨져 있는데, 첫 칸이 1번이 아니라 0번부터 시작하는 게 핵심이에

객체 (object) — 서로 관련된 정보를 '이름: 값' 짝으로 묶어 담는 꾸러미예요. 사람 한 명을 표현할 때 이름:'김지백', 나이:40, 직업:'대표'처럼 항목마다 이름표를 붙여

조건문 (if statement) — '만약 ~라면 이렇게, 아니면 저렇게' 하고 상황에 따라 다르게 행동하게 만드는 갈림길이에요. 비가 오면 우산을 챙기고 아니면 그냥 가는 것처럼, 조건이 맞을 때

반복문 (loop) — 같은 일을 여러 번 자동으로 되풀이하게 하는 장치예요. 상품 100개를 일일이 손으로 적는 대신 '목록에 있는 것마다 카드 한 장씩 만들어' 하고 한 번만 시키면

DOM — 브라우저가 웹페이지의 글자·버튼·이미지를 부모-자식으로 엮어 가지처럼 정리해 둔 '화면의 설계도(나무 구조)'예요. 자바스크립트는 이 설계도를 만져서 글자를 바꾸

선택자 (selector) — 화면의 수많은 요소 중에서 '바로 이거!' 하고 특정 글자나 버튼을 콕 집어 가리키는 주소예요. CSS에서 디자인을 입힐 때 쓰던 #아이디, .클래스 같은 주소를

비동기 처리 (async/await) — 결과가 '바로' 나오지 않고 시간이 걸리는 일(서버에서 데이터 받기 등)을 처리하는 방식이에요. 식당에서 음식을 주문하고 진동벨을 받은 뒤, 음식이 나올 때까지

API 호출 (fetch / API) — 내 페이지가 다른 서비스(날씨·지도·결제·AI 등)에 ‘이 정보 좀 줘’ 하고 정해진 창구로 요청해 데이터를 받아오는 일이에요. fetch는 그 요청을 보내는 명

JSON — 프로그램들끼리 데이터를 주고받을 때 쓰는 만국 공통 '이름표: 내용' 정리 양식이에요. 택배 송장처럼 — 받는사람·주소·내용물 칸이 정해져 있어서 누가(어떤 프로

하드코딩 (hardcoding) — 글자나 숫자(기관명·날짜·가격 같은 값)를 설정으로 빼지 않고 코드 안에 직접 새겨 넣는 것. 전단지에 행사 날짜를 인쇄해 버린 것과 같아요 — 날짜가 바뀌면 전

저장소 (repository (repo)) — 내 프로젝트의 모든 파일과 그 변경 역사(타임머신 기록 전체)를 통째로 담아두는 폴더예요. 겉보기엔 평범한 폴더지만, 안에 '숨겨진 기록 노트(.git)'가 들어

깃허브 (GitHub) — 내 컴퓨터에 있는 코드 저장소를 인터넷에 똑같이 올려두고 보관·공유하는, 가장 유명한 웹사이트예요. 여기서 헷갈리기 쉬운데, '깃(Git)'은 내 컴퓨터에서 도는

클론 (clone) — 인터넷(깃허브)에 올라가 있는 저장소를, 그동안의 변경 역사까지 통째로 내 컴퓨터에 복제해 내려받는 일이에요. 지금 파일만 받는 게 아니라 '원본을 책상에 똑같이

푸시 (push) — 내 컴퓨터에서 '커밋(저장 도장)'까지 끝낸 변경분을 인터넷 저장소(깃허브)로 밀어 올려 동기화하는 일이에요. 커밋이 '내 컴퓨터에 도장 찍어 저장'이라면, 푸시

풀 (pull) — 인터넷 저장소(깃허브)에 올라온 최신 변경분을 내 컴퓨터로 내려받아 내 작업에 합치는 일이에요. 사실 두 단계가 한 번에 일어나요. 먼저 최신 내용을 가져오고(가

히스토리 / 로그 (history / log) — 지금까지 찍은 모든 저장 도장(커밋)이 시간순으로 줄지어 있는 기록 목록이에요. 각 줄에는 '언제·누가·무엇을 바꿨는지'가 메모처럼 붙어 있어서, 과거 어느 시점

원격 / 오리진 (remote / origin) — 내 컴퓨터(로컬) 저장소가 연결된 인터넷 쪽 저장소를 '원격(remote)'이라 하고, 그중 기본으로 연결된 한 곳에 'origin'이라는 별명이 붙어요. 그래서

스테이징 / 추가 (staging / git add) — 바꾼 파일들 중에서 '이번에 저장(커밋)할 것'만 골라 담아두는 대기 공간이에요. 택배 보내기 전에 보낼 물건만 상자에 담는 단계처럼, git add로 골라 담은

머지 (병합) (merge) — 따로 갈라져 작업하던 두 갈래(브랜치)의 변경을 하나로 합치는 일이에요. 예를 들어 '새 기능' 갈래에서 다 만든 결과를 '원래 본선' 갈래로 가져와 합치는데,

충돌 (conflict) — 두 갈래(또는 두 사람)가 같은 파일의 같은 부분을 서로 다르게 고쳤을 때, 깃이 '어느 쪽을 쓸지 자동으로 못 정하는' 상태예요. 같은 문장을 다르게 고쳐 온

컴포넌트 (component) — 화면을 레고 블록처럼 조각(버튼·카드·메뉴)으로 만들어 조립하는 거예요. 블록은 한 번 만들면 여러 곳에 재사용하고, 블록 하나를 고치면 그 블록을 쓰는 모든 곳

JSX — 자바스크립트 안에 HTML을 섞어 쓰는 리액트 전용 글쓰기 방식이에요. 설계도(JS) 위에 완성 그림(HTML)을 바로 그려 넣는 것 — 그래서 리액트 코드는 '

프롭스 (props) — 부모 블록이 자식 블록에 끼워주는 '옵션 주문서'예요. 같은 버튼 블록이라도 색=파랑·문구=구매하기 주문서를 끼우면 파란 구매 버튼이 되고, 색=빨강·문구=삭제를

상태 (state) — 화면이 들고 있는 '점수판'이에요. 좋아요 수, 장바구니 개수, 입력 중인 글자처럼 바뀌는 값을 점수판(state)에 적어두면, 값이 바뀔 때마다 리액트가 새로고

훅 (hook) — use로 시작하는 리액트의 '만능 공구 고리'예요. useState는 기억하기(점수판 설치), useEffect는 타이밍 맞춰 실행하기(화면이 뜨면 데이터 불러오

렌더링 / 리렌더 (render / re-render) — 데이터를 보고 화면을 그려내는 일이에요. 데이터가 바뀌면 리액트가 그 부분을 다시 그리는데(리렌더), 화가가 모델이 옷을 갈아입을 때마다 그 부분만 다시 그리는

조건부 렌더링 (conditional rendering) — "로그인했으면 프로필을 보여주고, 아니면 로그인 버튼을 보여줘"처럼 조건에 따라 같은 자리에 다른 화면을 그리는 거예요. 상황별로 다른 블록을 끼우는 갈림길.

리스트와 key (map / key) — 배열 데이터를 도장 찍듯 반복해서 목록 화면으로 만드는 게 map이고, 그때 각 줄에 붙이는 고유 이름표가 key예요. 이름표가 있어야 리액트가 '몇 번째 줄이

라우팅 (routing) — 주소(/home, /about)와 화면(방)을 연결해주는 '연결표'예요. 링크를 눌러도 새로고침 없이 미닫이문처럼 내용만 스르륵 바뀌는 게 리액트식 페이지 이동입

넥스트 (Next.js) — 리액트(레고 블록)에 페이지 이동·주방(서버)·검색 노출(SEO)·배포 준비까지 통째로 딸려 오는 '풀 세트'예요. 레고만 사면 조립 도구지만, Next.js는

맥락 먼저 주기 (context first) — AI에게 뭔가를 시키기 전에 "뭘, 누구를 위해, 왜" 만드는지 배경부터 알려주는 거예요. 새 직원에게 일을 맡길 때 우리 회사가 뭐 하는 곳이고 고객이 누군지부

예시로 보여주기 (show, don't tell) — 말로 길게 설명하기보다 "이 사이트처럼", "이 이미지 느낌으로"라고 본보기를 보여주는 거예요. 미용실에서 설명 대신 원하는 머리 사진을 보여주는 것과 같아요.

역할 부여 (role prompting) — ‘너는 꼼꼼한 시니어 개발자야’, ‘초보도 알게 설명하는 선생님이야’처럼 AI에게 역할을 정해주는 거예요. 가운을 입으면 의사처럼, 역할을 주면 AI가 그 입장에

하지 말 것·범위 정하기 (guardrails) — '이 파일만 고치고 디자인은 건드리지 마', '데이터는 지우지 마'처럼 손대도 되는 범위와 절대 손대면 안 되는 금지선을 일을 시키기 전에 미리 못 박아 두는 대

계획 먼저 시키기 (plan first) — 큰 일을 바로 만들라고 시키지 말고, "코드 짜기 전에 어떻게 할 건지 계획부터 말해줘"라고 먼저 시키는 거예요. 집 짓기 전에 설계도부터 보고 승인하는 것과 같

스스로 끝까지 시키기 (agent loop) — 한 번 시켜두면 AI가 스스로 '해보고 → 결과 확인하고 → 틀리면 고치는' 걸 알아서 반복하게 하는 방법이에요. 로봇청소기에 '청소'만 눌러두면 다 치울 때까지

큰 변경 전엔 확인받기 (human-in-the-loop) — "지우거나 큰 변경을 하기 전엔 나한테 먼저 물어봐"라고, 중요한 순간에 사람이 도장을 찍는 단계를 끼워 넣는 거예요. 스스로 척척 일하는 AI라도 파일 삭제나

스스로 점검·검증시키기 (self-check) — "다 했으면 직접 확인해보고, 틀린 데 있으면 고쳐줘"처럼 AI에게 자기 결과를 스스로 검사하게 시키는 대화법이에요. AI는 그럴듯하게 틀릴 때가 있어서, 받자마

에러는 그대로 붙여넣기 (paste the error) — 빨간 에러 메시지가 뜨면 요약하거나 "안 돼요"라고만 하지 말고, 그 글자를 통째로 복사해서 AI에게 그대로 주세요. 병원에서 증상을 말로 대충 설명하기보다 검사

모르면 모른다고 하게 (admit uncertainty) — AI에게 일을 시키기 전에 "확실하지 않으면 지어내지 말고, 모르면 모른다고 하거나 나한테 물어봐"라고 미리 못 박아 두는 대화법이에요. AI는 모르는 것도 그럴

rclone — 터미널에서 명령어 한 줄로 내 컴퓨터 폴더를 구글드라이브·드롭박스 같은 클라우드 창고에 통째로 올리고·내리고·똑같이 맞춰주는(동기화) 도구. 파일을 마우스로 하나

프록시 (proxy) — 내 비밀 열쇠(API 키)를 남에게 직접 안 주고, 중간에서 대신 처리해 주는 서버를 두는 거예요. 회사에서 직원에게 법인카드를 쥐여주지 않고 "이거 결제해 주세

자기 키 가져오기 (BYOK) — 사용자가 '자기 무료 열쇠(API 키)'를 직접 발급받아 입력칸에 넣고 스스로 실행하는 방식이에요. 공용 정수기는 주인이 물값을 내지만, 셀프 주유소에선 각자 자

오버라이드 (override) — 자동으로 정해진 규칙(예: 날짜 되면 자동으로 열기/닫기)을 '내가 손으로 직접 덮어써서' 바꾸는 거예요. 아파트 자동문은 평소 알아서 여닫지만, 이삿짐 옮기는

파이어베이스 (Firebase) — 내가 만든 웹사이트·앱 '뒤편 살림'(회원 로그인·데이터 저장·실시간 채팅 등)을 구글이 통째로 빌려주는 서비스예요. 식당을 차릴 때 주방·창고·금고를 따로 짓지

파이어스토어 (Firestore) — 파이어베이스가 주는 '실시간 데이터 창고'예요. 여러 사람이 동시에 쓰고 같이 보는 큰 공용 칠판(또는 함께 보는 구글 시트)이라고 보면 돼요. 한 사람이 칠판에

호스팅 (hosting) — 내 컴퓨터 안에만 있던 웹페이지를, 누구나 접속할 수 있는 인터넷 주소(예: ○○.web.app)에 올려서 세상에 공개하는 거예요. 집에서 만든 음식을 길가 가게

bat 파일 (batch file) — 윈도우에서 더블클릭 한 번으로, 터미널에 칠 명령들을 적어둔 순서대로 대신 쳐주는 '심부름 쪽지'예요. 전자레인지의 '즉석밥' 버튼처럼 — 매번 시간·출력을 따로

익명 인증 (anonymous auth) — 로그인이나 회원가입을 시키지 않으면서도, 사용자 한 명 한 명을 조용히 구분해 주는 방식이에요. 놀이공원에서 이름·주소는 안 받고 손목밴드만 채워 '이 사람'과

플로팅 버튼 (floating button) — 화면을 아무리 스크롤해도 늘 같은 자리에 '떠 있는' 동그란 버튼이에요. 식당 테이블마다 붙어 있는 호출벨처럼, 페이지 어디에 있든 오른쪽 아래에서 기다리다가 누

패널 (panel) — 평소엔 화면 밖에 숨어 있다가, 버튼을 누르면 옆(모바일은 아래)에서 스르륵 미끄러져 나오는 화면 조각이에요. 책상 서랍처럼 필요할 때만 빼서 쓰고, 닫으면 본문

오버플로 (overflow) — 내용물이 자기 상자보다 커서 상자 밖으로 비어져 나오는 현상이에요. 컵보다 큰 얼음을 억지로 넣으면 얼음이 컵 밖으로 삐져나오는 것과 같아요. PC에선 멀쩡한데

—

—

용어를 몰라도 AI에게 제대로 시킬 수 있습니다.