박준 · PARK JOON
프로젝트 / 교육·콘텐츠 제작
교육·콘텐츠 제작교육 설계Claude Code정적 사이트교재 제작Cloudflare Pages

비개발자 대표를 위한 AI 코딩 과외 커리큘럼·교재 사이트

Claude Code 한 도구를 축으로 한 1:1 과외의 5단계 커리큘럼 페이지와, 강사용·배포용 교재를 한 쌍씩 만든 교재 사이트

기간
2026.09
형태
의뢰 프로젝트
상태
배포·운영 중
역할
커리큘럼 설계·교재 집필·삽화 스타일 설계·정적 사이트 빌더 개발·배포
재구성 목업 · 실제 화면이 아니라 흐름을 보여 주는 애니메이션입니다클릭하면 멈춤·재생
37항목본 과정 5단계 학습 항목
83개교재 문서 (강사용 + 배포용)
30장교재 그림 (SVG 25 + 생성 표지 5)
50 / 81개용어집 / 명령어 색인

문제

개발 경험이 없는 1인 기업 대표가 AI 코딩 도구를 직접 쓰고 싶어 1:1 과외를 의뢰했습니다. 일반 강의는 도구 기능을 나열하기 때문에, 수강생이 «내 파일, 내 메일, 내 업무에 무엇을 시킬 수 있는가»로 이어지지 않았습니다.

수업은 회차당 2~3시간 대면으로 진행되므로, 강사가 그날 무엇을 어떤 순서로 보여 주고 어디서 막히는지 미리 준비된 진행안과, 수강생이 집에서 다시 해 볼 수 있는 교재가 따로 필요했습니다.

접근

  • 도구 하나(Claude Code)를 축으로 본 과정을 5단계로 나눴습니다. 검은 화면과 첫 인사 → 내 파일로 작고 안전한 일 → 브라우저로 웹 조사 → 메일·일정·서류 연결 → 자는 동안 도는 자동화 순서입니다. 본 과정 밖 39항목은 접힌 카탈로그로만 두고, 수강생이 고를 때 만들기로 했습니다.
  • 항목 제목을 «무엇이 되어 나오는가»로 썼습니다. 각 항목은 강사용(진행 순서·할 말·시연·대응·통과 기준)과 배포용(오늘 한 것·재현 절차·혼자 해 볼 과제·막혔을 때)으로 한 쌍을 이룹니다.
  • 실습은 수강생의 실제 업무 폴더로 하되, 먼저 세기만 시키고, 규칙을 정하고, 복사본에서 돌린 뒤 진짜 폴더에 적용하는 순서를 고정했습니다.
  • 그림은 두 종류로 나눴습니다. 터미널 화면·흐름도처럼 정확해야 하는 것은 손으로 쓴 SVG로, 분위기를 만드는 표지는 이미지 생성 모델로 만들되 사람·글자를 넣지 않고 강조색은 한 점만 쓰는 스타일 규칙을 문서로 고정했습니다.
  • Python 빌더가 마크다운 교재에서 교재 사이트, 용어집·명령어·그림 갤러리·색인을 생성하고, 커리큘럼 페이지는 별도 빌더로 만들어 정적 호스팅에 배포합니다.

구조

설계단계·항목·곁가지 트랙과 용어집을 JSON 설계 원본으로 정리합니다.
집필항목마다 강사용 진행안과 배포용 교재를 한 쌍씩 씁니다.
그림정확한 그림은 SVG로, 표지는 스타일 규칙에 맞춘 생성 이미지로 만듭니다.
빌드빌더가 교재 사이트와 용어집·명령어·갤러리·색인을 생성합니다.
배포커리큘럼 페이지와 교재 사이트를 정적 호스팅에 올립니다.

주요 기능

결과 중심 항목 제목«어질러진 폴더가 내가 정한 이름 규칙대로 정리되어 나옵니다 — 원본은 그대로 둔 채로»처럼, 항목마다 끝났을 때의 결과를 제목으로 씁니다.
강사용·배포용 한 쌍같은 항목을 강사용은 진행 순서와 막힘 대응으로, 배포용은 집에서 재현하는 절차와 과제로 나눠 씁니다.
안전한 실습 순서세기만 시키기 → 규칙 정하기 → 복사본에서 실행 → 원본 적용 순서로, 처음부터 원본을 건드리지 않게 합니다.
용어집·명령어 색인용어 50개와 명령어 81개를 교재 본문과 자동으로 연결하고, 그림 갤러리와 색인을 함께 생성합니다.
수업 설계용 시간표단계별 예상 시간(합계 46.2시간)을 강사용으로만 두고, 수강생 페이지에는 시간을 적지 않았습니다.

결과

  • 본 과정 5단계 37항목과 곁가지 39항목 카탈로그를 담은 커리큘럼 페이지를 배포했습니다.
  • 강사용·배포용 교재 83개 문서, 그림 30장, 용어집 50개, 명령어 81개, 색인을 담은 교재 사이트를 배포했습니다.
  • 1단계 분량(2.7시간)을 첫 회차 한 번에 맞도록 설계했고, 실제 수업으로 이어졌습니다.
  • 한글 파일명이 정적 호스팅에서 404가 나는 문제, 한 글자 용어가 자동 링크 마크업을 깨는 문제를 찾아 빌더에서 처리했습니다.

포인트

비개발자에게 도구 기능 목록은 학습 경로가 되지 않습니다. 항목을 «이 수업이 끝나면 무엇이 되어 나오는가»로 다시 쓰자 순서가 정해졌고, 안전장치(복사본·세기만 시키기)를 앞 단계에 두는 이유도 교재 안에서 설명할 수 있었습니다.

정확해야 하는 그림과 분위기를 만드는 그림을 나눈 것도 중요했습니다. 이미지 생성 모델은 터미널 글자를 틀리게 그리기 때문에, 화면·흐름도는 손으로 쓴 SVG로만 만들었습니다.

기술

Python 정적 사이트 빌더MarkdownSVGGPT Image 2.5Cloudflare Pageswrangler

상단 영상은 실제 화면이 아니라 구조를 보여 주는 재구성 목업입니다. 고객 정보는 익명화했습니다.