chatGPT와 인공지능AI41 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) 많이들 사용하시나요?보통 메모용으로 많이들 사용하실 겁니다.저도 많이 애용하는 편입니다.Windsurf 에는 Notion MCP라는 좋은 기능이 있는데요.요새 핫하다는 MCP, 바로 그 MCP 입니다.노션 MCP를 연동하면 Windsurf 에서 웹페이지 게시판을 쉽게 만들수 있어요.오늘은 그 첫번째 과정으로 노션 MCP 연결을 다뤄 보겠습니다.어떤건지 한번 볼까요?설정이 필요해요.노션 MCP를 이용하려면 먼저 몇가지 설정이 필요합니다.1) 연동할 노션 페이지를 먼저 하나 만들어 주세요.2) 노션 API KEY 를 발급받습니다.3) 1)에서 만든 페이지 접근 권한을 줍니다.4) Windsurf 에서 MCP 를 연결하면서 노션 API KEY를 넣습니다.5) 연동 끝.노션을 사용할 줄 아신.. 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. AI와 만든 빗소리ASMR, 편의점편 여러분은 빗소리 좋아하시나요? 저는 빗소리를 좋아하는 편입니다.특히 편의점에서 라면을 먹으며 큰 유리창으로 밖을 보며 감성에 젖기도 하는데요.비가 오지 않는 날에는 가끔 유튜브에서 ASMR 빗소리를 듣기도 합니다.유튜브 빗소리 화면은 실감나긴 한데, 뭔가 정적이어 계속 보다보면 지루하더라구요.'화면에 계속적인 변화가 있으면 어떨까?'AI와 함께 만들어 보았습니다.편의점 창 밖은 밤 풍경인데요. 저 멀리로 빌딩이 보입니다.지나가는 불빛은 자동차를 의미하지요. 우산을 쓴 행인이 가끔씩 등장하여 지나 다닙니다.편의점 실내에는 손님이 방문하여 입장하거나 물건을 고르거나 구매할 때 대사를 한마디씩 쳐줍니다.상품을 판매하면 매출이 누적되고 화면 상단에 표시됩니다.세세한 위치 조정은 AI가 잘 못해서.. 좀 수작업을.. 2025. 6. 14. AI - 아무거나 만들어줘 #2. ✈ 우주가 나왔어요. AI에게 아무거나 개발해 달라고 하면 어떤 반응을 보일까요?두번째 도전입니다.오늘은 과정을 공유드리겠습니다.윈드서프를 켜고, 폴더를 선택, 아래와 같이 협상(?)을 타진해보았는데요.3D 컨텐츠로 해달라면 웬지 멋지게 만들어주지 않을지 기대해서입니다.3D 컨텐츠 아무거나 개발해줘.페이지가 작동이 안되더라구요. F12 개발자 도구창에서 콘솔 탭을 확인하니 오류가 나버렸습니다.이런 경우 캡쳐 화면을 채팅창에 붙여넣고 수정을 요청하면 됩니다.오류나는데? 확인해줘.그러면 Windsurf 가 스스로 수정을 진행하지요.문제 원인이 오류는 현재 script.js에서 사용하는 Three.js의 import 방식에 문제가 있기 때문입니다. CDN에서 Three.js를 불러오려면 정확한 URL 경로가 필요한데, 현재는 다른.. 2025. 6. 11. 이전 1 2 3 4 다음
