개발 단어집, 뜻만 알면 되는 127개

외우지 마세요. 들었을 때 당황하지 않을 정도면 충분합니다. Claude가 어려운 말을 하면 "쉬운 말로 다시 설명해 줘"라고 하면 되고, 이 단어집은 그때 옆에 펼쳐 두는 용도입니다.

1기본 (18)

프론트엔드front-end

사용자 눈에 보이는 화면 쪽

백엔드back-end

눈에 안 보이는 처리 쪽. 저장하고 계산하고 보내는 일

서버server

늘 켜져 있으면서 요청을 받아 답해 주는 컴퓨터

클라이언트client

요청하는 쪽. 보통 사용자의 브라우저나 폰

데이터베이스 · DB

정보를 표 형태로 쌓아 두는 창고 → Supabase, DB와 로그인을 한 번에14장

API

프로그램끼리 주고받는 창구. "이렇게 물으면 이렇게 답한다"는 약속 → API, 서비스끼리 대화하는 창구15장

프레임워크framework

자주 쓰는 뼈대를 미리 갖춰 둔 것. 맨땅에서 시작하지 않게 해 줍니다

라이브러리library

필요한 기능만 골라 쓰는 부품 모음

오픈소스open source

코드가 공개돼 누구나 쓰고 고칠 수 있는 것. 대개 무료

코드 · 소스코드

사람이 쓴 명령문. 프로그램의 원본

터미널 · CLI

글자만으로 컴퓨터에 명령하는 검은 창. Claude Code가 사는 곳 → 터미널, 까만 화면과 친해지기1장

로컬local

내 컴퓨터 안. 아직 인터넷에는 없는 상태

배포deploy

내 컴퓨터에 있던 걸 인터넷에 올려 남들이 쓰게 하는 것 → 배포, 내 컴퓨터 밖으로17장

프로덕션production

사용자가 실제로 쓰는 환경. "실서비스"

버그bug

의도와 다르게 동작하는 것

로그log

프로그램이 남긴 기록. 문제가 생기면 여기부터 봅니다 → 에러 메시지 읽는 법19장

환경변수env

비밀번호·열쇠처럼 코드에 적으면 안 되는 값을 따로 빼 두는 곳 → 환경변수와 비밀 키 지키기16장

리팩터링refactoring

동작은 그대로 두고 코드만 깔끔하게 정리하는 일

2화면 만들기 (13)

HTML

화면의 뼈대. 제목·문단·버튼이 여기 들어갑니다

CSS

화면의 옷. 색·크기·배치를 정합니다

자바스크립트JavaScript

화면을 움직이게 하는 것. 누르면 반응하는 부분

타입스크립트TypeScript

자바스크립트에 실수 방지 장치를 붙인 것

리액트React

화면을 조각으로 나눠 만드는 도구. 가장 널리 쓰입니다

넥스트Next.js

리액트를 실제 서비스로 만들기 쉽게 감싼 것 → Next.js, 화면과 서버를 한 번에12장

테일윈드Tailwind CSS

옷 입히기를 짧은 이름표로 하는 방식 → Tailwind CSS, 클래스 이름으로 옷 입히기13장

컴포넌트component

화면 조각 하나. 버튼·카드처럼 여러 번 재사용되는 단위

반응형responsive

폰·PC 화면 크기에 따라 배치가 알아서 바뀌는 것

UI

사용자가 보고 누르는 것 자체

UX

그걸 쓰면서 느끼는 경험 전체

렌더링rendering

코드가 실제 화면으로 그려지는 일

브라우저browser

크롬·사파리처럼 웹을 여는 프로그램

3화면 구성 요소 — UI (20)

내비게이션바 · 내비바nav bar

화면 위쪽에 붙어 다른 페이지로 이동하게 해 주는 메뉴 줄

사이드바sidebar

화면 옆에 세로로 붙은 메뉴 창

헤더 · 푸터header · footer

화면 맨 위 · 맨 아래에 고정으로 붙는 영역

햄버거 버튼hamburger menu

줄 세 개로 된 아이콘. 누르면 숨어 있던 메뉴가 펼쳐집니다

탭tab

한 화면 안에서 눌러서 내용만 바뀌는 칸

브레드크럼breadcrumb

"홈 > 상품 > 신발"처럼 지금 위치를 보여 주는 경로 표시

모달 · 팝업창modal

화면 위에 떠서 다른 곳은 못 누르게 막는 창

드롭다운dropdown

눌렀을 때 아래로 목록이 펼쳐지는 선택창

토글toggle

켜고 끄는 스위치 모양 버튼

체크박스 · 라디오버튼checkbox · radio

