네가 알아서 해줘' 한 줄! 바이브 코딩 카드뉴스 웹앱, 5분 만에 배포까지 초간단 완성!

중학생 눈높이로 정리한 바이브 코딩!

🚀 오늘 뭐 할 거야?

오늘은 나만의 카드 뉴스 웹 만들기를 할 거야! AI 직원(바이브 코딩)한테 시켜서 주제에 맞는 글이랑 이미지를 척척 만들어주는 서비스를 만들 거야.

🛠️ 준비물 체크!

• 크롬 브라우저: 웹 서핑할 때 쓰는 그거 맞아!
• ChatGPT 또는 Claude 구독 (선택): 구독하면 더 좋지만, 안 해도 괜찮아!
  • 구독하면 해당 앱을 다운로드해서 설치해야 해.
  • 구독 안 해도 바이브 코딩 도구는 쓸 수 있어.
• 노드 JS 설치: AI 직원이 일을 하려면 꼭 필요해! (설치하라는 메시지가 뜨면 설치해줘)

⚙️ 환경 설정부터 꼼꼼하게!

1. 크롬 브라우저 열기: 당연히 크롬으로 해야겠지?
2. 기본 브라우저 설정: 크롬을 기본 브라우저로 설정해줘. (설정 > 기본 브라우저)
3. 확장 프로그램 설치: 이게 오늘 제일 중요해!
   • ChatGPT 사용자: 크롬 웹 스토어에서 "ChatGPT" 검색해서 설치해.
   • Claude 사용자: 크롬 웹 스토어에서 "Claude" 검색해서 설치해.
   • 설치 후에는 오른쪽 위에 핀 모양 눌러서 고정해두면 편해.

🤖 AI 직원 소개!

• ChatGPT 사용자: 코덱스라는 AI 직원을 쓸 거야. (워크 환경에서도 똑같이 쓸 수 있어!)
• Claude 사용자: 클로드 코드라는 AI 직원을 쓸 거야.

이 AI 직원들한테 우리가 원하는 걸 명확하게 말해주면 알아서 척척 만들어줘!

📂 프로젝트 설정하기

• ChatGPT 사용자:
  1. 앱을 실행하고 '프로젝트 선택' > '새 프로젝트'를 눌러.
  2. '폴더 추가'를 눌러서 '카드뉴스 웹 만들기' 같은 이름으로 새 폴더를 만들고 열어줘.
  3. '나 대신 승인' 모드로 설정하면 AI 직원이 알아서 일을 처리해줘. (무료 사용자는 안 될 수도 있어)
  4. 모델은 '5.6 솔'로 선택하고, 추론 감도는 중간으로 설정해줘.
• Claude 사용자:
  1. 앱을 실행하고 '코드' 탭을 눌러.
  2. '새로 생성' > '작업 디렉토리 선택'을 눌러서 새 폴더를 만들고 '카드뉴스 웹 만들기'라고 이름 붙여줘.
  3. '자동 모드'로 설정하면 AI 직원이 알아서 일을 처리해줘.
  4. 모델은 '오프스 5'로 선택해줘.

☁️ 온라인 저장소 & 서비스 가입!

이건 AI 직원이 만든 결과물을 저장하고, 웹으로 보여주기 위한 거야. 모두 무료로 사용할 수 있어!

1. GitHub: 만든 결과물을 저장하는 온라인 창고야.
   • GitHub 사이트에서 'Sign up' 눌러서 회원가입해. (이메일 인증 필요)
   • 가입 후에는 프로필 사진 눌러서 'Repositories' 들어가면 네가 만든 결과물들이 보일 거야.
2. Vercel: 만든 웹사이트 주소를 만들어주는 서비스야.
   • Vercel 사이트에서 GitHub 계정으로 회원가입해.
   • 가입 후에는 GitHub에 설치하는 것도 같이 해줘야 네 결과물이 보여.
3. Superbase: 데이터를 저장하는 온라인 데이터베이스야.
   • Superbase 사이트에서 GitHub 계정으로 회원가입해.
   • 가입 후 'Start your project' 눌러서 프로젝트를 만들 건데, 처음에는 프로젝트 이름이랑 비밀번호 설정하는 화면이 나오면 그냥 넘어가고 회원가입만 완료해줘.

✉️ 확장 프로그램, 왜 썼을까?

확장 프로그램 덕분에 AI 직원이 네 컴퓨터를 직접 조종해서 이메일 보내기 같은 복잡한 작업도 알아서 해줄 수 있어! 마치 네 비서처럼 말이야.

✍️ 이제 진짜 카드 뉴스 만들기 시작!

AI 직원한테 우리가 원하는 걸 정확하게 말해주면 돼. 오늘 내가 채팅방에 남겨줄 명령어를 복사해서 각자 AI 직원한테 붙여넣고 엔터를 눌러줘!

명령어 예시:

나만의 카드 뉴스를 만드는 웹을 만들 거야. 사용자가 브랜드 페르소나와 카드뉴스 주제를 입력하면 주제에 맞는 글과 이미지를 만들어주는 서비스야.
- 이미지는 OpenAI의 DALL-E 3를 사용해줘.
- 사용자는 자신의 사진이나 캐릭터를 업로드하고 카드뉴스에 사용할지 선택할 수 있게 해줘.
- 캐릭터 이미지를 사용할 경우, 캐릭터의 일관성을 위해 좌측, 위에서 본 모습, 전체 모습, 의상 등 다양한 각도와 의상을 포함한 캐릭터 시트를 만들어줘.
- 카드 이미지의 얼굴, 의상, 그림체가 유지되도록 일관성을 유지해줘.
- 카드 개수와 이미지 크기(정사각형, 세로형)를 선택할 수 있게 해줘.
- 카드 제목, 본문, 이미지, 순서 디자인도 수정할 수 있게 해줘.
- 이미지에는 한글을 직접 생성하지 말고, 글자 없는 이미지를 만든 후에 웹에서 한글을 합성해줘.
- 완성된 카드는 PNG로 내려받을 수 있게 해줘.
- GitHub에 올리고, Vercel로 주소를 생성하고, Superbase를 이용해서 로그인 기능과 카드뉴스 생성 기록을 저장해줘.

⚠️ 주의사항!

• API 키는 절대 채팅방에 공유하지 마! 이건 네 신용카드 같은 거라서 돈이 나갈 수 있어. AI 직원한테 알아서 잘 저장해달라고 부탁해야 해.
• AI 직원이 어려운 걸 시키면 "네가 좀 알아서 해줘!"라고 말해줘. 그래야 AI 직원이 네가 호구라고 생각 안 하고 알아서 잘 해줄 거야.
• Superbase는 무료로 2개까지만 만들 수 있어. 3개부터는 돈이 나가니까 잘 선택해야 해.
• API 사용 비용: 이미지 생성할 때마다 돈이 조금씩 나가. 커피 한 잔 값 정도 생각하면 돼. 너무 비싸면 AI 직원한테 프롬프트만 알려달라고 하고 직접 만들 수도 있어.

🚀 앞으로 뭘 할 수 있을까?

오늘 만든 카드 뉴스 웹을 시작으로, AI 직원한테 시켜서 블로그 글, 인스타그램 게시물 등 다양한 콘텐츠를 만들 수 있어. 개발자가 아니어도 누구나 원하는 걸 만들 수 있는 시대가 온 거야!

오늘 새벽부터 열심히 따라와 줘서 고마워! 궁금한 거 있으면 언제든지 채팅방에 질문 남겨줘! 😊