21기 주1회 빌드 (황인준님) 강의 요약 정리 및 프로필 파일 및 전자책 자동화 실습

소개

21기 주1회 빌드 (황인준님) 강의 내용과 함께 프로필 파일 및 전자책 자동화 실습을 해보았습니다.

진행 방법

아이폰 녹음, 아이폰 전사, 클로드 코드 요약 정리,

Claude Code + bkit으로 코딩 몰라도 웹사이트 만든 이야기

소개

2026년 3월 18일, bkit 스터디 1주차 강의를 들었습니다.
강사는 황인준 님, 주제는 "Claude Code + bkit으로 매주 쳐내는 개발 스터디"입니다.
4주 동안 매주 결과물 하나씩 만들어내는 방식으로 진행됩니다.

진행 방법

강의 전에 예습 정리를 먼저 했고, 강의 중에 직접 따라 실습했습니다.
Claude Code가 보조 역할을 해줬기 때문에 실습 속도가 놀라울 정도로 빨랐습니다.

Claude Code + bkit으로 웹사이트 하루 만에 만들기

— 전반부는 "PDCA 방법론과 bkit 개념", 후반부는 "실제로 내 웹사이트 만들기"

실습 결과:

ALT

한국어로 된 웹사이트의 홈페이지

1. 한 줄 요약

코딩을 모르는 사람도 Claude Code + bkit이라는 도구 조합으로
기획부터 웹사이트 완성까지 하루 안에 할 수 있다는 것을 직접 경험했습니다.

2. 왜 이 강의가 인상적이었나

저는 그동안 "개발은 코딩을 배워야 한다"는 벽을 느끼고 있었습니다.
ChatGPT나 Claude에게 코드를 부탁해도, 무엇을 어떻게 물어봐야 하는지 몰랐고,
결과물을 어디에 넣어야 하는지도 막막했습니다.

그런데 이번 강의에서는 그 벽이 허물어지는 느낌을 받았습니다.

특히 기억에 남은 점은 다음과 같습니다.

• AI 도구를 하나씩 쓰는 것이 아니라, 흐름(파이프라인)으로 연결하면 훨씬 강력하다는 점

• bkit이라는 도구가 Claude Code 위에서 작동하는 '개발 방법론 플러그인'이라는 점

• Plan → Design → Do → Check → Act 순서만 따라가면 누구든 결과물을 낼 수 있다는 점

• 심지어 저처럼 코딩 비전공자도 웹사이트를 당일에 만들 수 있다는 것을 실제로 경험했다는 점

3. 전반부: bkit이란 무엇인가

3-1. bkit은 Claude Code의 개발 방법론 플러그인이다

bkit을 한 줄로 설명하면 이렇습니다.
"Claude Code가 뭘 어떻게 개발해야 하는지 모르는 상황을 없애주는 가이드 시스템"

Claude Code 자체는 매우 강력하지만, 혼자 쓰면 어디서 시작해야 할지 막막합니다.
bkit은 그 시작점을 잡아줍니다.

/starter    → 정적 웹사이트 시작 (비개발자용)
/dynamic    → 로그인·DB 있는 앱 시작
/enterprise → 대규모 서비스 시작

이 세 가지 레벨 중 하나를 고르면, 그 수준에 맞게 Claude Code가 다르게 행동합니다.

3-2. PDCA 사이클: 개발판 업무 루틴

bkit의 핵심은 PDCA 사이클입니다.

Plan  → 기획 문서 작성
Design → 설계 문서 작성
Do    → 코드 구현
Check → 검증 (설계대로 됐는지 확인)
Act   → 개선

처음에는 "저한테 왜 개발 방법론이 필요하지?"라고 생각했습니다.
그런데 강의를 들으면서 이해가 됐습니다.

AI에게 그냥 "웹사이트 만들어줘"라고 하면 결과가 제멋대로입니다.
하지만 Plan 문서(내가 뭘 만들건지 정리)가 있으면,
AI가 그 문서를 기반으로 일관되게 만들어줍니다.
AI를 잘 쓰는 핵심은 좋은 기획 문서를 먼저 만드는 것이라는 깨달음이었습니다.