여러 개 고르는 네모 · 하나만 고르는 동그라미

폼form

사용자가 입력해서 제출하는 칸들의 묶음. 예) 회원가입 폼

플레이스홀더placeholder

입력창에 아직 아무것도 안 썼을 때 보이는 흐린 예시 글자

툴팁tooltip

마우스를 올리거나 눌렀을 때 뜨는 짧은 설명 풍선

토스트 · 스낵바toast

잠깐 떴다가 저절로 사라지는 알림 문구. 예) "저장되었습니다"

배지badge

숫자나 상태를 표시하는 작은 표식. 예) 알림 3개

아바타avatar

사용자를 나타내는 동그란 프로필 사진 또는 이니셜

배너banner

화면 위쪽에 크게 붙는 공지·광고 띠

아코디언accordion

눌러야 펼쳐지고 다시 누르면 접히는 목록. 예) 자주 묻는 질문

캐러셀 · 슬라이더carousel

이미지가 옆으로 넘어가며 순서대로 보이는 슬라이드

로딩 스피너spinner

뱅글뱅글 돌면서 "기다려 달라"고 보여 주는 표시

4서버에서 도는 것 — 백엔드 (19)

노드Node.js

자바스크립트를 브라우저 밖에서, 즉 내 컴퓨터나 서버에서 돌릴 수 있게 해 주는 프로그램

npm엔피엠

Node.js를 설치하면 함께 깔리는 도구. 두 가지 일을 합니다. ① npm install 로 남이 만든 부품(패키지)을 인터넷 창고에서 받아 내 프로젝트에 넣고, ② npm run dev 처럼 프로젝트에 미리 적어 둔 명령을 실행합니다

패키지package

남이 만들어 둔 기능 묶음 하나. npm으로 받아 씁니다

런타임runtime

코드를 실제로 실행해 주는 환경. 예) Node.js

요청 · 응답request · response

브라우저가 묻고 서버가 답하는 한 쌍

HTTP

웹에서 요청과 응답을 주고받는 규칙

상태 코드status code

응답에 붙는 번호. 200 정상 · 404 그런 주소 없음 · 500 서버 잘못

엔드포인트endpoint

요청을 받는 주소 하나. 예) /api/예약

REST API

주소와 동작을 정해진 방식으로 맞춘 API 설계 방식

라우팅routing

어떤 주소로 들어오면 어떤 처리를 할지 연결하는 일

미들웨어middleware

요청이 처리되기 전에 거쳐 가는 중간 단계. 로그인 확인 등

포트port

한 컴퓨터 안에서 프로그램을 구분하는 번호. 예) 3000

localhost로컬호스트

내 컴퓨터 자신을 가리키는 주소. 만드는 중에는 여기서 확인합니다

웹훅webhook

어떤 일이 생기면 저쪽에서 우리에게 먼저 알려 주는 방식

크론cron

정해진 시각에 자동으로 실행하는 예약 장치

큐queue

밀린 일을 줄 세워 차례로 처리하는 것

CORS코어스

다른 주소끼리 데이터를 주고받아도 되는지 정하는 규칙. 막히면 여기 문제

ORM

DB를 SQL 대신 코드로 다루게 해 주는 도구

도커 · 컨테이너Docker

실행 환경을 통째로 상자에 담아 어디서든 똑같이 돌게 하는 것

5데이터 다루기 (11)

SQL에스큐엘

데이터베이스에 물어볼 때 쓰는 언어

쿼리query

DB에 던지는 질문 하나

테이블table

DB 안의 표 하나. 예) 회원 표, 주문 표

행 · 레코드row

표의 가로 한 줄 = 한 건. 예) 회원 한 명

열 · 필드column

표의 세로 한 칸 = 항목. 예) 이름, 연락처

스키마schema

표의 설계도. 어떤 항목을 어떤 형태로 담을지

마이그레이션migration

표 구조를 바꾸는 작업

CRUD크러드

만들고·읽고·고치고·지우는 네 가지 기본 동작

JSON제이슨

데이터를 주고받을 때 쓰는 표기법 → JSON, 바이브코딩에서 가장 먼저 만나는 글자7장

백업backup

사고에 대비한 복사본

캐시cache

자주 쓰는 걸 가까이 두고 빨리 꺼내는 것

6로그인과 보안 (15)

인증authentication

"너 누구냐"를 확인하는 일

인가 · 권한authorization

"그래서 뭘 할 수 있냐"를 정하는 일

세션session

로그인된 상태가 유지되는 동안

쿠키cookie

브라우저에 저장되는 작은 표식. 로그인 유지에 씁니다

토큰token

