AI툴이 발달하면서 정말 "딸깍" 하면 "뚝딱" 하고 웹사이트 하나가 만들어지는 세상이 됐습니다.HTML을 몰라도 CSS를 몰라도 AI와 대화하듯 이것 만들어줘, 저것 만들어줘 하기만 하면 됩니다. 디자인도 최근에 나온 구글의 스티치를 이용하면 초안을 잡는데 아주 쉽고, 이것을 피그마로 가져가면 보다 더 정밀하게 디자인할 수도 있습니다. (물론 스티치에서 만든 디자인만으로도 웹사이트 만드는데 문제가 없습니다.) 혹시 내가 원하는 웹디자인이 있다면 핀터레스트 같은 곳이나 실제 웹사이트를 캡처해 던져주기만 해도 비슷한 스타일의 디자인을 만들어줍니다. 그렇게 만든 웹사이트를 다른 사람들에게 보여주려면 "배포" 라는 것을 해야합니다.흔히 깃허브에 올려놓으면 "Page"라는 기능을 통해 외부에 공개가 가능합니다...

AI 시대가 오면서 다양한 용어들이 나오는데 그 중 AI를 위한 USB-C라고 하는 MCP에 대해 알아보겠습니다. https://youtu.be/ukWiwYWODFI?si=UXyCDnQ-o4G9Mf1Y#1 기초학습 https://youtu.be/7T9JSCkVGYI?si=l0o7sWhtZ5elxP-S #2 심화학습 **MCP(Model Context Protocol)**는 고립되어 있던 AI 모델(LLM)이 외부 데이터나 도구와 소통할 수 있도록 연결해 주는 표준화된 개방형 통신 규약입니다. 초보자들도 이해하기 쉽도록 흔히 'AI 세계의 만능 어댑터' 또는 **'AI를 위한 USB-C'**라고 불립니다.과거에는 AI 애플리케이션이 특정 데이터베이스나 로컬 파일에 접근하려면 각각 맞춤형 연결 코드를 ..

TL;DR — 서버 없이, 개인 파일을 외부로 전송하지 않고 브라우저 안에서만 이미지를 PDF로 변환하는 웹앱을 SvelteKit + Tailwind CSS v4로 만들었습니다. GitHub Pages에 무료로 배포해서 누구나 쓸 수 있습니다.왜 만들었나요?스캔 이미지나 사진 몇 장을 PDF로 묶어 제출해야 할 때가 꽤 자주 있습니다. 그런데 vFlat 앱으로 사진을 찍었더니 유료 서비스에 가입을 해야 하더군요. 그래서 급히 직접 만들어보기로 했습니다. 어떻게 만들었나요?안티그래비티에 대략적인 기능을 설명해 주었습니다.그러자 스스로 개발초안을 만들며 개선안까지 제시를 해주었습니다.처음에는 서버에서 동작하는 것으로 생각했으나, 브라우저에서도 처리할 수 있다고 제안까지 한 것입니다. 그리고 안티그래비티가 임..

🚀 시작하게 된 이유주식을 하다 보면 항상 아쉬운 게 있었습니다. 국내 증권사 HTS는 기능은 많지만 UI가 복잡하고, 해외 주식을 보려면 앱을 또 따로 켜야 하고, 환율은 어딘가에서 또 따로 확인해야 하고…그래서 아예 내가 원하는 기능만 담은 대시보드를 직접 만들어보자고 생각했습니다."코스피, 나스닥, 내가 보유한 주식, 환율까지 한 화면에서 바로 보고 싶다." 그게 My Stock의 시작이었습니다. 📱 어떤 서비스인가요?My Stock은 실시간 글로벌 시장 지수, 개별 주식 시세, 환율을 한 화면에서 모니터링하고, 내 포트폴리오를 원화 기준으로 관리할 수 있는 개인용 금융 대시보드 웹앱입니다. 주요 기능을 정리하면 이렇습니다:📊 글로벌 지수 모니터링: 코스피, 코스닥, 나스닥, S&P 500을..

최근 AI 툴들을 써보면서 아예 처음부터 만들어 볼 수 있을까? 싶어서 클로드를 이용해 만들어보기로 했다. 위의 이미지처럼 처음에는 그냥 브라우저 확장앱을 만들어보고 싶었다.그래서 프롬프트도 자세하게 지정하지 않고 그냥 생각나는대로 적어보았다.그랬더니 google vision과 traslation API를 이용하는 확장앱을 간단하게 만들어주었다. 그리고 몇 번의 에러 수정과 개선을 통해 그럭저럭 만족할 만한 앱이 만들어졌다.여기서 내가 한 것이라고는 클로드에 프롬프트를 주고 구글에서 API를 키를 받아온 것 밖에는 없다. 위는 UI를 조금 개선하고 원본 텍스트도 나오게끔 수정한 버전이다.이미지에 마우스를 갖다대기만 하면 팝업창이 떠서 실시간으로 번역해준다.영어, 일본어 상관없다.심지어 한글도 원본 그..