본문 바로가기

chatGPT와 인공지능AI283

AI로 홈페이지 만들기 - SQLITE MCP 연결 바이브 코딩 홈페이지 만들기 시리즈 이어서 나갑니다.지난 시간에는 회원가입/로그인을 연동했었는데요.이번 시간에는 향후 더 편리한 작업을 위해 sqlite MCP ( 한글판 by 크레이 ) 연결을 할겁니다.https://itadventure.tistory.com/763 AI로 홈페이지 회원가입/로그인 만들기이제부터는 본격적인 홈페이지 동적 기능을 만들 차례입니다.홈페이지 개발과정에 가장 먼저 구현해야 하는 것은 무엇일까요?개발자마다 의견이 분분할 수 있지만 저는 '회원가입/로그인' 기능itadventure.tistory.com이후로도 계속해서 Windsurf의 기본 기능으로 지시하면 이것 저것 해주긴 하지만,그 과정에 불필요한 소스 파일들을 많이 생성하는 문제가 있었습니다.그에 대한 좋은 해결책이 있는데요.. 2025. 7. 6.
mysql MCP 서버 개발(PHP) Windsurf AI에서 사용하는 MCP, 개발을 도전해보았습니다.처음에는 바이브 코딩으로 하면 쉽게 되려니 생각했는데요. 웬걸 다 되었다고 하는데 정작 해보면 안되는 겁니다.퇴근 후 여가 시간만 투자한다지만 그래도 며칠 붙잡고 씨름했네요 ㅎ..하지만 결국 '크하하, 완성'!비개발자분에게는 좀 지루한 내용일 수도 있으니 사전 양해 바랍니다.스크롤 압박이 심하니 마지막 '하이라이트'로 바로 가셔도 됩니다 ㅎㅎ기본적으로 mysql 테이블 목록과 테이블 구조 조회, 그리고 SQL문 실행이 가능한데요.안전장치까지는 만들지 못해 삭제같은 것도 할 수 있으니 개인 용도로만 활용해 주시기 바랍니다. 관련 IT 지식이 많이 필요합니다. 기초부터 설명드리긴 힘들고..MYSQL 에 대한 정보는 어느 정도 알고 계신다는 기.. 2025. 7. 5.
AI로 홈페이지 회원가입/로그인 만들기 이제부터는 본격적인 홈페이지 동적 기능을 만들 차례입니다.홈페이지 개발과정에 가장 먼저 구현해야 하는 것은 무엇일까요?개발자마다 의견이 분분할 수 있지만 저는 '회원가입/로그인' 기능이라 생각하는데요.해당 기능이 먼저 구현되야 글 작성할 때 사용자 이름이 자동 기록되는 등 연결이 수월해서입니다.그런데 아주 중요한 주의사항이 있어요. 바로 '개인정보보호법'입니다.바이브 코딩으로 기능을 만들어 보실 분은 정신을 똑바로 차리고 잘 보셔야 합니다.무엇이 중요한가요?홈페이지에서 실명, 연락처 등 개인정보를 입력받게 되면 법적으로 그 정보를 보호해야 할 의무가 생기는데요.우선 기본적으로 사용자의 가입정보를 다른 사람에게 고의로 유출해서는 안됩니다. 과징금이나 과태료가 부과될 수 있어요.그리고 혹시 서버가 해커에게 .. 2025. 6. 30.
AI의 마비노기 연주 AI의 손끝에서 피어나는 운율 ~🎵과거 즐겨하던 '마비노기'라는 게임이 있었습니다.지금은 플레이하지 않지만 '연주' 컨텐츠는 지금도 추억의 컨텐츠인데요.이를테면 아래 문장을 넣어 게임 내에서 플레이하면, 반짝반짝 작은별 노래가 재생됩니다.'T140O4C8C8G8G8A8A8G4F8F8E8E8D8D8C4G8G8F8F8E8E8D4G8G8F8F8E8E8D4C8C8G8G8A8A8G4F8F8E8E8D8D8C4'아래 입력하면 직접 플레이하실수 있어요! 🎵 MSX BASIC/마비노기 Music Player 🎵 MSX BASIC PLAY 명령어 형식 지원 지원 명령어 ▼ • Tnn.. 2025. 6. 29.
인공지능도 한글 조합은 어려워 @.@ 한글 타자 연습 ( PC전용 ) 을 만들었습니다.아래 링크에서 연습해보실수 있습니다.https://cray7.mycafe24.com/taja/ https://cray7.mycafe24.com/taja/ cray7.mycafe24.com한글 오토마타라고 들어보셨나요?한글을 자판으로 입력할때는 다양한 조합이 일어나는데요.이를테면 아래와 같습니다.바나나 : ㅂ => 바 => 반 => 바나 => 바난 => 바나나이게 은근히 로직이 복잡합니다. 예외 처리도 많이 필요하구요.PHP로 자소 기준 검색 기능을 개발한 적이 있어서 알지요.https://itadventure.tistory.com/364 PHP '크레이한글' 클래스 - 한글 조합(오토마타) / 자소 분리한글 오토마타라고 들어보셨나요? 우리가 키보드를 통해 .. 2025. 6. 28.
AI로 홈페이지 세부 이미지 수정 AI로 인터넷 공간에 바로 홈페이지 만들기 시리즈 4번째 편입니다.지난 시간에는 완성된 홈페이지의 헤더와 푸터 디자인을 수정했었지요?https://itadventure.tistory.com/758 AI로 홈페이지 디자인 변경, 스티키 메뉴 적용하기지난 게시글에서는 AI를 활용해 홈페이지를 만들었는데요.https://itadventure.tistory.com/757 AI로 인터넷공간에 홈페이지 바로 만들기지난 게시글에 RaiDrive 로 인터넷 공간을 Z:드라이브로 연결하였었지itadventure.tistory.com이번에는 세부 디자인 중 이미지를 수정할 차례입니다.이미지를 바꾸는 건 쉬운 작업이니 무료 모델도 충분히 해낼수 있습니다.무료 모델 SWE-1로 변경해서 진행해주시면 크레딧을 소모하지 않습니다.. 2025. 6. 26.
AI로 인터넷공간에 홈페이지 바로 만들기 지난 게시글에 RaiDrive 로 인터넷 공간을 Z:드라이브로 연결하였었지요?https://itadventure.tistory.com/755 RaiDrive, AI에 날개를! 웹호스팅 공간을 드라이브처럼누구나 방문할 수 있는 나의 블로그나 홈페이지가 있다면 좋겠는데..AI로 쉽게 만들순 없을까요?커서AI나 Windsurf AI 에디터는 대부분 디플로이(deploy) 기능이 있는데요.한 페이지만 지원하는 형태itadventure.tistory.com그렇다면 이제 전세계 누구나 방문할 홈페이지를 만들 준비가 되신 겁니다.Windsurf 를 실행, 폴더 열기 메뉴로 Z:\www 폴더를 열어줍니다.(만약 여러 홈페이지를 해보시려면 Z:\www 하위에 폴더를 만들고 해당 폴더를 여셔도 됩니다. )그리고 윈드서프에.. 2025. 6. 24.
클로드 AI 이정도까지 만든다고? 단 2번의 프롬프트로 이런걸?클로드 AI 는 프로그램 감각이 좋습니다.그래서 이걸 먼저 사용해서 초기 코딩을 하고WINDSURF 에 옮겨서 사용하는 편인데요.클로드는 단일 소스만 사용하기에 컨텍스트 용량이 크기는 하지만 진행하다보면 컨텍스트 한계에 도달하기 때문입니다.외부에 있을때 스마트폰으로 클로드 앱에게 목소리 키보드로 코딩을 시키곤 하는데요.위 결과는 단 2번의 프롬프트로 만든 결과물입니다.엄청 빠른 속도로 말이지요.프롬프트1.3차원 기반의 mmorpg 를 만드려고 해. 섬 위에 마을을 구축하고 플레이어가 이동하는 환경을 만들어줘. 언어는 자바스크립트로 구성해줘.프롬프트2.모바일에서 플레이 할거야. 감안해줘.결과는 아래에서 보실수 있는데요.모바일 화면의 조작키로 캐릭터를 이동하고 점프하고 카메라도 .. 2025. 6. 21.
노션 MCP 연동, 바이브코딩으로 게시판 만들기 By Windsurf(2) 복잡한 SQL 쿼리문 하나도 안쓰고 게시판을 만들 수 있을까요?노션 MCP는 되더라구요.지난 번에는 Windsurf 에서 노션 MCP를 연결했습니다.https://itadventure.tistory.com/752 노션 MCP 연동, 바이브코딩으로 게시판 만들기 By Windsurf(1)노션(Notion) 많이들 사용하시나요?보통 메모용으로 많이들 사용하실 겁니다.저도 많이 애용하는 편입니다.Windsurf 에는 Notion MCP라는 좋은 기능이 있는데요.요새 핫하다는 MCP, 바로 그 MCP 입니다.노itadventure.tistory.com오늘은 후속편으로 노션 게시판을 만들텐데요.MCP를 연동해서 대단한 걸 보실 겁니다.xampp 환경에서 PHP로 진행하겠습니다.'C:\xampp\htdocs\AIB.. 2025. 6. 17.
노션 MCP 연동, 바이브코딩으로 게시판 만들기 By Windsurf(1) 노션(Notion) 많이들 사용하시나요?보통 메모용으로 많이들 사용하실 겁니다.저도 많이 애용하는 편입니다. 처음이지만 프로처럼 쓰는 노션 Notion:데이터베이스 기초부터 자동화 시스템까지 완벽 활용법 -쿠팡에서 처음이지만 프로처럼 쓰는 노션 Notion:데이터베이스 기초부터 자동화 시스템까지 완벽 활용법 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 어른을 위한 컴퓨터 제품도 바로www.coupang.comWindsurf 에는 Notion MCP라는 좋은 기능이 있는데요.요새 핫하다는 MCP, 바로 그 MCP 입니다.노션 MCP를 연동하면 Windsurf 에서 웹페이지 게시판을 쉽게 만들수 있어요.오늘은 그 첫번째 과정으로 노션 MCP 연결을 다뤄 보겠습니다.어떤건지 한번 볼까요?설정이 필요.. 2025. 6. 17.
AI야, 청춘을 돌려줘! 실패다.. 오늘은 실패담을 공유드립니다. OTL...'청춘을 돌려다오~'라는 노래 아시나요?누구나 나이가 들면 젊었던 시절이 그리울 텐데요.한창 좋았을 추억의 시절 내 모습을 AI가 찾아준다면 어떨까요?chatGPT에게 사진을 업로드하고, 몇살로 바꿔달라니 사진을 변환해주더라구요. 의상도 그대로 유지한 채로요.근데 솔직히 말씀드려 과거 모습과 많이 닮아 보이지는 않았습니다. ( 개인정보 보호로 모자이크 처리했습니다 )이걸 api로 연동해보려고 Windsurf 에서 프롬프트를 아래와 같이 입력해보았습니다.사진을 특정 나이로 바꿔주는 앱을 개발할거야.사진 업로드 후 10세, 15세, 20세 버튼을 클릭하면업로드한 사진을 기준으로 자연스럽게 바꿔주는 앱 개발해줘. 백앤드는 사용하지 말고.API KEY는 화면에서 비밀번호.. 2025. 6. 15.
Ai 로 만든 충무공 이순신 즉석 홈피 요새 카페에 앉아서도 스마트폰으로 바이브 코딩하는 취미가 추가되었습니다.커서AI나 윈드서프가 아니어도 간단한건 간편하게 할 수 있거든요.오늘은 충무공 이순신 장군님의 홈페이지를 만드는걸 시도해보았습니다.단 5분 만에 만들었어요.예전에는 코딩하는데 시간이 많이 들었는데 지금은 글쓰는 시간이 더 많이 들긴 합니다.구글 제미나이를 설치하시면 되는데요.Google Play에서 '제미나이'를 검색하시면 됩니다.설치 후 앱을 켜시면 아래와 같은 화면이 나오는데요. chatgpt 같은건데 무료로 사용할 수 있습니다.아래와 같이 대사를 쳐주었습니다."역사적 인물 이순신 장군을 모티브로 한 홈페이지 만들어줘. 멋있게 -_ -+"그랬더니 기획만 해주더라구요.왜 기획만 해주는거지? 아차차!canvas 버튼을 눌러줘야 바이브.. 2025. 6. 14.

티스토리툴바