AI가 직접 크롬 조작? 웹 배포까지 10분 만에! 개발자 필수 확장 활용법

중학생 눈높이로 정리한 AI 앱 만들기 꿀팁!

오늘 AI 앱 만들기 수업, 정말 알차게 진행됐어! 8시 1분에 시작해서 10시까지 꽉 채워서 진행했는데, 혹시 놓친 부분이나 더 알고 싶은 게 있다면 이 정리본을 참고해 봐!

1. 앱 다운로드는 필수!

• 데스크톱 앱 다운로드: 오늘 수업은 앱을 다운로드받아서 진행하는 거야. 이미 받았거나 받고 있을 거라고 생각하고 시작했어.
• 크롬 브라우저 기본 설정: 오늘 수업에서는 크롬 브라우저를 기본 브라우저로 설정하는 게 중요해. 그래야 수업 진행이 막힘없이 잘 될 거야.
  • 크롬 브라우저 실행 → 오른쪽 위 점 세 개 클릭 → 설정 → 기본 브라우저 → 크롬으로 설정!
  • 설정 완료한 사람은 채팅창에 '5' 입력!

2. 확장 프로그램 설치는 오늘 핵심!

• 오늘 수업의 가장 중요한 부분이야!
• 설치 방법:
  1. 크롬 브라우저 실행 → 오른쪽 위 점 세 개 클릭 → 확장 프로그램 → 크롬 웹 스토어 방문
  2. 검색창에 ChatGPT 또는 Claude (영어로!) 입력
  3. 검색 결과에서 원하는 확장 프로그램 선택 후 'Chrome에 추가' 클릭
  4. 설치 후 확장 프로그램 관리에서 '고정'하면 편리하게 사용할 수 있어.
• 설치 완료한 사람은 채팅창에 '7' 입력! 아직 못했다면 '6' 입력!

3. AI 직원과 함께 앱 만들기!

• 바이브 코딩 직원: 오늘 우리가 사용할 AI는 마치 우리 노트북이나 PC에 사는 개발자 직원 같다고 생각하면 돼. ChatGPT는 '코덱스'라는 이름으로, Claude는 'Claude 코드'라는 이름으로 활동해.
• 앱 실행:
  • ChatGPT (코덱스): 앱 실행 후 왼쪽 위 '코덱스' 선택. (구독 안 한 사람은 낮은 버전일 수 있어.)
  • Claude: 앱 실행 후 왼쪽 위 '코드' 탭 선택.
• 나만의 앱 만들기:
  1. 폴더 생성: 앱을 저장할 폴더를 만들어야 해. (C 드라이브에 만드는 걸 추천!)
  2. 프로젝트 만들기: 앱 이름과 폴더를 설정하고 '프로젝트 만들기' 클릭.
  3. 직원에게 명령하기: 만들고 싶은 앱에 대해 상세하게 설명해 줘. (예: "오늘 광복절 이벤트로 중강이 녹화본 링크를 받을 수 있는 앱을 만들어 줘.")
     • 주의! 엔터만 치지 말고, 줄 바꿀 때는 Shift + Enter 사용!
     • ChatGPT 사용자 팁: '골뱅이 크롬'을 이용해서 확장 프로그램과 연동하면 더 편리하게 앱을 만들 수 있어. (예: "오늘 준 강의 잘 들었다고 메일 보내줘. 내가 보내기 버튼만 누르면 되도록 만들어 줘.")
• 앱 완성 후:
  • GitHub: 만든 앱을 저장하는 온라인 저장소. 코드를 안전하게 보관하고 수정 이력을 관리할 수 있어.
  • Vercel: 앱을 웹사이트 주소로 만들어주는 서비스.
  • Superbase: 앱에 필요한 데이터베이스 기능을 제공하는 서비스. (로그인, 회원 관리 등에 필요)

4. GitHub, Vercel, Superbase 회원 가입!

• GitHub: 고양이 모양 아이콘! 회원 가입 후 로그인하면 돼. (가입 완료 시 채팅창에 '1' 입력!)
• Vercel: 삼각형 모양 아이콘! GitHub 계정으로 가입하는 게 중요해. (가입 완료 시 채팅창에 '2' 입력!)
• Superbase: 초록색 번개 모양 아이콘! GitHub 계정으로 가입하는 게 좋아. (가입 완료 시 채팅창에 '3' 입력!)

5. 앱 배포 및 공유!

• 앱이 완성되면 GitHub에 저장하고 Vercel을 통해 웹사이트 주소를 만들 수 있어.
• 수정 사항이 생기면 직원에게 다시 명령해서 GitHub에 반영하고, Vercel에서도 자동으로 업데이트돼.
• 파비콘 설정: 앱 아이콘을 원하는 이미지로 바꿀 수 있어. (직원에게 "내 앱에 어울리는 파비콘 설정해 줘"라고 명령!)
• 마우스 효과: 마우스 모양, 파티클, 클릭 효과 등을 추가해서 앱을 더 멋지게 만들 수도 있어. (이건 선택 사항!)

6. 막히는 부분은 질문!

• 수업 중에 막히는 부분이 있다면 채팅창에 '8'을 입력하고 어떤 부분인지 자세히 설명해 줘.
• 질문은 수업 끝나고 단톡방에서도 계속할 수 있으니 걱정 마!

오늘 수업 정말 수고 많았어! AI 앱 만들기는 이제 시작일 뿐이니까, 오늘 배운 내용을 바탕으로 앞으로도 계속 성장해나가자! 😊