먼저 화면 하나 만들어 보기

바이브 코딩은 원하는 것을 말로 설명하고, AI가 만든 결과를 보며 고치는 방식입니다. 코드를 외우기 전에 제목 한 줄을 만들어 보겠습니다. 목표는 화면에 ‘나의 첫 웹페이지’를 띄우고, 그 제목을 한 번 바꾸는 것입니다.

로그인을 마친 뒤 약 15분을 잡아 보세요. 처음 가입하거나 사용량 제한을 만나면 더 걸립니다. 먼저 설명을 읽고 싶다면 1장부터 시작해도 됩니다. 이 짧은 체험은 31장 읽기 진행률에 포함하지 않습니다.

1. 도구와 입력칸 열기

컴퓨터 브라우저에서 Claude를 엽니다. 계정이 없다면 화면에 제시된 가입 방법으로 계정을 만들고 이메일 인증 등 안내를 마칩니다. 로그인 후 새 대화를 열고, 문장을 적는 입력칸을 클릭하세요. 책은 다른 탭에 열어 두면 오가기 쉽습니다.

이 안내는 Claude 웹의 Artifacts를 기준으로 합니다. Artifact는 대화 옆에서 열어 보는 결과물입니다. 무료 요금제에도 제공되지만 사용량 제한은 있습니다. 이미 다른 AI 도구에서 HTML 미리보기를 사용 중이라면 그 도구에서 아래 요청을 보내도 됩니다.

2. 첫 요청 보내기

아래 상자의 복사 버튼을 누른 뒤 AI의 대화 입력칸에 붙여 넣고 전송하세요.

제목이 ‘나의 첫 웹페이지’인 작은 페이지를 만들어 줘.
제목 아래에는 ‘말로 부탁해서 만든 첫 화면입니다.’를 넣어 줘.
HTML 한 파일로 만들고, Artifact에서 실제 웹페이지로 보여 줘.
코드 글자만 보여 주지 말고 화면을 확인할 수 있게 해 줘.
외부 서비스 연결, 결제, 인터넷 공개는 하지 마.

답변이 끝나면 대화 옆 결과물을 엽니다. 큰 제목과 그 아래 한 문장이 보이면 첫 단계 성공입니다. 색과 글꼴은 달라도 괜찮습니다.

3. 코드만 나오면 여기서 해결하기

기능이 없다는 안내가 계속 나오면 아래 예시를 열어 목표 화면만 확인하세요. 예시를 보는 것과 직접 만든 것은 다릅니다. 다시 사용할 수 있을 때 2단계부터 이어 갑니다.

4. 제목 하나 바꾸기

같은 대화의 입력칸에 “제목만 ‘봄의 첫 웹페이지’로 바꾸고, 아래 문장은 그대로 둬.”라고 보내세요. 결과물에서 새 제목이 보이고 아래 문장이 그대로면 끝입니다.

실제로 확인한 결과 화면

아래는 위의 두 요청을 Claude에 차례로 보낸 뒤 확인한 실제 화면입니다. 제목은 ‘봄의 첫 웹페이지’로 바뀌었고, 아래 문장은 그대로 남았습니다. 색과 배치는 계정이나 생성 결과에 따라 달라도 괜찮습니다.

2026년 10월 21일 웹에서 직접 확인했습니다. 개인정보 보호를 위해 대화 목록과 계정 영역을 제외하고 결과 패널만 담았습니다. 이 확인은 해당 계정의 실행 결과이며 무료 계정의 사용량을 검증한 것은 아닙니다.

위 화면은 책에서 제공하는 비교 예시입니다. 독자가 만든 결과나 AI 서비스 화면이 아닙니다.

이제 대화 목록에서 방금 작업을 다시 열어 보세요. 이어서 1장 · 바이브 코딩이란을 읽으면 방금 한 행동을 이해하기 쉽습니다. 소개글과 링크를 넣는 긴 실습은 21장에서 합니다.

기능 안내: Claude 공식 Artifact 도움말. 2026년 10월 21일 확인. 계정·화면 개편에 따라 표시가 달라질 수 있습니다.