Bkit 활용하여 AI 리더십 코칭 앱 만들기 (50% 진행)

개발 경험 없는 초보자가 Claude Code + bkit으로 실제 서비스를 만들어가는 과정을 정리했습니다.

우리가 만드는 것

AI 리더십 개발 플랫폼 — 리더십을 키우고 싶은 사람들을 위한 AI 코치 서비스

기술 스택: Next.js + TypeScript + Tailwind CSS + Supabase + Claude API

바이브코딩이란?

코드를 한 줄씩 직접 타이핑하는 대신, AI에게 자연어로 지시해서 코드를 만드는 개발 방식입니다.

기존 방식: 개발자가 코드를 직접 작성
바이브코딩: 개발자가 AI에게 "이런 걸 만들어줘"라고 말하면 AI가 코드 작성

중요한 건 무엇을 만들지 설계하는 능력입니다. 코딩 문법보다 기획·설계 능력이 핵심입니다.

bkit이란?

bkit(바이브코딩 킷) 은 Claude Code에 설치하는 플러그인입니다.

"AI가 만든 코드가 설계대로 맞게 구현됐는지 스스로 검증하는 유일한 Claude Code 플러그인"

bkit이 제공하는 것

9단계 개발 파이프라인  →  무엇을 어떤 순서로 만들지 안내
PDCA 사이클           →  계획→설계→구현→검증 품질 관리
자동화 에이전트        →  전문 역할별 AI가 각 단계를 담당

9단계 파이프라인

Phase 1  스키마/용어    →  데이터 구조 정의
Phase 2  컨벤션         →  코드 작성 규칙
Phase 3  목업           →  화면 프로토타입 (HTML)
Phase 4  API            →  백엔드 연동
Phase 5  디자인 시스템  →  재사용 컴포넌트
Phase 6  UI 구현        →  실제 화면 완성
Phase 7  SEO/보안       →  검색최적화·보안
Phase 8  리뷰           →  품질 점검
Phase 9  배포           →  Vercel 배포

오늘은 Phase 1~3 완료 + Phase 4 준비까지 진행했습니다.

오늘의 진행 과정

STEP 1. 프로젝트 기획 확정 (15분)

AI와 대화하며 아래 내용을 결정했습니다.

결정한 것들:

• 대상 사용자: 외부 고객 (유료 서비스 목표)

• AI 코칭: Claude AI 활용

• 플랫폼: 웹 앱 (PC + 모바일 브라우저)

• 넛지 방식: 카카오 알림톡

• 비즈니스 모델: 추후 결정 (MVP 먼저)

핵심 인사이트:

처음부터 모든 걸 정할 필요 없습니다. "MVP 먼저, 나머지는 나중에" 전략이 초보자에게 최적입니다.

STEP 2. Phase 1 — 스키마/용어 정의 (20분)

코딩 전에 "데이터가 어떻게 생겼는가" 를 먼저 정의합니다.

왜 해야 하나? 데이터 구조를 미리 정하지 않으면 나중에 전부 다시 짜야 합니다. 집을 짓기 전에 설계도 그리는 것과 같습니다.

결과물: 10개 데이터 모델 정의

User (사용자)
 ├── Assessment (진단) — 40문항 설문
 │    ├── AssessmentResponse (문항별 응답)
 │    └── AssessmentReport (AI 분석 리포트)
 ├── DevelopmentPlan (개발계획)
 │    └── ActionItem (액션아이템)
 └── CoachingSession (AI 코칭 세션)
       └── CoachingMessage (대화 메시지)

AI가 추천한 리더십 역량 8개:

산출물: docs/01-plan/schema.md

STEP 3. Phase 2 — 코딩 컨벤션 + 프로젝트 생성 (15분)

코딩 컨벤션이란? 팀에서 코드를 일관되게 작성하기 위한 약속입니다. 혼자 개발해도 나중의 나 자신을 위해 필요합니다.

정의한 규칙들:

파일 이름: PascalCase (예: AssessmentCard.tsx)
변수 이름: camelCase (예: assessmentScore)
상수 이름: UPPER_SNAKE_CASE (예: MAX_SCORE)
커밋 메시지: feat/fix/docs 접두사 사용

