5개월, 실무 투입까지의 로드맵
각 단계는 미션 기반으로 진행됩니다. 미션을 통과해야 다음 단계로 진행할 수 있으며, 전 과정에 걸쳐 AI를 실무 도구로 적극 활용합니다.
1개월차
Next.js 기반 퍼블리싱 고도화
- 오리엔테이션 · Next.js 16 & TailwindCSS 4 환경 세팅
- 필수 문법 패턴 36종 — 프로젝트 구조 · 스타일 · 정적/동적 처리
- 백엔드 API 연동 · 데이터 렌더링 · 에러/로딩 처리
- 검색엔진 최적화 (SEO) · Vercel 배포
- 실습 10종 — 단계별 프로젝트 기반 핸즈온 훈련
2개월차
GSAP 인터랙션 · 실무 UI 모션
- GSAP 핵심 API · Path · Canvas · Context · ScrollTrigger
- 탭메뉴 · 슬라이더 · GNB 모션 · 토글 메뉴 · 레이어팝업
- 페이지 전환 · 스크롤 제어 모션 실습
- 브랜드 프로모션 UI 프로젝트 5케이스 제작
3개월차
컴포넌트 접근성 · 인터랙션
- Next.js 컴포넌트 단에서 WCAG 2.1 접근성 구현
- ARIA 패턴 · 키보드 내비게이션 설계
- UI 인터랙션 로직의 컴포넌트 내부 구현
- 탭 · 아코디언 · 모달 TSX 컴포넌트 직접 설계
4개월차
API 연동 컴포넌트 설계
- Spring API 명세서 읽기 · 해석
- 프론트-백 데이터 흐름 이해
- API 연동 최적화 TSX 컴포넌트 설계
- 에러 핸들링 · 로딩 상태 관리
5개월차
실무 협업 · QA 시뮬레이션
- Next.js 프로젝트 기반 Git 브랜치 전략 · PR 프로세스
- 코드 리뷰 실습 (주고받기)
- 협약 기업 실무 환경 시뮬레이션
- QA 피드백 대응 · 수정 사이클