실제 시연과 가벼운 체험
1. 실제 시연과 가벼운 체험
복잡한 설치 없이 우리가 바로 실험해볼 수 있는 것이 있습니다. 누구나 무료로요. ChatGPT나 Claude에 접속하세요. 그리고 '바이브 코딩 랜딩페이지'를 만들어달라고 하세요. 실제 프롬프트는 아래와 같습니다.
바이브 코딩을 소개하는 랜딩페이지를 만들어주세요.
기술 스택: HTML, CSS, JavaScript
요구사항:
- 모든 코드는 하나의 HTML 파일에 포함
- 반응형 디자인
- 부드러운 스크롤 애니메이션
- 현대적이고 깔끔한 디자인바이브 코딩을 소개하는 랜딩페이지를 만들어주세요.
기술 스택: HTML, CSS, JavaScript
요구사항:
- 모든 코드는 하나의 HTML 파일에 포함
- 반응형 디자인
- 부드러운 스크롤 애니메이션
- 현대적이고 깔끔한 디자인Claude를 예시로 들어보겠습니다. 아래와 같이 프롬프트를 입력하였습니다.
HTML, CSS, JavaScript가 무엇인지 모르셔도 괜찮습니다. 이런 기술적인 내용은 이후 챕터에서 자세히 다룰 예정입니다. 지금은 그저 웹페이지를 만드는 기본 도구라고만 이해하시면 충분합니다.
엔터를 누르면 Claude가 즉시 코드를 생성하기 시작합니다. 몇 초 만에 완전한 웹페이지 코드가 화면 오른쪽에 나타날 것입니다. 놀랍게도 이 코드는 실제로 작동하는 웹페이지입니다. Claude의 경우, 오른쪽 화면에 상단 토글을 통해 이 페이지의 코드를 확인할 수 있습니다. 기본 옵션이 '미리보기' 입니다.
생성된 페이지가 마음에 들지 않으신가요? 바이브 코딩의 진정한 힘은 바로 여기서 발휘됩니다. AI와 계속 대화하며 원하는 방향으로 수정해나갈 수 있습니다. 예를 들어 "배경색을 더 어둡게 바꿔주세요"라고 요청하거나, "제목에 애니메이션 효과를 추가해주세요"라고 할 수 있습니다. 각 요청마다 AI는 즉시 코드를 수정해서 보여줄 것입니다.
만족스러운 결과물이 완성되면 우측 상단의 '게시' 버튼을 클릭해보세요. 걱정하지 않으셔도 됩니다. 여러분이 AI와 나눈 대화 내용이 공개되는 것은 아닙니다. 오직 최종 결과물인 웹페이지만 공개됩니다. 게시를 완료하면 고유한 URL이 생성되고, 이 링크를 통해 누구나 여러분이 만든 웹페이지에 접속할 수 있게 됩니다. 이렇게 웹페이지를 인터넷에 공개하는 과정을 우리는 '배포'라고 부릅니다.
이제 이 웹페이지에서 여러분이 만든 결과물을 남들도 접속할 수 있게 됩니다. 예를 들어, 제가 방금 만든 바이브 코딩 소개 페이지는 https://weniv.link/DBi7w_ 에서 서비스 되고 있습니다. 단 2번의 대화로 만들어진 결과물 치고는 꽤 그럴듯하죠. 다만 느리고, 콘텐츠는 사용자가 생성한 것으로 검증되지 않았습니다.라는 문구가 붙습니다. 이러한 문구를 없애고, 더 빠른 로딩 속도를 가지기 위해서는 다음 챕터에서 다룰 '배포'에 대한 내용을 참고해야 합니다.
이것이 바로 바이브 코딩의 기본 원리입니다. AI와 자연어로 대화하며 코드를 생성하고, 수정하고, 완성하는 과정입니다. 하지만 여기서 끝이 아닙니다. 지금까지 경험한 웹 기반 도구는 시작에 불과합니다.
다음 단계인 Claude Code와 같은 전문 도구를 사용하면 더욱 강력한 작업이 가능합니다. 이런 도구들은 여러분의 컴퓨터를 직접 제어하여 파일을 생성하고 수정할 수 있습니다. 여러분이 수집한 이미지를 활용하거나, 로컬에 저장된 데이터를 처리하거나, 여러 파일로 구성된 복잡한 프로젝트를 관리할 수 있게 됩니다. 또한 GitHub과 같은 서비스와 연결되어 배포를 하거나, 팀과 협업할 수 있게 합니다.
마지막으로 간단한 실습 과제를 드리겠습니다. 클로드에게 자신을 소개하고, 그 내용을 바탕으로 개인 소개 페이지를 만들어 보세요. 어떤 표현이 더 좋은 결과를 만들어냈는지, 어떤 요청이 원하는 수정을 정확히 이끌어냈는지 기록해두세요. 이러한 프롬프트들은 곧 여러분만의 소중한 노하우가 될 것입니다. 다음 챕터에서 Claude Code를 사용할 때도 이 경험과 프롬프트들이 그대로 활용될 것입니다.