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

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

모를 땐 그냥 되묻기 — 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 키)'를 직접 발급받아 입력칸에 넣고 스스로 실행하는 방식이에요. 공용 정수기는 주인이 물값을 내지만, 셀프 주유소에선 각자 자

API — 화면(손님)과 서버(주방) 사이를 부지런히 오가는 '알바생'이에요. 손님이 메뉴판 보고 주문하면 알바생이 주방에 정확히 전달하고, 다 된 음식을 받아 손님 앞에

엔드포인트 (Endpoint) — 엔드포인트는 주방의 '정확한 창구 주소'예요. 메뉴판(API)에 코너별 주소가 적혀 있죠 — 회원가입은 /signup, 상품 목록은 /products 하는 식으로

REST API — 주문서에 빈칸 양식이 있는 것처럼, 서버에 보내는 부탁도 '정해진 양식'으로 쓰자는 약속이에요. 양식은 딱 두 칸 — '어디(주소)' 칸과 '뭘 할지(동사: 가져

GET — 주방에 '이거 좀 보여줘/가져와'라고 부탁하는 동사예요. 메뉴판 보기, 상품 목록 보기, 글 상세 보기처럼 '읽기'만 하죠. 무언가를 바꾸거나 새로 만들지 않아서

POST — 주방에 '이거 새로 하나 만들어 넣어줘'라고 부탁하는 동사예요. 회원가입, 새 글 작성, 주문 넣기처럼 '새로 생기는' 일이죠. 냉장고(데이터베이스)에 새 칸이

