IT 기술 따라잡기

🚀 이번 주 Vibe Coding 안내

이번 주 라방에서는 아래와 같은 작업을 하겠습니다:

📌 Prompt-Driven Restart 방법론 실험!
🧪 지난주에 성공적으로 적용한 새로운 방법론
🔄 에러를 수정하기보다, 처음 사용한 프롬프트에 지시문을 추가해 처음부터 다시 시작!
⚙️ Vibe Coding에선 이 방식이 더 효율적일 때가 많습니다.
🗣 이번 주엔 이 방법을 활용해 영어 회화 Tutor 앱을 만들어 봅니다!
💬 실전에서 얼마나 효과가 있는지 함께 실험해 보세요!

🔤 용어 해설: Prompt-Driven Restart
Prompt-Driven : 사용자가 작성한 Prompt(지시문)가 개발 프로세스를 주도한다는 의미. 즉, 개발 흐름이나 구조는 코드가 아니라 프롬프트 중심으로 설계되고 변화함.
Restart : 기존 결과물(앱이나 코드)을 수정하는 것이 아니라 처음부터 새로 시작하는 방식을 택함. 단, 아예 무작정 새로 시작하는 것이 아니라, 이전의 경험과 프롬프트를 반영해서 더 나은 결과를 만든다는 의미.

🧠 개념 설명
✅ 전통적인 개발 방식
문제가 생기면 기존 코드를 분석하고 수정(refactor)함

개발자가 직접 버그 위치를 찾아서 고침

코드는 자산이자, 수정의 대상임

✅ Prompt-Driven Restart 방식
코드 자체보다 프롬프트가 중심

문제가 생기면 코드 수정 대신, 초기 프롬프트에 개선 지시문을 추가

개선된 프롬프트로 AI에게 다시 전체 코드를 생성시킴

일종의 지시문 중심 반복학습 (iterative prompting) 구조

🚀 장점
속도 : 많은 경우 디버깅보다 빠르게 해결 가능
단순성 :  복잡한 코드 이해 없이, 명확한 지시만으로 개선 가능
재현성 :  프롬프트만 있으면 언제든 같은 기능을 만들 수 있음
학습 중심 : 프롬프트를 다듬으며 사용자도 발전함 (Prompt Engineering 학습)

Notify Me (알림 설정) : https://www.youtube.com/live/VmSDRP1B6j4?si=HzWDs_Hz0ru7Njuv

🕔 방송 일정
📅 2025년 6월 22일 (일)
🕘 오후 9시 (KST, 한국) / 🕔 오전 5시 (PST, 시애틀)

📣 라이브 방송에 참여해서 말만 하세요!
✨ 여러분의 아이디어가 실시간으로 구현될 수도 있습니다!

🔥 부담 없이 함께 해요!
🤖 Vibe Coding은 AI에게 코딩을 시키는 것이 아니라,
👥 AI와 함께 호흡하며 배우고 실험하는 새로운 방식입니다.
🙌 지금 바로 함께해 보세요!

🚀 이번 주 Vibe Coding 라이브 방송 안내

이번 주 라방에서는 아래와 같은 작업을 하겠습니다:

🔁 지금까지 한 일 다시 반복하기
💾 프롬프트만 보관되어 있다면 언제든 쉽게 재작업 가능!
🌟 이것이 Vibe Coding의 장점 중 하나입니다.
📂 사용했던 프롬프트를 재사용해서 처음부터 다시 시작해 보겠습니다.
⚠️ DropDown 등 에러가 났던 부분은 미리 알려줘서 에러가 나지 않도록 해보겠습니다.
🧠 AI가 코딩을 대신해주기 때문에 가능한 방법이죠!
📝 인간은 프롬프트에 더 집중하면 언제든지 쉽게 재작업할 수 있습니다.
🧪 이번 시간에 그 가능성을 실험해보겠습니다.

🕔 방송 일정
📅 2025년 6월 15일 (일)
🕘 오후 9시 (KST, 한국) / 🕔 오전 5시 (PST, 시애틀)

🔔 알림 설정하기
👉 https://www.youtube.com/live/Eg4EIf7mYFw?si=jwCxOxBPjf8xQL0P

🔧 작업할 앱
🌐 https://translate.hint.services

