IT 기술 따라잡기

🚀 이번 주 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와 함께 호흡하며 배우고 실험하는 새로운 방식입니다.

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

📢 [라이브 방송 안내]

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와 함께 코딩을 즐기는 새로운 방식입니다! 🙌

인도 미녀와 한 팀 먹어 AI 해커썬에서 우승?! 시애틀 Microsoft 본사에서 열린 하루짜리 행사에서 1등을 거머쥔 비하인드 스토리를 공개합니다.

OSS4AI가 주최하는 이 행사에 저는 세 번째 도전 만에 드디어 1등을 차지했는데요, 우승의 열쇠가 정말 ‘인도 미녀’ 팀원 덕분이었을까요? (농담 반 진담 반!)
이번 팀은 단순히 코드만 잘 짠 게 아니라, 짧은 시간 안에 팀워크를 극대화해서 훌륭한 결과를 만들어낸 것이 가장 큰 승리 비결이었습니다.

이 영상에서는:

시애틀의 다양한 AI 커뮤니티와 작은 해커썬의 장점
하루 안에 ‘아이디어 → 개발 → 발표’까지 마무리하는 진행 방식
만화를 만들려다 갑자기 ‘코미디 오디오’ 앱으로 아이디어가 급변한 과정
낯선 사람들과 급조된 팀이 어떻게 1등에 도달했는지
그리고 제가 얻은 꿀팁 & 배운 점까지
자세하게 공유합니다.
AI 개발자부터 처음 해커썬을 접하는 분, 혹은 단순히 궁금한 일반인들까지 모두 재미있게 보실 수 있을 거예요.
‘짧은 시간에, 전혀 모르는 사람들과 합을 맞춰, 완성도 있는 결과물을 만드는 방법’이 궁금하다면 꼭 시청해 보세요!
클릭 한 번으로 우승 노하우와 현장의 에너지를 그대로 느끼실 수 있습니다.

지금 바로 영상에서 확인하세요! 

https://youtu.be/XHjX1Od7zC4?si=-44or69gx6WzBiRm

오늘은 Hierarchical Arcitecture를 적용한 AI Agent Web Application 소스코드 분석 마지막 시간 입니다.

AI는 맥락을 이해하고 판단하는 능력이 있습니다.

기존의 앱은 속도와 정확성 면에서 탁월합니다.

Agentic AI는 이러한 구기술과 신기술의 장점을 활용해서 더 나은 서비스를 제공하는 것이 목표입니다.

이와 관련해서 Memory 관리, Human in the Loop 기능, 프롬프트 관리, Agentic Workflow 등 많은 기술과 개념들이 나오고 있습니다.

그리고 그러한 기술과 개념들을 적용하는 실험들이 많이 이루어 지고 있습니다.

이번 소스코드 분석은 그러한 새로운 기술과 개념 중 하나인 Prompting 관점에서 Backend 소스코드를 집중적으로 분석해 보겠습니다.

Agentic AI 를 조금 더 깊게 이해하는데 도움이 될 것입니다.

https://youtu.be/BCn3ZjI5nFY?si=TPzHajs_p_jTSSb4

오늘은 지난 시간에 설명했던 어플리케이션의 UI 쪽 소스코드를 심층 분석합니다.

이 어플리케이션은 Frontend tool 로 Streamlit 을 사용합니다.

이 Streamlit 으로 Web Application의 UI 를 어떻게 구성하고 여러 condition들에 따라 처리하는 로직은 어떻게 만드는지 알아봅니다.

그리고 함수끼리 데이터를 주고 받을 때 Session State 을 사용하는 방법과 Function Call 할 때 Parameter 로 전달하는 방법을 비교 분석합니다.

두 방법의 장점과 단점을 알아보고 각각 어떤 경우 사용하는게 더 좋을지 공부해 봅니다.

https://youtu.be/RFmJLUONv2g?si=aX53j3PHN8-Z9WtY

오늘은 LangGraph의 Checkpointers에 대해 배워 봅니다.

지난 시간까지는 사용자와 AI와의 대화를 Streamlit의 Session_state 를 사용해서 저장을 했고 그 데이터를 사용해서 Chatbot 기능을 구현했습니다.

LangGraph에서도 그와 비슷한 기능을 하는 개념이 있습니다.

Checkpointers인데요. 

LangGraph에서 Checkpointers를 구현하는 방법은 MemorySaver, SqliteSaver, PostgresSaver 등이 있습니다.

사실 이 Checkpointers는 Chatbot 기능만을 위한 것은 아니고 다음 단원에서 배울 Human-in-the-loop, Time Travel 등의 고급 기능을 구현할 수 있게 해 주는 주요한 개념입니다.

오늘부터 이 LangGraph의 Checkpointers를 배워 보겠습니다.

https://youtu.be/TwQzTw0A51s?si=You1IAeaLRLsAP6 

이 유투브 클립에서 설명하는 AI Web application의 소스코드는 아래 웹 사이트로 가시면 보실 수 있습니다.

https://catchuplanggraph.streamlit.app/

오늘은 LangGraph 이름이 왜 그렇게 지어 졌는지를 찾다가 발견한 내용을 공유 합니다.

바로 이산 수학 (Discrete mathematics) 중 하나인 그래프 이론 (Graph Theory) 에서 그 이름이 유래한 건데요.

그래프 이론 어렵지 않습니다. 

점 들과 그 점들을 연결하는 선. 유치원때 배운 선긋기 수준의 이야기 입니다.

그리고 그 이론 설명을 들으면 LangGraph 도 정말 쉽게 시작하실 수 있습니다.

개발자는 그냥 점 찍고 선 긋는 것만 구현 하면 됩니다.

자 그럼 AI 어플리케이션 개발의 트랜드인 Multi-Agent와 Agentic Workflow를 사용할 수 있도록 하는 기능을 제공하는 어려운 LangGraph를 정말 쉽게 이해해 보세요.

처음 공부하시는 분들의 진입 장벽을 완전히 낮춰 줄 겁니다.

LangGraph - 점찍고 선만 그으면 됩니다. 정말 쉽게 설명 드립니다. Graph Theory 만 생각하세요.

https://youtu.be/mvGp8Wz3KdI