웹 개발을 시작하면 프론트엔드, 백엔드, API 같은 용어가 쏟아집니다. 1편에서 프로그래밍 기초 용어를 다뤄다면, 이번 2편에서는 웹 개발자라면 반드시 알아야 할 핵심 용어들을 정리합니다.
📚 개발 용어 총정리 시리즈
- 1편: 프로그래밍 기초 용어
- 2편: 웹 개발 용어 ← 현재 글
- 3편: 서버·인프라·DevOps 용어
- 4편: 실전 & AI 시대 용어
프론트엔드 vs 백엔드
프론트엔드(Frontend): 사용자가 직접 보고 상호작용하는 화면입니다. HTML, CSS, JavaScript로 만들고, React, Vue, Flutter 같은 프레임워크를 사용합니다.
백엔드(Backend): 사용자 눈에 보이지 않는 서버 측 로직입니다. 데이터 저장, 인증, 비즈니스 로직을 처리합니다. Node.js, Python, Java 등으로 개발합니다.
풀스택(Fullstack): 프론트엔드와 백엔드를 모두 다루는 개발 영역입니다. 1인 개발자나 소규모 팀에서는 풀스택 능력이 매우 유용합니다.
라이브러리(Library) vs 프레임워크(Framework): 라이브러리는 내가 호출하는 코드 모음이고, 프레임워크는 내 코드를 호출하는 구조입니다. React는 라이브러리, Next.js는 프레임워크입니다.
컴포넌트(Component): UI를 독립적인 조각으로 나눈 것입니다. 버튼, 카드, 헤더 각각이 하나의 컴포넌트입니다. 재사용이 가능해 개발 효율이 높아집니다.
상태 관리(State Management): 앱의 데이터 상태를 관리하는 방법입니다. React의 useState, Redux, Zustand 등이 대표적입니다. 규모가 커질수록 중요해집니다.
API와 데이터 통신
API (Application Programming Interface): 프로그램 간에 데이터를 주고받는 규약입니다. 식당의 메뉴판과 같습니다. 메뉴판(API)을 보고 주문(요청)하면 음식(응답)이 나옵니다.
REST API: 웹에서 데이터를 주고받는 가장 일반적인 방식입니다. URL로 리소스를 지정하고, HTTP 메서드로 동작을 정의합니다.
GET /users— 사용자 목록 조회POST /users— 새 사용자 생성PUT /users/1— 1번 사용자 수정DELETE /users/1— 1번 사용자 삭제
GraphQL: REST의 대안으로, 필요한 데이터만 정확히 요청할 수 있는 쿼리 언어입니다. 하나의 엔드포인트에서 원하는 필드만 선택해서 가져옵니다.
SDK (Software Development Kit): 특정 플랫폼용 앱을 만들기 위한 도구 모음입니다. API가 메뉴판이라면, SDK는 요리 도구 세트입니다.
CORS (Cross-Origin Resource Sharing): 다른 도메인의 리소스를 요청할 때 브라우저가 적용하는 보안 정책입니다. 프론트엔드에서 API 호출 시 자주 마주치는 에러의 원인입니다.
Webhook: 특정 이벤트가 발생하면 지정된 URL로 자동으로 데이터를 보내는 방식입니다. "내가 물어보는 게 아니라 알아서 알려주는" 구조입니다.
렌더링 방식
CSR (Client-Side Rendering): 브라우저에서 JavaScript로 화면을 그리는 방식입니다. 초기 로딩은 느리지만, 이후 페이지 전환이 빠릅니다. SPA에서 주로 사용합니다.
SSR (Server-Side Rendering): 서버에서 HTML을 완성해서 보내는 방식입니다. 초기 로딩이 빠르고 SEO에 유리합니다. Next.js가 대표적입니다.
SSG (Static Site Generation): 빌드 시점에 HTML을 미리 생성해두는 방식입니다. 가장 빠르지만 실시간 데이터 반영이 어렵습니다. 블로그, 문서 사이트에 적합합니다.
SPA (Single Page Application): 하나의 HTML 페이지에서 JavaScript로 화면을 동적으로 바꾸는 앱입니다. 페이지 전환 시 새로고침이 없어 부드럽습니다.
하이드레이션(Hydration): 서버에서 보낸 정적 HTML에 JavaScript를 붙여서 인터랙티브하게 만드는 과정입니다. SSR + CSR을 결합하는 핵심 기술입니다.
스타일링과 UI
CSS (Cascading Style Sheets): 웹 페이지의 디자인을 담당하는 언어입니다. 색상, 크기, 레이아웃 등을 정의합니다.
반응형(Responsive): 화면 크기에 따라 레이아웃이 자동으로 변하는 디자인입니다. 모바일, 태블릿, 데스크톱 모두에서 잘 보이도록 합니다.
Tailwind CSS: 유틸리티 클래스 기반 CSS 프레임워크입니다. className="text-xl font-bold text-blue-500" 처럼 클래스를 조합해서 스타일링합니다.
디자인 시스템(Design System): 일관된 UI를 위한 컴포넌트, 색상, 타이포그래피 규칙의 모음입니다. Material Design, shadcn/ui 등이 있습니다.
다크 모드(Dark Mode): 어두운 배경에 밝은 텍스트를 사용하는 UI 모드입니다. 눈의 피로를 줄이고, OLED 화면에서 배터리를 절약합니다.
인증과 보안
인증(Authentication): "너는 누구인가?"를 확인하는 과정입니다. 로그인이 대표적입니다.
인가(Authorization): "너는 이 작업을 할 권한이 있는가?"를 확인하는 과정입니다. 관리자만 삭제할 수 있는 것이 인가입니다.
JWT (JSON Web Token): 사용자 인증 정보를 담은 암호화된 토큰입니다. 로그인 후 서버가 발급하고, 이후 요청마다 토큰을 보내서 인증합니다.
OAuth: 카카오, 구글 같은 외부 서비스로 로그인하는 방식입니다. "구글로 로그인" 버튼이 OAuth를 사용합니다.
CSP (Content Security Policy): 웹 페이지에서 허용할 리소스 출처를 제한하는 보안 정책입니다. XSS 공격을 방지하는 중요한 방어선입니다.
다음 편 예고
2편에서는 웹 개발의 핵심 용어를 정리했습니다. 3편에서는 서버, 인프라, DevOps 용어를 다룹니다. Docker, CI/CD, 클라우드, 서버리스 등 실전 배포에 필요한 용어들을 알아봅니다.
