AI - 아무거나 만들어줘 #2. ✈ 우주가 나왔어요.

AI에게 아무거나 개발해 달라고 하면 어떤 반응을 보일까요?
두번째 도전입니다.

오늘은 과정을 공유드리겠습니다.

윈드서프를 켜고, 폴더를 선택, 아래와 같이 협상(?)을 타진해보았는데요.
3D 컨텐츠로 해달라면 웬지 멋지게 만들어주지 않을지 기대해서입니다.

3D 컨텐츠 아무거나 개발해줘.

페이지가 작동이 안되더라구요.
F12 개발자 도구창에서 콘솔 탭을 확인하니 오류가 나버렸습니다.

이런 경우 캡쳐 화면을 채팅창에 붙여넣고 수정을 요청하면 됩니다.

오류나는데? 확인해줘.

그러면 Windsurf 가 스스로 수정을 진행하지요.

문제 원인
이 오류는 현재 script.js에서 사용하는 Three.js의 import 방식에 문제가 있기 때문입니다. 
CDN에서 Three.js를 불러오려면 정확한 URL 경로가 필요한데, 
현재는 다른 방식으로 시도하고 있는 것 같습니다.

해결 방법
script.js 파일을 수정하여 문제를 해결하겠습니다:

다 되었다고 나오는데 또 페이지가 작동하질 않습니다.
이런, 또 오류가 났네요

동일한 방법으로 수정을 요청하였습니다.
이런 답변을 하면서 또 다시 진행이 됩니다.

Three.js 모듈 오류 해결
여전히 같은 오류가 발생하고 있군요. 
이번에는 ES 모듈 시스템 대신 전통적인 스크립트 방식을 사용하여 문제를 해결해보겠습니다.

음.. 무한대기 상태로 작동이 되질 않습니다.
잠깐 코드를 들여다 보았는데요. three.js 3D 라이브러리를 아예 다운받아 버렸습니다.
three.js 라이브러리가 소스코드량이 어마어마해서 Windsurf AI 가 이를 감당 못합니다.

다시 해야 합니다. 제작된 내용을 모두 지우고 윈드서프를 다시 시작하고 요청하겠습니다.
약간 문구를 바꾸는게 좋습니다.

3D 컨텐츠 아무거나 개발해줘. cdn을 활용해야 해.

CDN은 외부 저장소를 의미하는데요.
3D 기능을 작동하는 라이브러리가 외부에 있어야 Windsurf AI가 받는 부담이 적습니다.

이번에는 한번에 성공했습니다! 조금 시시하지만요.
3차원 공간에 3D큐브가 저절로 돌아가고, 마우스로 드래그하여 수동으로 돌려보는 페이지입니다.

그래도 뭐 우선 기본 소스가 완성되었으니 여기서 변형을 시도하면 됩니다.

페이지는 잘 뜨는데 내용이 좀 시시해. 멋진 걸로 내용을 알차게 꾸며줘.

이렇게 답변을 주네요.

네, 더 멋진 3D 콘텐츠로 업그레이드하겠습니다! 
단순한 큐브 대신 텍스처가 적용된 행성계 시스템을 만들어보겠습니다. 
더 시각적으로 화려하고 인터랙티브한 요소도 추가하겠습니다.

뭔가 어마어마한 계획을 세웠네요. 얘가 할 수 있으려나..
한참을 진행하다 중간에 완성하지 못하고 이렇게 끝나버렸네요.

그럴 경우 이렇게 한마디하면 됩니다.

계속

위 과정을 한번 더 진행하고 나니 드디어 화면은 뜨는데..
정작 행성이 안 나옵니다.

콘솔 창을 보니 역시 오류입니다.

뭐 괜찮습니다.
ai에게 시키고 다른 일 보면 되니까요.
그림 그림만 붙여넣어도 오류인줄 알기 때문에 그림만 붙여 넣었습니다.

오류가 발생했네요! 이 오류는 Three.js의 모듈 로딩 방식 때문에 발생했습니다. 
ES6 모듈 방식을 사용하려고 했으나, 일반 스크립트 태그에서는 import 문을 사용할 수 없어서 
문제가 생겼습니다. 
이를 수정해드리겠습니다.

이런 과정을 3번 정도 하고 나서 멋진 작품이 나왔습니다!
태양을 주위로 행성이 회전을 합니다.
실제 거리는 맞는지 모르겠지만, 마우스로 별에 가져다 대면 무슨 별인지 표시되더군요.
마우스로 드래그하면 입체적인 별의 구성을 느낄수 있습니다.

좀 더 욕심을 내보았습니다.

멋진데, 각 별의 행성 궤도를 점선으로 보여주고 껐다 켰다 하는 기능을 추가해줘.

수정했다고 하는데 선이 안보이길래 알고보니 검정색 선으로 추가했더군요 ㅎ..

퀘도선이 검정색이라 안보여. 흰색으로 바꿔줘,

오, 이제 드디어 멋진 모습이 등장했습니다.
이 정도면 멋짐 합격! 

마우스로 돌려보니 캬~ 멋지네요.

실제 결과물은 아래 URL에서 확인하실 수 있습니다.

https://cray7.mycafe24.com/Random2/

오늘은 특별히 처음부터 진행 과정을 공유드렸는데요.
흥미로운 구경거리가 되셨을지 모르겠군요.
방문해 주신 모든 분들께 감사드리며 이만~!