44분 만에 뚝딱! 나만의 브랜딩 페이지, 깃허브·버셀·슈퍼베이스로 초고속 배포 비법 공개!
중학생도 이해하는 바이브 코딩 첫걸음! 🚀
안녕하세요! 오늘은 새벽 4시지만, 여러분과 함께 바이브 코딩의 세계로 떠나볼 거예요. 제주도에서 여러분을 만나고 있답니다! 😊
바이브 코딩, 그게 뭔데? 🤔
바이브 코딩은 말 그대로 나만의 개발자 직원을 만드는 거예요. 여러분의 노트북이나 컴퓨터에 살면서 여러분이 시키는 일을 대신 해주는 똑똑한 친구죠!
- ChatGPT 사용자: 여러분의 바이브 코딩 직원은 코덱스예요. ChatGPT를 구독하면 코덱스를 쓸 수 있지만, 구독 안 해도 어느 정도는 무료로 사용할 수 있어요.
- 클로드 사용자: 여러분의 바이브 코딩 직원은 클로드 코드예요. 클로드는 구독해야 쓸 수 있답니다.
오늘 뭘 할까? 🤔
원래는 다른 걸 해볼까 했는데, 오늘은 처음 바이브 코딩을 접하는 분들이 어려워하는 부분을 도와드리려고 해요. 그래서 바이브 코딩이 뭔지, 그리고 이걸로 뭘 할 수 있는지 같이 알아볼 거예요.
준비물: 나만의 개발자 직원 만나기! 💻
바이브 코딩을 하려면 먼저 우리 직원들을 만나야겠죠?
-
ChatGPT 사용자:
- 크롬 브라우저를 열고 "ChatGPT 다운로드"라고 검색하세요.
- 첫 번째 나오는 "ChatGPT 다운로드" 링크를 클릭하세요.
- "ChatGPT 데스크톱 다운로드"를 받아서 설치하세요. (윈도우면 윈도우용, 맥이면 맥용으로!)
- 설치한 앱을 실행하고 로그인하면 여러분의 코덱스 직원을 만날 수 있어요!
-
클로드 사용자:
- 크롬 브라우저를 열고 "클로드"라고 검색하세요.
- 첫 번째 나오는 링크를 클릭하세요.
- "다운로드" 버튼을 눌러서 앱을 받고 설치하세요. (윈도우면 윈도우용, 맥이면 맥용으로!)
- 설치한 앱을 실행하고 로그인하면 여러분의 클로드 코드 직원을 만날 수 있어요!
팁: 크롬 브라우저를 기본 브라우저로 설정해두면 더 편하게 사용할 수 있어요!
확장 프로그램 설치: 직원들이 브라우저에서 신나게 놀게 해주자! 🌐
이제 우리 직원들이 브라우저에서도 자유롭게 활동할 수 있도록 도와줄 거예요.
- 크롬 브라우저 오른쪽 위에 있는 점 세 개를 누르고 "확장 프로그램"을 클릭하세요.
- "크롬 웹 스토어 방문하기"를 누르세요.
- ChatGPT 사용자: 검색창에 "ChatGPT"라고 영어로 검색하고 첫 번째 나오는 것을 "Chrome에 추가"하세요.
- 클로드 사용자: 검색창에 "Claude"라고 영어로 검색하고 첫 번째 나오는 것을 "Chrome에 추가"하세요.
이렇게 하면 우리 직원들이 브라우저에서도 여러분을 도와줄 준비가 된 거예요!
회원 가입: 중요한 친구들 만나기! 🤝
이제 바이브 코딩을 더 멋지게 만들어 줄 친구들을 만날 시간이에요.
- GitHub: 여러분이 만든 결과물을 저장하고 관리하는 곳이에요.
- "GitHub"라고 검색해서 고양이 모양 로고를 누르고 "Sign up"으로 회원 가입하세요. (구글 계정으로 하면 편해요!)
- Vercel: 여러분이 만든 웹사이트나 앱을 인터넷 주소(URL)로 만들어주는 곳이에요.
- "Vercel"이라고 검색하고 "Sign up"을 누르세요.
- 중요! 이때 GitHub 계정으로 로그인하면 훨씬 쉽게 가입할 수 있어요!
- Supabase: 여러분의 앱에 필요한 데이터베이스를 만들어주는 곳이에요. (설문조사, 게시판 같은 기능을 만들 때 필요해요!)
- "Supabase"라고 검색하고 "Start your project"를 누르세요.
- 이것도 GitHub 계정으로 로그인하면 편해요!
주의: Vercel과 Supabase는 회원 가입할 때 구글 계정으로 하지 말고, 꼭 GitHub 계정으로 로그인하세요!
이제 진짜 시작! 💪
여기까지 따라오느라 정말 고생 많았어요! 이제 여러분은 바이브 코딩을 위한 기본적인 준비를 모두 마쳤답니다. 다음 시간에는 이 준비된 도구들을 가지고 실제로 무엇을 만들 수 있는지, 어떻게 우리 직원들에게 일을 시킬 수 있는지 알아볼 거예요.
혹시 중간에 어렵거나 막히는 부분이 있다면 언제든지 다시 물어봐 주세요! 여러분의 바이브 코딩 여정을 응원합니다! 😊