# 바이브코딩에 꼭 필요한 도구를 발견했습니다 — bkit 온보딩 설치 후기
> "바이브코딩을 할 때 아주 좋은, 아니 꼭 필요한 도구인 것 같습니다."
---
오늘 처음 bkit을 설치했습니다.
솔직히 말씀드리면, 설치 전까지는 이게 뭔지 잘 몰랐습니다. 스터디 온보딩 강의 자료를 따라가다 보니 어느새 설치가 돼 있었고, Claude Code 위에서 뭔가 명령어들이 실행되기 시작했습니다.
그렇게 영문도 모른 채 시작된 오늘이, 결국 **"아, 개발이 이런 거구나"** 를 처음으로 느끼는 날이 됐습니다.
---
## 온보딩 강의인데, 실제 서비스처럼 만들어졌습니다
오늘 작업의 목표는 간단했습니다. bkit 강의 사이트의 **랜딩페이지**를 만드는 것이었습니다https://files-us-east-1.t-cdn.net/files/pbd1lXN331MCCCMsFQimT .
스터디장님이 자료를 너무 잘 만들어 주셔서 어려운 점은 없었습니다. 다만 작업하다 보니 "백엔드", "API", "데이터 모델" 같은 처음 보는 용어들이 계속 나왔습니다. 모를 때마다 검색하면서 진행했습니다.
그리고 화면 한켠에선 **토큰이 실시간으로 녹고 있었습니다.**
Claude Code가 파일을 만들고, 코드를 쓰고, 구조를 잡을 때마다 숫자가 줄어드는 게 눈에 보였습니다. 그 사이 저는 계속 **1번을 눌렀습니다.**
> "허용하시겠습니까?" — 네. 네. 네.
---
## 작업 흐름 — bkit PDCA
bkit의 개발 흐름은 이렇게 진행됐습니다.
**1단계 — 프로젝트 초기화**
```
/starter init bkit-landing
```
명령어 하나로 Next.js 프로젝트 구조가 완성됐습니다.
<!-- 스크린샷: 터미널 초기화 화면 -->
---
**2단계 — 설계 (Architecture 선택)**
```
/pdca design bkit-landing
```
bkit이 3가지 구조를 제안했고, 저는 하나를 골랐습니다.
| 옵션 | 방식 | 선택 |
|------|------|------|
| A. Minimal | 파일 최소화 | — |
| B. Clean Architecture | 도메인 레이어 완전 분리 | — |
| **C. Pragmatic** | 섹션/UI/데이터 분리 | ✅ |
<!-- 스크린샷: 아키텍처 선택 화면 -->
---
**3단계 — 구현**
설계대로 13개 파일이 자동으로 만들어졌습니다.
```
src/
components/
sections/ ← Hero, Features, Curriculum, Pricing, Footer
ui/ ← Button, Card (재사용 컴포넌트)
data/ ← 콘텐츠 데이터 분리
```
<!-- 스크린샷: 완성된 랜딩페이지 전체 (스크롤) -->
---
**4단계 — Gap 분석**
```
/pdca analyze bkit-landing
```
설계 문서와 실제 구현을 자동으로 비교해줬습니다.
```
Structural Match : 100%
Functional Match : 93%
Overall : 97% ✅
```
<!-- 스크린샷: Gap 분석 결과 -->
---
## "이렇게 만드는 거구나"의 순간
랜딩페이지가 완성됐을 때 브라우저에 띄워봤습니다.
어디서 많이 보던 디자인이었습니다. 그라데이션 배경의 히어로 섹션, 특징 카드, 커리큘럼 목록, 그리고 **가격표까지.**
그 순간 머릿속에서 뭔가가 연결됐습니다.
> *"아, 수강 사이트들도 이렇게 만드는 거구나."*
인터넷에서 수도 없이 봤던 그 페이지들이 코드 몇 줄과 명령어 몇 개로 만들어진다는 걸 오늘 처음으로 **직접 경험**으로 이해했습니다.
---
## 정리
| 항목 | 내용 |
|------|------|
| 작업 시간 | 약 1시간 |
| 만든 것 | bkit 강의 소개 랜딩페이지 |
| 기술 스택 | Next.js 15.5 · Tailwind CSS · TypeScript |
| 완성도 | Match Rate 97% |
| 1번 누른 횟수 | 셀 수 없음 |
---
## 바이브코딩에 꼭 필요한 도구
오늘 하루를 정리하자면 이 한 마디입니다.
**"바이브코딩을 할 때 꼭 필요한 도구."**
아이디어를 말하면 구조를 잡아주고, 선택지를 주면 제가 고르고, 만들고 나면 얼마나 잘 만들었는지 숫자로 보여줍니다.
개발을 처음 배우시는 분, 빠르게 뭔가를 만들어보고 싶으신 분, 바이브코딩의 흐름을 체계적으로 잡고 싶으신 분께 bkit은 좋은, 아니 **꼭 필요한** 도구가 될 것 같습니다.
---
*오늘도 열심히 1을 눌렀습니다.*