프로젝트 폴더 구조:

src/
 ├── app/          # 페이지들
 ├── components/   # 재사용 UI 컴포넌트
 ├── lib/          # 외부 서비스 연동
 └── types/        # 타입 정의

Next.js 프로젝트 자동 생성: AI가 아래 명령어 하나로 프로젝트를 만들어줬습니다.

npx create-next-app@latest leadership-platform --typescript --tailwind --eslint --app --src-dir

산출물: docs/01-plan/conventions.md + Next.js 프로젝트 폴더

STEP 4. Phase 3 — 화면 목업 (30분)

목업이란? 실제 기능 없이 화면이 어떻게 생겼는지 HTML로 미리 만들어 보는 것입니다. 개발 전에 방향을 확인하는 용도입니다.

만든 화면 6개:

① 로그인        →  이메일/비밀번호 입력 화면
② 대시보드      →  진단 CTA, 기능 카드, 이번 주 액션 요약
③ 진단 설문     →  진행률 바, 5점 척도 이모지 선택
④ 진단 리포트   →  레이더 차트, 역량별 점수 바, AI 요약
⑤ AI 코칭       →  채팅 UI, 추천 질문 버튼
⑥ 액션아이템    →  상태별 목록 (대기/진행중/완료)

진단 리포트 화면 (예시):

┌─────────────────────────────────┐
│  종합 점수: 3.6 / 5.0           │
│  강점: 소통(4.6), 팀협력(4.2)   │
│  개선: 전략적사고(2.4)          │
├─────────────────────────────────┤
│         [레이더 차트]            │
│    자기인식 ●                   │
│   전략적사고   소통              │
│    변화관리   의사결정           │
└─────────────────────────────────┘

핵심 포인트: 목업 단계에서 UI/UX를 미리 확인하면, 실제 코딩 중에 "이 화면 어떻게 하지?"로 시간 낭비하는 것을 막을 수 있습니다.

산출물: mockup/ 폴더 (브라우저에서 바로 열어볼 수 있는 HTML 6개)

STEP 5. Phase 4 준비 — 백엔드 환경 구성 (20분)

백엔드란? 사용자 데이터를 저장하고 로그인을 처리하는 서버 역할입니다. bkit은 BaaS(Backend as a Service) 를 사용해서 서버를 직접 만들지 않고도 백엔드 기능을 쓸 수 있게 합니다.

원래 계획 vs 실제:

바이브코딩의 현실: 계획대로 안 될 때 빠르게 대안을 찾는 것도 능력입니다.

Supabase를 선택한 이유:

• 무료 플랜 제공

• 로그인·데이터베이스·파일 저장 모두 제공

• Next.js 공식 지원

• 한국어 자료 풍부

설치한 패키지:

npm install @supabase/supabase-js @supabase/ssr @anthropic-ai/sdk

오늘의 중단 지점: Supabase API 키를 .env.local에 입력하는 단계 — 다음 세션에 5분이면 완료됩니다.

오늘의 핵심 배움

1. 코딩 전에 설계가 먼저다

❌ 잘못된 순서: 바로 코딩 시작 → 막히면 다시 → 구조가 엉킴
✅ 올바른 순서: 스키마 → 컨벤션 → 목업 → 코딩

2. MVP 사고방식

처음부터 완벽한 것을 만들려 하지 마세요. "지금 당장 필요한 것 + 나중에 추가할 것"을 분리하세요.

오늘도 카카오 알림톡, 결제 기능은 2단계로 분리했습니다.

3. AI는 설계를 도와주는 파트너

AI가 혼자 다 해주는 게 아닙니다.

• 내가 해야 할 것: 무엇을 만들지 결정, 방향 판단, 검토

• AI가 해주는 것: 코드 작성, 문서 생성, 오류 해결

4. 막히면 대안을 찾으면 된다

bkend.ai가 안 되면 Supabase. Supabase가 안 되면 Firebase. 도구는 바꿀 수 있습니다. 중요한 건 목적지입니다.

다음 세션 예고

참고: 오늘 사용한 도구