📂 GitHub Repository
▶️ https://github.com/hoffination/openai-realtime-console.git

📣 라이브 방송에 참여해서 말만 하세요!
✨ 여러분의 아이디어가 실시간으로 구현될 수도 있습니다!

🔥 부담 없이 함께 해요!
🤖 Vibe Coding은 AI에게 코딩을 시키는 것이 아니라,
👥 AI와 함께 호흡하며 배우고 실험하는 새로운 방식입니다.
🙌 지금 바로 함께해 보세요!

🚀 이번 주 Vibe Coding 안내

🔔 라방 알림 설정하기
👉 https://www.youtube.com/live/ZbjMER3kcXY?si=H47nh0HrsiK5tMCh

이번 주 라방에서는 아래와 같은 작업을 하겠습니다:
  
🧩 1. Dropdown issue 해결을 위한 세 가지 시도
🔄 질문 방법 바꾸기:
💬 단순히 고치라고 하지 않고, 문제가 있는 부분을 대화로 유도하는 방식

🧠 AI Model 바꾸기:
🧪 GPT-4.1, GPT-4.0, Claude Sonnet 등 비교 테스트

🛠️ Vibe Coding Tool 바꾸기:
🧰 GitHub Copilot, Cursor AI, Windsurf, Tabnine, Claude Code, Bito, FauxPilot, Tabby, AI Toolkit 등

🗣️ 2. 회화 공부 기능 추가 시도
🎯 사용자가 상황 설정 (예: 커피 주문, 공항 이민국 대화 등)
🔄 대화 5번 반복 (AI 질문 → User 음성 응답)
📝 영어 회화 내용 평가
📚 문법 평가
🔊 발음 평가
💬 현대 미국식 표현 문장 추천

💡 추가하고 싶은 기능이 있다면 댓글이나 라방에서 말씀해 주세요!

💡 3. 금주의 Vibe Coding Tip 하나 공개!

🕔 방송 일정
📅 2025년 6월 8일 (일)
🕘 오후 9시 (KST, 한국) / 🕔 오전 5시 (PST, 시애틀)

📂 지난주 작업한 소스코드
🔗 https://github.com/solkit70/CUA_VibeCoding_01

🌐 지난 주 방송 다시 보기
▶️ https://www.youtube.com/live/21zTrgbaRrY?si=OHcn6GGzB3yaKiuP

📣 라이브 방송에 참여해서 말만 하세요!
✨ 여러분의 아이디어가 실시간으로 구현될 수 있습니다!

🔥 부담 없이 함께 해요!
Vibe Coding은 AI에게 코딩을 시키는 것이 아니라,
🤖 AI와 함께 호흡하며 배우고 실험하는 새로운 방식입니다.
🙌 지금 바로 함께해 보세요!

이번주 방송 알림 설정

지금까지 작업한 소스코드

지난 주 방송

https://www.youtube.com/live/HJCR3JNjuWg?si=gXN9UF3oOKOEb1cs

🚀 이번 주 Vibe Coding 라방 안내

이번 주에는 완성도 높은 Open Source 번역 앱을 기반으로

✨ 기능을 수정하고, ➕ 새로운 기능을 추가해서

우리만의 번역 앱으로 발전시켜 보겠습니다.

물론 바이브 코딩으로요! 💻🤝

🔍 우리가 사용할 AI 번역 앱은 바로 이것입니다:

🌐 https://translate.hint.services/

👀 직접 사용해 보시고,

💡 "어떤 기능을 바꾸면 좋을지"

💡 "어떤 기능을 추가하면 좋을지"

생각해 오시면 좋습니다!

📣 그리고 라이브 방송에 참여해서 말만 하세요!

✨ 그 기능이 실시간으로 만들어질 수도 있습니다!

🧑‍💻 이 앱을 여러분의 Local 환경에 설치하는 것을 추천드립니다.

설치 방법은 아래 영상에서 확인할 수 있어요:

🎬    https://youtu.be/rOLmI7jUDgQ?si=Kd7Qi...

📦 오픈소스 코드 저장소 (GitHub):

🔗 https://github.com/hoffination/openai...

🕔 방송 일정

📅 2025년 5월  25일 (일)