로그인했다는 증표. 출입증 같은 것

JWT제이더블유티

널리 쓰이는 토큰 형식 하나

OAuth오어스

카카오·구글 계정으로 로그인하게 해 주는 방식

소셜 로그인

위 방식으로 만든 로그인. 비밀번호를 우리가 갖지 않아 안전합니다

해시hash

되돌릴 수 없게 뒤섞는 것. 비밀번호는 이렇게 저장합니다

솔트salt

해시할 때 같이 섞는 무작위 값. 같은 비밀번호도 다르게 보이게 합니다

암호화encryption

열쇠가 있으면 되돌릴 수 있게 잠그는 것. 해시와는 다릅니다

HTTPS · SSL

주고받는 내용을 중간에서 못 보게 하는 것. 주소창 자물쇠 표시

API 키

외부 서비스를 쓸 때 받는 열쇠 문자열. 남에게 보이면 안 됩니다 → 환경변수와 비밀 키 지키기16장

2단계 인증2FA

비밀번호 외에 한 번 더 확인하는 절차

개인정보

살아 있는 사람을 알아볼 수 있는 정보. 이름·연락처 등

7올리고 운영하기 (10)

호스팅hosting

내 서비스를 대신 켜 두고 인터넷에 보여 주는 서비스

도메인domain

주소 이름. 예) vibegongzzang.kr → 도메인 연결하기18장

DNS

주소 이름을 실제 위치로 안내하는 전화번호부

클라우드cloud

남의 컴퓨터를 빌려 쓰는 것

서버리스serverless

서버를 직접 관리하지 않고 필요할 때만 잠깐 돌리는 방식

CDN

세계 곳곳에 사본을 두고 가까운 곳에서 보내 주는 것

빌드build

사람이 쓴 코드를 실제로 돌아가는 형태로 만드는 과정

롤백rollback

문제가 생겼을 때 이전 버전으로 되돌리기

다운타임downtime

서비스가 멈춰 있는 시간

트래픽traffic

사람들이 들어와 쓰는 양. 많아지면 요금이 오릅니다

8깃 — 되돌리기 장치 (9)

깃Git

변경 이력을 남기는 도구. 언제든 되돌릴 수 있게 해 줍니다 → Git, 언제든 되돌릴 수 있는 저장10장

깃허브GitHub

깃으로 관리한 코드를 온라인에 보관하는 곳 → GitHub, 내 코드가 사는 집11장

저장소 · 레포repository

프로젝트 하나가 통째로 담긴 곳

커밋commit

지금까지의 변경을 한 덩어리로 저장. 사진 한 장 찍어 두는 것

브랜치branch

원본을 건드리지 않고 갈라놓은 작업 줄기

머지merge

갈라졌던 작업을 다시 합치는 것

푸시 · 풀push · pull

내 것을 올리기 · 올라와 있는 걸 받기

PRpull request

"이 변경 합쳐도 될까요"라고 보내는 요청

충돌conflict

같은 곳을 둘이 다르게 고쳐 합칠 수 없는 상태

9AI와 일할 때 (12)

프롬프트prompt

AI에게 하는 말. 지시문 → AI에게 일 잘 시키는 법, 프롬프트 기본기5장

컨텍스트context

AI가 지금 기억하고 있는 대화의 범위

토큰token

AI가 글을 세는 단위. 사용량과 요금의 기준 (로그인 토큰과는 다른 말)

모델model

AI의 종류. Opus·Sonnet처럼 성능과 속도가 다릅니다

에이전트agent

스스로 도구를 써 가며 여러 단계를 해내는 AI

서브에이전트subagent

본 작업을 도우라고 따로 띄운 보조 AI

MCP

Claude가 외부 서비스(구글 드라이브·슬랙 등)와 연결되는 규격 → MCP, AI에게 손과 발을 달아 주는 방법8장

스킬skill

자주 시키는 절차를 미리 적어 두고 이름으로 부르는 것 → Skills, AI에게 우리만의 일하는 방식을 가르치기9장

훅hook

"이럴 때는 자동으로 이걸 해라"는 규칙

할루시네이션hallucination

AI가 그럴듯하게 지어내는 것. 중요한 건 꼭 확인하세요

파인튜닝fine-tuning

AI를 특정 용도에 맞게 추가로 훈련시키는 것

RAG랙

내 문서를 찾아 읽게 한 뒤 답하게 하는 방식

10AI에게 이렇게 말해 보세요

• person“○○가 뭔지 비개발자에게 설명하듯 한 줄로 알려 줘”content_copy복사
• person“방금 말한 ○○를 쉬운 말로 다시 설명해 줘”content_copy복사