# 기초부터 탄탄하게, 바이브코딩 학습페이지 만들기
> 코딩을 전혀 몰라도 괜찮다. AI와 대화하는 것만으로 웹사이트를 만든 두번째 도전의 기록.
---
## 나는 누구인가
나는 개발자가 아니다. 코딩 교육을 받아본 적도 없고, HTML이 뭔지도 몰랐다. 그저 "AI로 코딩을 대신할 수 있다"는 말을 어디선가 듣고 반신반의하며 시작했다.
목표는 하나였다. 바이브코딩을 배우고 싶은 입문자들을 위한 학습 페이지를 만들기. 역설적이게도, 바이브 코딩을 배우기 위해 바이브코딩으로 페이지를 직접 만들기로 했다.
---
## 어떻게 시작했나
특별한 준비는 없었다. Claude Code를 열고 원하는 것을 말로 설명했다.
> "코딩 지식이 전혀 없는 입문자를 위한 바이브코딩 학습 페이지를 만들고 싶어. 초보자가 어려워할 용어 설명, 바이브코딩의 설계 및 실행 단계, 단계별 추천 도구를 담아줘. 디자인은 다크 네이비 계열로 모던하게."
그게 전부였다. 코드를 짠 게 아니라 기획서를 말로 전달한 것이다.
---
## 무엇이 만들어졌나
약 10분 후, index.html 파일이 생성됐다. 브라우저에서 열자 실제 웹사이트가 나타났다.
### 완성된 페이지의 구성
1. 핵심 용어 사전
프롬프트, LLM, IDE, API, 배포 등 15개 용어를 일상 언어로 설명. "API는 기능을 빌려오는 문"처럼 누구나 이해할 수 있는 표현으로 풀어냈다.
2. 단계별 프로세스
아이디어 구체화 → 화면 설계 → 개발 환경 → 코드 생성 → 테스트 → 배포까지 6단계를 카드 형태로 정리했다.
3. 추천 도구 목록
각 단계마다 최우선 추천 도구와 그 이유, 대안 도구들을 우선순위 순으로 구조화했다.
4. 생각의 나무
각 단계와 핵심 용어, 도구가 어떻게 연결되는지를 시각적인 트리 구조로 표현했다. 왼쪽 가지는 핵심 용어, 오른쪽 가지는 사용 도구다.
---
## 실제로 어떤 대화를 나눴나
단순히 "만들어줘" 한 번으로 끝난 게 아니었다. 결과물을 보고 피드백을 주고받는 반복 과정이 핵심이었다.
- "바이브코딩 개 념 설명은 빼줘" → 불필요한 섹션 제거
- "추천 도구는 이유도 같이 써줘" → 내용 구체화
- "생각의 나무처럼 구조화해서 보여줘" → 새 섹션 추가
코드를 수정한 게 아니라 말로 방향을 잡은 것이다.
---
## 느낀 것
잘 된 것
- 코드를 전혀 몰라도 원하는 결과물이 나왔다
- 디자인, 구조, 내용 모두 대화로 조정 가능했다
- 첫 결과물이 나오는 데 10분도 걸리지 않았다
예상보다 중요했던 것
- 구체적으로 말할수록 결과가 좋았다. "예쁘게 만들어줘"보다 "다크 네이비 컬러로 모던하게"가 훨씬 나은 결과를 냈다
- 한 번에 완성하려 하지 않는 것. 큰 틀을 먼저 잡고, 세부 요소를 하나씩 다듬는 방식이 효과적이었다
- 피드백이 곧 개발이었다. 결과물을 보고 말로 수정 요청하는 것 자체가 개발 행위였다
---
## 다음 단계
페이지는 만들어졌다. 이제 이것을 실제 인터넷에 올려 누구나 접근할 수 있게 하는 배포 단계만 남았다. Vercel을 사용하면 GitHub에 연동하고 클릭 몇 번으로 끝난다.
코딩을 배운 게 아니라, AI와 협업하는 방법을 배웠다. 그게 바이브코딩이었다.