🕘 오후 9시 (KST, 한국) / 🕔 오전 5시 (PST, 시애틀)

🔥 부담 없이 함께 해요!

Vibe Coding은 AI에게 코딩을 시키는 게 아니라,

🤖 AI와 함께 호흡하며 배우고 실험하는 새로운 방식입니다.

🙌 지금 바로 함께해 보세요!

바이브 코딩 하면 가장 대표적인 툴이 Cursor AI 입니다.
제 주위에 IT 에 업계에 있는 사람들은 대부분 Cursor AI 를 사용하고 있고 대부분 호평인데요.

그래서 제가 직접 비교해 보기로 했습니다.

지난 '재미로 하는 Vibe Coding' 라방에서 Grok 3 로 만든 Prompt 로 번역 앱을 바이브 코딩으로 만들었는데요.
1시간 안에 미처 구현하지 못한 기능들이 있었습니다.

똑 같은 Prompt 로 Cursor AI 에서 번역 앱 개발을 시도해 봤습니다.

과연 어느 툴이 더 좋을까요?

예상치 못한 에러에 제가 대처하는 방법을 생생하게 공유하기 위해서 진행 과정을 거의 Real 로 보여 드립니다.

Vibe Coding 에는 두가지 요소가 있습니다.
해당 Tool의 기능과 실제로 코딩을 하는 AI 모델의 성능.

둘 다 AI 모델은 ChatGPT, Claude, Gemini 같은 모델을 사용합니다.
실제 코딩을 누가 더 잘하느냐는 이 AI 모델의 성능에 달려 있구요.

Vibe Coding Tool 은 그 AI 모델에게 코딩을 시키기 위해 얼마나 편리한 기능들을 제공하는가가 평가 기준이 될 것 같습니다.
그리고 각각 내부 Prompt로 AI 모델과 Communication을 할 텐데 거기에서 오는 기능의 차이도 있을 테구요.

오늘은 실제 제가 바이브 코딩을 할 때 사용되는 기본 기능들만 비교해 봤습니다.

제 기준으로는 기본 기능면에서는 그 둘이 크게 차이가 나지는 않는 것 같아요.
Response 부분은 Cursor AI 가 좀 더 체계적이고 자세하게 주는 것 같구요.
UX 관점에서 Github Copilot 이 제게는 좀 더 직관적인 부분이 있어서 편리 했습니다.
가격 경쟁력 면에서도 Github Copilot 이 우세 했구요.

그 외에도 제가 느낀 점들을 이 비디오에 정리 해 놨습니다.

앞으로 계속 두 툴을 같이 사용할 것 같습니다.
그러다 보면 또 다른 특성들을 발견하게 되겠죠.
재밌는 작업이었습니다.


https://youtu.be/scG3agQQ79E

📢 [라이브 방송 안내]

5월 4일, 이번 주 일요일!

🎥 재미로 하는 Vibe Coding – 참여하셔서 기능을 개선해 주세요!

기여자 명단에 여러분의 이름이 추가됩니다.

[Catch Up AI] 재미로 하는 Vibe Coding – AI 번역 및 문법 튜터 Open Project 계속 진행 중!

코딩 경험이 없어도 괜찮습니다.

AI와 함께 앱을 개발하며 함께 성장하는 특별한 도전에 여러분을 초대합니다! 🚀

🛠️ 프로젝트 소개

이 프로젝트는 유튜브 채널 Catch Up AI에서 진행하는 누구나 참여할 수 있는 Open Project입니다.

AI 번역 앱에 이어, 이번에는 문법 교정 기능을 중심으로 함께 기능을 개선해 나갑니다!

🔄 이번 라이브 방송 주요 내용

지난 시간, Patrick Seo님의 아이디어로 문법 교정 기능이 추가되었습니다.

기존 Translator 메뉴에 이어 Grammar 메뉴가 생겼고,

이번 방송에서는 이 기능을 직접 개선하고 확장할 예정입니다!

📺 지난 방송 다시 보기:

▶️ https://www.youtube.com/live/XQ7YTlbQgYc?si=D6Xvu2JoF6rPjctu

💻 소스코드 Repository:

🔗 https://github.com/solkit70/catchupai_openproject_AI_translator

🚀 이번에 다룰 주요 기술

