프론트엔드 개발자 가이드

프론트엔드(Frontend)는 브라우저에서 사용자가 직접 보고 조작하는 화면을 만드는 분야입니다. 웹페이지의 구조와 스타일, 사용자 입력에 반응하는 동작을 다루며, 최종적으로는 사용자가 서비스를 어떻게 경험하는지를 결정합니다. 서버와 데이터베이스를 다루는 백엔드 가이드와 짝을 이루어 하나의 서비스를 완성합니다.

학습 순서

프론트엔드 학습은 인터넷과 웹이 동작하는 원리를 이해하는 데서 시작합니다. HTTP, 도메인 네임, 브라우저 동작 원리 같은 기초를 다진 뒤에는 HTML로 화면의 뼈대를 만들고, CSS로 스타일을 입히고, JavaScript로 동작을 붙이는 세 축을 익힙니다. 이 세 축은 병행 학습이 가능하지만, 보통 HTML을 먼저 익힌 뒤 CSS와 JavaScript로 이어집니다.

기초를 다진 다음에는 버전 관리 시스템(Version Control System)과 패키지 매니저(Package Manager) 같은 협업 도구를 익히고, React·Vue.js·Angular 같은 프레임워크(Framework) 가운데 하나를 선택해 본격적인 애플리케이션 구조를 배웁니다. 프레임워크를 익힌 뒤에는 빌드 도구(Build Tools), 테스트, 웹 보안 기초, 타입스크립트(TypeScript) 같은 심화 주제로 지식을 넓히고, 필요에 따라 서버 사이드 렌더링(Server Side Rendering)이나 모바일·데스크톱 앱 개발까지 범위를 확장할 수 있습니다.

프론트엔드 전체 흐름을 한 번에 조망하고 싶다면 프론트엔드(종합) 강좌를, 핵심만 빠르게 훑고 싶다면 프론트엔드 입문 강좌를 먼저 살펴보는 것을 권합니다.

지금까지 설명한 흐름을 한눈에 정리하면 [그림 1]과 같습니다.

[그림 1] 프론트엔드 학습 로드맵 구성도

HTML·CSS·JavaScript 세 축을 마치면 화면이 실제로 동작하므로, 그림에서 JavaScript를 마치는 지점을 강조 표시했습니다.

소속 강좌

강좌	다루는 내용
프론트엔드(종합)	인터넷 기초부터 프레임워크, 빌드 도구, 심화 주제까지 아우르는 전체 로드맵
프론트엔드 입문	상세 로드맵에 들어가기 전 핵심만 압축한 입문 과정
HTML	시맨틱 마크업, 폼, 접근성, SEO 기초
CSS	레이아웃, 반응형 디자인, CSS 생태계 도구
JavaScript	언어 기초, DOM 조작, 비동기 통신
TypeScript	정적 타입을 통한 JavaScript 코드 안정성 확보
React	컴포넌트 기반 UI 라이브러리
Vue	접근성 높은 프로그레시브 프레임워크
Angular	대규모 애플리케이션을 위한 완결형 프레임워크
Next.js	React 기반 서버 사이드 렌더링·정적 사이트 생성
디자인 시스템	일관된 UI 컴포넌트와 토큰 체계 설계
UX 디자인	사용자 경험 설계 원칙과 리서치 방법론

다른 영역과의 연결

프론트엔드를 마친 뒤에는 서버와 데이터를 다루는 백엔드 가이드로 넘어가거나, 두 영역을 함께 다루는 풀스택 & 기타 웹 가이드로 이어갈 수 있습니다. 화면 설계 감각을 더 다지고 싶다면 이미 이 영역에 포함된 디자인 시스템·UX 디자인 강좌를 먼저 살펴보는 것도 좋은 방법입니다.