Claude Code 슬래시 스킬로 며칠 걸리던 운영허브를 30분 만에 자동 생성한 후기

B2B 교육 사업을 운영할 때마다 한 번씩 만들었던 운영허브가 있어요. 일정·강사·자료·과제·설문이 다 한 페이지에 모이는 거. 사업이 새로 생길 때마다 HTML 파일 하나를 처음부터 짜고 있었는데, 한 번에 며칠씩 들어가더라고요. 이번엔 Claude Code 슬래시 스킬 하나로 그 작업을 한 자리에서 끝냈고, 만들어 둔 템플릿으로 바로 다음 사업까지 적용했어요. 시간으로 따지면 며칠 → 30분.

사업마다 운영허브를 처음부터 짜던 게 못 견디겠더라

원래는 사업이 결정되면 단발 HTML 한 장을 새로 짰어요. 일정 표 넣고, 강사 정보 넣고, 자료 링크 박고, 운영자/수강생 페이지 따로 만들고… 매번 같은 구조인데 매번 처음부터 짜야 해서 시간이 어이없게 갔어요. 디자인도 매번 미묘하게 달라지고요.

"이거 한 번에 자동 생성되게 만들 순 없나"가 머릿속에 늘 있었는데, 이번에 받은 Claude Code 슬래시 스킬이 정확히 그걸 했어요.

1단계 — 슬래시 스킬 한 번 치니까 6단계 자동 진행

작업 시작은 이 한 줄이었어요.

방금 설치한 .claude/skills/.../SKILL.md 를 읽고, 그 순서대로 같이 진행해 줘.

그러면 슬래시 스킬이 6단계를 알아서 끌고 갑니다.

• 입력 스키마(고객사·교육명·일정·강사·옵션 모듈)

• 운영자/수강생 페이지 분리

• 차수 URL 동기화 (?cohort=N)

• 자료 업로드 API (Vercel Blob)

• 한글 폰트 + 디자인 토큰

• 마지막에 Vercel 배포까지

중간중간 결정해야 할 부분은 스킬이 옵션을 띄워줘서 고르기만 하면 됐어요. "단일 차수로 갈까요, 다차수로 갈까요" 같은 거. 두 시간쯤 뒤에 라이브 사이트 URL 하나가 떨어졌어요.

2단계 — 첫 적용은 다음 사업, 폴더 복제 + 데이터만 교체

여기서 진짜 효과가 나왔어요. 만든 템플릿 폴더를 통째로 복사해서 다음 사업 폴더로 만들고, 사업 데이터(강사·일자·장소·과제 일정 등)만 갈아끼우면 끝.

응 하나 해보자 [다음 사업]

라고 던지니까, AI가 메모리에 적어둔 사업 정보를 알아서 끌어와서 자동으로 다 채워줬어요. 강사 두 명, 4일 일정, 장소, 모듈 상태 표, 이해관계자 6명, 보안 안내 같은 거. 여기까지 30분.

운영자 콘솔에는 9개 탭(교육 개요 / 커리큘럼 / 시간표 / 강사 가이드 / 코칭 가이드 / 과제·루브릭 / 설문 / 문의 / 메시지 템플릿)이 자동으로 깔렸고, 메시지 템플릿엔 카톡 공지용 문구 + 복사 버튼까지 있었어요.

3단계 — 디자인이 살짝 어긋났다, 그래서 다시

여기서 막혔어요. AI가 만든 디자인이 제가 카피하고 싶었던 레퍼런스 사이트와 미묘하게 달랐어요. 색이 살짝 다르고, 탭 헤더에 제가 안 넣은 이모지가 임의로 박혀 있고, 한 탭 안에 카드가 큼지막한 한 덩이로 뭉쳐 있고.

응 좋아좋아 근데 ui를 기존 것과 동일하게 해줘

처음엔 그냥 이 한 줄로 해결될 줄 알았어요. 그런데 결과가 또 어긋났어요. 이유가 뭔가 봤더니, AI가 레퍼런스 사이트를 분석할 때 URL만 보고 디자인을 추정하고 있었어요. 색 hex 코드 같은 건 추측. 그러니 정확도가 떨어졌던 거예요.

