용어 사전

낯선 용어가 나오면 여기서 찾아보세요. 모두 99개 용어를 쉬운 말로 풀었어요.

개발자 도구 DevTools: 브라우저에 들어 있는 개발용 도구예요. F12 키로 열어서 웹페이지의 속을 볼 수 있어요. 비유: 자동차 보닛 열기
객체 Object: 이름(키)과 값을 짝지어 담은 묶음이에요. 예: { 이름: "민지", 나이: 20 } 비유: 이름표가 붙은 서랍장
권한 Authorization: 로그인한 사람이 "무엇을 할 수 있는지" 정하는 것이에요. 예: 일반 회원은 글쓰기만, 관리자는 삭제까지. 비유: 출입증 등급 (일반 / 직원 전용)
네이티브 앱 Native App: 안드로이드, iOS 등 각 기기 전용 언어로 만든 앱이에요.
데이터베이스 Database: 많은 데이터를 체계적으로 저장하고 빠르게 찾을 수 있게 정리한 저장소예요. 비유: 창고 장부
도메인 Domain: example.com처럼 사람이 기억하기 쉽게 만든 웹사이트 이름이에요. 비유: 가게 간판 이름
동적 사이트 Dynamic Site: 요청이 올 때마다 서버가 내용을 새로 만들어 보여 주는 사이트예요. 로그인, 게시판 등. 비유: 주문 받고 바로 만드는 요리
라이브러리 Library: 자주 쓰는 기능을 모아 둔 코드 묶음이에요. 내가 필요할 때 골라서 불러 써요. 비유: 공구 상자
롤백 Rollback: 문제가 생겼을 때 사이트를 이전에 잘 되던 배포 버전으로 되돌리는 것이에요. 비유: 어제 저장한 파일로 되돌리기
문자열 String: 따옴표로 감싼 글자 데이터예요. 예: "안녕하세요"
미디어 쿼리 Media Query: "화면이 600px보다 작으면 이렇게 꾸며" 같은 조건부 CSS예요.
미리보기 배포 Preview Deployment: main이 아닌 브랜치를 본 사이트와 다른 별도 주소로 배포해서, 합치기 전에 실제 화면을 확인하는 것이에요. 비유: 정식 개업 전 가오픈
바이브 코딩 Vibe Coding: 코드를 한 줄 한 줄 직접 쓰는 대신, 만들고 싶은 것을 AI에게 말로 설명해서 만드는 방식이에요. 비유: 건축가에게 원하는 집을 설명하는 건축주
박스 모델 Box Model: 모든 HTML 요소는 내용, 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)으로 된 상자라는 개념이에요. 비유: 액자: 그림, 매트, 액자 틀, 벽과의 간격
반복문 Loop: 같은 일을 여러 번 반복하는 코드예요. for, while을 써요. 비유: "10번 줄넘기 해"
반응형 웹 Responsive Web: 화면 크기(휴대폰, 태블릿, PC)에 맞춰 배치가 알맞게 바뀌는 웹이에요. 비유: 그릇 모양에 맞춰 담기는 물
배열 Array: 여러 값을 순서대로 담은 목록이에요. 예: ["사과", "배", "포도"] 비유: 번호 붙은 칸막이 상자
배포 Deploy: 만든 웹사이트를 인터넷에 올려서 다른 사람이 볼 수 있게 하는 일이에요. 비유: 가게 오픈
백엔드 Backend: 눈에 보이지 않는 서버, 데이터 저장, 로그인 처리 등을 만드는 일이에요. 비유: 식당 주방과 창고
변수 Variable: 값을 담아 두고 이름으로 꺼내 쓰는 상자예요. let, const로 만들어요. 비유: 이름표 붙은 상자
브라우저 Browser: 웹페이지를 받아서 화면에 그려 주는 프로그램이에요. 크롬, 엣지, 사파리 등이 있어요. 비유: 웹 세상을 보는 창문
브랜치 Branch: 원본(main)을 건드리지 않고 따로 작업하는 가지예요. 마음에 들면 원본에 합쳐요(merge). 비유: 원본 문서의 복사본에서 수정하기
비동기 Asynchronous: 오래 걸리는 일을 기다리는 동안 다른 일을 먼저 하는 방식이에요. 비유: 식당 진동벨: 기다리는 동안 자리에 앉아 있기
빌드 Build: 개발용 코드를 실제 서비스에 올릴 수 있는 파일로 변환·정리하는 과정이에요. 비유: 원고를 인쇄용 책으로 만들기
상태 코드 Status Code: 응답이 어떻게 처리됐는지 알려 주는 숫자예요. 200은 성공, 404는 없음, 500은 서버 오류예요. 비유: 주문 결과 안내: "나왔습니다 / 없는 메뉴예요 / 주방 고장"
서버 Server: 요청을 받으면 필요한 것을 만들어 돌려주는 컴퓨터(또는 프로그램)예요. 비유: 식당 주방
서버리스 Serverless: 서버를 직접 관리하지 않고, 요청이 올 때만 코드가 실행되는 방식이에요. 비유: 필요할 때만 불을 켜는 공유 주방
선택자 Selector: CSS에서 "어떤 요소를 꾸밀지" 고르는 부분이에요. 예: h1, .card, #title 비유: "거실 벽"처럼 꾸밀 대상 지목하기
세션 Session: 로그인한 뒤 "이 사람은 로그인한 상태"임을 기억해 두는 것이에요. 브라우저가 출입증(토큰)을 보관해서 새로고침해도 로그인이 유지돼요. 비유: 놀이공원 손목밴드
소셜 로그인 Social Login: 구글, 카카오 같은 다른 서비스 계정으로 로그인하는 방식이에요. 비밀번호를 새로 만들 필요가 없어요. 비유: 신분증 대신 회사 사원증으로 출입
속성 Attribute: 태그에 추가 정보를 주는 것이에요. 예: <a href="주소">에서 href 비유: 상자에 적힌 메모
시맨틱 Semantic: 모양이 아니라 "의미"에 맞는 태그를 쓰는 것이에요. header, nav, main, footer 등이 있어요. 비유: 방마다 "거실", "부엌" 팻말 달기
에디터 Editor: 코드를 작성하는 프로그램이에요. VS Code가 가장 많이 쓰여요. 비유: 코드용 워드 프로그램
요소 Element: 여는 태그, 내용, 닫는 태그를 합친 한 덩어리예요. 예: <p>안녕</p> 비유: 이름표가 붙은 상자 하나
요청 Request: 브라우저가 서버에게 "이것 좀 주세요" 하고 보내는 메시지예요. 비유: 손님의 주문
웹 Web: 인터넷 위에서 웹페이지를 주고받는 서비스예요. 인터넷을 이용하는 여러 서비스 중 하나예요. 비유: 도로 위를 달리는 택배 서비스
응답 Response: 서버가 요청을 받고 돌려주는 결과예요. 비유: 주방에서 나온 음식
이벤트 Event: 클릭, 키보드 입력, 스크롤처럼 웹페이지에서 일어나는 사건이에요. 비유: 초인종이 울리는 일
인증 Authentication: "당신이 누구인지" 확인하는 일이에요. 로그인이 대표적이에요. 비유: 출입증 확인
인터넷 Internet: 전 세계 컴퓨터를 서로 연결한 거대한 통신망이에요. 비유: 전 세계를 잇는 도로망
자동 배포 Continuous Deployment: GitHub에 코드를 올리면 호스팅 서비스가 알아서 빌드하고 사이트를 업데이트하는 것이에요. 비유: 원고를 넘기면 알아서 인쇄·배송되는 출판사
자료형 Data Type: 값의 종류예요. 숫자(number), 글자(string), 참/거짓(boolean) 등이 있어요.
저장소 Repository: GitHub에서 프로젝트 하나의 파일과 변경 기록을 보관하는 칸이에요. 줄여서 repo라고도 해요. 비유: 프로젝트별 클라우드 폴더
정적 사이트 Static Site: 미리 만들어 둔 파일(HTML, CSS, JS, 이미지)을 그대로 보여 주는 사이트예요. 비유: 인쇄해 둔 전단지
조건문 Conditional: "만약 ~라면 이것을 해"처럼 상황에 따라 다르게 실행하는 코드예요. if를 써요. 비유: 갈림길 표지판
캐시 Cache: 한 번 받은 것을 가까운 곳에 잠시 저장해 두고 다시 쓰는 것이에요. 더 빨라져요. 비유: 자주 쓰는 물건을 책상 위에 두기
커밋 Commit: Git에서 지금 상태를 저장 포인트로 기록하는 것이에요. 언제든 그 시점으로 되돌릴 수 있어요. 비유: 게임의 세이브
컴포넌트 Component: 버튼, 카드처럼 다시 쓸 수 있게 만든 화면 조각이에요. 비유: 레고 블록
콘솔 Console: 프로그램이 메시지를 출력하는 창이에요. 개발자가 결과를 확인할 때 써요. 비유: 프로그램의 메모장
클라이언트 Client: 서버에게 요청을 보내는 쪽이에요. 보통 사용자의 브라우저나 앱이에요. 비유: 식당 손님
클래스 Class: 여러 요소에 같은 이름표를 붙여 한꺼번에 꾸미거나 찾을 수 있게 하는 속성이에요. 비유: 같은 팀 조끼
태그 Tag: <h1>처럼 꺾쇠 괄호로 감싼 HTML의 표시예요. 내용이 무엇인지 브라우저에게 알려 줘요. 비유: 내용물에 붙이는 이름표
터미널 Terminal: 글자로 명령을 입력해 컴퓨터를 조작하는 창이에요. 비유: 컴퓨터와 채팅하기
테이블 Table: 데이터베이스에서 데이터를 행(줄)과 열(칸)로 정리한 표예요. 비유: 엑셀 시트 한 장
토큰 Token: 로그인에 성공하면 받는 디지털 출입증이에요. 데이터를 요청할 때 함께 보내서 내가 누구인지 증명해요. 비유: 출입증 카드
폼 Form: 사용자에게 입력을 받는 영역이에요. 입력창, 체크박스, 버튼 등으로 이루어져요. 비유: 신청서 양식
푸시 Push: 내 컴퓨터의 커밋(저장 포인트)을 GitHub 저장소로 올리는 것이에요. 반대로 받아 오는 것은 pull이에요. 비유: 사진을 클라우드에 업로드
풀 리퀘스트 Pull Request: GitHub에서 "이 변경을 원래 코드에 합쳐 주세요"라고 요청하는 것이에요. 바뀐 내용을 확인하고 합칠지 정해요. 비유: 수정본을 결재 올리기
프레임워크 Framework: 웹을 빨리 만들도록 뼈대와 규칙을 미리 갖춰 둔 도구 세트예요. 정해진 틀 안에 내 코드를 채워 넣어요. 비유: 조립 설명서가 있는 가구 키트
프로토콜 Protocol: 컴퓨터끼리 대화하기 위해 미리 정해 둔 규칙이에요. 비유: 서로 쓰기로 약속한 언어
프론트엔드 Frontend: 사용자 눈에 보이는 화면 부분을 만드는 일이에요. HTML, CSS, JavaScript를 써요. 비유: 식당 홀과 인테리어
프롬프트 Prompt: AI에게 보내는 요청 문장이에요. 무엇을, 누구를 위해, 어떤 조건으로 만들지 구체적일수록 결과가 좋아요. 비유: 작업 지시서
하이브리드 앱 Hybrid App: 웹 기술로 만든 화면을 앱 껍데기에 담은 앱이에요. Capacitor가 대표적이에요.
함수 Function: 여러 명령을 하나로 묶어 이름을 붙인 것이에요. 필요할 때 이름을 불러 실행해요. 비유: 요리 레시피
해시 Hash: 비밀번호를 원래대로 되돌릴 수 없는 암호문으로 바꾸는 방법이에요. 그래서 서비스 운영자도 비밀번호를 볼 수 없어요. 비유: 믹서기에 간 과일 (다시 과일로 못 돌림)
호스팅 Hosting: 내 웹사이트 파일을 24시간 켜져 있는 컴퓨터에 올려 두고 누구나 접속하게 하는 것이에요. 비유: 가게 자리 임대
환경 변수 Environment Variable: 비밀 키처럼 코드에 직접 적으면 안 되는 값을 따로 보관해 두는 설정값이에요. 비유: 금고에 따로 보관한 열쇠
AGENTS.md: Codex 같은 AI 코딩 도구가 작업할 때마다 읽는 프로젝트 안내 파일이에요. 프로젝트의 규칙을 적어 둬요. 비유: 새 동료에게 주는 업무 안내서
AI 코딩 도구 AI Coding Agent: 말로 요청하면 프로젝트 폴더의 파일을 읽고, 코드를 쓰고, 실행해서 확인까지 해 주는 AI 개발 파트너예요. 비유: 내 작업실에 와서 일하는 시공팀
Antigravity: Google이 만든 AI 개발 프로그램이에요. Gemini 등 AI 에이전트가 코드를 쓰고, 브라우저로 결과를 직접 확인하기도 해요. 비유: 작업 보고서까지 써 주는 개발자 동료
API: 프로그램끼리 데이터를 주고받기 위해 정해 둔 창구예요. 비유: 식당 메뉴판과 주문 창구
CDN: 전 세계 곳곳에 사이트 복사본을 두고, 방문자와 가장 가까운 곳에서 전달하는 배송망이에요. 비유: 전국 곳곳의 물류 창고
Claude Code: Anthropic이 만든 AI 코딩 도구예요. Claude 데스크톱 앱의 Code에서 폴더를 지정해 쓰거나, 클라우드에서 쓸 수 있어요. 비유: 내 컴퓨터에 와서 일하는 개발자 동료
CLAUDE.md: 프로젝트 폴더에 두는 안내 파일이에요. Claude Code가 작업할 때마다 읽고 프로젝트의 규칙을 기억해요. 비유: 새 동료에게 주는 업무 안내서
Codex: OpenAI가 만든 AI 코딩 도구예요. ChatGPT 계정으로 쓰고, 앱·VS Code 확장·클라우드(ChatGPT 웹)에서 사용할 수 있어요. 비유: 내 컴퓨터에 와서 일하는 개발자 동료
CRUD: 데이터를 만들기(Create), 읽기(Read), 고치기(Update), 지우기(Delete)의 앞글자예요.
CSS: 웹페이지의 색, 크기, 글꼴, 배치를 꾸미는 언어예요. 비유: 집의 인테리어
DNS: 도메인 이름을 실제 컴퓨터 주소(IP 주소)로 바꿔 주는 시스템이에요. 비유: 이름으로 번호를 찾는 전화번호부
DOM: 브라우저가 HTML을 읽어서 만든 나무 모양의 구조예요. JavaScript는 DOM을 통해 화면을 바꿔요. 비유: 집의 설계도 모형
Flexbox: 요소들을 가로나 세로로 나란히 배치하고 정렬하는 CSS 방법이에요. 비유: 책장 한 칸에 책 나란히 꽂기
Git: 코드의 변경 기록을 저장하고 되돌릴 수 있게 해 주는 도구예요. 비유: 게임의 저장 포인트
GitHub: Git으로 저장한 코드를 인터넷에 올려 보관하고 공유하는 서비스예요. 비유: 코드용 클라우드 저장소
Grid: 요소들을 바둑판처럼 행과 열로 배치하는 CSS 방법이에요. 비유: 엑셀 표 칸에 넣기
HTML: 웹페이지의 뼈대와 내용을 적는 언어예요. "여기는 제목, 여기는 문단"처럼 표시해요. 비유: 집의 뼈대
HTTP: 브라우저와 서버가 대화할 때 쓰는 약속(규칙)이에요. 비유: 식당 주문서 양식
HTTPS: 대화 내용을 암호화한 안전한 HTTP예요. 주소창의 자물쇠 표시가 바로 이것이에요. 비유: 봉투에 넣고 봉인한 주문서
IP 주소 IP Address: 인터넷에 연결된 컴퓨터마다 붙은 숫자 주소예요. 예: 203.0.113.10 비유: 집의 실제 위치 좌표
JavaScript: 웹페이지가 움직이고 반응하게 만드는 프로그래밍 언어예요. 비유: 집의 전기와 수도
JSON: 데이터를 주고받을 때 많이 쓰는 글자 형식이에요. 예: {"name": "민지"} 비유: 모두가 읽을 수 있는 표준 서식
localStorage: 브라우저 안에 작은 데이터를 저장하는 공간이에요. 새로고침해도 남아 있어요. 비유: 브라우저 안의 작은 서랍
Node.js: 브라우저 밖(내 컴퓨터, 서버)에서 JavaScript를 실행하게 해 주는 프로그램이에요. 많은 개발 도구가 이걸 필요로 해요.
npm: 다른 사람이 만든 JavaScript 도구(패키지)를 내려받아 쓰게 해 주는 프로그램이에요. 비유: 코드용 앱스토어
PostgreSQL: 전 세계에서 많이 쓰는 무료(오픈소스) 관계형 데이터베이스예요. Supabase도 이것을 써요.
PWA Progressive Web App: 휴대폰이나 PC에 설치해서 앱처럼 쓸 수 있는 웹사이트예요. 비유: 앱 옷을 입은 웹사이트
RLS Row Level Security: 데이터베이스의 한 줄 한 줄마다 "누가 보고 고칠 수 있는지" 정하는 보안 규칙이에요. 비유: 사물함마다 주인만 여는 자물쇠
SQL: 데이터베이스에 데이터를 넣고, 찾고, 고치고, 지우라고 명령하는 언어예요. 비유: 창고 관리인에게 하는 말
SSL 인증서 SSL Certificate: HTTPS 암호화를 가능하게 하고 "이 사이트가 진짜"임을 증명하는 디지털 증명서예요. 비유: 가게의 사업자 등록증
Supabase: PostgreSQL 데이터베이스와 로그인, 파일 저장소 등을 한 번에 제공하는 서비스예요. 비유: 주방 설비가 다 갖춰진 임대 주방
URL: 인터넷에 있는 자원(웹페이지, 이미지 등)의 정확한 위치를 나타내는 주소예요. 비유: 도로명 주소 + 호수