이 장에서는 설치한 환경을 바탕으로 실제 웹페이지를 만들어 봅니다. 폴더 생성부터 Claude와 대화하며 랜딩 페이지를 완성하고 검토하는 전체 과정을 따라해 볼 수 있습니다.

모든 환경이 준비되었으니 간단한 실습을 진행해 보도록 하겠습니다. 아래 절차대로 진행됩니다.

1. 바탕화면에 폴더 만들기
2. Code 탭에서 폴더 선택하기
3. 한 문단으로 시키기
4. 결과물 열어 보고 검토하기
5. 이어서 고치기

1. 작업 공간 만들기

먼저 바탕화면에 새 폴더를 만들어보겠습니다. 바탕화면의 빈 공간에서 마우스 우클릭을 하고 새로 만들기 > 폴더를 선택하세요. Mac 사용자는 바탕화면에서 우클릭 후 새로운 폴더를 선택하면 됩니다.

폴더 이름은 vibe-coding으로 지어보겠습니다. 오늘 우리가 만들 프로젝트는 바이브 코딩을 소개하고, 부트캠프에 실제 접수할 수 있는 웹 서비스입니다.

2. Code 탭에서 폴더 선택하기

Claude Desktop을 열고 왼쪽 위의 Code 탭을 누릅니다. 입력창 위의 폴더 선택 버튼을 클릭하고, 바탕화면의 vibe-coding 폴더를 골라 폴더 선택을 누릅니다. 버튼이 vibe-coding으로 바뀌면 준비가 끝난 것입니다.

지금 이 폴더는 비어 있습니다. Claude는 이제 이 공간에 파일을 생성하고 코드를 작성합니다.

3. 한 문단으로 시키기

첫 번째 명령을 내려보겠습니다. 입력창에 다음과 같이 입력해보세요. 여기서 설문조사 form은 제가 직접 만든 form입니다. 입력하기 어렵다면 이 링크는 삭제하거나 여러분이 만드셔도 됩니다. 줄바꿈은 Shift + Enter입니다.

나는 바이브 코딩을 강의하는 강사야. 바이브 코딩을 소개하고, 수강 신청을 할 수 있는 랜딩 페이지를 만들어줘.

- 접수 폼 링크: https://forms.gle/Ddj742DqPZ5Eb8j79
- HTML, CSS, JavaScript로 만들어줘.
- 휴대폰에서 봐도 깨지지 않아야 해.
- 대문 파일 이름은 index.html로 해줘.

앞 절에서 말한 한 문단입니다. 누가(강사), 무엇을(소개와 수강 신청 랜딩 페이지), 재료(폼 링크), 조건(기술, 휴대폰, 파일 이름)이 들어 있습니다. 이 정도면 충분합니다.

Enter를 누르면 Claude가 작업을 시작합니다. 파일을 만들거나 명령을 실행해도 되는지 물어보면, 내용을 확인하고 승인해주세요. 매번 승인하는 것이 번거롭다면 이 장의 8절에서 줄이는 방법을 다룹니다. 지금은 수락 버튼을 눌러가며 진행하겠습니다.

4. 일하는 모습 지켜보기

작업을 맡기면 Claude가 움직이기 시작합니다. 화면에 흘러가는 과정을 한번 지켜보세요. 대체로 이런 순서로 일합니다.

1. 폴더를 살펴봅니다. 지금은 비어 있으니 금방 끝납니다.
2. 어떤 페이지를 어떻게 만들지 계획을 세웁니다.
3. index.html, style.css, script.js 같은 파일을 만듭니다.
4. 만든 것을 직접 열어 보거나 검사해서 문제가 있으면 고칩니다.
5. 무엇을 만들었는지 정리해서 보고합니다.

여기서 토큰이라는 것이 계속 올라가는 것이 보이실 겁니다. 쉽게 단어라고 생각해주시면 됩니다. 다만 실제 단어는 아니고 AI가 이해하기 쉽게 문장을 잘라낸 것을 토큰이라고 합니다. 작업이 끝나면 Claude가 무엇을 만들었는지 설명해줍니다.

그렇다고 작업이 끝날 때까지 화면만 지켜보고 있을 필요는 없습니다. 이렇게 맡겨 두는 방식의 좋은 점은 그 시간에 다른 일을 할 수 있다는 데 있습니다.

5. 결과물 열어 보기

