바이브코딩 입문서

7일 학습 로드맵

어디부터 시작해야 할지 모르겠다면, 하루에 한 주제씩 따라가 보세요.

“어떤 도구를 써야 해?” 입문자의 첫 번째 질문에 답합니다.

“GPT랑 Claude 뭐가 달라?” 입문자의 두 번째 질문에 답합니다.

같은 목표라도 프롬프트를 어떻게 쓰느냐에 따라 결과가 완전히 달라집니다. 여기 예시는 코딩 작업에 쓰는 프롬프트입니다.

모델과 무관한 기본 원칙, 그리고 GPT-5.6처럼 새 모델이 바꾼 것은 AI 프롬프트 업데이트에서 따로 다룹니다.

한눈에 보는 프롬프트 기법 요약. 이것만 기억하세요.

바이브코딩으로 만들어도 이 순서를 알면 결과물이 달라집니다.

랜딩 페이지처럼 화면만 있는 것은 1·2·5단계만 밟아도 됩니다. 로그인이나 데이터 저장이 필요해지면 그때 3·4단계가 따라옵니다.

기능은 됐는데 화면이 어딘가 어설프다면 감각이 부족해서가 아닙니다. 기준이 없어서입니다. 업종이 정해지면 스타일과 색, 움직이는 속도까지 따라옵니다.

오픈소스 디자인 자료 UI/UX Pro Max(MIT)의 업종 데이터에서 여섯 개를 옮겼습니다. 원본에는 업종별 룰이 161개 들어 있습니다.

정답표가 아니라 출발점입니다. 실제로 잘 만든 앱을 몇 개 열어 보고 대조하세요. 예를 들어 원본은 명상 앱에 뉴모피즘을 권하지만, 실제 명상 앱에서 이 스타일을 쓴 사례는 드뭅니다. 룰과 현실이 어긋나면 현실을 따르는 편이 낫습니다.

다 만들었는데 어떻게 공개하지? ▶ 재생을 누르면 GitHub Pages 배포 과정을 단계별로 보여드립니다.

빨간 에러가 무섭다면, 여기서 의미와 해결법을 찾아보세요.

누구나 빠지는 실수. 미리 알면 피할 수 있습니다.