학습 경로

프론트엔드 개발자 로드맵

프론트엔드 개발자에게 실제로 필요한 순서대로 배치한 무료 강의입니다. 구조를 위한 HTML, 레이아웃을 위한 CSS, 동작을 위한 JavaScript, 안정성을 위한 TypeScript, 실제 애플리케이션을 위한 React와 Next.js, 배포를 위한 Git, 그리고 그것을 증명할 8개의 프로젝트. 모든 레슨은 브라우저에서 실행되고, 프로젝트 단계 앞의 모든 강의는 무료 수료증으로 마무리됩니다.

학습 시작(무료)

698,051+ 명의 codders가 이 코스들에 등록함

804 개 강의823 챌린지3,184 퀴즈 문제

초보자 환영
AI 코딩 도우미
실습 중심의 대화형 강의
모든 레슨에 음성 나레이션 제공
지식을 확인하는 퀴즈
경로 전체에서 무료 수료증 13개

프론트엔드 개발자 경로, 단계별로

13 개 강의12 섹션804 개 강의823 챌린지3,184 퀴즈 문제

각 단계는 이미 열려 있는 Coddy 강의입니다. 순서대로 따라가도 되고, 부족한 강의로 바로 건너뛰어도 됩니다. 진도는 어느 쪽이든 강의별로 저장됩니다.

1
1단계
HTML: 모든 페이지의 구조전용 페이지
이 단계 시작시작요소, 속성, 제목, 링크, 이미지, 목록, 표, 폼, 그리고 시맨틱 마크업. 브라우저가 그려 내는 모든 것은 HTML에서 시작하고, 이것을 잘 쓰는 능력이 CSS와 JavaScript 단계를 수월하게 만듭니다.시작 전용 페이지60 개 강의86 챌린지251 문제3 프로젝트
2
2단계
CSS: 레이아웃과 디자인전용 페이지
이 단계 시작시작선택자, 박스 모델, 색과 타이포그래피, 이어서 두 개 섹션에 걸친 flexbox, grid, 반응형 레이아웃, 트랜지션과 애니메이션. 페이지가 평소에 쓰는 사이트처럼 보이기 시작하는 단계입니다.시작 전용 페이지
2개 섹션, 순서대로
1. CSS로 스타일링하기76 개 강의110 챌린지418 문제3 프로젝트
2. CSS 마스터43 개 강의40 챌린지164 문제
119 개 강의150 챌린지582 문제3 프로젝트
3
3단계
JavaScript, 언어 전체전용 페이지
이 단계 시작시작기초, 로직과 제어 흐름, 그리고 객체와 클래스까지 세 개 섹션. 프론트엔드 일은 곧 JavaScript 일입니다. 이 단계 이후의 프레임워크는 모두 그것을 정리하는 방식일 뿐이고, 언어가 읽혀야 프레임워크도 읽힙니다.시작 전용 페이지
3개 섹션, 순서대로
198 개 강의242 챌린지1,019 문제5 프로젝트
4
4단계
브라우저 속 JavaScript전용 페이지
이 단계 시작시작DOM, 이벤트, 데이터 가져오기, 그리고 프레임워크 없이 인터랙티브한 페이지 만들기. 이어서 실무에서 쓰는 프론트엔드 패턴까지. HTML, CSS, JavaScript가 하나가 되는 지점, 즉 쓰는 사람에게 반응하는 페이지가 여기서 나옵니다.시작 전용 페이지
2개 섹션, 순서대로
1. JavaScript 실전27 개 강의27 챌린지163 문제
2. 실전 프론트엔드35 개 강의34 챌린지197 문제
62 개 강의61 챌린지360 문제
5
5단계
TypeScript전용 페이지
이 단계 시작시작타입, 인터페이스, 제네릭, 그리고 컴파일러의 오류를 도구로 쓰는 법. 실무의 React 코드베이스는 거의 전부 TypeScript이기 때문에, 맨 뒤에 덧붙이지 않고 프레임워크 바로 앞에 두었습니다.시작 전용 페이지73 개 강의73 챌린지438 문제2 프로젝트
6
6단계
React와 Next.js전용 페이지
이 단계 시작시작컴포넌트, props, 상태, 훅, 렌더링, 그리고 라우팅과 데이터 로딩, 실제 애플리케이션을 위한 Next.js. 프론트엔드 공고가 가장 많이 요구하는 프레임워크를, 그것이 쓰인 언어를 익힌 뒤에 배웁니다.시작 전용 페이지
2개 섹션, 순서대로
1. 기초 (Fundamentals)42 개 강의37 챌린지65 문제
2. Next.js 핵심 (Next.js Essentials)47 개 강의41 챌린지99 문제1 프로젝트
89 개 강의78 챌린지164 문제1 프로젝트
7
7단계
Git과 버전 관리전용 페이지
이 단계 시작시작커밋, 브랜치, 병합, 충돌 해결, 원격 저장소. 모든 프론트엔드 업무와 모든 포트폴리오 프로젝트는 Git 저장소 안에 있습니다. 여기서 익혀 두면 다음 단계의 프로젝트를 실무와 같은 방식으로 내보낼 수 있습니다.시작 전용 페이지58 개 강의55 챌린지370 문제2 프로젝트
8
8단계
프로젝트: 이미 본 것을 직접 만들기
이 단계 시작시작flexbox와 선택자 연습, DOM과 배열 메서드 연습, 그리고 실제 제작으로. Coddy 프로필 카드, Instagram 페이지, Netflix 로그인 페이지, 이미지 슬라이더. 하나하나가 채용 담당자가 바로 열어 볼 수 있는 포트폴리오 조각입니다.시작
8개 코스, 순서대로
145 개 강의78 챌린지4 프로젝트