OpenAI Realtime API (실시간 번역)

Whisper API (음성 인식)

GPT-4o (문법 교정 및 자연어 응답)

Streamlit (빠른 앱 개발 프레임워크)

그리고 여러분의 제안이 곧 다음 기능이 됩니다!

📚 기여자 명단에 기록됩니다!

Vibe Coding에 참여하신 분들은

GitHub Repository의 README.md에 기여자 명단으로 등록됩니다.

GitHub ID뿐 아니라, 본명, LinkedIn 링크 등 포트폴리오 정보도 함께 추가 가능!

함께 만든 이력을 직접 남기고, 성장의 증거로 활용하세요.

🎯 프로젝트의 목표

AI와 협력하며 즉흥적으로 코딩을 함께 경험

실패를 두려워하지 않고 새로운 기능을 실험

함께 배우며 성장하는 진짜 협업 프로젝트 만들기

🕔 방송 일정

📅 2025년 5월 4일 (일)

🕔 오전 5시 (PST, 시애틀) / 🕘 오후 9시 (KST, 한국)

🔗 라이브 방송 참여 링크

👉https://www.youtube.com/live/Wt8lj_loQhk

🔔 지금 미리 [알림 설정(Notify me)] 버튼을 눌러주세요!

방송 시작 전에 알림을 받아보실 수 있어요.

🔥 부담 없이 함께하세요!

Vibe Coding은 AI에게 코딩을 시키는 게 아니라,

AI와 함께 코딩을 즐기는 새로운 방식입니다! 🙌

재미로 하는 Vibe Coding  Open Project 제안 합니다.

🛠️ 프로젝트 소개

이번 프로젝트는 저의 유튜브 채널 Catch Up AI에서 진행하는 오픈 프로젝트입니다.
누구나 부담 없이 참여할 수 있으며, 함께 힘을 모아 AI 번역 앱을 만들어가는 여정을 이어가고 있습니다.

🎯 프로젝트의 목표

AI와 협력하는 즉흥적인 Vibe Coding 방식 경험

실험과 개선을 통해 나만의 노하우(Know-How) 쌓기

서로 배우고 도우며, 진짜 협업 코딩 경험 만들기

소스코드 공개:
💻 GitHub Repository - https://github.com/solkit70/catchupai_openproject_AI_translator

지난 시간에 만든 기본 버전을 기반으로, 더 깔끔하고 편리한 번역 앱으로 발전시킬 예정입니다!

🔄 이번 라이브 방송 주요 내용

이번 시간에는 지난 시간에 만든 AI 번역 앱을 개선하고 업그레이드하는 작업을 진행합니다!

지난 작업 영상:

https://www.youtube.com/live/aSiw8ryTQ9U?si=qelpnBi_aHIGJIbX

📢 [라이브 방송 안내]  

4월 27일 이번 주 일요일!  

[Catch Up AI] 재미로 하는 Vibe Coding - AI 번역 앱 Open Project 계속 진행합니다!

🕔 방송 일정

일시: 2025년 4월 25일 (금) 오전 5시 (PST 시애틀) / 오후 9시 (KST 한국)

https://www.youtube.com/live/XQ7YTlbQgYc?si=vP4u4YDujiCkP4ml

코딩 경험이 없어도 괜찮습니다.
AI와 함께 앱을 개발하며 함께 성장하는 특별한 도전에 여러분을 초대합니다! 🚀

🔥 부담 없이 함께 해요!

Vibe Coding은 코딩을 시키는 게 아니라,
AI와 함께 코딩을 즐기는 새로운 방식입니다! 🙌

정말 코딩 하나도 안하고 1시간만에 AI 어플리케이션 개발이 가능하네요.

오늘 재미로 하는 Vibe Coding 에서는 AI 번역 앱을 개발 했습니다.

그냥 한번 따라만 해 보세요.

코딩 하나도 모르는 분들도 AI 번역 앱을 개발하실 수 있도록 차근 차근 설명하면서 시범을 보였습니다.

지인분 부탁으로 GItHub Copilot 으로 이 앱을 주말에 만들었습니다.

다른 분들에게도 도움이 될 것 같아서 그 과정을 유투브 라이브에서 한번 더 반복했습니다.

