LandvibeDev · seop0372 · Jul 19, 2026 · Jul 19, 2026 · Jul 19, 2026 · Jul 19, 2026
diff --git a/.claude/commands/commit.md b/.claude/commands/commit.md
@@ -0,0 +1,10 @@
+---
+description: 변경사항을 컨벤션에 맞게 커밋
+allowed-tools: Bash(git:*)
+---
+현재 상태: !`git status`
+변경 내용: !`git diff --staged`
+
+위 변경을 Conventional Commits 형식
+(feat/fix/docs...)으로 커밋해줘.
+제목은 한 줄, 본문에 "왜"를 적어줘.
diff --git a/members/seop0372/idea.md b/members/seop0372/idea.md
@@ -0,0 +1,45 @@
+# 프로젝트 기획서 — SixUp (가안)
+
+## 1. 한 줄 정의
+뭘 시작해야 할지 모르는 사람을 위한, 관심사만 입력하면 6주 완성 취미 커리큘럼을 짜주는 웹서비스
+
+## 2. 문제
+"취미 갖고 싶은데 뭐부터 해야 할지 모르겠다"는 사람이 많다. 유튜브 등 정보는 많지만 흩어져 있고, 내 수준·시간에 맞게 정리가 안 돼서 결국 시작도 못 하고 흐지부지된다.
+
+## 3. 해결책
+관심 분야·주당 가능 시간·예산을 입력하면, AI가 주차별 목표·할 일·추천 자료(영상/글)를 담은 6주 커리큘럼을 자동으로 생성한다. 매주 체크인하며 진도를 추적한다.
+
+## 4. 왜 지금
+AI를 활용하면 예전엔 학원·코치가 해주던 "전문가 수준의 맞춤 커리큘럼 설계"를 누구나 몇 초 만에 받을 수 있게 되었다.
+
+## 5. 사용자
+새 취미를 시작하고 싶지만 계획 세우기가 막막한 20~30대. 특히 다양한 취미를 시도해보고 싶은데 매번 흐지부지되는 사람들.
+
+## 6. 대안·경쟁
+- 유튜브 검색: 정보는 있지만 개인 맞춤이 없음
+- 클래스101 / 탈잉: 유료 강의, 커리큘럼이 고정되어 있고 비용 부담
+- ChatGPT에 직접 물어보기: 가능하지만 진도 관리·추적 기능이 없음
+
+**차별점**: 진도 관리 + 리마인드 + 개인 상황(시간·예산) 맞춤화
+
+## 7. 제품
+1. 관심사·시간·예산 입력
+2. 6주 커리큘럼 자동 생성
+3. 주차별 체크리스트 및 진도 기록
+
+**MVP 범위**: 1, 2번
+
+## 8. 지속 방법
+무료로 커리큘럼 1개 생성 가능. 여러 개 동시 진행하거나 심화 커리큘럼을 원하면 유료 전환. 완주율을 높이는 리마인드 알림도 프리미엄 기능으로 제공.
+
+## 9. 나(팀)
+평소 다양한 취미를 시도해보고 싶은 니즈가 있어서, "뭘 시작해야 할지 몰라 결국 안 하게 되는" 이 문제를 직접 겪고 있음. 사용자 입장에서 진짜 필요한 서비스를 만들 수 있음.
+
+## 10. 6주 계획
+- 3주차: 입력 폼 + 커리큘럼 생성 로직 구현
+- 4주차: 결과 페이지 디자인 + 저장 기능
+- 5주차: 체크리스트 / 진도 추적 기능 붙이기
+- 6주차: 다듬기 + 배포 + 발표 준비
+
+---
+*작성자: seop0372 · 2주차 과제 (트랙 B)*
diff --git a/members/seop0372/index.html b/members/seop0372/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>랜덤 명언</title>
+<style>
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  }
+
+  .card {
+    background: #fff;
+    border-radius: 16px;
+    padding: 40px 32px;
+    max-width: 480px;
+    width: 90%;
+    text-align: center;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  }
+
+  #quote {
+    font-size: 1.3rem;
+    line-height: 1.6;
+    color: #333;
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #author {
+    margin-top: 12px;
+    font-size: 0.95rem;
+    color: #888;
+  }
+
+  button {
+    margin-top: 24px;
+    padding: 12px 28px;
+    font-size: 1rem;
+    border: none;
+    border-radius: 999px;
+    background: #8b5cf6;
+    color: #fff;
+    cursor: pointer;
+    transition: background 0.2s ease, transform 0.1s ease;
+  }
+
+  button:hover {
+    background: #7c3aed;
+  }
+
+  button:active {
+    transform: scale(0.96);
+  }
+</style>
+</head>
+<body>
+
+<div class="card">
+  <div id="quote">버튼을 눌러 명언을 확인하세요.</div>
+  <div id="author"></div>
+  <button onclick="showRandomQuote()">명언 보기</button>
+</div>
+
+<script>
+  const quotes = [
+    { text: "성공은 최종적인 것이 아니고, 실패는 치명적인 것이 아니다. 중요한 것은 계속하는 용기다.", author: "윈스턴 처칠" },
+    { text: "삶이 있는 한 희망은 있다.", author: "키케로" },
+    { text: "네가 할 수 있다고 믿든 할 수 없다고 믿든, 믿는 대로 될 것이다.", author: "헨리 포드" },
+    { text: "오늘 할 수 있는 일에 전력을 다하라. 그러면 내일은 한 걸음 더 진보한다.", author: "아이작 뉴턴" },
+    { text: "행복은 습관이다. 그것을 몸에 지니라.", author: "허버드" },
+    { text: "실패를 두려워하지 말라. 실패하지 않는 것보다 도전하지 않는 것을 두려워하라.", author: "작자 미상" },
+    { text: "가장 큰 위험은 위험 없는 삶을 사는 것이다.", author: "작자 미상" },
+    { text: "천 리 길도 한 걸음부터.", author: "속담" },
+  ];
+
+  function showRandomQuote() {
+    const random = quotes[Math.floor(Math.random() * quotes.length)];
+    document.getElementById("quote").textContent = random.text;
+    document.getElementById("author").textContent = "- " + random.author;
+  }
+</script>
+
+</body>
+</html>
diff --git a/members/seop0372/week01.md b/members/seop0372/week01.md
@@ -0,0 +1,24 @@
+# Week 01
+
+## 체크리스트
+
+- [x] Claude Code 설치 & 로그인
+- [x] VS Code 연동
+- [x] CLAUDE.md 생성
+- [x] 공식 문서 읽기 (Quickstart, CLI 기본)
+- [x] 첫 대화 & 첫 수정
+  - 버튼을 누르면 랜덤 명언이 나오는 웹페이지(HTML/CSS/JS 한 파일) 제작
+  - 버튼 색을 보라색으로 수정
+- [x] git 커밋 위임
+  - 변경 사항을 Claude Code에게 git commit 하도록 요청 및 완료
+
+## 신기했던 것
+코드를 한 줄도 안 쓰고 명언 생성기를 만들 수 있다는 게 신기했어요.
+
+## 이상했던 것
+git config는 Claude가 직접 안 바꾸고 저한테 실행하라고 한 게 의외였어요.
+
+## 직접 써본 프로젝트
+랜덤 명언 생성기(members/seop0372/index.html)를 만들었고, 버튼을 누르면 랜덤 명언이 화면에 표시됩니다.
+
+커밋 링크: https://github.com/seop0372/2026-claude-code-101/commit/2ea88cf
diff --git a/members/seop0372/week02.md b/members/seop0372/week02.md
@@ -0,0 +1,92 @@
+# 2주차 실습 기록 (트랙 A)
+
+## 실습 프로젝트
+연습용 할 일 목록(Todo) 웹앱 (`todo-practice`) — HTML/CSS/JS로 구성된 미니 프로젝트
+
+## 1. 워크플로우 1바퀴 — 버그 수정 (필수)
+
+### 문제 상황
+할 일 목록에서 항목을 3개 추가한 뒤 중간 항목을 삭제하면, 클릭한 항목이 아니라 엉뚱한 항목이 지워지는 버그 발견.
+
+재현 방법: "6주간 근육량 2키로 늘리기", "주 3회 운동하기", "단백질 챙겨먹기" 순서로 추가한 뒤 "주 3회 운동하기" 옆 ✕ 버튼 클릭.
+
+### 진행 과정 (탐색 → 계획 → 구현 → 검증 → 커밋)
+
+1. **탐색/원인 분석**: Claude에게 바로 고치지 말고 원인부터 분석해달라고 요청.
+   - Claude가 `deleteTodo(id)` 함수에서 `id`(예: `1753234567890` 같은 타임스탬프 값)를 배열 인덱스처럼 `todos.splice(id, 1)`에 그대로 넘기고 있다는 걸 찾아냄.
+   - `splice`는 인덱스가 배열 길이보다 크면 자동으로 배열 끝으로 clamp되기 때문에, 어떤 항목을 클릭하든 항상 배열 끝 근처 항목이 삭제되는 구조였음.
+
+2. **계획**: Claude가 두 가지 해결책 제시 — `findIndex`로 실제 인덱스를 찾아 삭제하는 방법 vs `filter`로 새 배열을 만드는 방법. `findIndex` 방식으로 진행하기로 결정.
+
+3. **구현**: `todos.findIndex((t) => t.id === id)`로 실제 인덱스를 찾은 뒤 `splice(index, 1)`을 호출하도록 수정. Claude가 diff로 변경 내용을 보여줌 (2줄 추가, 3줄 삭제).
+
+4. **검증**: 브라우저에서 `index.html`을 열어 직접 재현 시나리오대로 테스트. "주 3회 운동하기"만 정확히 삭제되고 나머지 두 항목은 정상적으로 남아있는 것을 확인.
+
+5. **커밋**: Claude에게 커밋을 위임. 이 폴더가 아직 git 저장소가 아니어서 Claude가 먼저 확인 후 `git init` 진행. `.claude/settings.local.json`(로컬 설정 파일)은 자동으로 `.gitignore`에 추가해서 커밋에서 제외하고, 나머지 파일(`README.md`, `index.html`, `script.js`, `style.css`)만 첫 커밋으로 기록 (`e99f8b2`).
+
+### 느낀 점 / 배운 것
+- "바로 고치지 말고 원인부터 분석해달라"고 요청하니, 무작정 코드를 고치는 게 아니라 왜 문제가 생겼는지 먼저 설명해줘서 이해하고 넘어갈 수 있었음.
+- id 값과 배열 인덱스를 혼동하는 실수는 실제로도 자주 할 수 있는 실수라는 걸 체감함.
+- git 저장소가 아닌 폴더에서 커밋을 시켰을 때, Claude가 임의로 진행하지 않고 먼저 물어봐준 점이 인상 깊었음. 또한 로컬 설정 파일을 알아서 커밋에서 제외해준 것도 유용했음.
+- (참고) PR은 별도 깃허브 원격 저장소 연결이 필요해 이번 연습에서는 로컬 커밋까지만 진행함.
+
+## 2. CLAUDE.md 직접 손보기
+
+`/init`으로 CLAUDE.md를 생성. Claude가 프로젝트를 스스로 훑어보고 아래 내용을 자동으로 정리해줌.
+
+- **Project overview**: 이 프로젝트가 무엇인지 (빌드 없는 vanilla JS/HTML/CSS todo 앱, 학습용 연습 프로젝트)
+- **Commands**: 별도 빌드/테스트 명령이 없다는 점을 명시해서, 불필요하게 package.json이나 테스트 도구를 추가하지 않도록 안내
+- **Architecture**: 각 파일(`index.html`/`script.js`/`style.css`)의 역할과 데이터 구조(`todos` 배열, `render()` 패턴) 설명
+- **Known gotcha**: 앞서 고쳤던 "id를 배열 인덱스로 착각하면 안 된다"는 버그 원인을 아예 CLAUDE.md에 기록해서, 다음에 같은 실수를 반복하지 않도록 함
+
+### 느낀 점
+- CLAUDE.md가 단순히 "설명 문서"가 아니라, 방금 고친 버그의 교훈까지 기록해서 재발을 막아주는 역할도 할 수 있다는 걸 알게 됨.
+- CLAUDE.md와 관련 없는 변경(count 기능 구현)은 별도 커밋으로 분리해서 진행됨 — "논리 단위로 나눠서 커밋"하는 습관을 자연스럽게 체감함.
+
+## 3. 커맨드 + 훅 조합 만들기
+
+README에 있던 예시를 참고해서 Claude에게 직접 만들어달라고 요청.
+
+### 만든 것
+1. **`/commit` 슬래시 커맨드** (`.claude/commands/commit.md`)
+   - `!git status`, `!git diff --staged` 문법으로 실행 시점에 현재 git 상태를 자동으로 읽어와 프롬프트에 삽입
+   - Conventional Commits 형식(`feat:`/`fix:`/`docs:` 등)으로 커밋 메시지를 항상 일관되게 작성하도록 함
+2. **저장 알림 Hook** (`.claude/settings.json`, `PostToolUse` 이벤트)
+   - Claude가 파일을 쓰거나 수정(`Write`/`Edit`)할 때마다 "파일 저장됨: 경로" 메시지를 자동으로 띄움
+   - 이 프로젝트엔 별도 포맷터가 없어서, README 예시대로 알림으로 대체 구현
+
+### 진행 중 겪은 문제
+- 원래 `.gitignore`가 `.claude/` 폴더 전체를 무시하고 있어서, 커밋돼야 할 `settings.json`과 `commands/commit.md`까지 막혀 있었음. 개인 설정 파일(`settings.local.json`)만 제외하도록 `.gitignore`를 수정해서 해결.
+- 커맨드/훅 파일이 세션 도중에 새로 생기면, **그 세션은 새로 생긴 설정을 인식하지 못해** `/commit` 입력 시 "Unknown command" 에러가 남. Claude Code 세션을 완전히 종료했다가 재시작하니 정상적으로 인식됨.
+
+### 검증
+- 파일 수정 요청 → "파일 저장됨: ..." 메시지가 실제로 뜨는 것을 확인 (Hook 작동)
+- `git add .` → `/commit` 직접 입력 → `docs: README에 테스트 문구 추가` 형태로 커밋 메시지가 자동 생성되며 정상 커밋됨 (`110f6af`) (커맨드 작동)
+
+### 느낀 점
+- 세션이 설정 변경을 실시간 반영하지 못한다는 걸 직접 겪으면서, "안 될 때는 일단 재시작해보기"라는 기본적인 트러블슈팅 감각을 익힘.
+- 커맨드 하나 만들어두니 커밋 메시지 컨벤션을 매번 설명할 필요가 없어져서, 실제로 왜 이런 기능을 쓰는지 체감됨.
+
+## 4. MCP 서버 연결 (도전 과제)
+
+Playwright MCP(브라우저 자동화)를 연결해서, Claude가 실제 브라우저를 조작하게 해봄.
+
+### 진행 과정
+1. `claude mcp add playwright npx @playwright/mcp@latest`로 서버 등록
+2. `claude mcp list`로 `playwright`가 정상 연결됐는지 확인 (`claude.ai Google Drive`, `playwright` 두 서버 모두 연결됨)
+3. Claude에게 "playwright로 index.html 열어서 테스트해봐"라고 요청
+
+### 결과
+Claude가 실제 브라우저를 열어서 다음을 자동으로 수행하고 결과를 확인함:
+- 항목 추가 → "전체 1개 중 0개 완료" 정상 표시
+- 두 번째 항목 추가 → "전체 2개 중 0개 완료" 정상 표시
+- 첫 항목 클릭(완료 토글) → "전체 2개 중 1개 완료"로 정상 갱신
+- 완료된 항목 삭제 → 남은 항목이 정확히 유지됨 (이전에 고쳤던 id 기반 삭제 로직이 제대로 작동하는지도 함께 재검증됨)
+- 콘솔 에러 없음
+
+### 느낀 점
+- MCP를 연결하니 Claude가 코드만 읽고 쓰는 게 아니라, 실제로 브라우저를 열어 클릭·타이핑하며 눈으로 확인하는 것까지 할 수 있게 됨. "손발이 늘어난다"는 표현이 실감남.
+- 로컬 환경(브라우저 바이너리 버전 등) 문제가 있었지만 Claude가 스스로 스크래치패드에 임시 환경을 만들어 우회 해결함 — 프로젝트 본체(CLAUDE.md 방침대로 tooling 미도입 유지)는 건드리지 않고 검증만 한 점이 인상적이었음.
+
+---
+*작성자: seop0372 · 2주차 과제 (트랙 A)*