AI코딩17 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 로 만든 충무공 이순신 즉석 홈피 요새 카페에 앉아서도 스마트폰으로 바이브 코딩하는 취미가 추가되었습니다.커서AI나 윈드서프가 아니어도 간단한건 간편하게 할 수 있거든요.오늘은 충무공 이순신 장군님의 홈페이지를 만드는걸 시도해보았습니다.단 5분 만에 만들었어요.예전에는 코딩하는데 시간이 많이 들었는데 지금은 글쓰는 시간이 더 많이 들긴 합니다.구글 제미나이를 설치하시면 되는데요.Google Play에서 '제미나이'를 검색하시면 됩니다.설치 후 앱을 켜시면 아래와 같은 화면이 나오는데요. chatgpt 같은건데 무료로 사용할 수 있습니다.아래와 같이 대사를 쳐주었습니다."역사적 인물 이순신 장군을 모티브로 한 홈페이지 만들어줘. 멋있게 -_ -+"그랬더니 기획만 해주더라구요.왜 기획만 해주는거지? 아차차!canvas 버튼을 눌러줘야 바이브.. 2025. 6. 14. AI와 만든 빗소리ASMR, 편의점편 여러분은 빗소리 좋아하시나요? 저는 빗소리를 좋아하는 편입니다.특히 편의점에서 라면을 먹으며 큰 유리창으로 밖을 보며 감성에 젖기도 하는데요.비가 오지 않는 날에는 가끔 유튜브에서 ASMR 빗소리를 듣기도 합니다.유튜브 빗소리 화면은 실감나긴 한데, 뭔가 정적이어 계속 보다보면 지루하더라구요.'화면에 계속적인 변화가 있으면 어떨까?'AI와 함께 만들어 보았습니다.편의점 창 밖은 밤 풍경인데요. 저 멀리로 빌딩이 보입니다.지나가는 불빛은 자동차를 의미하지요. 우산을 쓴 행인이 가끔씩 등장하여 지나 다닙니다.편의점 실내에는 손님이 방문하여 입장하거나 물건을 고르거나 구매할 때 대사를 한마디씩 쳐줍니다.상품을 판매하면 매출이 누적되고 화면 상단에 표시됩니다.세세한 위치 조정은 AI가 잘 못해서.. 좀 수작업을.. 2025. 6. 14. AI야, 기발한거 만들어줘! #3 🛩 시간 도서관이라꼬? 그것도 3D? 오늘도 실험정신을 가지고 Windsurf + 클로드3.7(추론) 모델에게 부탁했습니다.뭐 기발한거 없을까? 여지껏 아무도 만들어본적이 없는걸 뽀대나게 만들어볼래?그랬더니 기획을 해왔네요. 설마 이걸 할수 있다고 ... ?독창적인 프로젝트를 만들어보자니 재밌네요! 현재 폴더는 비어 있고, LibrarySimul이라는 이름을 고려해 도서관 테마와 연관된 독특한 아이디어를 제안해 드리겠습니다."시간 여행 도서관" 웹 애플리케이션일반적인 도서관 시스템과는 달리, 이 프로젝트는 사용자가 역사적 시간대를 여행하며 그 시대의 문학, 기술, 사상을 경험할 수 있는 상호작용형 웹 환경을 만드는 것입니다.주요 기능:시간대별 도서관 공간: 고대, 중세, 르네상스, 현대까지 시간대별로 달라지는 UI/UX시대별 문학작품 경험:.. 2025. 6. 11. AI - 아무거나 만들어줘 #2. ✈ 우주가 나왔어요. AI에게 아무거나 개발해 달라고 하면 어떤 반응을 보일까요?두번째 도전입니다.오늘은 과정을 공유드리겠습니다.윈드서프를 켜고, 폴더를 선택, 아래와 같이 협상(?)을 타진해보았는데요.3D 컨텐츠로 해달라면 웬지 멋지게 만들어주지 않을지 기대해서입니다.3D 컨텐츠 아무거나 개발해줘.페이지가 작동이 안되더라구요. F12 개발자 도구창에서 콘솔 탭을 확인하니 오류가 나버렸습니다.이런 경우 캡쳐 화면을 채팅창에 붙여넣고 수정을 요청하면 됩니다.오류나는데? 확인해줘.그러면 Windsurf 가 스스로 수정을 진행하지요.문제 원인이 오류는 현재 script.js에서 사용하는 Three.js의 import 방식에 문제가 있기 때문입니다. CDN에서 Three.js를 불러오려면 정확한 URL 경로가 필요한데, 현재는 다른.. 2025. 6. 11. 친근감 있는 거리커피점, AI와 협업! AI의 능력을 최대한 끌어올려 재미있는 작품을 만들어보자는 취지로 오늘도 하나 만들어 보았습니다.몇시간 정도에 끝나긴 했지만 과정이 꽤 길기 때문에 도입부의 흥미로운 부분 하나만 공유드릴께요.한가지 실험을 해보았는데요.그림을 던져주고 만들어 달라고 하면 과연 가능할까? 입니다.우선 ChatGPT 에서 요청해서 이런 이미지를 만들어 달라고 했습니다.윈드서프 기본 세팅 후, 이 이미지 파일을 윈드서프 채팅창에 붙여 넣고 이렇게 요청하였습니다.캔바스를 이용해서 첨부 이미지와 비슷한 화면을 구성하고,사람들이 좌우로 걸어다니며 이동하도록 만들어줘.그림뿐만 아니라 이동하는 동작까지 구현해달라고 했는데 과연 어떤 결과를 내놓았을까요?이런 결과를 내놓았더라구요. 순간 '푸하-' 하고 감탄사가 나왔습니다.단순해 보여도 .. 2025. 6. 9. 도시의 낭만! ( AI 협업 도시 시뮬레이션 ) 윈드서프 AI와 함께 협업으로 만들어 보았습니다.AI코딩 도구 없으면 일 안 다니고도 1 ~ 2주 걸릴만한 일인데,4시간 가량 씨름하다 완성했네요.아래 사이트에 접속하시면 가상 3D 도시 시뮬레이션을 보실 수 있습니다.( PC에서 안정적으로 작동합니다. 모바일 사용성까지는 고려를 안했네요. )https://cray7.mycafe24.com/City/사용법은 그리 어렵지는 않은데요.처음 접속하면 빈 월드가 등장합니다.이어서, 왼쪽 건물 목록에서 건물을 선택, 이어서 바닥을 선택하면 건물이 생겨납니다.연속해서 배치가 되기 때문에 취소하려면 ESC 키를 눌러주셔야 해요.주거건물과 상업건물, 산업건물은 모두 비스무리한데 색상과 분위기가 좀 다릅니다.도로와 공원도 배치할 수 있긴 한데,도로는 좀(많이..) 어색한.. 2025. 6. 3. chatGPT 가 만든 증강현실 AR 증강현실은 아직 접해본 적이 좀 어렵게 느껴졌는데요.AI 코딩으로 샘플코드를 짜달라니 세상에나 순삭이네요.AR은 현실공간과 가상공간을 혼합한 서비스인데요.스마트폰 웹브라우저(크롬이나 기본 브라우저)에서 지원이 됩니다.사진의 빨간 상자는 실제 존재하는 사물이 아니라, 터치하여 배치한 가상 물체인데요.녹색 원은 스마트폰을 들고 카메라를 움직이면 배치할 수 있는 상황에 그 자리가 원으로 표시됩니다.책상 위에 이렇게 배치할 수도 있습니다.증강현실은 반드시 https 주소를 필요로 합니다.그러니 요새 https 주소가 지원되는 저렴한 카페 24 웹호스팅으로 테스트가 가능한데요.웹호스팅은 이 글의 범주가 아니니 넘어가고,시도했던 요청문구, 그리고 완성된 소스, 해당 기능이 적용된 크레이의 URL 주소만 공개하.. 2025. 5. 28. 윈드서프AI - 구글 시트 흉내내기 구글 시트는 엑셀과 비슷하고 엄청 복잡한 기능 덩어리인데요.친척격인 구글 제미나이 모델을 사용하여 일부 기능을 흉내내 보았습니다.그냥 가로, 세로 셀과 셀 입력 기능, 사칙연산 및 괄호 연산 기능 정도인데요.사실 이 것만 해도 꽤 복잡합니다.직접 개발하자면 몇주 걸릴지도 모르지만 AI와 함께 협업하여 AI가 수정 못하는 부분은 직접 디버깅해서 잡기도 하고3시간 가량 소요된 것 같습니다. 이 정도 기능을 만드려면 AI만으로는 절대로 안되겠다고 깨닫겠더라구요 ㅎ..과정이 너무 길어 그걸 공유하는 건 힘들것 같고, 입력했던 문구와 조치했던 내용,최종 결과물 공유드리겠습니다~프롬프트 목록구글시트처럼 작동하는 웹페이지를 만들어줘. 기존 HTML 방식 말고 캔바스로 구현해줘, 라이브러리는 jquery를 사용하고 적.. 2025. 5. 21. AI코딩, 추억 속으로, 3D미로 게임 옛날 옛날 윈도우95 시절에는 컴퓨터에 기본 게임이 몇개 내장되어 있었는데요.그중 하나가 3D 미로찾기 입니다.이 게시글은 경험담이기 때문에 윈드서프 및 개발지식이 어느 정도 있는 분을 대상으로,설명이 그리 상세하지는 못하니 양해 바랍니다 :)잘 모르시면 그냥 그림으로 변천사만 봐주세요 ㅎㅎ개발 + 글쓰고 기능 다듬는데 2시간 가량 소요된 것 같습니다.그래도 필요한 IT 지식웹에서 3D 컨텐츠를 개발하는 데는 여러 라이브러리가 있으며 보통 three.js 와 babylon.js 가 유명합니다.제 경험으로는 babylon.js 가 성능이 더 좋은 느낌이 들기에 이걸 사용할텐데요.이와 같은 기술 용어를 알고 이걸 사용해달라고 요청하면 그 기술에 맞게 개발을 해 줍니다.babylon.js 는 꽤 덩어리가 큰데.. 2025. 5. 18. 윈드서프 AI로 교회 홈페이지 만들기 AI가 교회 홈페이지에 대해 어느정도 맥락을 파악하고 개발이 가능할까요?오늘은 메뉴 분량이 많은 스타일의 홈페이지를 여러 페이지로 나누어 제작하는 부분을 진행해보았습니다.본문의 중복을 피하기 위해 윈드서프 에디터 설치 및 테마설정은 지난 게시글을 참고해 주시고요.이미 설치 및 세팅이 끝나신 분은 이 부분은 넘어가셔도 됩니다.https://itadventure.tistory.com/729 윈드서프 AI로 홈페이지 만들기윈드서프를 사용하며 느낀 점은 이제 홈페이지 제작이 정말 쉬워졌다는 것인데요.맹점들도 존재하지만 개발경험이 없는 일반인 입장에서 약간 따라하는 것만으로 가벼운 홈페이지를 구축할수itadventure.tistory.com오늘은 'PHP 서버'라는걸 작동해 볼겁니다.왜냐하면 웹페이지를 여러개로 .. 2025. 5. 11. 윈드서프 AI로 홈페이지 만들기 윈드서프를 사용하며 느낀 점은 이제 홈페이지 제작이 정말 쉬워졌다는 것인데요.맹점들도 존재하지만 개발경험이 없는 일반인 입장에서 약간 따라하는 것만으로 가벼운 홈페이지를 구축할수 있다는 것은 큰 매력입니다.참고로 커서 AI도 유사합니다. 커서 AI + AI 2025 (메모수첩증정) - 경제전망 | 쿠팡쿠팡에서 커서 AI + AI 2025 (메모수첩증정) 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 경제전망 제품도 바로 쿠팡에서 확인할 수 있습니다.www.coupang.comAI개발로 따라하는 홈페이지 개발, 시작해 볼까요?회원가입, 게시판 등의 기능을 넣는 것도 가능하나 이를 위해서는 데이터베이스 관련 IT 지식을 알아야 합니다.그러니 오늘은 가벼운 보여주기용 홈페이지를 쉽게 만드는 법을 알아.. 2025. 5. 11. 이전 1 2 다음
