4주차 - PROJECT 5. 할 일 관리 앱 만들고 캡처하기

실습은.. Gemini로 2가지 경우로 실습을 하였습니다.

        1. 도서에서 제공된 Prompt를 사용해서 할일 관리 앱 만들기

        2. PRD를 gemini에서 생성하고, 생성된 PRD로 프롬프트를 생성하고. 앱 만들기..

 

번외로 claude-cli가 local llm을 연동하여 무료로 코딩을 작성해 보고 gemini-cli와 코드 생성 시간을 비교해 보았다.

(결론은 당장의 무료로 보이지만 전기세와 컴퓨터 수명 단축비용을 생각하면 상용 서비스를 이용하자)

https://hoyokin.tistory.com/86 

Claude + local LLM vs gemini-cli 비교

 

 

본글은 다음의 내용을 포함합니다.

1. 실습을 하면서 느낀 gemini의 단점

2. 2가지 경우의 실습 결과

3. 2가지 경우의 프롬프트  (책의 프롬프트와 gemini에서 생성된 프롬프트)

4. 동영상의 학습 내용

5. Claude Cli와 Gemini Cli 비교

 

----- 

 

2가지 실습을 하니 gemini의 단점이 보이는 군요

1. 도서의 제공된 프롬프트로 앱 만들때의 단점

    -- 1~4단계까지는 잘 하다가.. 마지막 5단계에서 버튼 동작이 작동되지 않아 4번 정도 수정을 하였네요

        (gemini가 수정을 하면서... 실수하지 않겠다고 다짐까지 하네요..ㅋ)

 

2. gemini로 프롬프트 생성 후 앱 만들떄의 단점

    --  gemini로 생성된 프롬프트는 책의 예제보다 허접하다 보니... 만들어진 앱도 허접하네요.

    -- 바이블 코딩도 역쉬  프롬프트의 힘을 느낍니다.

 

 

1. Gemini Prompt로 만든 앱

 

 

모바일 버전

 

데스크탑 버전

 

2. 도서의 Prompt로 만든 앱

 

 

 

# 사용된 프롬프트