제공되는 것

코딩을 배우기 위해 사용할 모든 것

해보면서 배우기

실제 코드를 작성하고, 데이터베이스를 쿼리하고, 웹사이트를 구축하고, AI 프롬프트를 마스터하세요. 인터랙티브 레슨으로 현대 개발자에게 필요한 모든 기술을 다룹니다.

playground.js

코드 편집기

1const greeting = "Hello, Coddy!"

2function sayHi(name) {

3 return greeting + " " + name

테스트 #1

테스트 #2

테스트 #3

입력

"Alex"

출력

"Hello, Coddy! Alex"

연속 기록을 쌓아보세요

꾸준히 하고 성장하는 모습을 지켜보세요! 매일 코딩 습관을 추적하고, 동결 기능으로 연속 기록을 보호하고, 매일 참여해서 보상을 받으세요.

12 일 연속

내일도 돌아와서 연속 기록을 유지하세요!

January 2026

더블 오어 낫싱

7일 중 5일차

연속 기록 동결

2 left

어디서나 코딩하세요

코딩 여정을 함께 하세요! 설정도, 다운로드도 필요 없이 바로 열어서 코딩을 시작하세요. iOS, Android, 웹에서 4.9점 평점으로 이용 가능합니다.

250

변수

계속하기

4.9

평점

당신은 혼자가 아닙니다

글로벌 리더보드에서 경쟁하고, 친구를 초대해서 보상을 받고, 서로의 성공을 축하하세요. 코딩은 친구와 함께하면 더 좋아요!

챌린저 리그상위 7명 승급

Alex7+ Days

2840

Jordan7+ Days

2650

Sam7+ Days

2420

Casey

2180

Morgan7+ Days

1950

승급 구역

모든 방식으로 학습

읽고, 듣고, 스스로 확인하고, AI에게 묻고, 이미 배운 내용을 찾아보세요. 모든 수업이 당신에게 맞춰집니다.

변수 입문

오디오

변수는 나중에 프로그램에서 참조할 값을 저장하는, 이름이 있는 컨테이너입니다.

Python에서는 이름, 등호, 저장할 값을 차례대로 써서 만듭니다.

값은 시간이 지나며 바뀔 수 있습니다. 재할당하면 그 이름이 새로운 값을 가리킵니다.

1xSarah

수료증을 받으세요

완료한 모든 코스에 대해 인증서를 받으세요. LinkedIn 프로필과 이력서에 추가하여 고용주에게 코딩 전문성을 보여주세요.

수료증

이 인증서는홍길동성공적으로 완료했음을 증명합니다

Python 기초

날짜2026년 1월

LinkedIn에 추가

프론트엔드 개발을 Coddy에서 배워야 하는 이유

만들고 있는 페이지가 바로 보입니다. 모든 HTML, CSS, JavaScript 레슨은 코드 바로 옆 브라우저에서 실시간으로 렌더링되므로, 잘못 쓴 선택자나 무너진 flexbox가 마지막에 스크린샷으로 드러나는 게 아니라 작성하는 그 순간 눈에 들어옵니다.
순서가 맞고, JavaScript를 건너뛰지 않습니다. 대부분의 프론트엔드 강의는 HTML에서 프레임워크로 곧장 달려가지만, 이 경로는 React 앞에 JavaScript를 온전히 세 개 섹션으로 둡니다. 밑에 깔린 언어가 읽혀야 프레임워크도 읽히기 때문입니다.
여러분의 마크업과 코드를 읽는 AI 힌트. 레이아웃이 깨지거나 컴포넌트가 렌더링되지 않을 때, Bugsy는 실제로 작성한 내용을 들여다보고 정답을 대신 건네지 않으면서 해결 쪽으로 밀어 줍니다.
채용 담당자가 바로 열어 볼 수 있는 프로젝트. 마지막 단계는 이미 익숙한 페이지를 다시 만들어 보는 8개의 실제 결과물이고, 하나하나가 공유 가능한 포트폴리오 조각이 됩니다. 여기에 앞의 일곱 단계에 속한 모든 강의의 무료 수료증이 더해집니다.

프론트엔드 개발자가 되는 것에 대한 자주 묻는 질문

프론트엔드 개발자가 되려면 어떻게 해야 하나요?

빈 파일에서 페이지 하나를 만들 수 있을 만큼 HTML, CSS, JavaScript를 익히고, 여기에 TypeScript와 프레임워크 하나를 더하세요(React가 안전한 선택입니다). 그다음 Git을 배우고, 튜토리얼 없이 실제 프로젝트를 서너 개 만들어 인터넷에 올리면 됩니다. 이 경로가 정확히 그 순서입니다. 수료증보다 프로젝트가 중요합니다. 채용 담당자가 30초 만에 판단할 수 있는 건 프론트엔드에서는 포트폴리오뿐이기 때문입니다.

HTML, CSS, JavaScript 중 무엇을 먼저 배워야 하나요?

HTML이 먼저, 그다음 CSS, 그다음 JavaScript입니다. 시간은 JavaScript에 가장 많이 쓰세요. HTML은 두어 주, CSS는 한 달쯤이면 익숙해지지만 JavaScript는 온전한 프로그래밍 언어이고, 독학하는 프론트엔드 개발자 대부분이 대충 넘어가는 지점이기도 합니다. 이 경로는 프레임워크가 등장하기 전에 JavaScript에 세 개 섹션과 DOM 섹션 하나를 배정합니다.

프론트엔드 개발자에게 TypeScript가 꼭 필요한가요?

취업을 목표로 한다면 사실상 필요합니다. 실무의 React, Next.js 코드베이스는 절대다수가 TypeScript로 작성되어 있고, 채용 공고에 'JavaScript'라고 적혀 있어도 실제로는 TypeScript인 경우가 많습니다. JavaScript가 탄탄하다면 짧은 단계이기 때문에, 이 경로에서는 맨 끝이 아니라 React 바로 앞에 놓았습니다.

React, Vue, Angular 중 어떤 프레임워크를 배워야 하나요?

원하는 특정 회사가 다른 걸 요구하지 않는 한 React입니다. 채용 공고 수가 압도적으로 많고 생태계도 가장 크며, 그 위에 얹히는 Next.js는 새로 만들어지는 프로덕션 사이트 대부분이 쓰는 선택지입니다. 컴포넌트, 상태, props, 렌더링 같은 개념은 나중에 Vue나 Angular로 한두 주면 옮겨 갑니다. 이 경로는 React와 Next.js를 가르칩니다.

프론트엔드 개발을 배우는 데 얼마나 걸리나요?

하루 한 시간이면 포트폴리오를 갖춘 주니어 수준까지 대략 6~9개월입니다. 이 경로에서 HTML과 CSS는 합쳐서 6~8주, JavaScript는 2~3개월, TypeScript는 2주, React와 Next.js는 6주가 걸리고, 프로젝트 단계는 계속 만드는 동안 이어집니다. 의미 있는 숫자는 끝낸 레슨 수가 아니라 완성한 프로젝트 수입니다.

이 경로에 테스트, 접근성, 상태 관리가 포함되나요?

별도의 강의로는 아직 없고, 페이지를 부풀리기보다 그 사실을 밝히는 쪽을 택합니다. 접근성 있는 페이지의 토대인 시맨틱 마크업은 HTML 단계에 들어 있고, React 자체의 상태 관리도 다룹니다. 테스트 강의, 더 깊은 접근성 작업, 상태 관리 라이브러리는 커리큘럼 로드맵에 올라 있으며 공개되는 대로 새로운 단계로 이 경로에 합류합니다.

무료 강의만으로 프론트엔드 취업이 가능한가요?

네, 그 강의들이 포트폴리오로 이어진다면요. 이 경로가 8개의 프로젝트로 끝나는 이유가 바로 그것입니다. 기업이 보는 것은 여러분이 만들었고 바로 열어 볼 수 있는 페이지, 그걸 여러분이 만들었음을 보여 주는 Git 기록, 그리고 레이아웃과 컴포넌트를 설명할 수 있는 면접입니다. 셋 다 이 경로에서 나오고, 어느 것도 유료 부트캠프를 필요로 하지 않습니다.

다른 학습 경로

같은 코스를 다른 직무에 맞게 배열한 경로입니다. 진행 상황은 이어집니다. 한 경로에서 마친 코스는 그 코스를 포함한 모든 경로에서 인정됩니다.

모든 학습 경로

프론트엔드 개발자 경로를 무료로 시작하세요

학습 시작