소개
앞선 사례에서는 /init과 계획 수립, 수정 반복을 활용한 소규모 페이지 제작 과정을 통해 Claude Code 활용 흐름을 검증했습니다. 그 마지막에 "이 흐름은 이후 주차별 자료 정리, 강의용 실습 페이지 제작까지 확장해 적용하고 있습니다"라고 정리했는데, 이번 사례는 그 확장의 실제 결과물입니다. 매주 수요일 밤 9시, Zoom으로 스터디가 끝나면 채팅 로그가 하나 남습니다. 줌으로 들어온 참여자가 주고받은 링크, Q&A, 인사이트가 뒤섞인 .txt 파일입니다. 갑자기 이것을 정리해서 웹앱으로 공유하면 좋겠다는 생각이 들었어요.
이번 실험의 목표는 단 하나였습니다. 채팅 로그를 넣으면, 모바일에서 바로 읽을 수 있는 정리 페이지가 나오는 파이프라인을 구축하는 것. 그리고 그 파이프라인이 다음 주에도, 그다음 주에도 동일하게 작동하도록 스킬로 고정하는 것이었습니다.
스킬 파일 2종: zoom-chat-recap.md, study-recap-page.md
CLAUDE.md에 디자인 시스템 고정
진행 방법
STEP 0 — 작업 환경 준비
처음에는 Opus 4.7로 시작했는데 채팅 분석이나 HTML 생성 같은 파싱·변환 작업에서는 응답이 3~5배 느렸고, 결과 품질은 Sonnet 4.6이 더 빠르고 정확했어요. 이후 모든 작업은 --model sonnet으로 명시해서 진입했습니다.
# 프로젝트 폴더 생성 및 파일 복사
mkdir edu22-zoom-project
수동으로 채팅글을 프로젝트 폴더에 넣음
cd edu22-zoom-project
# Sonnet 4.6으로 명시 실행
claude --model sonnet
메시지를 보여주는 컴퓨터 화면의 스크린샷
STEP 1 — 분석·구조 제안만 받기 (HTML 생성 X)
앞선 사례에서와 마찬가지로, 코드 생성을 바로 요청하지 않고 분석과 구조 제안을 먼저 받는 방식을 택했어요. HTML부터 만들면 이후 구조를 바꾸기 어렵고, 분석 단계에서 내가 놓친 링크나 Q&A 쌍이 있는지 먼저 확인하는 것이 중요했습니다.
week1-chat.txt를 읽고 아래를 정리해줘. 아직 HTML은 만들지 마.
1. 이 회차의 핵심 주제 (1줄)
2. 다뤄진 개념/도구 목록
3. 공유된 링크 전부 (제목 추정 + URL)
4. 의미 있는 Q&A나 인사이트 발언 3~5개
5. 강의를 못 들은 사람이 알아야 할 배경지식 3가지
6. 채팅 로그에서 빠진 것 같은 부분(맥락 끊김, 깨진 글자 등)
5번은 채팅에 직접 안 나와도 주제에서 추론해서 적어줘.STEP 2 — CLAUDE.md 생성 (프로젝트 규칙 고정)
/init으로 CLAUDE.md를 자동 생성한 후에 방금 만든 CLAUDE.md를 수정했어요. 파싱 규칙과 작업 원칙을 명시해야 디자인을 일관되게 유지할 수 있기 때문입니다.
이 프로젝트 CLAUDE.md를 아래 기준에 맞춰 다시 만들어줘.
상황:
- 매주 수요일에 Zoom 채팅 로그 파일이 생겨 (week1-chat.txt, week2-chat.txt...)
- 이걸 index.html 하나에 주차별로 쌓아서 Vercel 배포
- 카카오톡 공유 링크로 뿌릴 거라 모바일 인앱 브라우저가 주 환경
꼭 들어가야 할 것:
- 작업 원칙: 내가 OK 하기 전엔 HTML 쓰지 말 것, 주차 두 개 동시에 하지 말 것
- 채팅 파싱 규칙: DM 빼고, 숫자 출석(1/2/3) 빼고, 인사말 빼고
- 파일 구조랑 배포 방법 (vercel --prod)
- 라이브러리는 Pretendard CDN만
디자인 시스템은 나중에 정해서 추가할게.STEP 3 — HTML 초안 생성
구조가 확정된 이후에 HTML을 요청했어요. 이 단계에서는 디자인보다 구조의 정확도에 집중했습니다. 특히 링크 누락 없이 전수 포함되는지, 주차별 주석이 정확히 붙는지를 먼저 확인하고자 했습니다.
좋아. 이제 index.html 초안 만들어줘.
[필수 포함 - 1주차 섹션] ① TL;DR (3줄 요약) ② 학습 목표 (불릿 3~5) ③ 핵심 개념 정리 (못 들은 사람용 짧은 단락) ④ 실습/데모 흐름 (있다면) ⑤ 공유 자료 & 링크 (카드 형태, 새 탭) ⑥ Q&A · 인사이트 ⑦ 다음 주 예고 (있다면)
[필수 포함 - 2~4주차 섹션]
접힌 상태 + "곧 업데이트 예정" placeholder
구조는 1주차와 동일
다 만들면 index.html 경로와 미리보기 방법(브라우저로 어떻게 여는지) 알려줘.STEP 4 — AI 자가 점검
앞선 사례에서 "초안 생성 이후 초보자 관점에서 이해도와 가독성을 다시 점검"한 단계와 유사한 접근이었습니다. 이번에는 디자인 요소에 집중한 5가지 기준으로 먼저 문제를 리스트업하고, 수정은 그다음에 일괄로 진행했습니다.
좋아. 이제 이 페이지를 두 관점에서 다시 점검해줘.
[관점 1] 강의를 못 들은 사람
어디가 이해 어려운지
배경 설명이 부족한 부분은 어디인지
[관점 2] 강의를 들은 사람
어디가 너무 당연한 얘기라 지루한지
어디가 복습 가치가 떨어지는지
먼저 점검 의견만 말해주고, 내가 OK 하면 그때 index.html 수정해줘.STEP 5 — 디자인 시안 5개 받기 (네오브루탈리즘 변형)
1주차 강의에서 제가 Claude 아티팩트로 진행한 네오브루탈리즘 결과물을 보여드렸는데요. 그것을 출발점으로 5가지 변형을 제안받고, 내가 선택한 뒤 개편에 들어가는 방식을 취했습니다. 바로 적용하지 않고 선택지를 먼저 받는 것이 이후 "변경 금지" 고정까지 이어지는 흐름을 만드는 데 중요했습니다.
디자인 바꿀 건데, 지금 바로 바꾸지 말고 5개 시안을 받고 고를 거야.
HTML은 아직 건드리지 마.
네오브루탈리즘 변형 5가지 제안해줘. 각각 색상값이랑 분위기 한 줄씩:
1. 다크 — 어두운 배경 + 형광 포인트
2. 파스텔 — 부드러운 파스텔 톤
3. 흑백 하이콘트라스트 + 형광 1색
4. 밝은 크림 + 오렌 지
5. 미드센추리 빈티지 어스톤
카카오 인앱에서 가장 편하게 읽힐 거 하나만 추천해줘.
내가 고르고 나면 그때 개편 시작하자.STEP 6 — 전면 개편 (밝은 네오브루탈리즘 확정 + CLAUDE.md 고정)
4번 시안으로 결정하였고, 이 단계에서 핵심은 개편 요청과 동시에 /init 한번 더(코드 있는 상태에서) CLAUDE.md에 CSS 변수를 고정하는 것이었습니다. 파일에 명시하지 않으면 다음 세션에서 AI가 다시 다른 방향으로 바꾸는 일이 반복됐습니다.
4번으로 간다. 밝은 크림 + 오렌지.
지금 index.html 전면 개편해줘.
CSS 변수 이걸로 확정:
~~~
그리고 이 CSS 변수 CLAUDE.md 디자인 시스템 섹션에 그대로 박아줘.
"변경 금지" 세 번 써줘. 다음 세션에서도 절대 못 바꾸게.STEP 7 — Vercel CLI 배포 (대화형 질문 답안 포함)
vercel --prod를 처음 실행할 때 한 번만 프로젝트 연결 질문이 나옵니다. 이때 프로젝트 이름 자동 제안값에 --- 연속 하이픈이 포함되면 API 400 오류가 발생했습니다. Name 항목에서 자동제안을 쓰지 않고 edu22-zoom-week1을 직접 입력해서 우회했습니다.
연결이 완료되면 .vercel/project.json이 생성되고, 이후부터는 질문 없이 vercel --prod 한 줄로 바로 배포됩니다.
STEP 8 — 자동 재배포 + 다듬기 + /init 한번 더
클로드에게 보여주면서 프롬프트 계속 요청하였어요. 예시들이에요.
브라우저 개발자 도구로 모바일(iPhone 14, 폭 390px) 화면을 시뮬레이션했을 때
어색한 부분이 있는지 다시 점검해줘.
필요하면 한 번 더 수정해줘.추가 옵션:
- 페이지 상단에 얇은 오렌지 선 (1px) 또는 우측 정렬 작은 점
- 카드 좌측에 4px 오렌지 세로 막대 (호버 시만 표시)
- 본문 코드(claude init 등)는 monospace + 오렌지 배경 살짝
- 푸터에 "GPTers 22기 · 윤스케어&도로시J · last updated YYYY-MM-DD" 회색 작게STEP 9 — 스킬 2종 제작 (단계 분리)
이번 사례의 핵심 단계였습니다. 매주 반복되는 작업을 스킬로 고정해 두면, 다음 세션에서는 트리거 하나만으로 동일한 결과를 재현할 수 있습니다. 이 스킬을 만드는 프롬프트도 클로드에게 요청하였어요.
이 프로젝트의 작업 흐름을 스킬로 만들고 싶어. skill-creator를 사용해줘.
1) zoom-chat-recap (범용)
- 줌 채팅 로그 → 구조화된 분석 결과 (핵심 주제, 도구·개념, 링크 전체, Q&A, 배경지식)
2) study-recap-page (윤스케어 전용)
- 분석 결과 → 노션 토글 스타일 HTML 생성/갱신
- 디자인: 밝은 네오브루탈리즘 (현재 index.html 기준)
- 첫 생성 + 누적 업데이트 둘 다 지원
[중요] 바로 SKILL.md 만들지 말고, 역할 분담·트리거·입출력 명세부터 먼 저 보여줘.
내가 OK 하면 그때 실제 SKILL.md 생성.STEP 10 — 스킬 시뮬레이션 (가짜 데이터로 검증)
실제 파일을 수정하기 전에 가짜 데이터로 전체 파이프라인이 의도한 대로 작동하는지 먼저 점검했습니다. 이 단계를 거치지 않으면 실제 주차 데이터에 적용했을 때 예상치 못한 출력이 나올 수 있습니다.
결과와 배운 점
시행착오 3가지
① Opus 4.7 응답 지연 → claude --model sonnet으로 전환
처음에는 성능이 가장 높은 모델을 쓰는 것이 좋다고 판단했습니다. 그러나 채팅 파싱이나 HTML 생성처럼 반복·변환 중심의 작업에서는 Sonnet 4.6이 더 빠르고 결과도 정확했습니다. Opus는 구조 설계나 복잡한 추론이 필요한 단계에서 활용하는 것이 적합하다고 확인했습니다.
② 디자인 톤 4번 변경 → CLAUDE.md에 CSS 변수 고정으로 해결
다크 테마에서 시작해 미니멀, 라이트 시안, 밝은 네오브루탈리즘 순으로 네 번 바꾸는 과정을 겪었습니다. 매번 새 대화에서 AI가 다른 방향으로 되돌렸고, 구두로 "다음엔 이 스타일로"라고 지시하는 방식은 세션이 바뀌면 효력이 없었습니다. CSS 변수 전체를 CLAUDE.md에 명시하고 "변경 금지"를 세 번 쓴 이후부터는 흔들림이 사라졌습니다.
③ Vercel 프로젝트 이름 오류 (API 400)
vercel --prod 실행 시 자동 제안된 프로젝트 이름에 --- 연속 하이픈이 포함되어 API 400 오류가 발생했습니다. Name 입력 단계에서 자동 제안을 그대로 확인하지 않고 edu22-zoom-week1처럼 직접 입력해서 우회했습니다.
