웹 기초 용어사전¶

바이브코딩하다 만나는 핵심 용어를 한 줄 뜻 + 비유 + 내 프로젝트 실물로 정리. 모르는 용어를 만나면 여기서 찾고, 없으면 Claude에게 "용어사전에 ○○ 추가해줘".

1. 큰 그림¶

용어	뜻 (비유)	내 프로젝트 실물
도메인	사람이 읽는 사이트 주소 (가게 간판)	storywinner.co.kr
IP 주소	컴퓨터가 쓰는 진짜 주소, 숫자 (위도·경도)	평소엔 볼 일 없음 - DNS가 대신 처리
DNS	도메인 → IP 변환 주소록 (네비게이션)	도메인 연결 때 "네임서버 변경"이 이것
URL	주소 전체. 도메인 + 경로 (건물 주소 + 호수)	`storywinner.co.kr/lectures/records`
HTTPS	암호화된 통신. 자물쇠 아이콘 (밀봉 봉투 편지)	pages.dev는 자동 적용
HTTP 요청/응답	"주세요"(요청) ↔ "여기요"(응답)의 대화 규칙	모든 클릭 뒤에서 일어나는 일
포트	한 건물의 여러 출입구 번호	`localhost:3000`의 `:3000`

용어	뜻 (비유)	내 프로젝트 실물
HTML	화면의 뼈대와 내용 (건물 골조 + 가구)	하이메이트가 만들어준 `행정사무감사.html`
CSS	색·크기·배치 등 꾸밈 (인테리어·옷)	국방부 사이트의 올리브/카키 테마
JavaScript(JS)	화면의 움직임·반응 (전기 배선·자동문)	프롬프트 "복사" 버튼 동작
반응형	화면 크기에 따라 배치가 변하는 디자인	폰에서 보면 1열, PC에서 3열
프레임워크	미리 짜인 뼈대 위에서 개발하는 도구 세트 (조립식 주택 키트)	Astro(홈피), Next.js, React
컴포넌트	화면 부품. 한 번 만들어 여러 곳에 재사용 (레고 블록)	BoardPage (게시판 9곳에 재사용)
정적 사이트	미리 만들어둔 완성 파일을 그대로 주는 사이트 (인쇄된 전단지)	프롬프트 사이트 강의 페이지
동적 페이지	요청마다 내용을 새로 만드는 페이지 (즉석 조리)	board 갤러리 (글이 실시간 반영)
SPA	페이지 이동 없이 한 화면에서 다 처리하는 앱 방식	두뇌톡톡 게임들
PWA	웹사이트인데 앱처럼 설치되는 것	다독다독 (목소리 타임캡슐)

용어	뜻 (비유)	내 프로젝트 실물
데이터베이스(DB)	데이터를 구조적으로 저장·검색하는 장부	D1 (lecture-board)
테이블	DB 안의 표 하나 (장부의 한 페이지)	cards 테이블
레코드(행)	표의 한 줄 = 데이터 1건	수강생 결과물 1개
CRUD	만들고(Create) 읽고(Read) 고치고(Update) 지우는(Delete) 4가지 기본 동작	업로드/갤러리/별표/삭제
SQL	DB에게 말 거는 언어	`SELECT * FROM cards WHERE is_best=1`
스키마	표의 칸 구성 설계 (장부 양식)	cards에 category 컬럼 추가했던 것
마이그레이션	운영 중인 DB의 양식을 바꾸는 작업 (장부 갈아끼우기)	D1 컬럼 추가 (study/21 참고)
오브젝트 스토리지	파일 전용 창고. 크고 무거운 것 보관	R2 (board-images)
캐시	자주 쓰는 걸 가까이 복사해두고 빨리 꺼내 쓰기 (집 앞 편의점)	CDN 캐시, 브라우저 캐시
CDN	전 세계에 복사본을 깔아 가까운 곳에서 주는 배달망	Cloudflare 자체가 CDN

용어	뜻 (비유)	내 프로젝트 실물
인증	"너 누구야?"를 확인하는 절차	board admin 비밀번호 0128
세션	로그인 상태를 서버가 기억하는 방식 (입장 도장)	관리자 로그인 유지
쿠키	브라우저에 저장되는 작은 메모 (손목 밴드)	"다시 보지 않기" 같은 상태 저장
토큰	신분증 대신 들고 다니는 임시 출입증	GitHub API 토큰
OAuth	"구글 계정으로 로그인" - 남의 신분 보증을 빌리는 방식 (호텔이 여권 확인)	admin 대시보드 구글 OAuth
API 키	서비스 사용 권한 열쇠. 유출되면 남이 내 돈으로 씀	네이버 API 키, Claude API 키
환경변수	비밀값을 코드 밖에 보관하는 방법 (금고)	`.env` 파일, CF 대시보드의 변수
CORS	"다른 사이트에서 내 API 불러도 되나?" 규칙 (출입 명단)	R2 Worker에 CORS 허용했던 것

용어	뜻 (비유)	내 프로젝트 실물
git	코드의 시간여행 장부. 모든 변경 이력 기록	모든 프로젝트에서 사용 중
커밋	"여기까지 했다" 저장 도장 1개 (세이브 포인트)	`b60d8fe` 같은 코드가 커밋 번호
푸시(push)	내 컴퓨터의 커밋을 GitHub에 올리기 (본사에 장부 제출)	push → 자동 배포 트리거
저장소(repo)	프로젝트 1개의 코드 보관함	`hangglwriter/storywinner`
브랜치	본편과 별도로 실험하는 평행 우주	master = 본편
빌드	사람이 쓴 코드를 → 서비스용 완성 파일로 변환 (반죽→빵 굽기)	`npm run build` → dist 폴더
배포(deploy)	완성 파일을 서버에 올려 공개하는 것 (개업)	push하면 CF Pages가 자동으로
CI/CD	푸시하면 빌드·배포가 자동으로 이어지는 파이프라인 (무인 생산라인)	GitHub Actions
터미널/CLI	글자로 컴퓨터에 명령하는 창	Claude Code가 사는 곳
패키지 매니저	남이 만든 코드 부품을 설치해주는 도구 (부품 상가)	npm(JS), pip(Python)
라이브러리	가져다 쓰는 코드 부품 (공구)	python-docx, BS4
F12 / 콘솔	브라우저 안의 정비소. 에러와 통신 내역이 보임	디버깅할 때 Claude가 열어보라는 곳
로그	프로그램이 남기는 작업 일지	CF Pages 빌드 실패 때 보는 것