AI 한 줄 명령! 깃허브·버셀 배포까지 5분 완성, 나만의 브랜딩 페이지 구축 비법!

바이브 코딩으로 나만의 브랜딩 페이지 만들기! (중학생 눈높이 설명)

오늘 뭘 할 거냐면?

오늘은 인공지능(AI)을 이용해서 나만의 멋진 브랜딩 페이지를 만드는 방법을 배울 거야. 마치 너희들의 개인 비서처럼 AI한테 시켜서 뚝딱뚝딱 만들어내는 거지!

구독 안 해도 괜찮아!

ChatGPT나 Claude 같은 AI를 구독하지 않아도 오늘 배울 내용은 충분히 따라 할 수 있어. 구독한 사람들은 더 많은 기능을 쓸 수 있지만, 구독 안 해도 바이브 코딩은 이용 가능하니까 걱정 마!

바이브 코딩이 뭐냐면?

너희들 컴퓨터나 노트북에 사는 똑똑한 개발자 친구라고 생각하면 돼. 이 친구한테 "이거 만들어 줘!" 하고 시키면 뚝딱 만들어주는 거지. 마치 너희들이 사장님이고 AI는 너희들의 직원인 셈이야.

시작해 볼까? (준비물)

1. ChatGPT 또는 Claude 앱 다운로드:

   • ChatGPT: 구글에 "ChatGPT 다운로드"라고 검색해서 데스크톱 앱을 다운받아 설치해.
   • Claude: 마찬가지로 "Claude 다운로드"라고 검색해서 데스크톱 앱을 다운받아 설치해.
   • 팁: 다운로드 받는 동안 잠시 기다려야 할 수도 있어.

2. Chrome 브라우저 설정:

   • Chrome 브라우저를 열고 오른쪽 위에 점 세 개를 눌러 '설정'으로 들어가.
   • '기본 브라우저'를 Chrome으로 설정해 줘. (나중에 확장 프로그램 설치할 때 필요해!)

3. 확장 프로그램 설치:

   • Chrome 브라우저에서 오른쪽 위에 점 세 개를 누르고 '확장 프로그램' > 'Chrome 웹 스토어 방문하기'를 눌러.
   • ChatGPT 사용자: 검색창에 "ChatGPT"라고 치고 첫 번째 나오는 확장 프로그램을 'Chrome에 추가' 눌러 설치해.
   • Claude 사용자: 검색창에 "Claude"라고 치고 첫 번째 나오는 확장 프로그램을 'Chrome에 추가' 눌러 설치해.
   • 팁: 설치 후 확장 프로그램 아이콘이 안 보이면, 퍼즐 모양 아이콘을 눌러 고정해 줘.

4. GitHub 회원가입:

   • 구글에 "GitHub"라고 검색해서 사이트에 들어가.
   • 'Sign up'을 눌러 회원가입을 해. (Google 계정으로 가입하면 편해!)
   • 팁: 회원가입할 때 이메일 인증이나 핸드폰 인증을 할 수 있어.

5. Vercel 회원가입:

   • 구글에 "Vercel"이라고 검색해서 사이트에 들어가.
   • 'Continue with GitHub'를 눌러 GitHub 계정으로 가입해.
   • 팁: 회원가입할 때 'Personal' (개인)으로 선택하고, 이름 입력란에 한글 말고 영문으로 적어야 할 수도 있어. 돈 내라는 메시지가 뜨면 'Personal'이나 'Free' 옵션을 다시 찾아봐!

이제 AI 직원에게 일을 시켜보자!

1. ChatGPT 또는 Claude 앱 실행:

   • 다운받은 ChatGPT 또는 Claude 앱을 실행해.
   • ChatGPT 사용자: 왼쪽 위에 'Codex'를 선택해. (이게 바이브 코딩 기능이야!)
   • Claude 사용자: 왼쪽 위에 'Code'를 선택해. (이게 바이브 코딩 기능이야!)

2. AI 직원에게 명령 내리기:

   • 채팅창에 이렇게 입력해 봐:
     내 컴퓨터(노트북)에 있는 정보와 온라인 정보를 찾아서 나만의 브랜딩 페이지를 만들어 줘. 만든 페이지는 GitHub에 저장하고 Vercel로 주소를 만들어 줘.
   • 팁: AI 직원이 "이거 해도 되나요?" 하고 물어보면 "나 대신 승인" 또는 "허용"을 눌러서 알아서 하게 해 줘.

3. AI 직원의 작업 확인:

   • AI 직원이 열심히 일하는 동안, 너희들 브라우저에서 마우스가 저절로 움직이는 걸 볼 수 있을 거야. (이게 확장 프로그램이 작동하는 모습!)
   • AI가 "GitHub에 올리고 Vercel로 주소 만들까요?" 하고 물어보면 "올려줘" 또는 "네"라고 대답해 줘.

4. 결과물 확인!

   • AI 직원이 일을 다 마치면, Vercel에서 만들어진 너만의 브랜딩 페이지 주소를 받을 수 있을 거야!
   • 만약 결과물이 마음에 안 들면, AI한테 "이 부분을 이렇게 수정해 줘" 하고 다시 시켜볼 수 있어.

더 나아가기 (심화 과정)

• Superbase 회원가입: 나중에 설문 조사나 회원가입 기능이 있는 앱을 만들고 싶다면, Superbase에 회원가입해서 온라인 데이터베이스를 이용할 수 있어. (GitHub 계정으로 가입하면 편해!)
• 디자인 수정: AI가 만들어준 디자인이 마음에 안 들면, 다른 멋진 페이지 주소를 알려주고 "이런 디자인으로 바꿔줘" 하고 시킬 수 있어.
• 마우스 효과 등 추가: 마우스 모양을 바꾸거나 클릭 효과를 넣는 등, 더 꾸미고 싶다면 AI한테 시켜서 적용할 수 있어.

오늘 배운 걸로 뭘 할 수 있을까?

오늘 배운 바이브 코딩과 GitHub, Vercel, Superbase를 이용하면 나만의 브랜딩 페이지뿐만 아니라, 나만의 웹사이트, 앱, 심지어 게임까지도 만들 수 있어! 처음에는 어렵게 느껴질 수 있지만, AI 직원과 함께 차근차근 해나가면 분명 멋진 결과물을 얻을 수 있을 거야!