전환은 이 순간이었어요. "URL만 보고 추측하지 말고, 그 사이트의 실제 코드를 받아와서 그대로 옮겨" 라고 다시 지시했더니, AI가 사이트의 HTML을 통째로 받아와서 거기 박혀 있던 CSS 색 토큰 18개를 그대로 가져왔어요. 그제서야 색·헤더·탭 디자인이 거의 똑같아졌습니다.

4단계 — 탭 헤더 이모지 빼고, 항목별로 카드 분리

그래도 한 가지 더 어긋난 게 있었어요. AI가 자기 취향대로 탭 라벨에 📋 📚 🕐 같은 이모지를 또 박았고, 한 탭 안의 콘텐츠를 큰 카드 하나에 뭉쳐서 보여줬어요.

목차에 이모지는 빼. 그리고 항목별로 섹션이 구분되게 해줘 (기존 것 참고해)

이 지시 이후로는 깔끔해졌어요. 탭 라벨에서 이모지 빠지고, 각 탭 안 콘텐츠가 작은 카드 3~8개로 항목별로 잘게 나뉘었습니다.

결과

며칠짜리 작업이 30분으로 줄었다는 수치도 크지만, 진짜 체감 변화는 다른 데 있었어요. "운영허브 하나 만드는 게 부담이 아니다" 라는 감각. 사업 하나가 새로 정해지면 그날 안에 라이브 URL이 나와서 강사·고객사에게 바로 공유할 수 있어요.

AI 활용 팁!

(1) "기존 양식 그대로 만들어줘"의 정확도는 코드 접근에서 갈린다 같은 "동일하게 카피해줘" 지시여도, 카피하려는 양식의 실제 코드를 AI가 읽을 수 있느냐에 따라 결과가 완전히 달라져요. 본인이 직접 만든 양식이라 코드를 갖고 있다면 그대로 줘서 카피시킬 때 정확도가 가장 높아요. URL이나 스크린샷만 주면 AI가 색·구조를 추정하면서 미묘하게 어긋나요. 레퍼런스가 외부 사이트면 raw HTML을 직접 받아서 줘야 정확.

(2) 구현 시작 전에 '추구하는 스타일'을 한 번 더 정렬해라 이게 가장 큰 교훈이에요. AI는 모호한 지시를 받으면 자기 취향대로 채워 넣어요(예: 이모지 임의 추가). 사후에 1시간 고치는 것보다 시작 전에 10분 더 묻고 정렬하는 게 훨씬 싸요. 슬래시 스킬에 명확하지 않은 부분이 있으면 AI 쪽이 먼저 "이건 어떻게 가나요?"라고 캐묻는 단계가 한 번 더 들어가면 좋을 것 같아요.

(3) 첫 적용 사업을 같은 세션에서 같이 진행하면 이득 템플릿만 만들고 끝내지 말고, 그 자리에서 다음 사업 하나를 골라 바로 적용해 보세요. 어디가 미흡한지 그날 안에 드러나서 한 번에 다 고쳐집니다. 며칠 뒤에 적용하면 기억이 휘발돼서 다시 작업하는 시간이 생겨요.

바로 쓸 수 있는 프롬프트

다음 사업 [고객사명]에 [템플릿 폴더명] 템플릿을 복제해서 적용해 줘. 폴더 통째로 새 폴더로 복사하고, 사업 데이터(강사·일정·장소·이해관계자·과제 일정)만 갈아끼워. 메모리에 적어둔 사업 정보 + Linear/노션 카드 기반으로 자동 채우고, 비번 게이트는 [비번] 으로 설정. 작업 끝나면 Vercel에 production 배포까지.

[고객사명], [템플릿 폴더명], [비번] 은 본인 상황에 맞게 변경하세요.

이 운영허브를 [레퍼런스 사이트 URL] 과 디자인을 동일하게 맞춰줘. 단, URL만 보지 말고 그 사이트의 raw HTML을 curl 같은 걸로 받아서 거기 박혀 있는 CSS 토큰(색·폰트·여백)을 그대로 가져와. 추정 금지. 카피한 뒤에 탭 라벨에 임의로 이모지 추가하지 말 것 — 원본 그대로.

[레퍼런스 사이트 URL] 은 본인 상황에 맞게 변경하세요.