프론트엔드란?
사용자와 웹이 만나는 곳
프론트엔드는 화면과 상호작용부터 데이터·접근성·성능까지 사용자 경험을 만드는 영역입니다.
프론트엔드는 무엇을 하나요?
프론트엔드(frontend)는 웹 서비스에서 사용자에게 직접 닿는 부분입니다. 브라우저가 받은 HTML을 구조로 만들고 CSS를 적용하며, JavaScript가 입력과 상태 변화에 반응하도록 구현합니다.
백엔드가 데이터, 인증, 비즈니스 규칙을 처리한다면 프론트엔드는 그 결과를 이해하기 쉬운 화면과 안전한 상호작용으로 바꿉니다. 두 영역은 API라는 계약을 사이에 두고 연결됩니다.
- 보이는 것
- 레이아웃 · 타이포그래피 · 이미지 · 애니메이션
- 움직이는 것
- 메뉴 · 폼 · 검색 · 필터 · 실시간 상태
- 느껴지는 것
- 속도 · 접근성 · 오류 안내 · 반응형 경험
- 연결되는 것
- API · 인증 · 분석 · 브라우저 저장소
프론트엔드의 핵심 언어 4가지
프레임워크가 바뀌어도 브라우저가 이해하는 토대는 같습니다.
HTML
제목, 문단, 버튼, 폼처럼 문서의 의미와 뼈대를 만듭니다.
CSS
레이아웃, 색, 타이포그래피, 반응형 화면과 움직임을 담당합니다.
JavaScript
입력과 상태 변화에 반응하고 서버의 데이터를 화면에 연결합니다.
TypeScript
JavaScript에 타입을 더해 규모가 커질수록 생기는 실수를 일찍 찾습니다.
React만 있는 것이 아닙니다
비슷해 보여도 업데이트 방식, 제공 범위와 팀이 따라야 할 규칙이 다릅니다. 이름보다 프로젝트 조건을 먼저 보세요.
React
작은 UI를 컴포넌트로 나누고 조합합니다. 라우팅과 서버 렌더링은 Next.js 같은 프레임워크를 함께 선택하는 경우가 많습니다.
Vue
표준 HTML·CSS·JavaScript 위에 선언적이고 컴포넌트 중심인 모델을 얹습니다. 작은 기능부터 전체 앱까지 단계적으로 도입하기 좋습니다.
Angular
라우팅, 폼, 의존성 주입과 개발 도구를 폭넓게 제공합니다. 팀과 코드베이스가 큰 업무용 애플리케이션에서 일관된 규칙을 세우기 좋습니다.
Svelte
HTML·CSS·JavaScript로 작성한 선언적 컴포넌트를 빌드할 때 최적화된 JavaScript로 바꿉니다. 문법이 간결하고 반응성 모델이 직접적입니다.
Solid
JSX와 세밀한 반응성을 결합합니다. 상태가 바뀐 지점만 갱신하는 모델을 이해하고 성능을 세밀하게 다루고 싶을 때 살펴볼 선택지입니다.
Preact
React와 비슷한 컴포넌트·Hooks 경험을 더 작은 코어로 제공합니다. 제한된 전송량과 빠른 시작이 중요한 화면에서 비교할 수 있습니다.
Qwik
처음부터 모든 화면을 하이드레이션하기보다 필요한 코드를 상호작용 시점에 실행하는 재개 가능성에 초점을 둡니다.
Lit
브라우저 표준인 Web Components 위에서 반응형 속성과 선언적 템플릿을 제공합니다. 프레임워크에 종속되지 않는 UI 요소에 어울립니다.
화면 밖의 기술도 프론트엔드입니다
스타일링
CSS Modules · Sass · Tailwind CSS · CSS-in-JS팀의 컴포넌트 경계와 디자인 시스템 운영 방식에 맞춰 선택합니다.
관련 주제 →상태와 데이터
Fetch · TanStack Query · Redux · Zustand · GraphQL서버 상태와 화면 상태를 먼저 구분하면 불필요한 전역 상태를 줄일 수 있습니다.
관련 주제 →빌드와 품질
Vite · Turbopack · ESLint · Vitest · Playwright개발 서버부터 정적 분석, 단위 테스트와 실제 브라우저 테스트까지 이어집니다.
관련 주제 →사용자 경험
접근성 · 반응형 · Core Web Vitals · 국제화화면이 보이는 것에서 끝나지 않고 누구나 빠르고 정확하게 쓸 수 있어야 합니다.
기술은 인기보다 조건으로 고릅니다
| 프로젝트 조건 | 먼저 비교할 선택지 | 확인할 기준 |
|---|---|---|
| 상호작용이 많은 제품형 앱 | React · Vue · Angular · Svelte | 팀 경험, 생태계, 상태 복잡도 |
| 콘텐츠와 검색 유입 중심 | Astro · Next.js · Nuxt · SvelteKit | 서버 렌더링, 콘텐츠 관리, 전송 JS |
| 대규모 조직의 업무 시스템 | Angular · React + 규칙화된 스택 | 일관성, 장기 지원, 테스트 전략 |
| 기존 페이지에 일부 기능 추가 | Vue · Preact · Lit · Web Components | 점진적 도입, 번들 크기, 격리 |
| 초기 실행 비용이 특히 중요 | Astro · Qwik · Preact · Solid | 실제 사용자 지표와 상호작용 범위 |
프론트엔드 공부 순서
도구 이름을 넓게 외우는 것보다 웹의 한 층씩 직접 만들어 보는 편이 오래 남습니다.
- 01
웹의 기본
HTML로 의미를 만들고 CSS로 배치한 뒤 JavaScript로 작은 상호작용을 붙입니다.
- 02
브라우저와 네트워크
DOM, 이벤트, HTTP, 요청과 응답, 개발자 도구를 익혀 화면 뒤의 흐름을 이해합니다.
- 03
TypeScript와 Git
타입으로 변경 비용을 낮추고 Git으로 작업을 작게 기록하는 습관을 만듭니다.
- 04
UI 기술 하나
React, Vue, Angular, Svelte 가운데 하나를 골라 컴포넌트와 상태 흐름을 깊게 연습합니다.
- 05
프레임워크와 운영
라우팅, 데이터 로딩, 테스트, 접근성, 성능과 배포까지 하나의 작은 서비스를 완성합니다.
자주 묻는 질문
프론트엔드를 배우려면 React부터 시작해야 하나요?
아닙니다. HTML, CSS, JavaScript가 먼저입니다. 기본기를 익힌 뒤 React나 Vue처럼 하나의 UI 기술을 선택하면 프레임워크 문법과 웹 표준을 구분하기 쉽습니다.
React와 Next.js는 무엇이 다른가요?
React는 사용자 인터페이스를 컴포넌트로 만드는 라이브러리입니다. Next.js는 React 위에 라우팅, 서버 렌더링, 데이터 처리와 빌드 규칙을 더한 프레임워크입니다.
가장 좋은 프론트엔드 프레임워크는 무엇인가요?
모든 프로젝트에 가장 좋은 하나는 없습니다. 팀 경험, 채용과 생태계, 화면의 상호작용 정도, 콘텐츠 비중, 장기 유지보수 조건으로 선택해야 합니다.