바이브코딩은 AI로 코딩하는 방법을 의미해요. 즉, 생성형AI에 자연어로 ‘~~~코드를 만들어줘’하면 AI가 코딩을 해주고, 그 코드를 사용하는 구조입니다. 사실 쉽게 생각하면 쉬운 개념이죠. ‘메모장으로 하는 바이브코딩’은 별도의 파이썬 등의 별도 개발프로그램 설치 없이 간단하게 바이브코딩을 하는 과정을 알려드리기 위해 기획해 보았어요.
먼저, 주제는 바이브코딩으로 간단한 랜딩페이지를 만들고 수정하는 과정을 보여드릴 예정이예요.
- ChatGPT 실행 & 프롬프트 입력
- 코드 복사 -> 메모장
- 다른 이름으로 저장 -> 모든 파일 -> 파일명.html 패턴으로 저장
- 파일 실행 (끝)
- (추가로 편집 필요 시) 개발자 도구로 편집하기 (핵심)
사용하는 생성형AI 종류에 따라 바로 HTML 파일로 다운받을 수도 있어요. 여기서는 HTML로 직접 다운로드 기능이 없다는 것을 가정하고 작성할게요.
1. ChatGPT 실행 후 프롬프트 입력
첫번째로 ChatGPT를 실행한 뒤 아래의 프롬프트를 입력해주세요.
프롬프트
한글로 구성된 랜딩페이지를 만들어줘. 무료 이미지도 여러장 넣어줘. 전체적으로 풍성하게 구성해줘. 인터랙티브 효과를 넣어줘. 마지막 버튼을 누르면 threads로 이동하게 구성해줘. 단일 HTML로 만들어줘.
2. 코드 복사 -> 메모장
그 다음 이 코드를 HTML 파일로 변환해 주어야 해요. 간단하게 코드 복사를 한 뒤 메모장을 열어서 붙여넣기 해주세요. 사용하는 플랫폼에 따라 이 과정 없이 바로 .html 파일로 다운 받을 수도 있어요.
3. 다른 이름으로 저장 -> 모든 파일 -> 파일명.html 패턴으로 저장
이렇게 메모장에 작성된 파일을 HTML 파일로 변환해 주어야 해요. 그러기 위해서는 다른 이름으로 저장하기를 누른 뒤 파일 형식을 모든 파일로 변경하고, 파일명 입력 후 파일명.html <- 형태로 저장해 주시면 됩니다.
4. 파일 실행
저장한 파일을 실행하면 랜딩페이지가 나옵니다. 이렇게하고 배포하면 나만의 웹사이트 완성입니다. 그런데, 여기서 텍스트를 바꾸고 싶으면 어떻게 해야할까요? 바로 개발자 도구를 이용하면 별도 프로그램 설치 없이 변경 내역을 확인하며 수정 가능합니다.
5. (추가로 편집 필요 시) 개발자 도구로 편집하기 (핵심)
바이브코딩으로 하면 대부분 제가 원하는 대로 나오지 않습니다. 따라서, 수정을 해야 하는데, 이 때 별도의 프로그램 설치 없이 chrome의 개발자 도구를 활용해 바로바로 수정할 수 있습니다.
먼저, 랜딩페이지가 열려있는 상태에서 F12버튼을 누른 뒤 elements로 들어갑니다.
그 뒤, 해당 영역에 마우스를 가져가면 표시가 되는 것을 확인할 수 있습니다. 이 때 변경을 원하는 텍스트 부분을 누른 뒤 수정하면 반영한 뒤 저장을 하면 수정한 버전이 저장됩니다.
Ctrl + S를 눌러 저장하면 되고, 저장한 위치에 들어가면 html과 사용된 이미지 파일등이 저장된 것을 확인하실 수 있습니다.
노바페이 퍼블릭 베타 – 한국어 랜딩페.. <-라는 HTML 파일이 생긴것을 확인하실 수 있습니다. 바이브 코딩으로 바뀌어 있네요.
이렇게 윈도우 환경에서 별도의 개발 프로그램 설치 없이 개발하는 과정을 알아 보았습니다. 이러한 구조로 랜딩페이지 뿐 아니라 웹 애플리케이션 등도 개발할 수 있습니다. 이 포스팅은 초급자를 대상으로 바이브코딩 과정을 알려드리기 위해 기초 내용을 위주로 작성하게 되었습니다.
바이브 코딩을 제대로 하게 된다면 확장 가능성은 무한합니다. 함께 공부하며 성장해 보아요. 앞으로도 가치 있는 포스팅 많이 올려드리도록 할게요. ^^