결과는 같고 과정은 달랐습니다.

Vibe Coding 은 어떻게 진행이 되야 되는지 한번 직접 경험해 보세요.

그러면 어떻게 해야 좀 더 잘 할 수 있는지 Know How 가 생기실 겁니다.

라이브 접속하신 분들과 대화도 하고 질문과 답변도 합니다.

한번 처음부터 끝까지 느긋하게 보세요.

좀 더 빨리 진행하시고 싶으신 분들은 실행 속도를 1.25 나 1.5 로 해 놓고 보셔도 좋을 것 같습니다.

재미로 하는 Vibe Coding 은 라이브에 접속하신 분들과 같이 한두시간 내에 앱을 개발해 보는 것을 목표로 하고 있습니다.

코딩 전혀 모르셔도 됩니다.

다음 라이브 때도 많은 분들 접속하셔서 같이 앱을 개발해 보면 좋겠습니다.

라이브에 접속 못 하셨더라도 채팅창에 질문 남겨 주시면 잘 답변 드리겠습니다.

그럼 다음 라이브 방송에서 뵙겠습니다.

https://www.youtube.com/live/r9zwLkMV1DE?si=vnhADCuMnyZHs4rA

코딩은 꿈도 못 꾸셨던 분들 한번 도전해 보세요.
AI 가 도와 드립니다.
AI 시대에는 어플리케이션을 직접 개발하세요.

요즘 Vibe Coding 이라는 말이 회자되고 있습니다.
AI 를 이용해서 코딩을 하는 것을 말합니다.

AI가 코딩의 진입 장벽을 낮추었습니다.
의외로 쉽습니다. (첨부터 끝까지 무료로 진행할 수 있는 방법을 알려 드릴께요)

저도 Vibe Coding 연습을 시작했습니다.
다양한 Tool 들이 있지만 저는 무료로 제공되는 마이크로소프트의 GitHub Copilot 을 사용하고 있습니다.

배우는 과정을 유투브 라이브를 통해 실시간으로 보여 드리고 있습니다.

참여자분들이 채팅창에 의견을 주시면 즉석해서 반영하면서 같이 배워 보려고 합니다.
벌써 두번의 라이브 방송을 했습니다.

처음이라 사용법을 몰라서 채팅창이 Disable 되도록 세팅을 해 놔서 이 두 번은 저 혼자만 했는데요.
다음에는 제대로 세팅을 해서 여러분들도 실시간으로 참여할 수 있도록 할게요.

제 채널에 구독 하시고 알림 설정 하시면 다음 '재미로 하는 Vibe Coding' 라방에 참여하실 수 있습니다.
준비 되는 대로 라방을 진행 하겠습니다. 아직 미리 시간을 예약하는 것은 힘들 것 같습니다.

이번 두번의 라이브 방송에서는 GitHub Copilot 을 시켜서 코딩을 했습니다.
간단한 어플리케이션을 만들고 Public 하게 Publish 도 했습니다.

여러분도 이 두 라이브 방송을 따라하시면 아래와 같은 어플리케이션을 개발해서 이렇게 배포까지 가능합니다.

처음부터 끝까지 모두 무료입니다.

https://guidinglight.streamlit.app/

Note : 아래 설명되는 강좌들은 이 Playlist 에서 모두 보실 수 있습니다.
https://youtube.com/playlist?list=PLRQGNaa1hGF1eBvNMVquJ5_hFw4mW7_MO&si=bbAY5s9PBzTZzt4V⁠

이번 두 번의 라이브 방송에는 아래 내용들을 다뤘습니다.

https://youtube.com/live/M4PXDMFsYp8?feature=share

o Catch Up AI Youtube Live 1

재미로 하는 Vibe Coding - GitHub Copilot : Ask, Edit, Agent

* 아래 AI Web App 을 Enhancement 하기
https://catchupai.streamlit.app/Todays_Counsel 

- 더 많은 언어 지원하기                             
- 좀 더 연령대에 맞는 조언 해 주기          
- 관련 Image Display 하기                          
- GitHub 에 Upload 하기

* GitHub Copiot 기능 배우기
- Ask, Edit, Agent                           
-  Settings : Copilot Next             

https://youtube.com/live/HprHBSG1I00?feature=share

