목표 설정하기
바이브 코딩의 첫 실습으로는 개인 소개 웹페이지를 추천합니다. 구조가 단순하면서도 HTML, CSS, JavaScript의 기본 요소를 모두 포함하고 있어 AI와의 협업 과정을 체험하기에 적합합니다.
시작하기 전에 완성할 페이지의 모습을 구체적으로 떠올려보세요. 어떤 섹션이 필요한지, 어떤 색상 톤을 원하는지, 반응형으로 만들 것인지를 미리 정해두면 프롬프트 작성이 훨씬 수월해집니다. 참고할 만한 웹사이트 디자인을 미리 몇 개 찾아두는 것도 좋은 준비 방법입니다.
단계별 프롬프트 작성
첫 번째 프롬프트에서는 전체 구조를 요청합니다. "개인 포트폴리오 웹페이지의 HTML 구조를 만들어줘. 헤더, 자기소개, 기술 스택, 프로젝트, 연락처 섹션을 포함해줘"와 같이 큰 틀을 잡는 것입니다.
AI가 기본 구조를 생성하면, 이를 브라우저에서 확인한 뒤 두 번째 프롬프트로 스타일링을 요청합니다. "모던하고 깔끔한 다크 테마로 CSS를 추가해줘. 부드러운 스크롤 효과도 넣어줘"처럼 디자인 방향을 구체적으로 전달하면 됩니다.
마지막으로 인터랙션을 추가합니다. 스크롤 시 나타나는 애니메이션이나 네비게이션 메뉴의 동작 같은 세부 기능을 요청하면 완성도 높은 웹페이지가 만들어집니다.
결과 확인과 수정 과정
AI가 생성한 코드를 로컬 파일로 저장하고 브라우저에서 열어보면, 기대와 다른 부분이 반드시 있을 것입니다. 이때 중요한 것은 문제를 구체적으로 설명하는 것입니다. "헤더가 이상해"보다는 "헤더의 네비게이션 메뉴가 모바일 화면에서 겹쳐 보여. 햄버거 메뉴로 변경해줘"라고 요청하는 것이 효과적입니다.
이렇게 생성, 확인, 수정을 반복하는 과정이 바이브 코딩의 핵심 워크플로우입니다. 처음에는 시행착오가 많겠지만, 경험이 쌓일수록 더 적은 반복으로 원하는 결과를 얻을 수 있게 됩니다. 직접 만들어보며 AI와 소통하는 감각을 키우는 것이 무엇보다 중요합니다. 다음 글에서는 이 과정에서 활용할 수 있는 효과적인 프롬프트 작성법을 심층적으로 다뤄보겠습니다.