바이브 코딩 실습
모든 환경이 준비가 되었으니 간단한 실습을 진행해보도록 하겠습니다. 아래 절차대로 진행이 됩니다.
- 바탕화면에 폴더 만들기
- VSCode 열기
- VSCode로 폴더 열기
- VSCode에서 터미널 열기 또는 클로드 코드 익스텐션 열기
- VSCode에서 claude에게 명령을 통해 개발 지시하기
1. 작업 공간 만들기
먼저 바탕화면에 새 폴더를 만들어보겠습니다. 바탕화면의 빈 공간에서 마우스 우클릭을 하고 새로 만들기 > 폴더를 선택하세요. Mac 사용자는 바탕화면에서 우클릭 후 새로운 폴더를 선택하면 됩니다.
폴더 이름은 vibe-coding으로 지어보겠습니다. 오늘 우리가 만들 프로젝트는 바이브 코딩을 소개하고, 부트캠프에 실제 접수할 수 있는 웹 서비스를 만들 것입니다.
2. VS Code 실행하기
이제 VS Code를 실행할 차례입니다. Windows는 시작 메뉴에서, Mac은 Launchpad나 Applications 폴더에서 Visual Studio Code를 찾아 실행하세요. code라고 검색을 하면 됩니다.
VS Code가 열리면 이전에 작업했던 프로젝트가 열려있을 수도 있고, 시작 화면이 나타날 수도 있습니다. 어느 쪽이든 상관없습니다. 우리는 방금 만든 폴더를 새로 열 것이니까요.
3. 프로젝트 폴더 열기
VSCode 상단 메뉴에서 File > Open Folder를 클릭하세요. Mac에서는 File > Open으로 표시됩니다. 파일 탐색기가 열리면 바탕화면으로 이동해서 방금 만든 vibe-coding 폴더를 선택하고 폴더 선택 버튼을 클릭합니다.
폴더를 열면 VSCode의 왼쪽 사이드바에 VIBE-CODING이라는 제목이 표시되고, 그 아래는 비어있을 것입니다. 클로드는 이제 이 공간에 파일을 생성하고 코드를 작성햅니다.
만약 이 폴더의 작성자를 신뢰하시나요?라는 메시지가 나타난다면, 예, 작성자를 신뢰합니다를 클릭하세요.
4. 터미널 열기 또는 클로드 코드 익스텐션 열기
이제 Claude와 대화할 수 있는 터미널을 열어보겠습니다. VSCode 상단 메뉴에서 Terminal > New Terminal을 선택하세요.
더 빠른 방법을 원한다면 단축키를 사용할 수 있습니다. Windows는 Ctrl+백틱(`), Mac은 Cmd+백틱입니다. 백틱 키는 숫자 1 왼쪽, Tab 키 위에 있는 키입니다.
터미널이 열리면 VSCode 하단에 새로운 패널이 나타납니다. 검은 배경(테마에 따라 다를 수 있습니다)에 커서가 깜빡이고 있을 것입니다.
터미널 상단을 보면 현재 위치가 우리가 만든 vibe-coding 폴더라는 것을 확인할 수 있습니다. 터미널에 대해서는 뒤에서 설명합니다. 터미널에 claude라고 입력하고 Enter를 누르세요. 만약 앞에서 Gemini CLI를 설치하셨다면 gemini라고 입력하시고 Enter를 누르세요. Claude가 시작되면서 인사 메시지가 나타날 것입니다.
이렇게 터미널에서 개발하는 방법은 25년 9월 30일 업데이트 이후로 많이 사용되지 않을 가능성이 있습니다. VSCode에 익스텐션 기능에 업데이트가 많이 되었기 때문인데요. 위처럼 터미널로 작업을 해도 되지만 아래처럼 설치하여 실행하는 편이 더 간편하고, 사용자 경험도 좋습니다.
왼쪽 탭에서 5번째 순서에 있는 Extensions 탭을 클릭하면 claude라는 앱을 검색하여 추가 기능을 설치할 수 있습니다.
이 확장 프로그램을 사용하면 오른쪽 상단에 툴팁으로 Clade Code가 나타납니다.
이 버튼을 누르게 되면 코드를 쓰는 창 오른쪽에 Claude Code 탭이 나오게 됩니다. 여기서 원하는 명령을 하면 됩니다.
책은 터미널로 구성되어 있습니다. 여러분은 터미널이 아니라 가능하면 Claude 익스텐션으로 실행을 해주세요.
익스텐션이 항상 좋은 것은 아닙니다. 9월 30일 업데이트 이후, 10월 1일 최신 명령어가 익스텐션에서는 안되고, 터미널에서는 되는 현상을 발견했습니다. 앞으로도 익스텐션 업데이트가 조금 늦을 수 있습니다.
터미널에는 있는 최신 명령어 rewind
익스텐션에는 없는 최신 명령어 rewind
6. Claude와 함께 개발 시작하기
첫 번째 명령을 내려보겠습니다. 다음과 같이 입력해보세요. 여기서 설문조사 form은 제가 직접 만든 form입니다. 입력하기 어렵다면 이 링크는 삭제하거나 여러분이 만드셔도 됩니다.
나는 바이브 코딩을 강의하는 강사야. 바이브 코딩을 소개하고, 수강 시청을 할 수 있는 랜딩 페이지를 만들어줘. 랜딩 페이지에 들어가는 접수 폼의 링크는 아래 링크를 참고해줘.
- 링크: https://forms.gle/Ddj742DqPZ5Eb8j79
- HTML, CSS, JavaScript로 만들어줘.나는 바이브 코딩을 강의하는 강사야. 바이브 코딩을 소개하고, 수강 시청을 할 수 있는 랜딩 페이지를 만들어줘. 랜딩 페이지에 들어가는 접수 폼의 링크는 아래 링크를 참고해줘.
- 링크: https://forms.gle/Ddj742DqPZ5Eb8j79
- HTML, CSS, JavaScript로 만들어줘.
Enter를 누르면 Claude가 작업을 시작합니다. 개행은 Shfit + Enter입니다. 때에 따라서 이 Shift + Enter가 작동하지 않을 수 있습니다. 그럼 우선 한 줄로 작성을 해주세요. 괜찮습니다. 수백줄의 명령을 터미널에서 입력하기란 쉬운 일이 아니기 때문에 앞으로는 여기에 명령을 많이 내리지 않고 파일로 명령을 주로 내릴 테니까요.
1번을 선택하지 말고 3번을 선택해주세요. '너의 작업을 신뢰할테니 알아서 작업을 다 해라' 명령입니다. 1번을 선택하면 변경이 될때마다 묻습니다.
여기서 토큰이라는 것이 계속 올라가는 것이 보이실겁니다. 쉽게 단어라고 생각해주시면 됩니다. 다만 실제 단어는 아니고 AI가 이해하기 쉽게 문장을 잘라낸 것을 토큰이라고 합니다.
파일을 생성하고, 코드를 작성하는 과정을 실시간으로 볼 수 있을 것입니다. 왼쪽 사이드바에 index.html, style.css, script.js 같은 파일들이 하나씩 나타나는 것을 확인하세요.
작업이 완료되면 Claude가 아래와 같이 무엇을 만들었는지 설명해줄 것입니다.
이제 결과물을 확인해볼 차례입니다. 왼쪽 사이드바에서 index.html 파일을 우클릭하고 Reveal in File Explorer를 클릭해주세요.
그리고 열린 폴더에서 index.html을 더블클릭 해주세요.
저는 아래와 같은 페이지가 만들어졌습니다. 10번 질문하면 10번 다 다른 결과물을 만들어냅니다.
브라우저가 자동으로 열리면서 여러분이 만든 첫 번째 웹 애플리케이션이 나타날 것입니다. 할 일을 입력하고 추가 버튼을 눌러보세요. 체크박스를 클릭해서 완료 표시도 해보고, 삭제 버튼도 눌러보세요. 모든 기능이 작동하는 것을 확인할 수 있을 것입니다.
수강신청을 해보도록 하겠습니다.
구글 폼이 잘 열리는 것을 확인할 수 있습니다.
7. 수정과 개선
만든 웹 서비스가 마음에 들지 않으면 그 부분을 수정해달라고 요청하면 됩니다. 색이든, 글자든 여러분이 일상에서 쓰는 자연어로 얘기하면 수정을 해줍니다.
'바이브 코딩과 함께 즐겁게 코딩을 배워보세요' 라고 되어 있는 부분을 '바이브 코딩과 함께 도파민 터지는 코딩을 배워보세요'라고 바꿔줘'바이브 코딩과 함께 즐겁게 코딩을 배워보세요' 라고 되어 있는 부분을 '바이브 코딩과 함께 도파민 터지는 코딩을 배워보세요'라고 바꿔줘
페이지는 새로고침을 해야 반영이 됩니다. 나중에는 이러한 새로고침을 하지 않기 위해 '라이브 서버'라는 것을 설치하도록 하겠습니다.
8. 직접 수정해보기
모든 수정을 Claude에게 맡길 필요는 없습니다. 간단한 수정은 직접 하는 것이 더 빠를 때가 많습니다. VSCode에서 index.html를 클릭한 다음 Ctrl + F를 눌러 '도파민'이라는 키워드를 찾으세요. 그리고 '도파민'을 '재미'로 고치도록 하겠습니다.
이렇게 수정하면 저장을 해야 합니다. Ctrl+S (Mac은 Cmd+S)로 저장해주세요. 저장을 하면 index.html 파일명 옆에 있었던 'O' 표시가 'X' 표시로 바뀝니다.
브라우저를 새로고침 해보세요.
이렇게 AI와 협업하여 실제로 작동하는 웹 애플리케이션을 만들었습니다. 코드를 한 줄도 직접 작성하지 않았지만, 완전히 기능하는 앱을 만들어냈습니다. 이것이 바로 바이브 코딩의 힘입니다.
이렇게 개발할 때 어떻게 하면 수정이 쉬웠는지, 잘 해결 못하던 문제는 무엇이었는지, 왜 못했었는지 등을 메모해두세요. 여러분만에 노하우게 됩니다.
이제 바이브 코딩의 고급 기법들을 배워보겠습니다.