PUT vs PATCH (PUT / PATCH) — 둘 다 '고치기'인데 범위가 달라요. PUT은 서류를 통째로 새로 써서 덮어쓰기 — 안 적은 칸은 빈 채로 날아갈 수 있어요. PATCH는 바꿀 한 칸(예: 전화

DELETE — 주방에 '이거 빼줘/취소해줘'라고 부탁하는 동사예요. 글 삭제, 주문 취소, 장바구니 비우기처럼 냉장고(데이터베이스)에서 그 칸이 사라지는 일이죠. 한 번 지우면

API Key & Header (API Key / Header) — API 키는 외부 주방을 쓰게 해주는 '내 열쇠/회원증'이고, 헤더는 요청에 붙이는 '신분증 쪽지'예요. 주문할 때 헤더에 키를 담아 '저 회원이에요' 하고 보여

상태 코드 (Status Code) — 주방이 주문에 답하는 '신호등 번호'예요. 세 자리 숫자 하나로 결과를 알려주죠 — 200은 '잘 됐어요', 401은 '누구세요?(로그인 안 함)', 403은 '

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

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

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

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

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

npx · serve · npm run dev (npx serve npm run dev) — 셋 다 터미널에서 자주 만나는 한 세트예요. npm install이 공구를 창고에 사두는 것이라면, npx는 사지 않고 렌탈해서 한 번 쓰는 것. serve는 내

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

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

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

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

프론트엔드와 백엔드 (frontend / backend) — 웹사이트는 두 부분으로 나뉘어요. 손님이 직접 보고 만지는 ‘홀’(화면·버튼·글자)이 프론트엔드(앞단), 손님 눈엔 안 보이는 ‘주방’(주문 처리·재료 보관·계산

서버 (server) — 손님 눈에 안 보이는 뒤편에서, 요청을 받아 처리하고 결과를 돌려주는 ‘항상 켜져 있는 컴퓨터’예요. 식당 주방과 같아요 — 손님(브라우저)이 주문하면 주방(서버

클라이언트 (client) — 서버(주방)에 주문을 넣는 ‘손님’ 쪽이에요. 보통 우리가 보는 웹브라우저(크롬·사파리)나 휴대폰 앱이 클라이언트예요. 식당에서 주문하고 음식을 받아 먹는 손님과

요청과 응답 (request / response) — 클라이언트(손님)가 서버(주방)에게 “이거 해줘” 하고 보내는 게 요청(request), 서버가 처리해서 돌려주는 게 응답(response)이에요. 식당에서 주문

로컬 서버 / 로컬호스트 (localhost) — 손님을 받기 전에 ‘우리 집 주방’에서만 요리를 켜보는 연습 상태예요. 내 컴퓨터 안에서만 사이트가 돌아가고, 주소창엔 보통 localhost:3000 같은 게

포트 (port) — 한 컴퓨터 안에서 여러 프로그램이 동시에 돌 때, 각자 쓰는 ‘몇 번 문(창구)’을 가리키는 번호예요. localhost:3000, localhost:8188처럼

환경변수 (.env) (environment variable) — API 키·비밀번호 같은 ‘비밀 값’을 코드 안에 직접 적지 않고, 코드 밖 별도 금고 파일(보통 .env)에 따로 빼서 보관하는 방법이에요. 식당 비법 양념 레

서버리스 / 클라우드 함수 (serverless) — 서버(주방)를 24시간 직접 켜두지 않고, ‘주문이 들어올 때만 잠깐 요리사를 불러’ 처리하고 끝나면 보내는 방식이에요. 평소엔 요리사 0명이라 월급(서버 유지비

데이터베이스 (database) — 글·회원·주문·사진 같은 정보를 차곡차곡 쌓아두고, 필요할 때 꺼내 쓰는 ‘디지털 창고’예요. 식당으로 치면 재료와 장부를 보관하는 창고죠. 메모장에 적으면 컴퓨

컬렉션 / 테이블 (Collection / Table) — 창고 안 '선반' 하나예요. 같은 종류를 모아두는 큰 칸이죠 — '회원' 선반, '주문' 선반, '상품' 선반. Firestore에선 컬렉션, 엑셀식(SQL) D

문서 / 레코드 (Document / Record) — 선반(컬렉션) 위에 놓인 '상자 하나'예요. 회원 한 명, 주문 한 건이 각각 상자 하나죠. Firestore에선 문서(document), 엑셀식 DB에선 행(레

필드 / 컬럼 (Field / Column) — 상자(문서) 안의 '작은 칸'이에요. 회원 상자라면 이름·이메일·가입일 칸이 각각 필드죠. 칸 하나에 한 가지 정보가 들어가요. '전화번호도 저장하자' 하면 칸(

기본키 / ID (Primary Key / ID) — 상자마다 붙는 '고유 번호표'예요. 똑같은 이름이 둘 있어도 번호표가 다르면 안 헷갈리죠. 이 번호로 상자 하나를 콕 집어 꺼내거나 고쳐요. 보통 DB가 자동으로

쿼리 (Query) — 창고에 거는 '조건 주문서'예요. "서울 사는 회원만", "별점 4 이상 상품만"처럼 원하는 것만 골라 달라고 조건을 거는 거죠. 전체를 다 꺼내 화면에서 거르면

스키마 (Schema) — 창고 '정리 규칙·설계도'예요. 회원 상자엔 이름(글자)·나이(숫자)·가입일(날짜)을 넣는다고 미리 정해두는 양식이죠. 규칙이 있으면 '나이 칸에 글자가 들어가는

관계 / 외래키 (Relation / Foreign Key) — 상자끼리 잇는 '꼬리표'예요. 주문 상자에 '이건 3번 회원 거'라고 회원 번호표(ID)를 적어두면, 주문과 회원이 연결되죠. 그래야 '이 회원의 주문 전부'를

인덱스 (Index) — 창고의 '색인·목차'예요. 책 맨 뒤 찾아보기처럼, 자주 찾는 기준(날짜·가격)으로 미리 정렬해 두면 순식간에 찾아요. 없으면 상자를 하나하나 다 뒤져 느리고,

보안 규칙 (Security Rules) — 창고 '출입증 규칙'이에요. 누가 어느 상자를 읽고 쓸 수 있는지 정하죠. 안 정하면 아무나 다 보거나(위험), 반대로 너무 잠그면 본인도 'permission

SQL vs NoSQL (SQL / NoSQL) — 창고 정리 '두 가지 방식'이에요. SQL은 칸이 딱 정해진 '엑셀 표'처럼 빈틈없이 정리(엄격·관계에 강함), NoSQL은 상자에 자유롭게 담는 '서류함'처럼

클라우드 (cloud) — 내 컴퓨터에 직접 두지 않고, 인터넷 너머 ‘남의 거대한 컴퓨터(데이터센터)’를 빌려 쓰는 걸 통틀어 클라우드라고 해요. 발전소에서 전기를 끌어다 쓰듯, 서버·저

온도 (temperature) — AI 제어판(예: 구글 AI 스튜디오)에서 슬라이더로 조절하는 ‘답변의 자유분방함’ 다이얼이에요. 낮추면 또박또박·매번 비슷하게·사실 위주로 안정적이고(같은 질문

시스템 지시 (system instruction) — 매번 채팅창에 “너는 ○○야, ○○처럼 말해, ○○형식으로 답해”를 복붙하는 대신, AI의 역할·말투·출력형식을 한 번 고정해두는 설정칸이에요. 식당 주문서에 미

에이전틱 코딩 (agentic coding) — AI에게 질문 한 번 하고 답을 받는 게 아니라, 일을 통째로 맡기면 AI가 계획→실행→확인까지 스스로 여러 단계를 밟아 결과물을 만들어내는 방식이에요. 택배(질

에이전트 (AI agent) — 시키면 알아서 단계를 밟아 끝까지 해내는 AI 직원이에요. 챗봇이 ‘길을 설명해주는 안내원’이라면, 에이전트는 파일 만들기·검색·명령 실행 같은 도구를 쥐고 ‘직

클로드 코드 (Claude Code) — 앤트로픽이 만든, 터미널(명령창)에서 일하는 AI 직원 프로그램의 이름이에요. 채팅창의 클로드가 ‘상담 창구’라면, 클로드 코드는 내 컴퓨터 폴더에 직접 들어와

CLAUDE.md (규칙 파일) (CLAUDE.md) — AI 직원 책상 앞 벽에 붙여둔 명찰 + 근무수칙이에요. 새 대화(출근)를 시작할 때마다 자동으로 읽는 유일한 종이라서, “너는 ○○ 담당이야”, “지우기 전엔

자동 메모리 (auto memory) — 단골 미용실의 고객 차트예요 — 내가 쓰는 게 아니라 가게(AI)가 적어둡니다. “기억해줘”라고 하면 여기 저장되는데, 말풍선이 아니라 진짜 파일(목차 MEMOR

스킬 (skill) — 자주 하는 업무의 절차를 적어둔 레시피 카드(업무 매뉴얼)예요. 평소엔 제목만 걸려 있다가, 그 일을 시키는 순간에만 AI가 본문을 펼쳐 읽고 순서대로 따라 합니

플랜 모드 (plan mode) — 공사 시작 전에 설계도·견적서부터 받아보는 모드예요. AI가 파일을 건드리기 전에 “이렇게 하겠습니다” 계획서를 먼저 내밀고, 내가 승인해야만 실행에 들어갑니다.

서브에이전트 (subagent) — AI 직원이 혼자 다 하지 않고 팀을 꾸려 일을 나눠 맡기는 거예요. 조사 담당, 설계 담당을 따로 보내 각자 결과 보고서만 받아오니 빠르고, 본채 책상(컨텍스트

MCP — AI에게 외부 도구를 꽂아주는 USB-C 허브 규격이에요. 노션·구글드라이브·브라우저 같은 바깥 서비스를 이 규격으로 꽂아두면, AI가 복붙 없이 직접 읽고 쓸

컨텍스트 (작업 기억) (context window) — AI의 책상 크기예요. 대화·파일·규칙이 전부 책상 위에 올라와 있어야 참고할 수 있는데, 자리가 차면 오래된 서류부터 요약해 접어둡니다. 대화가 길어질수록 느려

토큰 (AI 사용량) (token) — AI가 말을 세는 단위, ‘말의 조각’이에요. 정육점이 고기를 그램으로 달듯 AI는 주고받는 모든 글을 토큰으로 달아 요금과 책상 자리(컨텍스트)를 계산합니다.

권한 승인 (permission) — AI 직원이 큰일을 하기 전에 받아 가는 결재 도장이에요. 읽기는 자유지만, 파일 수정·명령 실행처럼 흔적이 남는 일은 기본적으로 “해도 될까요?” 하고 도장을

터미널·CLI (terminal CLI) — 마우스 없이 글자로 컴퓨터를 부리는 조종실이에요. 검게 생겨서 무섭지만, 클로드 코드 시대엔 명령어를 외울 필요가 없어요 — 한국어로 말하면 AI가 명령어로 통역

체크포인트·되돌리기 (checkpoint) — 게임의 세이브 포인트예요. 클로드 코드는 지시할 때마다 자동 저장을 해두기 때문에, 방향이 잘못됐다 싶으면 /rewind 로 그 지점까지 되감을 수 있습니다. ‘

검토 게이트 (review gate) — 사장 결재예요. AI가 아무리 잘 만들어도 ‘초안 → 내가 OK → 그다음에 배포’ 순서를 규칙으로 박아, 세상에 나가기 전에 반드시 내 눈을 거치게 하는 운영법

HTTP와 HTTPS (HTTP / HTTPS) — 웹브라우저(손님)와 서버(주방)가 정보를 주고받을 때 쓰는 약속(규약)이 HTTP예요. 주소 앞에 붙는 ‘http://’ ‘https://’가 그거죠. 둘의 차이

iframe — 내 웹페이지 안에 다른 웹페이지를 통째로 끼워 넣는 ‘창문/액자’예요. <iframe> 태그로 만들어요. 우리 집 벽에 단 TV 화면처럼 — 그 안엔 완전히 다른

샌드박스 (sandbox) — iframe에 끼운 ‘남의 콘텐츠’가 위험한 짓(스크립트 실행·내 페이지 조작·쿠키 훔쳐보기)을 못 하게 가둬두는 안전 울타리예요. <iframe sandbox>

reCAPTCHA — 웹사이트에 접속한 게 진짜 사람인지, 아니면 자동으로 돌아가는 프로그램(봇)인지 구글이 대신 판별해 주는 무료 보안 도구예요. 가게 입구의 보안요원에 비유할 수

인증 vs 인가 (authentication vs authorization) — 인증은 '너 누구냐'(신분증 확인 = 로그인), 인가는 '들어온 너, 어디까지 만져도 되냐'(출입 권한)예요. 받침 하나 차이인데 완전히 다른 얘기죠. 같은 문으

해싱 (hashing) — 비밀번호를 창고(DB)에 글자 그대로('평문') 적지 않고, 거꾸로 되돌릴 수 없는 글자 뭉치로 뒤섞어 저장하는 방식이에요. 숙소 주인이 전 객실 비번을 수첩에

토큰 (token) — 한 번 로그인하면 손목에 채워주는 '디지털 입장 팔찌'예요. 놀이공원 자유이용권처럼, 그다음부터는 페이지를 옮길 때마다 비번 대신 팔찌만 슥 보여주면 통과돼요.

소셜 로그인 (social login (OAuth)) — '카카오로 시작하기' 버튼처럼, 비번을 새로 만들지 않고 큰 회사 계정으로 로그인하는 방식이에요. 카카오가 '이 사람 저희 회원 맞아요' 하고 신원보증서를 써주면

리디렉션 URI (redirect URI) — 소셜 로그인에서 '카카오 다녀온 손님이 돌아올 우리 가게 주소'예요. 손님이 카카오에 가서 신원보증서를 받으면 카카오가 '어디로 돌려보내면 되죠?' 하고 묻는데,

.gitignore (gitignore) — 깃허브(공개 창고)에 올릴 때 '이건 빼고'라고 적어두는 제외 명단 파일이에요. 이삿짐 쌀 때 '금고는 트럭에 싣지 마세요' 목록을 붙여두는 것과 같아요. API

웹훅 (webhook) — 다른 가게(결제 회사 등)에서 일이 생겼을 때 우리 주방(서버)으로 먼저 쏴주는 알림 신호예요. 우리가 계속 물어보는 게 아니라, 저쪽이 '입금 확인!' 하고 벨

사용량 제한 (rate limit / usage quota) — '누가 얼마나 쓸 수 있냐'를 정하는 계량기예요. AI 기능처럼 쓸 때마다 내 돈이 나가는 기능은, 손님이 신기하다고 연타하면 그 요금이 전부 내 카드에서 나가요

화면 숨김 ≠ 보안 (hiding is not security) — 화면에서 버튼을 안 보이게 하는 건 식탁에 천 한 장 덮어둔 거예요. 브라우저 개발자 도구(F12)로 들추면 그대로 보이고, 눌러져요. 진짜 자물쇠는 서버가 창고

본인인증 (identity verification) — '진짜 그 사람인지' 국가 신분 수준으로 확인하는 도장급 인증이에요. 소셜 로그인이 '가입을 간편하게'라면, 본인인증은 '신원을 확실하게'죠. 휴대폰 문자 인증,

비밀번호 재설정 (password reset) — 손님은 비번을 반드시 까먹어요. 그때 '비밀번호를 잊으셨나요?' 링크로 이메일에 재설정 링크를 보내주는 기능이에요. 이메일 인증은 가입 때 '이 이메일이 진짜 본

—

🔍

검색 결과가 없어요

다른 말로 찾아보거나, 수업에서 “이거 무슨 뜻이에요?”라고 물어보세요.

—

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

💬 의견 보내기