코딩아지트
무료 강의강의왜 코딩아지트로드맵마이페이지
로그인로그인
코딩아지트

웹퍼블리셔와 개발자를 위한 실무 중심
동영상 강의 플랫폼

디코드랩 담당자 | 대표 : 최성일

사업자등록번호 : 784-07-03123 | 통신판매업신고번호 : 2025-서울송파-3071호

주소 : (05835) 서울 송파구 정의로7길 13 오피스동 1411호(문정동, 힐스테이트에코송파)

개인정보관리책임자 : 최성일 | 전화번호 : 010-2202-1519 | 전자우편 : hadaboni80@naver.com

서비스전체 강의
약관 및 정책이용약관개인정보처리방침환불규정
계정로그인마이페이지
소셜유튜브X (Twitter)하코사

© 2026 코딩아지트. All rights reserved.

Learning Roadmap

지금 어떤 일을 하고 계신가요?

나와 가장 가까운 유형을 선택하면, 맞춤 학습 로드맵을 바로 확인할 수 있습니다.

jQuery와 퍼블리싱만으로 버틸 수 있는 시간이 얼마 남지 않았습니다

채용공고 10개 중 8개가 React/Next.js를 요구합니다

AI가 단순 마크업을 빠르게 대체하기 시작했습니다

경력 7년차인데 React 쓰는 신입과 연봉이 같습니다

Claude Code + React를 얹으면, 지금 가진 CSS 감각이 무기가 됩니다

퍼블리셔 출신 프론트엔드 → 디자이너-개발자 브릿지 역할로 희소가치

기업형 사이트를 혼자 풀스택으로 → 프리랜서 단가 2배

Claude Code가 코드를 대신 써줘서, 구조만 이해하면 됩니다

이 순서대로 배우면 됩니다

01

무료 체험

Claude Code로 HTML 시안 → React 자동 전환 시연

AI 코딩의 가능성 확인

1시간 · 무료

02

스킬 모듈 (₩6만 × 선택)

필요한 기술만 골라서 빠르게 습득하는 단위 모듈

각 모듈별 완성 예제 1개

각 4시간 · ₩60,000

03

전문 트랙 (₩28만 × 선택)

선택한 방향으로 포트폴리오급 실무 프로젝트 완성

포트폴리오급 산출물 1개

14시간 · ₩280,000

스킬 모듈 — 필요한 기술만 선택

각 4시간 · ₩60,000. 모든 모듈은 Claude Code와 함께 진행합니다. 코드를 외우지 않고, AI에게 지시하고 결과를 이해/수정하는 방식입니다.

S1

Next.js 16 기초

App Router, 서버/클라이언트 컴포넌트, 라우팅

완성 예제

멀티페이지 웹사이트 1개 (배포)

S2선수: S1 권장

TailwindCSS 4

유틸리티 퍼스트, 반응형, 커스텀 테마

완성 예제

반응형 UI 컴포넌트 세트

S3선수: S1

GSAP 모션

스크롤 트리거, 타임라인, 텍스트 애니메이션

완성 예제

스크롤 모션 프로모션 페이지 1개

S4선수: S1

TypeScript 기초

타입 시스템, 제네릭, Next.js 적용

완성 예제

기존 프로젝트 TS 전환

S5선수: S1

React Query + Zustand

서버 상태 캐싱, 클라이언트 전역 상태

완성 예제

API 연동 데이터 목록 + 장바구니

S1 (Next.js 16 기초)은 모든 트랙의 필수 출발점입니다

전문 트랙 — 방향에 따라 선택

각 14시간 · ₩280,000. 스킬 모듈을 기반으로 포트폴리오급 실무 프로젝트를 완성합니다.

트랙 A

컴포넌트 퍼블리싱

Next.js + TailwindCSS

퍼블리싱 작업을 프론트엔드 개발 수준의 컴포넌트 구조로 체계화

권장 선수S1 + S2
산출물기업 수준 반응형 웹사이트 1개 (컴포넌트 시스템 포함)
Claude CodeNext.jsTailwindCSS

트랙 B

브랜드 모션

Next.js + GSAP

브랜드 프로모션에 특화된 인터랙티브 모션 사이트 제작

권장 선수S1 + S3
산출물브랜드 스크롤 모션 프로모션 사이트 1개
Claude CodeNext.jsGSAPTailwindCSS

트랙 C

데이터 최적화

Next.js + React Query + Zustand + TS

데이터 페칭/캐싱/상태관리에 특화된 웹앱 제작

권장 선수S1 + S4 + S5
산출물데이터 최적화된 웹앱 1개
Claude CodeNext.jsReact QueryZustandTypeScript

학습 경로 한눈에 보기

무료 체험 (1h)→S1 Next.js 16 기초
↓S2 TailwindCSS↓트랙 A: 컴포넌트 퍼블리싱
↓S3 GSAP 모션↓트랙 B: 브랜드 모션
↓S4 TS + S5 RQ↓트랙 C: 데이터 최적화

여기까지 왔다면, 더 갈 수 있습니다

트랙 확장

다른 전문 트랙 추가 수강

풀스택 전환

Supabase + 결제 연동으로 서비스화

직군별 난이도 비교

트랙코딩 비중AI 의존도난이도
웹퍼블리셔코딩★★★★☆AI★★★☆☆중상
대학생코딩★☆☆☆☆AI★★★★★하
웹디자이너코딩★★☆☆☆AI★★★★☆중하
일반 사무직코딩★★☆☆☆AI★★★★☆중하
백엔드 개발자코딩★★★★★AI★★★☆☆상
게임 개발코딩★☆☆☆☆AI★★★★☆중하

지금 시작하면, 12주 후의 나는 다릅니다

무료 강의로 먼저 체험해보세요. 1시간이면 이게 나한테 맞는 건지 알 수 있습니다.

무료 강의로 체험하기전체 강의 보기