이제 결과물을 확인해볼 차례입니다. 오른쪽 패널의 폴더 섹션에서 폴더 아이콘을 클릭하면 vibe-coding 폴더가 열립니다. 바탕화면에서 직접 폴더를 열어도 됩니다. 안에 index.html 파일이 생겨 있을 것입니다. Claude가 작업하며 만든 .claude 폴더가 함께 보일 수도 있는데, 신경 쓰지 않으셔도 됩니다.

index.html을 더블클릭 해주세요. 브라우저가 열리면서 여러분이 만든 첫 번째 웹 페이지가 나타납니다. 저는 아래와 같은 페이지가 만들어졌습니다. 10번 시키면 10번 다 다른 결과물을 만들어냅니다.

6. 검토하기

열어 봤으면 이제 검토입니다. 보기 좋다고 끝이 아닙니다. 아래 네 가지를 확인해보세요.

1. 눌러 보기: 수강 신청 버튼을 눌러 구글 폼이 열리는지 확인합니다. 메뉴가 있다면 메뉴도 눌러 봅니다.
2. 좁혀 보기: 브라우저 창의 폭을 휴대폰만큼 좁게 줄여 봅니다. 글자가 잘리거나 버튼이 화면 밖으로 나가지 않는지 봅니다.
3. 읽어 보기: 문구를 읽어 봅니다. Claude가 지어낸 강사 이름, 날짜, 가격이 들어 있을 수 있습니다. 여러분이 알려주지 않은 것은 Claude가 채웠습니다. 2장에서 말한 간섭입니다.
4. 빠진 것 찾기: 시킨 것 중에 빠진 것이 있는지 봅니다.

이 네 가지가 이 책에서 말하는 검토의 뼈대입니다. 10장에서 더 자세히 다루지만, 지금부터 매 실습마다 이 순서로 보는 습관을 들이시길 권합니다.

7. 이어서 고치기

만든 웹 서비스가 마음에 들지 않으면 그 부분을 수정해달라고 요청하면 됩니다. 색이든, 글자든 여러분이 일상에서 쓰는 자연어로 얘기하면 수정을 해줍니다. 새 대화를 열 필요 없이 하던 대화에서 이어서 요청하면 됩니다. 검토에서 찾은 것을 그대로 말하면 됩니다.

'바이브 코딩과 함께 즐겁게 코딩을 배워보세요' 라고 되어 있는 부분을 '바이브 코딩과 함께 도파민 터지는 코딩을 배워보세요'라고 바꿔줘.
그리고 강사 이름은 이호준, 수강료 문구는 빼줘.

Claude가 기존 파일을 고쳐서 다시 저장합니다. 브라우저에서 새로고침(F5)을 해야 반영이 됩니다. 어느 정도 시간이 걸리는지도 확인해보세요.

이렇게 한 번 크게 맡기고, 결과를 보면서 다듬어가는 것이 Code 탭과 일하는 기본 리듬입니다.

8. 직접 수정해보기

모든 수정을 Claude에게 맡길 필요는 없습니다. 간단한 수정은 직접 하는 것이 더 빠를 때가 많습니다. 폴더에서 index.html을 우클릭하고 연결 프로그램 > 메모장을 선택하세요. 맥은 텍스트 편집기입니다. 파일이 글자로 열립니다. 낯설어 보여도 괜찮습니다. Ctrl + F(맥은 Cmd + F)를 눌러 '도파민'이라는 키워드를 찾으세요. 그리고 '도파민'을 '재미'로 고치고 Ctrl + S(맥은 Cmd + S)로 저장합니다.

브라우저를 새로고침 해보세요. 10초 만에 바뀌어 있을 것입니다. 이 파일이 어떤 글자로 이루어져 있는지는 8장에서 다룹니다. 지금은 '파일을 열어 글자를 바꾸면 화면이 바뀐다'까지만 알면 됩니다.

이렇게 AI와 협업하여 실제로 작동하는 웹 페이지를 만들었습니다. 터미널을 열지 않았고, 코드를 한 줄도 직접 작성하지 않았지만, 완전히 기능하는 페이지를 만들어냈습니다. 이것이 바로 바이브 코딩의 힘입니다.

이렇게 만들 때 어떻게 하면 수정이 쉬웠는지, 잘 해결 못하던 문제는 무엇이었는지, 왜 못했었는지 등을 메모해두세요. 여러분만의 노하우가 됩니다.