AX First Step · Week 1
AI가 코드를 짠다
바이브코딩
코딩을 배우는 게 아닙니다.
AI와 대화해서 서비스를 만드는 법을 배웁니다.
강의 2시간
실습 3시간
Why Now
왜 지금이 기회인가
개발자가 코드를 짜는 시대에서
누구나 AI에게 시키는 시대로 넘어왔습니다.
"코딩을 못하면
디지털 전환은 남의 일이다"
— 2년 전 상식
✕
Vibe Coding
바이브코딩이란
❌
기존 방식
Python, JavaScript 문법을 공부하고, 코드를 직접 작성한다. 에러가 나면 Stack Overflow를 뒤진다.
✅
바이브코딩
원하는 것을 말로 설명한다. AI가 코드를 짜고, 에러도 스스로 고친다. 나는 방향만 잡는다.
코딩 실력이 필요한 게 아닙니다.
내가 원하는 걸 명확히 설명하는 능력이 필요합니다.
실제 대화 예시
이렇게 대화합니다
나: 고객이 폼을 작성하면 이메일로 알림이 오는
간단한 문의 페이지 만들어줘
AI: HTML 파일과 이메일 발송 코드를 만들겠습니다.
어떤 필드가 필요한가요? (이름, 연락처, 내용?)
나: 회사명, 담당자, 전화번호, 문의내용
AI: 완성했습니다. 파일을 저장했으니 확인해보세요.
ENV
환경 설정
AI가 일하려면
작업대가 필요합니다
Node.js와 Claude Code — 이 두 가지가 핵심입니다.
핵심 도구 2가지
⚙️
Node.js
자바스크립트를 컴퓨터에서 실행하는 엔진. AI가 만든 코드를 실제로 돌리는 환경.
→ 설치만 하면 됩니다. 사용법은 몰라도 됩니다.
🤖
Claude Code
Anthropic의 AI 코딩 에이전트. 말로 지시하면 파일을 만들고, 고치고, 실행까지 합니다.
→ 이게 바이브코딩의 핵심 도구입니다.
비유하자면: Node는 주방, Claude Code는 요리사.
Live Demo
사이트 하나가
만들어지는 과정
-
01
Claude Code를 켠다 — 터미널에서
claude 입력
-
02
"내 서비스 소개 페이지 만들어줘. 회사명, 서비스 설명, 연락처 섹션 포함해줘"
-
03
AI가 HTML 파일 작성 → 브라우저에서 바로 확인
-
04
"버튼 색깔 오렌지로 바꿔줘" → 즉시 수정
-
05
30분 만에 실제 웹사이트 완성
4주 전체 흐름
이 강의를 관통하는
하나의 논리
📄 문서
→
🌐 HTML
→
⚙️ 시스템
→
☁️ SaaS
오늘은 첫 번째 계단 — 문서를 코드로 만드는 경험
4주가 끝나면 이 사다리 전체가 보입니다.
실습 (3시간)
오늘 실습에서
직접 해볼 것
-
실습 1
Claude Code 설치 — Node.js 설치 → Claude Code 설치 → 인증
-
실습 2
첫 화면 만들기 — "내 이름과 직업이 표시되는 소개 페이지"를 AI에게 만들어 달라고 해보기
-
실습 3
수정 대화 — 색상, 내용, 레이아웃 바꿔가며 AI와 3번 이상 대화하기
막히면 손 들어요 — 강사가 바로 붙겠습니다
이번 주 숙제
다음 주까지
해올 것
-
📝
맥플로 초안 작성
"내가 AI로 만들고 싶은 서비스"를 A4 반 페이지 분량으로 정리
— 어떤 문제를 해결하는가? 누가 쓰는가? 핵심 기능은?
-
🎙️
Claude Code에게 인터뷰 당해보기
내 아이디어를 Claude Code에게 설명하고, AI가 되물어보는 질문에 대답하면서 아이디어를 구체화해보기
2주차에 맥플로 공유하고 함께 발전시킵니다
"
코드를 짜는 게 아니라
아이디어를 말로 설명하는 것이
이제 가장 중요한 능력입니다.
— AX First Step · 1주차 핵심