[미니] 3분 만에 HTML 전자책 15쪽 자동 생성한 방법

배경

"Claude Code로 전자책을 만들어보겠습니다."

스터디 첫 시간, 이 한마디에 솔직히 반신반의했다. 전자책이라면 디자인 시스템 잡고, 콘텐츠 선별하고, HTML/CSS로 15쪽 분량을 코딩해야 하는 작업인데 — 그걸 라이브로, 그것도 3분 안에?

코딩/개발에 관심이 있어서 GPTers 21기 Claude Code 스터디에 참여했다. 터미널에서 AI와 대화하면서 코딩한다는 개념이 흥미로웠고, 실제로 뭘 할 수 있는지 직접 보고 싶었다. 그런데 첫 체험이 전자책이라니, 예상 밖이었다.

ALT

클로드 코드(claude code)라는 단어가 있는 흰색과 주황색 페이지

과정

입력한 건 딱 두 가지

터미널에서 /gpters-21th-hello를 실행하니 두 가지를 물어봤다.

1. 이름이 뭔가요? → "sangsu"

2. 어떤 분야에 관심 있으세요? → "코딩/개발" 선택

끝이었다. 진짜로 이게 전부였다.

그 뒤에 일어난 일

내가 "코딩/개발"을 선택한 순간, Claude Code가 뒤에서 엄청난 양의 작업을 자동으로 처리하기 시작했다.

1. 사례 DB 스캔 — GPTers 커뮤니티의 32개 사례 중 코딩/개발 카테고리 17개를 추출하고, 그 중 내용이 가장 풍부한 상위 5개를 선별했다. Pencil.dev로 와이어프레임 만든 사례, PDCA로 6일 만에 서비스 배포한 사례, 7일 만에 교육 플랫폼 만든 사례 등.

2. 팁 선별 — 47개 실전 팁 중 코딩/개발에 특화된 10개를 골랐다. Plan Mode 활용법, 디버깅 팁, git 워크플로우 같은 것들이 우선순위로 올라왔다.

3. 커리큘럼 요약 — 4주치 스터디 로드맵을 읽어서 타임라인으로 정리했다.

4. HTML 생성 — 이 모든 콘텐츠를 B5 White Clean이라는 디자인 시스템(오렌지 강조색 + 흰 배경 + 매거진 타이포그래피)에 맞춰 15쪽짜리 단일 HTML 파일로 조립했다.

터미널에서 진행 상황이 쭉 흘러가는 걸 보고 있었는데, 파일 7개를 동시에 읽고 분석하는 과정이 실시간으로 보였다. "아, 이게 AI가 코드를 짜는 거구나" 하는 실감이 났다.

결과물 구성

완성된 gpters-21th-sangsu.html은 이런 구조였다:

ALT

한국 음악 플레이어 - 스크린샷

결과

브라우저에서 open gpters-21th-sangsu.html 한 줄이면 바로 열리고, Ctrl+P로 PDF 변환도 된다. 외부 CDN 없이 단일 파일이라 오프라인에서도 문제없다.

배운 점

"스킬"이라는 개념이 핵심이었다

처음엔 "AI가 전자책을 만들어준다"는 게 인상적이었는데, 조금 더 생각해보니 진짜 포인트는 스킬이었다. 누군가가 /gpters-21th-hello라는 스킬을 미리 설계해뒀기 때문에, 나는 이름만 입력하면 됐던 거다.

이건 곧 나도 이런 스킬을 만들 수 있다는 뜻이다. 매주 반복하는 보고서 작성, 코드 리뷰, 데이터 정리 같은 작업을 스킬로 만들어두면 — 다음부터는 슬래시 명령어 하나로 끝난다.

프롬프트 한 줄의 힘

사실 내가 입력한 건 선택지 2개뿐이었다. 그런데 그 2개의 입력이 "코딩/개발 관심자에게 맞는 사례 5개 + 팁 10개 + 디자인 시스템 + 15쪽 HTML"이라는 결과로 이어졌다. 적은 입력으로 큰 결과를 만드는 게 AI 도구의 진짜 가치라는 걸 체감했다.

Claude Code는 코딩 도구가 아니라 자동화 플랫폼

터미널에서 코드를 짜주는 도구라고만 생각했는데, 실제로는 파일을 읽고, 분석하고, 조합하고, 생성하는 전체 워크플로우를 자동화하는 플랫폼이었다. 코딩을 못해도 스킬만 잘 설계하면 복잡한 산출물을 만들 수 있다는 게 4주 스터디가 기대되는 이유다.