소개
시도하고자 했던 것과 그 이유
중2 딸의 여름방학 기간동안 수학 자기주도학습이 출발점이었습니다. 아이는 "시작은 하는데 지속이 약한" 성향이라 계획표를 만들어줘도 며칠을 못 갑니다. 게다가 방학 사이에 영어캠프 3일, 가족 휴가 3일, 학원 3개(영어·논술·미술)가 있어서 실제로 공부할 수 있는 날이 생각보다 적었습니다.
그래서 세 가지를 시도했습니다.
1. AI가 한 번에 뽑아준 계획이 아니라, 전문가 자문단이 검증한 계획 만들기 — 페르소나 에이전트 여러 명이 서로 모르는 상태에서 같은 계획을 적대적으로 검토
2. 계획표가 아니라 "매일 열어서 퀘스트 깨는" 모바일 웹앱 만들기 — 진도 동기화, 미완료 시 폰 알림까지
3. 지피터스 클로드 디자인 강의 숙제 적용 — 배운 "역설계 → 교정 → 시스템화" 방법론으로 앱을 Before/After 리디자인
진행방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
- Claude Code — 기획·검증·개발·배포까지 전 과정의 단일 창구
- Supabase (MCP 연동) — 진도 데이터 저장, 푸시 알림 서버 함수, 매일 발송 스케줄러
- Vercel CLI / GitHub — 배포와 버전 관리 (실험·롤백 포함 전 히스토리)
- designlang — 강의에서 배운 디자인 역설계 도구
- EBS 중학 — 뉴런 수학 3(상) 무료 강좌를 앱에 연동
① 딥 인터뷰 — 계획을 요청하기 전에 나를 인터뷰시켰다
AI에게 프롬프트 주고 첫 커리큘럼을 받은 뒤, 바로 실행하지 않고 이렇게 보냈습니다.
```
지금 네가 제안해준 방법을 다시 한번 검증하고 싶어. 중등 입시 전문컨설턴트 팀을 만들어서 (4~5명)
이 제안을 검토해보고 조금더 좋은 방안이 있는지 다시한번 검토해줘서 보완해줘.
필요한 부분 있으면 아주 많이 물어봐줘. DEEP INTERVIEW 해줘.
```
AI가 한 번에 하나씩 질문하며 학원 시간표, 아이 성향, 성공 기준을 파냈고, 그 과정에서 우선순위가 뒤집혔습니다. AI는 "2학기 내신이 1순위"로 가정했는데 제 진짜 우선순위는 "3-1 선행 완결"이었거든요. 이 교정 하나로 계획의 무게중심이 완전히 바뀌었습니다.
② 전문가 자문단 병렬 검증 — 전원 "조건부 승인", 같은 결함에 수렴
계획을 5명의 전문가 에이전트(고입 전략 / 수학 교과·EBS / 습관 코치 / 학습심리·부하 / 내신·스케줄링)에게 동시에 검토시켰습니다. 서로의 결과를 모르는데도 같은 결함 3개에 수렴했습니다: 하루 계획량 초과(110~130분 > 가용 120분), 학원 7시간 날의 수학 배치("실패가 내장된 설계"), 휴가 복귀일의 시험 배치("최악의 재진입 설계").
고입 전문가는 제가 잘못 알던 사실도 교정했습니다. 계획은 v1에서 v5까지 다섯 번 진화했습니다.
③ 웹앱 구축 — "계획표 보지 말고 앱만 열면 되게"
```
웹 서비스만 보고서 하나씩 하나씩 격파하기처럼 EBS 링크도 네가 보여주고
네가 계획 가이드를 다 해서 딸아이가 스스로 자기주도 학습으로 나아갈 수 있도록 해줘.
모든 동기부여 방식 다 활용해줘
```
```
git+vercel+supabase 사용가능해. 해당 환경 활용해줘
```
이 두 마디로 Claude Code가 만든 것들:
- 날짜를 자동 인식하는 오늘의 퀘스트 (분 단위 시간, 교재 범위, EBS 버튼, 타이머 내장)
- 동기부여 장치 전부: XP·레벨 7단계, 스트릭+실드, 배지 11종, 하루 격파마다 채워지는 17조각 그림, 랜덤 응원 카드
- 여정 시각화: 17일을 6구간(출발의 항구→드래곤 해협→쉼의 섬→보물섬)으로 나눈 항해 지도, "지금 어디" 나침반, 퀘스트마다 "왜 하냐면" 한 줄
- 수업 준비 리추얼: 시작 전 준비물(오답노트 강조!)·목표·마음가짐 체크 — 인지심리학 원리 적용
- 사진 인증 → 별 → 보물섬 선물: 완료 인증샷을 올리면 별이 붙고, 17칸 완주 시 부모가 봉인한 선물 개봉
- 웹 푸시 알림: 미완료 시 오후 4시·8시 폰 알림. 기술 검증 에이전트가 웹 검색으로 "아이폰은 홈 화면에 추가한 웹앱에서만 푸시 가능(iOS 16.4+)" 같은 제약을 출처와 함께 확인한 뒤 구현
매일 알림은 데이터베이스 스케줄러로 걸었습니다.
```sql
-- 매일 KST 16시/20시 미완료 체크 후 발송 (pg_cron은 UTC 기준이라 07시/11시로 등록)
select cron.schedule('mathquest-nudge-16kst', '0 7 * * *', ...);
select cron.schedule('mathquest-nudge-20kst', '0 11 * * *', ...);
```
④ 강의 숙제 — Duolingo 역설계 Before/After
Before(기존 앱)는 그대로 두고, 새 URL에 After 버전을 만들어 비교했습니다.
왼쪽 듀오링고 디자인 적용 전, 오른쪽 듀오링고 디자인 적용 후
한국 여행 앱 스크린샷
원정지도 그림이 맘에 들지 않아(왼쪽) 제미나이에서 그림 그려서 다시 붙여 넣음(오른쪽)
한국 게임 스크린샷
- 역설계: Duolingo 공식 브랜드 가이드 실측 — Feather Green #58CC02, 3D 버튼의 실제 구현값 box-shadow: 0 4px 0 #58A700(누르면 4px 내려앉음)
- 교정: WCAG 대비 실측 11건 교정(그린 위 흰 글씨는 2.09:1 미달 → 텍스트용 그린 신설), 한글 폰트 CDN 실검증(BM JUA 채택)
- 시스템화: "누를 수 있는 모든 것은 3D", "blur 그림자 금지" 등 규칙 8개 명문화 → 토큰 15개 전면 매핑 (기능·데이터는 그대로, 껍질만 교체)
강의 도구도 직접 실행했습니다.
```
npx designlang https://www.duolingo.com
```
34개 파일이 자동 생성됐는데, 도구가 Primary를 엉뚱한 틴트색으로, Secondary를 브라우저 기본 링크색(#0000ee) 으로 오판했습니다. 강의에서 강조한 "자동 추출 후 사람이 교정" 단계가 왜 필요한지 그대로 재현된 순간이었어요.
마지막으로 제가 생성형 AI로 만든 항해 지도 일러스트를 붙여넣자, Claude가 클립보드에서 원본을 추출해 폰 상태바를 잘라내고, 그림 위에 실제 진도가 반영되는 3D 타일 17개를 얹어 "살아있는 지도"로 만들었습니다.
결과와 배운 점
배운 점과 나만의 꿀팁
1. "전문가 팀 만들어서 검토해줘"가 최고의 품질 게이트. 서로 모르는 페르소나 에이전트들이 같은 결함에 독립적으로 수렴하면 그건 진짜 결함입니다.
2. AI의 확신도 검증 대상. AI가 처음 말한 입시 정보가 틀렸고, 그걸 잡아낸 것도 웹 검색을 시킨 AI 검증단이었습니다. "사실은 검색해서 출처 달고, 못 찾으면 미확인으로 표기해"라는 지시가 핵심.
3. 계획 요청 전에 딥 인터뷰. "많이 물어봐줘" 한 줄이면 AI가 가정으로 채울 뻔한 구멍(일정, 성향, 진짜 우선순위)이 드러납니다.
4. git이 있어야 과감해진다. 실험 버전과 롤백이 전부 히스토리에 남아, "이건 아니다" 싶으면 한 명령으로 복원됩니다.
5. 꿀팁: 붙여넣은 이미지를 파일로 저장 안 했어도 "클립보드에서 추출해줘"라고 하면 살릴 수 있습니다.
과정 중에 겪은 시행착오
- 새로운 방 일정이 뒤늦게 등장 → 계획 전면 재배치. 처음부터 "빠지는 날·학원 시간 전부"를 내놓게 해야 합니다.
- 시간표의 물결표(~)가 취소선으로 렌더링 — "3:00~4:30"의 ~ 두 개가 마크다운 취소선 문법과 충돌. 시간 범위는 –로.
- 웹푸시 라이브러리 함정 — 널리 쓰이는 npm 라이브러리가 서버 환경(Deno)에서 비작동 → 웹 표준 기반 대체 라이브러리로 교체.
- 가장 큰 실패: "AI 티 제거" 시도의 전면 롤백. 이모지를 없애고 지도 그림을 기계적으로 잘라 재사용했더니 오히려 더 어색해졌습니다. 배운 것 — AI 티의 본질은 이모지가 아니라 "의도 없이 만들어진 그래픽". 잘라 쓴 크롭은 구도에 의도가 없고, 급조한 아이콘은 광학 보정이 없어 이모지보다 저렴해 보입니다. (이 실패는 원인 진단과 함께 별도 작업으로 등록해 현재 진행 중)
도움이 필요한 부분
- 같은 스타일의 일러스트 시리즈(씬 배너·마스코트)를 생성하는 에셋 팩 파이프라인 노하우
듀오링고에서 사용하는 디자인 색감은 반영했지만 성공적인 UI 구성요소를 디자인 하는 것은 어떤 방법이 있는 것인지 궁금해짐
- 아이폰 실기기 웹푸시 수신 안정성 경험담
앞으로의 계획
- "AI 티 제거 리디자인" — 전용 에셋 + 검증된 아이콘 세트 + designlang로 추출해둔 Duolingo 모션 토큰 적용
- 방학 후 "개학 평일 40분 루틴" 버전 개편, 그리고 딸의 17일 실사용 데이터로 완주 후기 2편
도움 받은 글
- Duolingo 공식 디자인 가이드 (design.duolingo.com) / Duolingo 아트 스타일 블로그
- Supabase 공식 문서 (엣지 함수 스케줄링) / WebKit 웹푸시 문서
