|
PROJECT ARCHITECTURE & PROCESS MAP 프로젝트 아카이브 및 의사결정 계통도

우리가 걸어온 길: 기획, 결정, 그리고 모든 화면의 연결

왜 시작했고, 어떤 피드백으로 의사결정이 바뀌었으며, 각 화면들이 어떻게 연결되어 있는지 한눈에 정리한 프로세스 지도입니다.

1. STARTING POINT · 왜 시작했는가?

"단순 질문과 텍스트 복붙에 지친 사람들에게, 진짜 내 웹 도구를 쥐어주자."

처음에는 게임 아이디어 구상으로 시작했으나, "진짜 사람들에게 필요한 실질적인 AI 교육 프로그램을 기획해보자"는 제안으로 피벗(Pivot)했습니다.

실리콘밸리 빅테크에서 AI 파이프라인을 다루다 귀국해 송도에 정착한 학원장의 페르소나를 세우고, 기존 시중의 '프롬프트 100선', '챗봇과 잡담하기' 같은 겉핥기 강의의 한계를 돌파하기 위한 정직한 6주 실전 코스를 설계하게 되었습니다.

2. DECISION LOG · 핵심 의사결정의 변화

피드백과 검증을 통해 진화한 6대 결정

① 브랜딩 전환: 강남 ➡️ 송도 국제 AI 아카데미 로컬 아이덴티티

단순 입시·단기 학원 밀집지인 강남 이미지를 벗어나, 송도 국제도시의 글로벌 인프라와 빅테크 귀국 원장의 세련된 감도를 결합했습니다.

② 기간 현실화: 4주 초압축 ➡️ 6주 점진적 나선형 완성 학습 난이도 조정

비전공자가 4주 만에 배포와 디버깅을 다 소화하는 건 사기에 가깝다는 현실적 판단 아래, 6주로 호흡을 넓혀 체화할 수 있는 나선형 구조로 변경했습니다.

③ 비용 경계선: 완전 0원 허구 ➡️ 단일 유료 구독 + 추가 API 과금 0원 비용 투명성

고성능 코딩 모델(ChatGPT Plus/Claude Pro) 구독 1개는 필수임을 정직하게 인정하고, 대신 복잡하고 불안한 종량제 API 토큰 추가 비용은 0원으로 통제했습니다.

④ 카파시 피라미드 & 수치 제거 (Codex 74점 ➡️ 84점 도약) ChatGPT 검수 반영

'상위 0.05%'나 '상위 20%' 같은 근거 없는 숫자를 모두 털어내고, "AI와 대화하던 사람에서, 내 웹 도구를 만들고 고치는 사람으로"라는 명료하고 당당한 포지셔닝으로 전환했습니다.

⑤ 배포 시점 혁신: 4주차 배포 지연 ➡️ 1주차 Day-1 조기 배포 (Win) 교육 설계 혁신

마지막 주에 허겁지겁 배포하지 않고, 1주 차 첫 수업 30분 만에 1페이지를 먼저 전 세계에 배포해 성공 체험을 안겨준 뒤 매주 기능을 덧붙이도록 개선했습니다.

⑥ 브라우저 직접 편집기 (In-Place Editor) 장착 UX 도구 개발

매번 AI 대화창에 문구 수정을 요청하는 번거로움을 해결하기 위해, 브라우저 화면에서 글자를 직접 클릭해 타이핑하고 [파일로 저장]하면 실제 HTML 파일이 갱신되는 툴바를 개발했습니다.

3. SYSTEM & SCREEN MAP · 모든 화면과 산출물의 연결

현재 생성된 모든 화면과 교구 지도

화면 01 · 기획 마스터 curriculum.html

6주 정식 커리큘럼. 상단 우측에 [✏️ 직접 편집 켜기]와 [💾 파일로 저장] 툴바가 탑재되어 있어 브라우저에서 바로 문구를 다듬을 수 있습니다.

👉 화면 열기 (http://127.0.0.1:3000/curriculum.html)
화면 02 · 교구 대시보드 courseware/index.html

스타터 킷, 프롬프트 핸드북, 수강생 워크북, 강사용 티칭 가이드까지 4대 교육 패키지를 한눈에 둘러보고 다운로드하는 허브 화면입니다.

👉 화면 열기 (http://127.0.0.1:3000/courseware/index.html)
화면 03 · 수강생 스타터 웹 courseware/starter-kit/index.html

수강생이 첫날 30분 만에 배포하는 1페이지 웹 골격. 2색 안티-슬롭, Wanted Sans, 2주차 요약 카드 슬롯, 4주차 계산기 슬롯이 완비되어 있습니다.

👉 화면 열기 (http://127.0.0.1:3000/courseware/starter-kit/index.html)
화면 04 · 통합 데스크톱 스튜디오 핵심 도구
creator.html (Curriculum Studio)

미리캔버스(MiriCanvas) 감성의 통합 에디터. 좁은 입력창 대신 실제 렌더링된 화면에서 직접 글자를 클릭해 타이핑하고, [Enter] 키로 한글 오와열(줄바꿈)을 다듬으며, Ctrl+S로 즉시 영구 저장합니다.

👉 스튜디오 열기 (http://127.0.0.1:3000/creator.html)
화면 05 · 백엔드 저장 & 런처 server.py (포트 3000) & curriculum_creator.py

브라우저 캐시 방지(Cache-Control: no-cache) 헤더를 탑재하고, 디스크 영구 저장 API(/api/save-curriculum, /api/save-curriculum-data) 및 바탕화면 단독 앱 실행을 지원합니다.

STATUS: 200 OK (백그라운드 데몬 구동 중)
화면 06 · 수강생 모집 랜딩페이지 landing.html

송도 학부모 및 직장인 대상 고전환 수강 신청 페이지. 1주차 30분 Day-1 실시간 배포 시뮬레이션, 1초 신청 팝업 모달, 얼리버드 10% 혜택 완비.

👉 랜딩페이지 열기 (http://127.0.0.1:3000/landing.html)
화면 07 · 발표용 Web PPT 덱 presentation.html

설명회 및 B2B 기관 출강 제안을 위한 12슬라이드 올인원 프레젠테이션. 전체화면(F), 발표자 대본 토글(N), PDF 1클릭 인쇄 완비.

👉 슬라이드 쇼 열기 (http://127.0.0.1:3000/presentation.html)