목차
- 왜 오늘 이 실습이 비전공자에게 맞는가
- 이번 실습으로 만들 결과물
- 준비물과 설치 체크
- 1단계: 작업 폴더와 Claude Code 준비
- 2단계: 첫 페이지 뼈대 생성
- 3단계: 스타일과 문구 다듬기
- 4단계: AntiGravity로 결과 점검 포인트 정리
- 자주 막히는 지점
- Q&A
- 오늘 5분 실습
- 미래이음연구소 안내
- 마무리
왜 오늘 이 실습이 비전공자에게 맞는가
비전공자가 바이브 코딩을 시작할 때 제일 많이 무너지는 지점은 문법이 아니라 순서다. 무엇을 만들지 정하지 않은 채 도구부터 켜면 금방 산으로 간다. 반대로 목표를 너무 크게 잡아도 첫날부터 포기한다. 그래서 오늘은 Claude Code와 AntiGravity를 이용해 강의 소개 페이지 한 장만 만드는 흐름으로 잡는다. 페이지 한 장은 가볍지만, 여기에는 폴더 만들기, 프롬프트 주기, 파일 확인, 수정 요청, 화면 검토라는 바이브 코딩의 핵심 루틴이 다 들어 있다.
Claude Code는 코드베이스를 읽고 파일을 만들고 명령어를 실행하는 데 강하다. 비전공자 입장에서는 직접 모든 코드를 타이핑하기보다, 원하는 결과를 한국어로 설명하고 생성된 파일을 빠르게 검토하는 방식이 훨씬 효율적이다. AntiGravity는 여기서 결과를 다시 시각적으로 점검하는 역할로 쓰면 좋다. 즉 Claude Code가 손을 움직이고, AntiGravity가 결과를 보는 눈이 되어 주는 셈이다.
이번 실습으로 만들 결과물
오늘 목표는 강의 신청 전용 서비스가 아니다. 먼저 아래 세 가지를 끝내면 성공이다.
- 실습 폴더 하나를 만들고
- 강의 소개용 HTML 페이지를 만들고
- Claude Code로 수정 요청을 반복한 뒤 AntiGravity에서 구조와 문구를 점검한다
완성 결과물은 제목, 강의 소개, 대상, 커리큘럼, 신청 버튼이 있는 단일 페이지다. 이 정도만 만들어도 이후에는 교육 안내, 랜딩페이지, 세미나 공지, 프로그램 소개로 쉽게 확장할 수 있다.
준비물과 설치 체크
1. 준비물
- macOS 또는 Windows 터미널
- Claude Code 실행 환경
- 텍스트를 볼 수 있는 에디터 하나
- 브라우저
- 결과를 다시 점검할 AntiGravity 작업 환경
2. Claude Code 설치 예시
공식 문서 기준으로 macOS와 Linux에서는 아래처럼 시작할 수 있다.
curl -fsSL https://claude.ai/install.sh | bash설치 뒤 버전 확인은 이렇게 한다.
claude --version3. 실습용 폴더 만들기
mkdir lecture-page-practice
cd lecture-page-practice여기서 중요한 포인트는 폴더 이름을 애매하게 짓지 않는 것이다. 비전공자는 프로젝트가 늘어나면 어디가 무엇인지부터 헷갈린다. 폴더명만 봐도 목적이 보이게 두는 게 좋다.
1단계: 작업 폴더와 Claude Code 준비
이제 Claude Code에게 아주 구체적으로 지시한다. 막연하게 예쁜 페이지를 만들어 달라고 하면 결과가 흔들린다. 오늘은 강의 소개 페이지라는 목적, 필요한 섹션, 파일 이름까지 같이 준다.
claude실행 후 첫 요청 예시는 아래처럼 짧고 선명하게 던지면 된다.
현재 폴더에 index.html과 style.css를 만들어줘.
주제는 비전공자를 위한 바이브 코딩 입문 강의 소개 페이지야.
섹션은 헤더, 강의소개, 대상, 커리큘럼 4개, 후기 2개, 신청 버튼으로 구성해줘.
색감은 깔끔한 블루 계열, 모바일에서도 읽기 쉽게 만들어줘.비전공자가 기억할 핵심은 두 가지다. 첫째, 원하는 결과를 화면 단위로 말한다. 둘째, 구조를 리스트처럼 끊어서 말한다. 그러면 Claude Code가 훨씬 안정적으로 파일을 만든다.
2단계: 첫 페이지 뼈대 생성
파일이 생성되면 바로 내용부터 훑는다. 이때 코드를 다 이해하려고 붙잡지 말고, 페이지 구조가 내가 요청한 순서대로 들어갔는지만 본다.
생성된 index.html 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>비전공자를 위한 바이브 코딩 입문</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="hero">
<h1>비전공자를 위한 바이브 코딩 입문</h1>
<p>Claude Code와 AI 도구로 첫 실습 결과를 만드는 1일 클래스</p>
<a class="cta" href="#apply">지금 신청하기</a>
</header>
<section>
<h2>강의 소개</h2>
<p>복잡한 문법 암기보다 실제 결과를 만드는 흐름부터 익힌다.</p>
</section>
<section>
<h2>대상</h2>
<ul>
<li>코딩이 처음인 강사</li>
<li>업무 자동화를 배우고 싶은 실무자</li>
<li>AI 도구를 교육 현장에 붙이고 싶은 운영자</li>
</ul>
</section>
<section>
<h2>커리큘럼</h2>
<ol>
<li>AI 도구 이해</li>
<li>첫 페이지 생성</li>
<li>수정 요청하는 법</li>
<li>실전 배포 감각 익히기</li>
</ol>
</section>
<section id="apply">
<h2>신청</h2>
<button>상담 신청하기</button>
</section>
</body>
</html>이 단계에서는 완벽함보다 골격 확인이 먼저다. 제목이 맞는지, 섹션이 빠지지 않았는지, 버튼이 있는지 정도만 보면 된다.
3단계: 스타일과 문구 다듬기
처음 생성된 결과는 대개 밋밋하다. 여기서 바로 두 번째 요청을 던진다. 중요한 건 수정 요청도 추상적으로 하지 않는 것이다.
상단 히어로 영역을 더 눈에 띄게 바꿔줘.
배경 그라데이션을 넣고, 각 섹션 간격을 넓혀줘.
후기 카드 2개를 추가하고, 신청 버튼은 진한 파란색으로 만들어줘.
전체 글자 크기는 모바일에서도 읽기 쉽게 조정해줘.스타일 파일도 같이 보자. 비전공자는 CSS 전체를 외울 필요 없다. 색상, 간격, 버튼, 모바일 반응형 네 가지가 어디에 있는지만 익히면 된다.
body {
font-family: Pretendard, sans-serif;
margin: 0;
line-height: 1.6;
color: #1f2937;
background: #f8fbff;
}
.hero {
padding: 80px 24px;
text-align: center;
background: linear-gradient(135deg, #2563eb, #60a5fa);
color: #ffffff;
}
section {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px;
}
.cta {
display: inline-block;
padding: 14px 24px;
border-radius: 999px;
background: #1d4ed8;
color: #ffffff;
text-decoration: none;
}여기서 막히면 이렇게 다시 물으면 된다.
초보자 기준으로 설명 주석을 코드에 추가해줘.
무엇이 제목 스타일이고 무엇이 버튼 스타일인지 한눈에 보이게 정리해줘.이 한 줄이 생각보다 중요하다. 비전공자는 결과만 받으면 다음 수정 때 다시 막힌다. 반면 주석이 붙으면 코드가 낯선 벽에서 수정 가능한 도구로 바뀐다.
4단계: AntiGravity로 결과 점검 포인트 정리
이제 AntiGravity 차례다. 여기서 핵심은 새로 만드는 것이 아니라 검토 기준을 만드는 것이다. Claude Code가 만든 결과물을 AntiGravity에서 열어 보거나 작업 흐름 안으로 가져와서 아래 네 가지를 점검한다.
점검 포인트 1. 구조가 한눈에 보이는가
헤더 다음에 소개, 대상, 커리큘럼, 후기, 신청 순서가 자연스러운지 본다. 비전공자 페이지는 멋보다 흐름이 중요하다.
점검 포인트 2. 문구가 너무 길지 않은가
AI가 초안으로 뽑은 문장은 종종 길다. 각 문단이 두세 줄 안에서 끊기는지, 버튼 문구가 행동을 유도하는지 확인한다.
점검 포인트 3. 모바일에서 눌리기 쉬운가
강의 신청 페이지는 휴대폰에서 많이 본다. 버튼이 작거나 여백이 좁으면 전환율이 떨어진다. AntiGravity에서 화면 흐름을 볼 때도 이 지점을 먼저 체크하면 된다.
점검 포인트 4. 다시 Claude Code에 무엇을 시킬지 정리했는가
검토만 하고 끝내면 다음 단계가 없다. 아래처럼 수정 요청 목록을 만들어 다시 Claude Code에 넣는다.
후기 카드 배경을 더 밝게 바꿔줘.
커리큘럼 각 항목에 한 줄 설명을 추가해줘.
신청 버튼 아래에 상담 가능 시간 안내 문구를 넣어줘.
모바일에서 제목 줄바꿈이 어색하지 않게 조정해줘.이 루프를 두세 번만 돌려도 결과물이 확 달라진다. 바이브 코딩은 한 번에 정답을 뽑는 게임이 아니라, 빠르게 만들고 빠르게 다시 지시하는 반복 작업이다.
자주 막히는 지점
- 요청이 너무 짧다. 예쁜 페이지 만들어줘 한 줄이면 결과가 흔들린다.
- 폴더 구조를 확인하지 않는다. 파일이 어디 생겼는지 모르면 수정 요청도 꼬인다.
- 처음부터 완벽한 서비스 수준을 요구한다. 첫 실습은 페이지 한 장이면 충분하다.
- 결과 검토 없이 다음 지시로 넘어간다. 그래서 같은 수정 요청을 반복하게 된다.
- 도구를 바꿔 다니느라 흐름이 끊긴다. 오늘은 Claude Code와 AntiGravity 두 축만 잡는 게 낫다.
Q&A
Q1. 코드를 몰라도 이 방식이 통하나
A. 통한다. 다만 아무것도 몰라도 된다는 뜻은 아니다. 파일 이름, 섹션 구조, 버튼 위치처럼 화면 설계 언어를 익히면 속도가 훨씬 붙는다.
Q2. Claude Code가 만든 코드가 틀리면 어떡하나
A. 그래서 AntiGravity 같은 검토 단계가 필요하다. 바로 배포하지 말고 구조와 문구를 먼저 점검한 뒤 다시 수정 요청을 넣으면 된다.
Q3. 첫 실습 주제로 왜 강의 소개 페이지를 추천하나
A. 입력과 출력이 단순해서 흐름을 배우기 좋기 때문이다. 폼 처리나 데이터베이스 없이도 결과물이 선명하게 보인다.
Q4. 다음 단계는 무엇이 좋나
A. 다음은 신청 폼 연결이나 FAQ 아코디언 추가가 좋다. 오늘 만든 한 장짜리 페이지를 조금만 확장하면 바로 이어진다.
오늘 5분 실습
- lecture-page-practice 폴더를 만든다.
- Claude Code에게 index.html과 style.css 생성을 요청한다.
- 생성된 결과에서 제목, 대상, 버튼 세 군데만 확인한다.
- 수정 요청 3줄을 적는다.
- AntiGravity에서 구조와 모바일 가독성 체크 포인트를 메모한다.
이 다섯 단계만 끝내도 오늘 실습은 성공이다. 비전공자는 큰 프로젝트보다 작은 성공 루틴을 자주 만드는 쪽이 훨씬 오래 간다.
미래이음연구소 안내
미래이음연구소 바이브 코딩 실습 과정
미래이음연구소는 비전공자도 실제 결과물을 만들 수 있도록 AI 실습 중심 커리큘럼을 운영한다. Claude Code, 생성형 AI, 업무 자동화, 교육용 랜딩페이지 제작까지 바로 써먹는 흐름으로 묶어 준다.
강의 문의: 010-3343-4000
교육 기획과 출강 문의는 두온교육과 미래이음연구소에서 함께 진행한다.
마무리
오늘 핵심은 도구를 많이 아는 것이 아니다. Claude Code로 만들고, AntiGravity로 보고, 다시 Claude Code에 수정 요청을 넣는 반복 루틴을 손에 익히는 것이다. 비전공자에게 필요한 것은 천재적인 코드 해석 능력이 아니라, 원하는 결과를 분해해서 지시하는 감각이다. 그 감각은 첫 페이지 한 장부터 시작된다.
참고자료
- Claude Code Overview, Anthropic
- https://code.claude.com/docs/en/overview
- https://antigravity.ai/