3-3. Claude Code + Gemini CLI 병행 전략

이번 강의에서 흥미로웠던 점은 Claude Code 하나만 쓰는 것이 아니라
Gemini CLI도 함께 쓰는 전략이었습니다.

• Claude Code: 전략적 판단, 파일 생성, 복잡한 작업

• Gemini CLI: 빠른 질문, 코드 검토, 실시간 보조

두 AI를 병행하면 작업 속도가 빨라지고 서로 교차 검증도 됩니다.
이 "멀티 AI 전략"은 저한테 새로운 개념이었습니다.

4. 후반부: /starter로 내 웹사이트 만들기

4-1. 명령어 하나로 프로젝트 뼈대가 생긴다

강의 실습 단계에서 가장 먼저 한 것은 /starter init my-portfolio option a 명령이었습니다.

Claude Code 터미널에서 이 명령 하나를 입력하자,
아래 파일들이 자동으로 생겼습니다.

my-portfolio/
├── index.html     ← 메인 페이지
├── about.html     ← 소개 페이지
├── css/style.css  ← 스타일시트
├── js/main.js     ← 자바스크립트
├── images/        ← 이미지 폴더
└── docs/          ← PDCA 문서 폴더

이 구조가 저절로 만들어지는 것을 보고 "이게 되는구나"라는 생각이 들었습니다.
저는 HTML이나 CSS를 처음부터 작성하지 않았습니다.

4-2. 내가 실제로 만든 것

이날 제가 만든 결과물은 제 이름으로 된 포트폴리오 웹사이트였습니다.

원샷 | 포트폴리오
├── 헤더: 원샷 로고 + 홈/소개 내비게이션
├── 히어로: "안녕하세요, 원샷입니다 / 심리상담사 · AI 활용 실험가 · 작가"
├── 소개 카드 3개: 심리상담 / AI 실험 / 글쓰기
└── 푸터: © 2026 원샷

코딩 한 줄 직접 안 썼는데 페이지가 완성됐습니다.

4-3. Vercel 배포 개념 — 내 파일이 인터넷에 올라가는 원리

배포가 뭔지 이번에 처음 제대로 이해했습니다.

예전에는 "서버를 사야 한다"고 막연하게 생각했는데,
Vercel을 쓰면 내 컴퓨터 파일을 GitHub에 올리고,
Vercel이 그 파일을 자동으로 인터넷에 올려줍니다.
무료로, 자동으로, 몇 분 안에.

내 컴퓨터 파일
   ↓ (git push)
GitHub 저장소
   ↓ (자동 감지)
Vercel 서버
   ↓
https://my-portfolio.vercel.app (인터넷에서 접속 가능)

"파일 올리면 웹사이트가 된다"라는 감각이 이제야 생긴 것 같습니다.

5. 핵심 인사이트

5-1. AI는 도구가 아니라 협업 파트너다

지금까지 저는 ChatGPT나 Claude에게 "이거 해줘"라고 부탁하는 방식으로 썼습니다.
하지만 Claude Code는 대화가 아니라 협업입니다.

내가 기획하고 → Claude Code가 실행하고 → 내가 검토하고 → Claude Code가 수정합니다.
이 루프가 자연스럽게 작동할 때 결과물이 나옵니다.
AI를 잘 쓴다는 것은 프롬프트 스킬이 아니라 이 협업 루틴을 갖는 것이라는 생각이 들었습니다.

5-2. 명령어 하나에 경험이 축적된다

/starter init my-portfolio라는 명령어 하나에는
수많은 개발 모범 사례가 담겨 있습니다.
파일 구조, 네이밍 규칙, 초기 세팅 방식이 이미 정제되어 있는 것입니다.

저는 그 모범 사례를 직접 공부하지 않고도,
커맨드 하나로 그 결과를 사용할 수 있었습니다.
이것이 "AI 네이티브 개발"의 본질이라는 느낌이었습니다.

5-3. 4주에 4개의 결과물이 가능한 이유

