마케팅본부 이달의밀리 AI 챔피언 프로젝트

B2B 북러닝 플랫폼
AI활용 프로토타입 제작

담당자 Frank
킥오프 2026.04.23
런칭 2026.06.15
02 / 만든 것들

이용자 프론트 · 관리자 프론트

이용자 프론트
홈
홈 화면
홈 · 도서 탐색 플랜 선택 도서 신청 마이페이지 내서재 학사관리 포럼 포인트 로그인
관리자 프론트
대시보드
관리자 대시보드
대시보드 수료율 차트 활동 차트 PDF 보고서 엑셀 내보내기 포인트 관리 이용자 현황
03 / 왜 만들었나

빠르고 명확한 요구사항을 위해

비개발자가 프로토타입을 직접 만들면 생기는 일

기존 방식
기획자 → 스펙 문서 작성
문서 기반 전달 — 모호함 발생
기획 ↔ 개발 수정 반복
개발팀 의뢰 시 3개월+
→
AI 활용 후
기획자 → 동작하는 프로토타입 직접 제작
화면으로 소통 — 스펙이 눈에 보임
만드는 과정에서 운영 정책 · 구현 명세서 동시 도출
개발팀에 명확한 요구사항 전달
4주  비개발자 · 1인
AI가 준 건 속도만이 아니었다 — 비개발자에게 없던 능력 자체를 열어줬다.
04 / AI 개발 하네스

하네스 엔지니어링 기반 개발 워크플로우

Claude
기능 정의
의도·범위·
요구사항 확정
→
Claude
플랜 작성·제시
구현 플랜 초안·
피드백 반영
⟲
Codex
검토·피드백
실현 가능성·
수정 의견
구현 플랜 — 이견 없을 때까지
→
Codex
구현
코드 작성·
산출물 생성
→
Claude
검증·제시
결과 검토·
수정 사항 공유
⟲
Codex
논의·반영
수정 협의·
재작업
검증 — 이견 없을 때까지
→
Codex
최종 구현
완료·
다음 루프
핵심 원칙: 구현 전·후 두 번의 합의 루프. Claude가 판단과 검증을 주도하고, Codex가 계획 검토와 구현을 맡는다. 이견이 사라질 때까지 반복한다는 조건이 결과물의 완성도를 높였다. 다음 슬라이드 → 이 구조 안에서 Claude Code와 실제로 일한 방식
05 / Claude Code와 일한 방식

의도에서 결과물까지: 4단계

1
레퍼런스와 맥락을 묶어서 한 번에 전달한다 "[digital.html 카드 스타일 참고] hero 아래 신간 가로 스크롤, scroll-snap, 카드 3개 + 다음 카드 끝 살짝 노출" 맥락이 풍부할수록 수정 횟수가 줄어든다
2
결과물 검토 레이아웃, 간격, 엣지 케이스 확인 "동작하나"가 아닌 "의도한 대로 보이나"를 본다
3
대화로 반복 개선 "모바일에서 overflow가 깨짐 — 이렇게 보여" 현상을 정확히 묘사할수록 수정이 한 번에 끝난다
4
패턴을 고정한다 CLAUDE.md에 규칙으로 기록 세션이 끊겨도 누적된 규칙은 사라지지 않는다
얇은 요청 실제 요청 방식
"가로 스크롤 카드 섹션 추가해줘"
"[digital.html 카드 스타일 참고] hero 아래 신간 가로 스크롤, scroll-snap, 카드 3개 + 다음 카드 끝 살짝 노출"
CLAUDE.md — 누적된 규칙 예시
## 가로 스크롤 구현 시 필수
1. 부모 섹션에 overflow: hidden (없으면 페이지 전체가 늘어남)
2. 스크롤 컨테이너: width:100% + min-width:0
3. overflow-x:auto 요소에 overflow:hidden 병용 금지
06 / 결과

1인 · 4주 · 실제로 동작하는 규모

29,238
전체 소스 라인 (HTML+CSS+JS)
14,742
CSS · 반응형 완전 대응
10,606
JS · 인터랙션 · 차트 · PDF
29
구현 화면 뷰
4주
솔로 개발
구현된 로직 구독 상태 관리· 포인트 계산·적립·차감· 학습 이력 5탭 필터· 차수 배지 로직· 신청 상태 머신· PDF · 엑셀 생성· 차트 데이터 계산· 도서 필터 · 정렬· 반응형 LNB 전 페이지 모바일 완전 대응
홈 히어로
홈 히어로
신간 도서
신간 도서
베스트
베스트
큐레이션
큐레이션
도서 상세
도서 상세
도서 신청
도서 신청
플랜 선택
플랜 선택
내서재 전체
내서재 전체
내서재 읽는중
읽는중
내서재 완독
완독
독후감
독후감
관심 상품
관심 상품
학사관리 신청과정
신청과정
학사관리 학습중
학습중
학사관리 지난학습
지난학습
마이페이지 홈
마이페이지 홈
포인트 내역
포인트 내역
관리자 대시보드
관리자 대시보드
관리자 차트
관리자 차트
지식 포럼
지식 포럼
07 / 배운 것들

잘 된 것, 어려웠던 것, 얻은 것

잘 된 것
  • 평범한 언어로 의도 설명 → AI가 구현 세부사항을 채워줌
  • CLAUDE.md에 패턴 저장 → 세션 간 일관된 결과
  • AI를 지시 대상이 아닌 페어로 대했을 때 — 짧은 루프로 논의하며 만들면 품질과 흐름이 달라짐
  • 레퍼런스와 맥락을 한 번에 전달 — "이렇게 해줘" 한 줄보다 파일·조건·배경을 묶어서 넘겼을 때 결과물 품질이 확 달라짐
  • 멀티에이전트 하네스가 실제로 잘 됐다 — 두 AI를 역할 분리해서 쓰니 혼자 돌릴 때보다 완성도가 높았음
어려웠던 것
  • 레이아웃 버그는 "깨졌어요"가 아닌 정확한 묘사가 필요
  • 긴 세션과 토큰 한계 — 컨텍스트가 초기화되면 흐름이 끊기고 재설명이 필요했음
  • 모바일 overflow 엣지 케이스는 수동 규칙이 필요
  • 기능 전체를 미리 정의하기 어려움 — 만들다 보니 생기는 요구사항이 설계를 후행했음
내가 얻은 것
  • 웹 프론트 구조와 앱 구현 방식을 체득 — HTML/CSS/JS의 역할을 몸으로 익힘
  • "있으면 좋겠다"는 기능 하나에도 데이터 정합·상태 전이·타 기능과의 연결이 얽혀 있었다 — 보이지 않는 조건이 실제 구현의 대부분
  • 로직의 무게를 알게 됐다 — 기획 요구사항을 더 구체적으로 쓸 수 있게 됨
기억할 한 가지: 뭔가 깨질 때 규칙을 써라. CLAUDE.md가 팀의 스타일 가이드가 된다.