프로젝트 개요
이 교육과정은 웹퍼블리셔를 목표로 하는 입문자를 위해 설계된 오픈소스 프로젝트다. 26일간의 학습 로드맵과 422개의 실습파일을 제공하며, HTML, CSS, JavaScript의 기초부터 실무 수준의 반응형 웹 제작까지 단계적으로 다룬다.
기존 온라인 강의와 달리, 모든 자료가 오픈소스로 공개되어 있어 자유롭게 수정하고 재배포할 수 있다. 교육기관이나 스터디 그룹에서 그대로 활용할 수 있도록 구성되어 있다.
- 총 26일 분량의 체계적 커리큘럼
- 422개 실습파일 (HTML, CSS, JS 예제)
- 4단계 난이도 구분 (기초 - 중급 - 고급 - 실전)
- 클론코딩 프로젝트 3개 포함
커리큘럼 구조
26일 과정은 크게 4개 단계로 나뉜다. 각 단계별로 이론과 실습이 짝을 이루고, 실습파일에는 정답 코드와 풀이 가이드가 모두 포함되어 있다.
1단계: HTML 기초 (Day 1-7)
시맨틱 마크업, 폼 요소, 멀티미디어 삽입 등 HTML의 핵심을 7일간 다룬다. 단순히 태그를 나열하는 수준이 아니라, 접근성과 SEO를 고려한 마크업 작성법을 처음부터 익힌다.
2단계: CSS 심화 (Day 8-14)
Flexbox, Grid, 애니메이션, 반응형 디자인까지. 레이아웃 시스템을 완전히 이해하고, 미디어 쿼리를 활용한 모바일 퍼스트 설계를 실습한다.
3단계: JavaScript 기초 (Day 15-20)
DOM 조작, 이벤트 처리, 비동기 프로그래밍의 기초를 다진다. 퍼블리셔가 알아야 할 JavaScript의 범위에 집중해서, 과하지 않으면서도 실무에 필요한 수준을 커버한다.
4단계: 실전 프로젝트 (Day 21-26)
실제 웹사이트를 클론코딩하는 단계다. 포트폴리오 사이트, 기업 랜딩 페이지, 이커머스 상품 목록 페이지를 직접 구현한다.
| 단계 | 기간 | 핵심 주제 | 실습파일 수 |
|---|---|---|---|
| HTML 기초 | Day 1-7 | 시맨틱 마크업, 폼, 접근성 | 112개 |
| CSS 심화 | Day 8-14 | Flexbox, Grid, 반응형 | 138개 |
| JavaScript | Day 15-20 | DOM, 이벤트, 비동기 | 96개 |
| 실전 프로젝트 | Day 21-26 | 클론코딩 3개 | 76개 |
실습파일 활용법
422개 실습파일은 단순한 예제 모음이 아니다. 각 파일이 특정 학습 목표에 맞춰 설계되어 있고, "문제 - 힌트 - 정답" 3단계 구조로 되어 있다.
저장소 클론
GitHub에서 프로젝트를 클론하고, 각 Day별 폴더를 순서대로 진행한다. README에 학습 순서와 각 파일의 설명이 정리되어 있다.
문제 파일 먼저 도전
각 실습에는 exercise- 접두사가 붙은 문제 파일이 있다. 정답을 보기 전에 먼저 직접 작성해보는 것이 학습 효과가 높다.
정답 비교 및 리뷰
solution- 접두사 파일과 비교하고, 다른 부분이 있으면 왜 그런 방식이 더 나은지 분석한다. 이 과정이 실력 향상의 핵심이다.
하루에 한 Day씩 진행하는 게 이상적이지만, 이미 기초가 있다면 1-2단계를 빠르게 넘기고 3-4단계에 집중해도 된다. 중요한 건 실습파일을 반드시 직접 타이핑하는 것이다. 복사-붙여넣기로는 학습 효과가 절반 이하로 떨어진다.
고급 과정과 최적화
4단계 실전 프로젝트에서는 단순히 "보이는 대로 만들기"를 넘어서, 프로덕션 수준의 코드 품질을 추구한다.
성능 최적화
이미지 최적화, CSS 선택자 효율성, 리플로우 최소화 등 퍼블리셔가 알아야 할 성능 기법을 실습한다. 특히 Core Web Vitals 지표를 직접 측정하고 개선하는 과정이 포함되어 있다.
크로스 브라우저 대응
Chrome, Firefox, Safari, Edge에서의 렌더링 차이를 확인하고, 폴리필과 벤더 프리픽스 없이도 호환성을 유지하는 모던 CSS 작성법을 다룬다.
코드 품질 관리
BEM 명명 규칙, CSS 구조 설계, HTML 유효성 검사 등 팀 프로젝트에서 필수적인 코드 컨벤션을 실습한다. 린터(stylelint, htmlhint) 설정법도 함께 안내한다.
이 교육과정을 마치면 반응형 웹사이트를 독립적으로 제작할 수 있는 수준에 도달한다. 다만 퍼블리셔에서 프론트엔드 개발자로 전환하려면 React나 Vue 같은 프레임워크 학습이 추가로 필요하다.
추천 대상
- 비전공자 웹 입문자: 체계적인 로드맵이 없어서 무엇부터 해야 할지 모르는 사람에게 최적이다
- 국비교육 수료 후 복습이 필요한 사람: 교육 내용을 자기 페이스로 다시 정리할 수 있다
- 교육기관 강사: 커리큘럼과 실습 자료를 그대로 수업에 활용할 수 있다
- 스터디 그룹: 매일 하나씩 같이 풀어가는 26일 챌린지로 활용하기 좋다
마무리
웹퍼블리셔 교육과정을 오픈소스로 공개한 이 프로젝트는, 체계적인 학습 경로와 충분한 실습 분량이라는 두 가지 조건을 모두 갖추고 있다. 26일이라는 기간은 현실적이면서도 밀도 있는 일정이다.
중요한 건 시작하는 것이다. 422개 파일이 부담스러울 수 있지만, Day 1의 첫 번째 파일을 여는 순간부터 이미 진행 중이다. 꾸준히 하루 한 Day씩 소화해 나가면 한 달 뒤에는 확연히 다른 결과물을 만들 수 있다.