이번 스터디의 커리큘럼은 이렇습니다.

이 속도가 가능한 이유는 하나입니다.
반복 작업(구조 설계, 파일 생성, 기본 코드)을 Claude Code + bkit이 대신하고,
나는 방향 결정과 검토에만 집중하기 때문입니다.

6. 나의 프로필 — 제가 이날 한 것들

강의 내용에 더해, 저는 이날 몇 가지를 직접 실습했습니다.

1) 도구 세팅 완료

Gemini CLI는 Google 계정으로 로그인하여 Google One AI Pro 구독을 연결했습니다.
터미널에서 gemini를 입력하면 바로 대화가 됩니다.

2) 나의 포트폴리오 웹사이트 생성

/starter init my-portfolio option a 명령으로 HTML/CSS/JS 기반 포트폴리오를 만들었습니다.
히어로 섹션에 "심리상담사 · AI 활용 실험가 · 작가"를 소개하는 3개 카드가 들어갔습니다.
나만의 역할을 웹사이트로 정리해본 것이 의미 있었습니다.

ALT

한국어로 된 웹사이트의 홈페이지

3) 전자책 자동 변환 파이프라인도 실습

이날 함께 진행한 또 다른 실습은 전자책 만들기였습니다.
"전자책 발행 자동화"를 주제로 마크다운 원고를 직접 썼고,
pandoc 명령어 한 줄로 EPUB 파일로 변환했습니다.

pandoc 전자책발행자동화.md -o 전자책발행자동화.epub \
  --css=epub-style.css \
  --metadata title="전자책 발행 자동화" \
  --metadata author="원샷" \
  --standalone

옵시디언에서 마크다운으로 원고를 쓰고, Claude Code가 파일을 관리하고,
pandoc이 EPUB으로 변환하는 이 흐름이 "전자책 발행 자동화 파이프라인"입니다.

저는 이전에 "어머니 하나 사드릴까"를 이 방법으로 출판한 적이 있습니다.
이번엔 그 경험을 정리해서 다른 사람도 따라 할 수 있는 형태로 만들었습니다.

ALT

마크다운 - 스크린샷 - 한국어

7. 이 강의를 듣고 해보고 싶은 것

1) Week 2 실습: 로그인 + DB 있는 앱 만들기
정적 웹사이트는 됐으니, 다음 주에는 실제 데이터가 저장되는 앱을 만들어볼 것입니다.
심리상담 관련 간단한 체크리스트 앱 아이디어가 있습니다.

2) 내 포트폴리오를 Vercel에 배포하기
이날 만든 포트폴리오를 실제 인터넷 주소를 가진 웹사이트로 올려볼 것입니다.
GitHub 연동부터 도전해봅니다.

3) bkit PDCA 사이클 완주해보기
Plan 문서 → Design 문서 → Do → Check → Act 전 과정을 한 번 제대로 경험해보고 싶습니다.
아직 Do 단계까지만 해봤는데, Check(검증)와 Act(개선) 과정이 어떻게 되는지 궁금합니다.

8. 마무리

솔직히 말하면, 강의 전에는 "나 같은 비개발자가 웹사이트를 직접 만든다"는 것이
현실적으로 가능한 일이라고 느껴지지 않았습니다.

그런데 이날 실제로 해봤습니다.
명령어 입력 몇 번에, 포트폴리오 뼈대가 완성됐습니다.
전자책도 마크다운 원고 하나에서 EPUB 파일이 나왔습니다.

제가 한 일은 방향을 정하고 내용을 채운 것이고,
나머지 반복 작업은 Claude Code + bkit이 대신했습니다.

이것이 지금 AI를 잘 쓴다는 것의 의미라는 생각이 들었습니다.
코딩을 배우는 것이 아니라, AI와 협업하는 루틴을 만드는 것.

AI 시대에 필요한 능력은 코딩 실력이 아니라,
내가 무엇을 만들고 싶은지 명확하게 정의하는 능력이다.

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

내가 몰라도 클로드 코드를 시키면 된다.

도움 받은 글 (옵션)

21기 주1회빌드 OT (황인준님)