웹 기초 과정 - 바이브코더의 기초 체력¶
앱 20개를 만들어 본 사람이, 이제 "이게 어떻게 돌아가는지"를 체계로 잡는 과정. 목표 두 가지: ① 내 머릿속에 지도 만들기 ② 남에게 설명할 수 있게 되기
이 과정의 전제¶
- 입문자 코스가 아니다. 변수·반복문부터 배우지 않는다.
- 이미 만든 프로젝트를 해부하면서 개념을 거꾸로 연결한다. 모든 강의 예시는 내 실제 프로젝트(프롬프트 사이트, 스토리위너 홈피, 썸네일랩 등)다.
- 코드를 외우는 게 아니라 흐름과 역할을 이해한다. 코드는 계속 Claude가 짠다.
학습 방법 (1강 = 이 사이클)¶
[1] 문서 읽기 (10~15분)
[2] 페인만 테스트 - Claude에게 내 말로 설명해보기
→ "○강 페인만 테스트 하자"라고 말하면 Claude가 듣고 빈틈을 교정
[3] 퀴즈 - 문서 끝 기본 퀴즈 + 원하면 "○강 퀴즈 더 내줘"
[4] 실물 확인 - 내 프로젝트에서 그 개념이 있는 곳을 Claude와 함께 열어보기
→ "○강 실물 해부 하자"라고 하면 해당 코드/설정을 같이 추적
한 주에 1~2강 페이스 추천. 순서대로 안 가도 된다 (지금 궁금한 강부터).
커리큘럼 (12강)¶
| 강 | 제목 | 핵심 질문 | 상태 |
|---|---|---|---|
| 1 | 웹이 돌아가는 큰 그림 | 주소창에 엔터 치면 무슨 일이 일어나나? | ✅ 문서 완성 |
| 2 | 프론트엔드 3총사 - HTML/CSS/JS | 화면은 무엇으로 만들어지나? | 진도 맞춰 생성 |
| 3 | API와 JSON - 프로그램들의 대화법 | 내 사이트는 서버와 어떻게 대화하나? | 진도 맞춰 생성 |
| 4 | 백엔드와 서버리스 | Pages Functions가 정확히 뭘 하는 건가? | 진도 맞춰 생성 |
| 5 | 데이터베이스 - D1으로 배우는 CRUD | 게시판 글은 어디에 어떻게 저장되나? | 진도 맞춰 생성 |
| 6 | 파일 저장소와 캐시 - R2와 CDN | 이미지는 왜 DB가 아니라 R2에 넣나? | 진도 맞춰 생성 |
| 7 | 인증 - 세션, 토큰, OAuth | "로그인했다"는 상태를 컴퓨터는 어떻게 기억하나? | 진도 맞춰 생성 |
| 8 | git과 GitHub - 시간여행 장부 | 커밋/푸시할 때 실제로 무슨 일이 일어나나? | 진도 맞춰 생성 |
| 9 | 빌드와 배포 - 코드가 사이트가 되기까지 | git push 하면 왜 사이트가 바뀌나? | 진도 맞춰 생성 |
| 10 | 도메인, DNS, HTTPS | storywinner.co.kr은 어떻게 내 서버를 찾아오나? | 진도 맞춰 생성 |
| 11 | 에러 읽는 법과 디버깅 | 빨간 글씨가 떴을 때 어디를 봐야 하나? | 진도 맞춰 생성 |
| 12 | 보안 기초 - API 키와 환경변수 | 왜 API 키를 코드에 적으면 안 되나? | 진도 맞춰 생성 |
- 다음 강을 시작하려면 Claude에게: "웹기초 ○강 만들어줘" → 1강과 같은 구조(개념 + 비유 + 내 프로젝트 실물 + 퀴즈)로 생성 + 이 표의 상태 갱신
- 용어가 막히면 언제든: 용어사전
강의(가르치기)로 연결하기¶
각 강을 마칠 때마다 "수강생에게 설명한다면?"용 산출물을 하나씩 남긴다:
- 비유 한 줄 (예: "프론트=홀, 백엔드=주방")
- 슬라이드 한 장 분량의 그림 설명
- 수강생이 가장 자주 물을 질문 1개 + 답
이게 쌓이면 그대로 바이브코딩 강의 자료가 된다.