웹퍼블리셔 전문 교육과정 오픈소스 프로젝트 - 26일 완성 커리큘럼과 422개 실습파일 공개

프로젝트 개요

이 교육과정은 웹퍼블리셔를 목표로 하는 입문자를 위해 설계된 오픈소스 프로젝트다. 26일간의 학습 로드맵과 422개의 실습파일을 제공하며, HTML, CSS, JavaScript의 기초부터 실무 수준의 반응형 웹 제작까지 단계적으로 다룬다.

기존 온라인 강의와 달리, 모든 자료가 오픈소스로 공개되어 있어 자유롭게 수정하고 재배포할 수 있다. 교육기관이나 스터디 그룹에서 그대로 활용할 수 있도록 구성되어 있다.

커리큘럼 구조

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)

실제 웹사이트를 클론코딩하는 단계다. 포트폴리오 사이트, 기업 랜딩 페이지, 이커머스 상품 목록 페이지를 직접 구현한다.

실습파일 활용법

422개 실습파일은 단순한 예제 모음이 아니다. 각 파일이 특정 학습 목표에 맞춰 설계되어 있고, "문제 - 힌트 - 정답" 3단계 구조로 되어 있다.

고급 과정과 최적화

4단계 실전 프로젝트에서는 단순히 "보이는 대로 만들기"를 넘어서, 프로덕션 수준의 코드 품질을 추구한다.

성능 최적화

이미지 최적화, CSS 선택자 효율성, 리플로우 최소화 등 퍼블리셔가 알아야 할 성능 기법을 실습한다. 특히 Core Web Vitals 지표를 직접 측정하고 개선하는 과정이 포함되어 있다.

크로스 브라우저 대응

Chrome, Firefox, Safari, Edge에서의 렌더링 차이를 확인하고, 폴리필과 벤더 프리픽스 없이도 호환성을 유지하는 모던 CSS 작성법을 다룬다.

코드 품질 관리

BEM 명명 규칙, CSS 구조 설계, HTML 유효성 검사 등 팀 프로젝트에서 필수적인 코드 컨벤션을 실습한다. 린터(stylelint, htmlhint) 설정법도 함께 안내한다.

26일을 어떻게 나눠 쓰는가

26일이라는 숫자를 「26일 만에 끝난다」로 읽으면 대개 중간에 멈춘다. 하루치 분량이 정해져 있는 것이 아니라 단계가 26개로 나뉘어 있다는 뜻으로 보는 편이 맞다. 직장을 다니면서 저녁에 한 단계씩 밟으면 두 달쯤 걸리고, 그래도 순서가 흐트러지지 않는다는 것이 이 구조의 이점이다.

실제로 막히는 지점도 정해져 있다. 레이아웃 단계에서 대부분 한 번 멈춘다. HTML 태그를 외우는 것과 화면을 원하는 대로 배치하는 것은 다른 능력이라, 여기서 시간을 더 쓰는 것이 정상이다. 이 구간만 넘기면 뒤는 훨씬 빠르게 간다.

실습파일을 쓰는 법

422개라는 숫자에 압도되기 쉬운데, 전부를 처음부터 열어 볼 필요는 없다. 쓰는 방법은 대체로 셋이다.

• 먼저 직접 짜 보고 나서 비교한다 — 답을 보고 따라 치면 남는 것이 적다. 30분 붙잡아 보고 나서 여는 편이 낫다.
• 부분만 가져다 쓴다 — 실무에서 비슷한 화면을 만들 때 해당 파일을 찾아 구조만 참고한다.
• 고쳐 본다 — 색을 바꾸고 폭을 줄이고 항목을 늘려 본다. 무엇이 어디에 걸려 있는지가 그때 보인다.

이 과정 뒤에 무엇을 하나

교육과정을 마쳤다고 바로 취업이 되는 것은 아니다. 다음 단계는 내 것으로 하나 만드는 일이다. 실습파일을 그대로 옮긴 포트폴리오는 보는 사람이 금방 알아본다. 작아도 좋으니 직접 기획해서 처음부터 끝까지 만든 화면이 하나 있으면 이야기가 달라진다.

그리고 접근성과 반응형은 이 과정에서 다루더라도 실무에서 다시 부딪힌다. 키보드만으로 조작해 보기, 작은 화면에서 확인하기 — 이 두 습관을 여기서 들여 놓으면 나중에 크게 도움이 된다.

추천 대상

• 비전공자 웹 입문자: 체계적인 로드맵이 없어서 무엇부터 해야 할지 모르는 사람에게 최적이다
• 국비교육 수료 후 복습이 필요한 사람: 교육 내용을 자기 페이스로 다시 정리할 수 있다
• 교육기관 강사: 커리큘럼과 실습 자료를 그대로 수업에 활용할 수 있다
• 스터디 그룹: 매일 하나씩 같이 풀어가는 26일 챌린지로 활용하기 좋다

혼자 공부할 때의 함정

독학에서 가장 흔한 실패는 「보는 것」을 「하는 것」으로 착각하는 것이다. 영상을 따라 치면 그 순간에는 이해된 것 같지만, 빈 파일에서 다시 시작하면 손이 안 움직인다. 한 단계를 끝낼 때마다 파일을 지우고 처음부터 다시 만들어 보는 것이 확인 방법으로 가장 확실하다.

두 번째 함정은 도구를 계속 바꾸는 것이다. 새 프레임워크가 좋아 보여서 옮겨 다니면 어느 것도 손에 안 남는다. 기초 과정을 끝낼 때까지는 도구를 고정해 두는 편이 낫다.

오픈소스로 공개한다는 것

교육과정을 공개하면 고쳐 쓸 수 있다. 회사 신입 교육에 필요한 부분만 골라 쓰거나, 스터디 커리큘럼으로 순서를 바꿔 쓸 수 있다. 정해진 일정에 맞춰야 하는 유료 강의와 가장 다른 점이 이 부분이다.

대신 질문할 곳이 없다는 것은 감수해야 한다. 막혔을 때 물어볼 사람이 없으면 하루를 통째로 날리기도 한다. 그래서 독학이라면 커뮤니티든 스터디든 물어볼 창구를 하나 만들어 두는 편을 권한다.

마지막으로 기록을 남기는 습관을 권한다. 막혔던 지점과 해결 방법을 짧게라도 적어 두면, 같은 문제를 두 번째 만났을 때 시간이 크게 준다. 그 기록이 쌓이면 그대로 포트폴리오의 재료가 되기도 한다.

덧붙이면 완주보다 지속이 중요하다. 26일을 몰아서 끝내고 두 달 손을 놓으면 대부분 잊는다. 하루 30분이라도 매일 이어 가는 편이, 주말에 몰아서 하루 종일 하는 것보다 오래 남는다. 커리큘럼이 단계로 나뉘어 있는 이유도 그렇게 쓰라는 뜻에 가깝다.

마무리

웹퍼블리셔 교육과정을 오픈소스로 공개한 이 프로젝트는, 체계적인 학습 경로와 충분한 실습 분량이라는 두 가지 조건을 모두 갖추고 있다. 26일이라는 기간은 현실적이면서도 밀도 있는 일정이다.

중요한 건 시작하는 것이다. 422개 파일이 부담스러울 수 있지만, Day 1의 첫 번째 파일을 여는 순간부터 이미 진행 중이다. 꾸준히 하루 한 Day씩 소화해 나가면 한 달 뒤에는 확연히 다른 결과물을 만들 수 있다.