IT 기술 따라잡기

지난 주 재미로 하는 Vibe Coding 에서 Voice 선택 기능을 넣다가 발생한 에러를 시간 관계상 수정하지 못한채 끝났습니다.

이날 작업한 Source Code 를 GitHub 의 Main Branch에 올리지 못했는데요.
참여자분 중 한 분이 별도로 branch를 만들어서 관리하자는 의견을 주셨습니다.

그래서 별도의 branch를 만들어서 작업을 하고 에러없이 잘 동작하는 것이 확인 된 파일들만 Main branch에 반영하는 Process를 만들었습니다.

이 비디오는 그 Process를 위해 GitHub branch 작업을 AI 를 통해 Vibe Coding으로 해결하는 과정을 담았습니다.

다음 라방에 참여하시는 분들 뿐만 아니라 Vibe Coding 이 어떤 것인지 궁금하신 분들도 짧은 시간에 직접 눈으로 확인 하실 수 있습니다.

https://youtu.be/22ubBLBDHuY

참고로 다음 라방 링크는 아래와 같습니다.

https://www.youtube.com/live/WRJrA41MFts?si=PDNG5tAEOe_iIy73

정말 코딩 하나도 안하고 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

🔥 GitHub에서 AI Agent 어플리케이션을 쉽고 빠르게 개발하는 방법! 🚀

이번 세미나에서는 GitHub을 활용한 AI Agent 어플리케이션 개발을 편리하게 진행하는 방법을 알려줍니다!
그리고 직접 Demo 시연을 통해, AI 기술이 실제 비즈니스에 어떻게 적용될 수 있는지 생생하게 보여줍니다.

💡 특히! Ayca가 소개한 AI 기반 보험 청구 자동화 시스템이 인상적이었습니다.
🚗💥 자동차 사고 후, AI Agent가 자동으로 보험 청구서를 작성해주는 어플리케이션!
📹 사고 차량을 동영상으로 촬영 후 업로드하면?
✅ AI Agent가 사고 부위를 자동 감지하고,
✅ 보험 청구서까지 자동 생성!
✅ 관련 사진까지 첨부하여 완벽한 서류 제출 가능!

💎 놀라운 점! 이 소스코드는 오픈 소스로 제공되며, 누구나 다운로드하여 사용할 수 있습니다.
이미 미국의 한 보험회사에서는 이러한 AI 기술을 활용하여 실제 서비스를 운영 중이라고 하네요.

📌 이 비디오에서 더 많은 실전 Demo와 비즈니스 적용 가능성을 확인할 수 있습니다!
GitHub의 수많은 오픈 소스 프로젝트 중, 실제 비즈니스에 바로 적용할 수 있는 AI Agent 기반 솔루션이 많습니다.
하지만, 단순한 개발 기술만으로는 충분하지 않습니다. 비즈니스 적용을 위한 전략과 실행력이 필요하죠.

🔥 여러분도 AI 기술을 배워서, 실제 비즈니스에 적용해보고 싶지 않나요?
이 영상을 보고 나면, AI Agent 어플리케이션을 개발하고 활용하는 방법을 직접 배울 수 있습니다!
개발자가 아니더라도, AI 기술이 어떻게 실생활에 적용될 수 있는지 이해하는 데 큰 도움이 될 것입니다.

👉 지금 바로 클릭하고, AI Agent 기술이 어떻게 비즈니스에 활용될 수 있는지 확인해 보세요!
📺 이 영상 하나로 AI 기술의 새로운 가능성을 만나보세요! 🚀

https://youtu.be/B4I8HyGUGT0?si=iDoU8JpLERQZyTEO

https://youtu.be/N4t-YQufGLg?si=ySA0Toof6Ng69APf

Today, I focused on refining the AI web application we previously developed by undertaking some critical refactoring and implementing enhancements.

The refactoring work addressed an issue where session_state in Streamlit was unintentionally sharing message data across different pages. By ensuring that shared API keys are used consistently while individual messages are managed separately, the application now functions more reliably across various pages.

On the enhancement side, I expanded the application's capabilities by integrating OpenAI's ChatGPT alongside Anthropic's Claude, offering more flexibility in model usage.

In addition to these improvements, I also covered some practical tips for developers. These include committing changes in Visual Studio Code, pushing updates to GitHub, and using GitLens to compare local and server-side files. These insights are grounded in real-world scenarios and are essential for efficient development workflows.

Moreover, you'll see how to methodically troubleshoot when results don't match expectations—a vital skill in any developer's toolkit.

As part of my journey into LangGraph, I also combined the Quick Start tutorial code with Streamlit to create an interactive web page. This integration serves as an excellent example of adding tools to enhance LangGraph functionality.

Lastly, I've left one error in the code as a challenge for you to solve before our next session. It’s an excellent opportunity for us to explore problem-solving together.

Check out the full video here: https://youtu.be/N4t-YQufGLg?si=uPlA2xqlUDUZFrgw