o Catch Up AI Youtube Live 2

재미로 하는 Vibe Coding - GitHub Copilot : GitHub에 Upload, Streamlit Cloud 에 Publish 등등

*  AI Web App 을 Enhancement 하기
https://catchupai.streamlit.app/Todays_Counsel 

지난 시간 못한 것 마무리

- GitHub Copilot Edit Mode 사용해서 LICENSE , README.md 파일들 한국어 버전 생성
- GitHub Copilot Agent Mode 사용해서 GitHub에 소스코드 Upload          
- GitHub Copilot Ask Mode 사용해 보기 (AI Agent 에 대해 나만의 정의)                  
- Public Publish 하기 : Streamlit Cloud    

잡담      
- 위 Service 들 아직 모두 무료 임                       
- Vibe Coding Tool들 비교하기
- Vibe Coding 에 임하는 자세 : Plan Plan Plan 
- 마무으리 : AI 시대 코딩 배울 필요 없다는 말
      


그리고 참고로 이전에 GitHub Copilot 을 설치하고 사용하는 기초 강좌도 하나 올렸습니다. 참고 하세요.

https://youtu.be/0GWfJoDgQZ0

o AI로 AI 웹앱을 만듭니다. 코딩 몰라도 5분만에 뚝딱! 첨부터 끝까지 모두 무료

GitHub Copilot을 이용해서 5분만에 뚝딱 웹 앱 만들기

개발자 뿐만 아니라 비전공자도 접근 가능한 초간단 앱 제작 방법
완전 무료 서비스

1. 필요한 Tool들(VS Code, GitHub Copilot Chat)을  설치합니다.
2. GitHub Copilot AI 에게 코딩을 하라고 지시를 합니다.
3. GitHub Copilot AI 에게 에러를 고치도록 합니다.
4. Copilot Edits 를 이용해서 기존 파일들을 편집합니다.
5. GitHub 의 무료 AI API service 사용법을 배웁니다.
Tip 1  : .env 파일로 편리하게 key 값 관리하기
Tip 2 : 원하는 결과를 얻으려면 질문을 잘 해야 합니다.


참고로 이 비디오들과 앞으로 진행될 라이브 방송은 이 Playlist 에서 보실 수 있습니다.

https://www.youtube.com/playlist?list=PLRQGNaa1hGF1eBvNMVquJ5_hFw4mW7_MO

코딩 몰라도 OK!  IT 초보자도 따라만 하면 AI로 스마트 웹 앱 제작할 수 있습니다.

얼마전 GitHub Copilot 이 크게 업데이트 됐습니다.

시애틀에 살면서 AI 관련 세미나에 많이 참석하는데 마이크로소프트에서 적극적으로 홍보하는 모습을 많이 봅니다.

그래서 한번 사용해 봤습니다.

코딩을 하나도 몰라도 따라할 수 있도록 비디오로도 만들어 봤습니다.

IT 쪽 관련 경험은 없지만 직접 웹사이트를 개발하고 싶으셨던 분들...

더군다나 웹 사이트 안에서 AI 를 사용해서 서비스를 하고 싶으셨던 분들...

잠깐 따라만 하세요.

쉽게 만드실 수 있습니다.

오늘은 첫 시간으로 아래 내용들을 다뤘습니다.

1. 필요한 Tool들(VS Code, GitHub Copilot Chat)을  설치합니다.

2. GitHub Copilot AI 에게 코딩을 하라고 지시를 합니다.

3. GitHub Copilot AI 에게 에러를 고치도록 합니다.

4. Copilot Edits 를 이용해서 기존 파일들을 편집합니다.

5. GitHub 의 무료 AI API service 사용법을 배웁니다.

Tip 1  : .env 파일로 편리하게 key 값 관리하기

Tip 2 : 원하는 결과를 얻으려면 질문을 잘 해야 합니다.

AI 시대의 능력자는 질문을 잘 하는 사람입니다.

오늘 작성한 웹앱은 앞으로 계속 더 개선해 나가면서 새롭고 유용한 GitHub Copilot 과 다른 코딩 기술들을 공유하겠습니다.

https://youtu.be/0GWfJoDgQZ0?si=PV-N2IkfLxbirscf