AI 웹개발자 로드맵 — 01~19 전체 학습 경로

DevSkills 로드맵을 참고해 01~19 전체 학습 경로를 블로그 포스트로 재구성한다. Foundation, Building, Operating & Growing 단계별로 읽을 글과 공식 참고 사이트를 연결한다.

Seobway · · 20분

이 시리즈 구성

구간 포스트 범위 목표
Foundation 01~07 코드를 읽고 이해하는 기본 체력
Building 08~14 기능을 설계하고 만드는 역량
Operating & Growing 15~19 배포, 운영, 관측, AI 검증 루프

이 글의 역할

이 글은 AI 웹개발자 로드맵 전체 인덱스다.

기준은 DevSkills 로드맵이다.[1] 원본 로드맵은 Foundation, Building, Operating & Growing 흐름으로 AI 시대 웹개발자에게 필요한 역량을 나눈다.

여기서는 그 흐름을 이 블로그의 글 구조에 맞게 01~19 포스트로 연결한다. 각 세부 포스트에는 반드시 ## 참고 섹션을 두고, 공식 문서나 신뢰도 높은 자료를 달아 둔다.

Foundation — 기초 다지기

01 브라우저 & 클라이언트

02 서버 & 데이터

03 Engineering Practice — 코드 품질

04 Engineering Practice — Git & 릴리즈

05 브라우저 & 클라이언트 — UI & 스타일링

06 AI Workflow — AI 코딩 도구

07 서버 & 데이터 — DB & ORM

Building — 기능 만들기

08 상태 & 데이터 페칭

09 API 설계

10 인증 & 보안

11 요구사항 분석

12 테스트

13 Context Engineering

14 빌드 · 성능 · a11y

Operating & Growing — 운영과 성장

15 배포 & 운영

16 아키텍처 패턴

17 관측 & 보안

18 AI 개발 프로세스

19 AI 코드 검증

전체 흐름

%% desc: AI 웹개발자 로드맵 01~19 전체 학습 흐름
flowchart TD
  START["START"] --> F["Foundation\n01~07"]
  F --> B["Building\n08~14"]
  B --> O["Operating & Growing\n15~19"]
  O --> M["Milestone\n설계·구현·배포·검증 루프"]

이 로드맵을 읽는 법

순서보다 중요한 것은 연결이다

이 로드맵은 01부터 19까지 번호가 있지만, 학교 교과서처럼 한 번에 끝내는 목록은 아니다. 각 단계는 서로 연결되어 있다. 예를 들어 React 상태 관리를 제대로 이해하려면 JavaScript 비동기와 props/state 흐름이 필요하고, API 설계를 잘하려면 HTTP와 요구사항 분석이 필요하다. 배포와 관측은 테스트와 코드 품질이 없으면 불안정해진다.

비개발자도 따라갈 수 있는 기준

비개발자라면 각 포스트에서 용어를 모두 외우려 하지 않아도 된다. 대신 "이 기술이 어떤 문제를 해결하는가"를 먼저 잡으면 된다. TanStack Query는 서버 데이터 동기화 문제, GitHub Actions는 반복 검증 자동화 문제, Sentry는 운영 중 에러 추적 문제를 해결한다. 이렇게 문제 중심으로 보면 로드맵이 훨씬 덜 복잡해진다.

개발자가 얻어야 할 인사이트

개발자에게 이 로드맵의 핵심은 도구 목록이 아니라 판단 기준이다. 언제 Zustand가 아니라 TanStack Query를 써야 하는가, 언제 REST가 아니라 RPC가 편한가, 언제 Vercel이 적합하고 Railway가 적합한가, AI에게 어떤 작업을 맡기고 무엇을 사람이 검증해야 하는가. 이런 판단 기준을 각 포스트에서 가져가는 것이 목표다.

추천 실습 방식

각 단계마다 작은 산출물을 만든다. 01에서는 비동기 출력 순서 예측 노트, 02에서는 작은 Hono API, 0304에서는 lint와 commit hook, 0810에서는 인증이 있는 CRUD, 15~19에서는 배포와 관측, AI 리뷰 루프까지 붙인다. 읽기만 하면 지식이고, 작게 만들어 보면 역량이 된다.

참고

  1. [1] DevSkills — AI 웹개발자 로드맵
  2. [2] MDN — JavaScript
  3. [3] React Docs — Learn React
  4. [4] Node.js Learn
  5. [5] PostgreSQL Documentation
  6. [6] GitHub Docs — GitHub Actions
  7. [7] OWASP Top 10
  8. [8] Anthropic Docs — Claude Code overview

관련 글