Claude prompt	Gemini prompt
Step 1: 기본 구조 및 핵심 기능 구현 할 일 관리 앱의 기본 구조를 만들어줘. 요구사항: 1. index.html, style.css, script.js 세 개의 파일로 구성 2. HTML 구조:    - 앱 제목 "My Tasks"    - 할 일 입력창 (input + 추가 버튼)    - 할 일 목록을 표시할 컨테이너 3. JavaScript 기능:    - 할 일 추가 (Enter 키와 버튼 클릭 모두 지원)    - 할 일 삭제 (각 항목에 X 버튼)    - 체크박스로 완료/미완료 토글    - 완료 시 취소선 스타일 적용 4. localStorage에 데이터 저장:    - 추가/삭제/완료 상태 변경 시 자동 저장    - 페이지 새로고침 시 데이터 유지 5. 기본 CSS 스타일링:    - 깔끔한 카드 형태의 레이아웃    - 중앙 정렬, 최대 너비 600px    - 호버 효과와 트랜지션 각 할 일은 { id, text, completed, createdAt } 구조로 저장해줘.	1단계: 프로젝트 기초 구조 및 UI 레이아웃 수립 목적: 기본적인 HTML 구조와 현대적인 CSS 스타일링을 완성합니다. 프롬프트: "순수 자바스크립트(Vanilla JS)를 사용하여 '데일리 할 일 관리 앱'을 만들려고 해. 우선 HTML과 CSS를 작성해 줘. 레이아웃: 상단에 제목과 현재 날짜가 나오는 Header, 그 아래 진행률을 보여주는 Progress Bar, 할 일을 입력하는 Input 영역, 그리고 목록이 표시되는 List 영역이 필요해. 디자인: 모던하고 깨끗한 UI를 선호하며, 반응형으로 제작해서 모바일에서도 잘 보여야 해. • • 스타일 가이드: 업무(빨강), 개인(초록), 공부(노랑) 카테고리별 포인트 컬러를 변수(CSS Variables)로 정의해서 사용해 줘. 아직 자바스크립트 기능은 넣지 말고 구조와 스타일 위주로 작성해."
step 2: 카테고리 기능 및 UI 개선 기존 코드에 카테고리 기능을 추가하고 UI를 개선해줘. 요구사항: 1. 카테고리 기능:    - 3가지 카테고리: 업무(work), 개인(personal), 공부(study)    - 할 일 추가 시 카테고리 선택 드롭다운    - 각 할 일 항목에 카테고리 색상 태그 표시    - 카테고리 필터 버튼 (전체/업무/개인/공부) 2. UI 개선:    - 카테고리별 색상: 업무(파란색 #4A90E2), 개인(초록색 #27AE60), 공부(보라색 #8E44AD)    - 필터 버튼을 상단에 배치    - 선택된 필터 버튼 강조 표시    - 할 일 항목에 생성 시간 표시 (예: "2시간 전") 3. 데이터 구조 업데이트:    - category 필드 추가    - 필터 상태도 localStorage에 저장 완료된 항목은 목록 하단으로 자동 정렬되도록 구현해줘.	2단계: 할 일 추가 및 삭제 기능 구현 (CRUD 기초) 목적: 메모리상에서 데이터를 추가하고 삭제하며 화면에 렌더링하는 핵심 로직을 만듭니다. 프롬프트: "이제 자바스크립트 로직을 추가하자. 입력 기능: 텍스트 입력창과 카테고리 선택(업무, 개인, 공부) 드롭다운을 통해 할 일을 추가하는 기능을 만들어 줘. 목록 렌더링: 추가된 할 일을 리스트 형태로 화면에 표시해 줘. 각 아이템에는 카테고리 이름이 적힌 배지가 포함되어야 해. 삭제 기능: 각 할 일 아이템 옆에 삭제 버튼을 만들고, 클릭 시 목록에서 제거되도록 해 줘. • • 주의: 아직 LocalStorage는 연동하지 말고 메모리 배열을 사용하여 렌더링 로직을 구현해." --> 카테고리 선택 드롭다운이 없어. 재 요청
Step 3 진행률 대시보드를 추가하고 인라인 수정 기능을 구현해줘. 요구사항: 1. 진행률 대시보드:    - 앱 상단에 통계 섹션 추가    - 전체 진행률: "5/10 완료 (50%)" 형식 + 프로그레스 바    - 카테고리별 미니 진행률 표시 (각 카테고리 완료/전체)    - 오늘 추가된 할 일 개수 표시 2. 인라인 수정 기능:    - 할 일 텍스트 더블클릭 시 편집 모드    - input 필드로 변경되어 수정 가능    - Enter로 저장, ESC로 취소    - 편집 중 카테고리도 변경 가능한 select 박스 3. UI 애니메이션:    - 진행률 바 부드러운 전환 효과    - 항목 추가/삭제 시 페이드 애니메이션    - 완료 체크 시 슬라이드 애니메이션 대시보드는 실시간으로 업데이트되어야 해.	3단계: 완료 체크 및 카테고리 스타일 적용 목적: 할 일의 상태를 관리하고 시각적인 피드백을 강화합니다. 프롬프트: "할 일의 상태 관리 기능을 고도화해 줘. 완료 체크: 체크박스나 아이템 클릭 시 완료 상태(completed)를 토글할 수 있게 해 줘. 완료된 항목은 텍스트에 취소선이 생기고 색상이 흐려져야 해. 카테고리 배지: PRD에 정의된 대로 카테고리별로 각기 다른 배경색(업무-빨강, 개인-초록, 공부-노랑)을 가진 배지를 스타일링해 줘. • • 입력 유효성: 빈 값을 입력하거나 공백만 입력했을 때 추가되지 않도록 방어 코드를 넣어 줘."
step 4 다크 모드와 추가 기능들을 구현해줘. 요구사항: 1. 다크 모드:    - 우측 상단에 다크/라이트 모드 토글 스위치    - 다크 모드 색상: 배경(#1A1A1A), 카드(#2D2D2D), 텍스트(#E0E0E0)    - 선택한 테마 localStorage에 저장    - 부드러운 전환 애니메이션 2. 추가 기능:    - "완료된 항목 모두 삭제" 버튼 (확인 다이얼로그 포함)    - 할 일 검색 기능 (실시간 필터링)    - 남은 할 일 개수 배지 표시    - 빈 상태 메시지 ("할 일이 없습니다. 추가해보세요!") 3. 키보드 단축키:    - Alt+N: 새 할 일 입력창 포커스    - Alt+1,2,3,4: 카테고리 필터 전환    - Alt+D: 다크 모드 토글 4. 반응형 디자인:    - 모바일 (max-width: 480px) 최적화    - 터치 친화적인 버튼 크기 모든 인터랙션에 적절한 피드백을 제공해줘.	4단계: LocalStorage 연동 및 데이터 지속성 확보 목적: 브라우저를 새로고침해도 데이터가 유지되도록 저장소 기능을 연결합니다. 프롬프트: "앱의 데이터를 브라우저에 저장해서 새로고침해도 유지되도록 해 줘. 저장: 할 일을 추가, 삭제, 상태 변경할 때마다 localStorage에 현재 할 일 목록을 JSON 형태로 저장해 줘. 로드: 페이지가 처음 로드될 때 localStorage에서 데이터를 읽어와서 목록을 복구해 줘. • • 날짜 정보: 앱 상단에 오늘 날짜가 한국어 형식(예: 2024년 5월 20일 월요일)으로 실시간 또는 로드 시점에 표시되게 해 줘."
step 5 앱을 최종 완성하고 사용성을 극대화해줘. 요구사항: 1. 데이터 내보내기/가져오기:    - JSON 형식으로 데이터 내보내기 버튼    - 파일 업로드로 데이터 가져오기    - 가져오기 전 현재 데이터 백업 확인 2. 정렬 옵션:    - 생성일순, 카테고리순, 완료 상태순 정렬    - 정렬 상태 저장    - 드래그 앤 드롭으로 수동 정렬 (sortable) 3. 성능 최적화:    - 100개 이상 항목에서도 부드러운 성능    - 디바운싱 적용 (검색, 저장)    - 효율적인 DOM 조작 4. 접근성 개선:    - ARIA 레이블 추가    - 포커스 관리    - 스크린 리더 지원 5. 추가 개선사항:    - 할 일 중복 확인 경고    - 최근 삭제 항목 복구 (Undo) 기능    - 오늘의 격언 랜덤 표시    - 완료율에 따른 응원 메시지 모든 엣지 케이스를 처리하고 에러 핸들링을 추가해줘. 코드에 상세한 주석을 달아줘.	5단계: 진행률 대시보드 및 UX 디테일 강화 목적: 진행률 바를 활성화하고 애니메이션 및 사용성을 개선합니다. 프롬프트: "마지막으로 앱의 완성도를 높여 보자. 진행률 바: 상단 Progress Section에 '전체 할 일 대비 완료된 할 일'의 비율을 계산해서 프로그레스 바와 퍼센트(%) 수치로 보여 줘. 상태가 바뀔 때마다 부드럽게 업데이트되어야 해. • • 애니메이션: 할 일을 추가하거나 삭제할 때 부드러운 페이드 인/아웃 효과를 추가해 줘.

 

 

 

Ch 04. 클로드 코드 실전 활용

 

[1단계] 기획 및 프로젝트 준비 (Claude Web → Claude Code)

클로드 웹(Claude Web)에서 체계적인 기획(PRD)을 세우고, 이를 클로드 코드(Claude Code)에서 실행 가능한 단위로 변환하는 워크플로우를 학습합니다.

• 레슨 (Lesson)

    ◦ 워크플로우 이해: 클로드 웹에서는 프롬프트를 설계하고, 클로드 코드에서는 이를 실행하는 이원화된 프로세스를 이해합니다.

    ◦ PRD 기반 프롬프트: 할 일 관리 앱(Todo App)의 주요 기능(10~20개 할 일 관리, 추가/삭제 등)을 정의하고, 이를 바탕으로 PRD(제품 요구 사항 문서)를 작성하는 법을 배웁니다.

    ◦ 단계별 변환: 작성된 PRD를 한 번에 실행하지 않고, 클로드 코드용 '5단계 핵심 프롬프트'로 변환하여 단계적으로 지시하는 전략을 익힙니다.

• 실습 (Practice)

    ◦ 클로드 웹에 접속하여 "할 일 관리 앱 PRD를 작성해 줘"라고 요청한 뒤, 결과물을 다시 "클로드 코드용 5단계 프롬프트로 변환해 줘"라고 요청하여 텍스트를 확보합니다.

    ◦ 바탕화면의 바이브 코딩 폴더 내에 Study02라는 새 폴더를 만들고, 해당 위치에서 터미널을 열어 클로드 코드를 실행합니다.

• 프로젝트 (Project): "기획서가 코드로 변하기까지"

    ◦ 클로드 웹에서 생성한 1단계 프롬프트(기본 구조)를 복사하여 클로드 코드에 붙여넣습니다.

    ◦ index.html 파일 생성 여부를 묻는 질문에 승인(Yes)하고, 브라우저에서 파일을 열어 '마이 태스크(My Task)' 페이지가 열리는지 확인합니다,.

• 체크리스트 (Checklist)

    ◦ [ ] 클로드 웹에서 PRD를 기반으로 5단계의 프롬프트가 생성되었는가?

    ◦ [ ] Study02 폴더에서 클로드 코드가 정상적으로 실행되었는가?

    ◦ [ ] 1단계 프롬프트 실행 후 기본 UI(할 일 추가/삭제)가 작동하는가?

--------------------------------------------------------------------------------

[2단계] 점진적 기능 구현 (Iterative Development)

확보된 5단계 프롬프트를 순차적으로 실행하며 앱의 기능을 점진적으로 확장하고, 각 단계마다 결과를 검증하는 방법을 배웁니다.

• 레슨 (Lesson)

    ◦ 점진적 개발: 한 번에 모든 기능을 구현하는 대신, 카테고리 추가, 진행률 표시 등 기능을 하나씩 덧붙여 나가는 개발 방식을 이해합니다,.

    ◦ 명령어 활용: 줄 바꿈을 위한 \+Enter 사용법과 코드 실행 승인 절차를 익힙니다.

• 실습 (Practice)

    ◦ 2단계(카테고리): 업무, 개인, 공부 등으로 할 일을 분류하는 기능을 추가하고 브라우저를 새로고침하여 확인합니다.

    ◦ 3단계(진행률): 완료된 업무의 비율(예: 1/3 완료)이 시각적으로 표시되는지 확인합니다.

    ◦ 4단계(유틸리티): 다크 모드, 일괄 삭제, 단축키(Alt+N) 기능을 추가하고 테스트합니다.

    ◦ 5단계(정렬): 정렬 기능 등 마지막 고도화 기능을 적용합니다.

• 프로젝트 (Project): "나만의 할 일 관리 앱 완성"

    ◦ 모든 단계가 적용된 앱에서 실제 데이터를 입력해 봅니다. (예: '혼공 바이브 공부'를 '공부' 카테고리에 추가하고 완료 체크하기),.

    ◦ 다크 모드 전환 및 키보드 단축키가 정상 작동하는지 검증합니다.

• 체크리스트 (Checklist)

    ◦ [ ] 카테고리별(업무/개인/공부)로 할 일이 구분되어 표시되는가?

    ◦ [ ] 진행률 표시와 다크 모드 버튼이 정상 작동하는가?

    ◦ [ ] 5단계 프롬프트가 모두 에러 없이 적용되었는가?

--------------------------------------------------------------------------------

[3단계] 고급 관리 및 멀티모달 최적화

이미지 인식을 통한 UI 수정(멀티모달), 대화 맥락(Context) 관리, 세션 복구 등 클로드 코드의 고급 기능을 활용해 프로젝트를 완성합니다.

• 레슨 (Lesson)

    ◦ 세션 관리: 작업을 중단했다가 다시 시작할 때 /resume(이전 대화 불러오기) 또는 /continue(마지막 상태 유지) 명령어를 사용하는 법을 배웁니다.

    ◦ 컨텍스트 최적화: /context로 AI의 기억 용량을 확인하고, /compact 명령어로 대화 내용을 압축하여 토큰을 절약하는 방법을 익힙니다,.

    ◦ 멀티모달 디자인 수정: 캡처 도구로 현재 화면을 찍어 클로드 코드에 입력하고, "모바일 화면을 데스크톱 버전으로 바꿔줘"와 같이 시각적 피드백을 주는 법을 학습합니다.

• 실습 (Practice)

    ◦ 윈도우 캡처 도구로 현재 앱 화면을 캡처한 뒤, 이미지를 클로드 코드 터미널로 드래그 앤 드롭합니다,.

    ◦ "데스크톱 환경에 맞게 UI를 수정하고 Web Version 폴더에 저장해 줘"라고 요청합니다.

    ◦ /status로 상태를 확인하고, 대화가 길어지면 /compact를 실행해 봅니다,.

• 프로젝트 (Project): "데스크톱/모바일 반응형 앱 배포"

    ◦ 기존 Study02 폴더와 별개로 생성된 Web Version 폴더의 결과물을 비교합니다.

    ◦ @file 명령어로 특정 파일(script.js)을 불러와 다크 모드 관련 코드를 분석해 달라고 요청해 봅니다.

• 체크리스트 (Checklist)

    ◦ [ ] /resume 또는 /continue로 이전 작업을 이어갈 수 있는가?

    ◦ [ ] 캡처 이미지를 기반으로 UI가 데스크톱 버전으로 변경되었는가?

    ◦ [ ] Web Version이라는 새 폴더가 생성되었는가?

    ◦ [ ] /context 명령어로 남은 토큰 양을 확인할 수 있는가?

 

 

2026년 현재 기준으로 **Claude Code(CLI)**와 Gemini CLI가 사용하는 실제 명령어 체계를 다시 명확하게 대조해 정리해 드립니다.

가장 큰 차이는 Claude는 슬래시(/) 기반의 명령어 체계가 매우 촘촘하고, Gemini는 파일(@) 참조와 자연어 지시를 결합한 형태라는 점입니다.

---

🛠️ Claude CLI vs Gemini CLI 명령어 대조표

기능 구분	Claude Code (Claude CLI)	Gemini CLI (현재 공식 명령어)
초기 설정	/init (설정 파일 생성)	GEMINI.md 파일 수동 생성 (또는 /system)
맥락 요약	/compact (토큰 압축)	자연어 요청 ("요약해줘") 또는 /clear
설정 변경	/config (에디터/모델 설정)	/model, /settings
파일 읽기	/read 또는 자동으로 읽음	@파일명 (직접 지정 가능)
진행 중단	/stop	Ctrl + C
작업 검토	/review	/audit 또는 자연어 요청
도움말	/help	/? 또는 /help

---

🔍 상세 비교 및 Gemini식 대응법

1. 세션 및 맥락 관리 (Claude의 /compact, /resume)

• Claude: 대화가 길어지면 /compact를 눌러 이전 내용을 요약본으로 대체합니다.
• Gemini: 명시적 명령어가 없는 경우가 많습니다. 대신 **강력한 '컨텍스트 윈도우'**를 믿고 그냥 진행하거나, 대화가 꼬이면 **/clear**로 비운 뒤 **@GEMINI.md**나 **@작업파일**을 다시 참조하여 흐름을 잡습니다.

2. 프로젝트 가이드라인 (Claude의 /init)

• Claude: /init을 통해 .claudecode 폴더와 지침을 만듭니다.
• Gemini: 별도의 초기화 명령어 대신 프로젝트 루트에 GEMINI.md 파일을 만드는 것이 표준입니다. 이 파일에 "나는 프리랜서 마케터야", "React를 사용해" 같은 내용을 적어두면 Gemini가 실행될 때마다 이를 읽고 시작합니다.

3. 설정 및 모델 제어 (Claude의 /config)

• Claude: /config 메뉴에서 한꺼번에 관리합니다.
• Gemini: 세분화되어 있습니다.
  • /model: flash (빠름/저렴)와 pro (정교함) 사이를 전환할 때 사용합니다.
  • /settings: 구글 검색(Search Grounding) 기능을 켤지 끌지 결정할 때 사용합니다.

4. 파일 분석 (Claude의 /read)

• Claude: 자동으로 파일을 읽거나 /read로 특정 파일을 로드합니다.
• Gemini: 채팅 입력창에 **@**를 입력하면 로컬 파일 목록이 뜹니다. > @App.tsx 이 코드 수정해줘 처럼 사용합니다.

---

💡 Gemini CLI 사용자를 위한 팁

Gemini CLI는 명령어보다 **'파일 참조'**와 **'검색'**이 핵심입니다.

1. 과거 작업 이어하기: /resume 대신 터미널에서 gemini "@지난_기획안.md 내용 이어서 마케팅 문구 짜줘"라고 실행하세요.
2. 실시간 정보 활용: Claude는 학습 데이터에 의존하지만, Gemini는 /search 명령어나 설정에서 Search Grounding을 켜면 2026년 오늘 날짜의 마케팅 트렌드를 바로 가져옵니다.

현재 사용 중인 Gemini CLI 환경에서 특정 동작이 안 된다면, **/?**를 입력해 현재 설치된 버전에서 지원하는 전체 명령어 리스트를 확인해 보시는 것을 추천합니다.

 

 

 

Ch 05. 게임 제작으로 배우는 체계적인 개발과 관리

 

[1단계] 할루시네이션 제어와 게임 기초 구현

AI가 사실이 아닌 정보를 진실인 것처럼 말하는 '할루시네이션(Hallucination)' 현상을 이해하고, CLAUDE.md를 통해 명확한 가이드라인을 제시하여 신뢰할 수 있는 퀴즈 게임을 만드는 단계입니다.

• 레슨 (Lesson)

    ◦ PRD와 아티팩트: 클로드 웹에서 '상식 퀴즈 게임'을 위한 제품 요구 사항 문서(PRD)를 작성하고, 이를 클로드 코드용 3단계 프롬프트로 변환하는 과정을 복습합니다,.

    ◦ 할루시네이션의 이해: "세계에서 가장 긴 강은?"과 같이 기준(전통적 측정 vs 최신 연구)에 따라 답이 갈리는 문제에서 AI가 오류를 범하는 원인을 학습합니다,.

    ◦ 메모리 관리(/memory): 프로젝트의 규칙을 담은 CLAUDE.md 파일을 /memory 명령어로 수정하여, 모든 문제 생성 시 '교차 검증'을 수행하도록 강제하는 방법을 배웁니다,.

• 실습 (Practice)

    ◦ 바탕화면에 Study03 폴더를 만들고 클로드 코드를 실행하여 1단계 프롬프트(기본 퀴즈 게임 구현)를 적용합니다,.

    ◦ 나일강/아마존강 문제와 같이 논란의 여지가 있는 퀴즈가 포함된 예제(Study03_Basic)를 다운로드하여 실행해 봅니다,.

    ◦ /memory 명령어를 입력해 "퀴즈 문제 교차 검증 가이드라인"을 CLAUDE.md에 추가하고 저장합니다,.

• 프로젝트 (Project): "논란 없는 퀴즈 게임 만들기"

    ◦ 가이드라인이 적용된 상태에서 "기존 문제들을 점검하고 수정해 줘"라고 요청하여, AI가 스스로 애매한 문제(예: 나일강)에 대해 부연 설명이나 명확한 기준을 추가하도록 만듭니다,.

    ◦ 수정된 index.html을 실행하여 문제 해설이 보강되었는지 확인합니다.

• 체크리스트 (Checklist)

    ◦ [ ] /memory 명령어로 CLAUDE.md 파일을 열고 수정할 수 있는가?

    ◦ [ ] 가이드라인 적용 후, AI가 나일강 문제에 대해 "최신 연구에서는 아마존강이 더 길다는 주장도 있습니다"라는 설명을 추가했는가?

    ◦ [ ] /clear 명령어로 이전 세션을 초기화하고 새로운 규칙을 적용할 수 있는가?

--------------------------------------------------------------------------------

[2단계] 커스텀 명령어(Custom Commands)로 개발 자동화

반복되는 긴 프롬프트를 입력하는 대신, 나만의 단축 명령어(Custom Command)를 만들어 개발 효율을 극대화하는 방법을 배웁니다.

• 레슨 (Lesson)

    ◦ 커스텀 명령어 구조: .claude/commands 폴더 안에 .md 파일을 만들면 파일명(예: quiz-validate.md)이 곧 명령어(/quiz-validate)가 되는 원리를 이해합니다.

    ◦ 인수(Argument) 활용: 명령어 뒤에 한국사, 1~20 같은 특정 조건(인수)을 붙여서 원하는 범위만 실행하게 하는 방법을 익힙니다.

    ◦ 명령어 적용: 새 명령어를 만든 후에는 exit로 나갔다가 다시 들어와야 적용된다는 점을 주의합니다,.

• 실습 (Practice)

    ◦ 최상급 표현 찾기: "문제 중 '최초', '최대' 같은 표현을 찾아 검증해 줘"라는 내용을 담은 /quiz-validate 명령어를 생성합니다.

    ◦ 범위 지정 검사: 문제 번호 범위를 지정해 난이도 분포를 확인하는 /quiz-range 명령어를 만들고 /quiz-range 1 20으로 실행해 봅니다,.

    ◦ 퀴즈 추가: 카테고리와 난이도를 입력받아 새 문제를 만드는 /quiz-add 명령어를 생성합니다.

• 프로젝트 (Project): "클릭 한 번으로 콘텐츠 관리하기"

    ◦ /quiz-add 한국사 Medium 명령어를 입력하여 한국사 중급 문제를 즉시 추가하고, index.html에 반영되었는지 확인합니다.

    ◦ /quiz-validate 한국사를 실행하여 추가된 문제에 논란의 소지가 없는지 즉시 검증합니다.

• 체크리스트 (Checklist)

    ◦ [ ] 현재 프로젝트 폴더 안에 .claude/commands 폴더가 생성되었는가?

    ◦ [ ] /quiz-validate 등의 커스텀 명령어가 도움말(help) 목록에 표시되는가?

    ◦ [ ] 명령어를 통해 추가한 퀴즈가 실제 게임 화면에 나타나는가?

--------------------------------------------------------------------------------

[3단계] 명령어 체이닝(Chaining)과 유지보수 시스템

여러 명령어를 연결하여 복잡한 작업을 한 번에 처리하고, 관리자용 대시보드를 구축하여 프로젝트를 체계적으로 관리하는 고급 기술입니다.

• 레슨 (Lesson)

    ◦ 명령어 체이닝: && 기호를 사용하여 명령어1 && 명령어2 형태로 여러 작업을 순서대로 연결하는 방법을 배웁니다. 앞선 명령이 성공해야 뒤의 명령이 실행됩니다.

    ◦ 통합 명령어: 여러 단계(생성→검증→백업→통계)를 수행하는 워크플로우를 하나의 명령어(/quiz-daily)로 통합하는 전략을 학습합니다.

    ◦ 데이터 시각화: 게임 데이터를 분석하여 관리자(선생님)가 볼 수 있는 리포트나 대시보드로 시각화하는 방법을 익힙니다.

• 실습 (Practice)

    ◦ 체이닝 테스트: /quiz-add && /quiz-validate && /quiz-stats 형태로 입력하여 문제 추가, 검증, 통계 확인을 한 번에 수행해 봅니다,.

    ◦ 선생님 모드 생성: 클로드에게 "학생들의 성적을 분석하는 선생님 모드용 명령어들을 만들어줘"라고 요청하여 /teacher-dashboard 등을 자동 생성하게 합니다,.

• 프로젝트 (Project): "종합 관리 시스템 구축"

    ◦ 터미널에서만 보이는 분석 결과를 HTML 파일로 내보내는 /export-report 명령어를 만듭니다.

    ◦ 생성된 dashboard.html 파일을 브라우저로 열어 전체 퀴즈 현황, 정답률, 학생 성적 등을 시각적으로 확인하고 PDF로 저장해 봅니다.

• 체크리스트 (Checklist)

    ◦ [ ] &&를 사용해 두 개 이상의 명령어가 연속으로 실행되었는가?

    ◦ [ ] /quiz-daily 같은 통합 명령어로 복잡한 작업(백업 포함)이 한 번에 완료되는가?

    ◦ [ ] 브라우저에서 확인할 수 있는 관리자용 대시보드 파일이 생성되었는가?