소개
이번 스터디는 Replit AI Agent와 LLM(ChatGPT/Gemini/Claude 등)을 활용해 웹페이지 혹은 웹앱을 직접 기획하고 구현해보는 실습으로 구성되었습니다.
저는 이번 실습에서 제가 준비하고 있는 사업에 쓸 수 있는 페이지(3D 데이터 뷰어)를 만들어보았습니다.
(결론부터 목표달성엔 실패했습니다... tiff 파일을 못읽어서 10번이 다 지나갔습니다 ㅎㅎ)
진행 방법
스터디장님이 알려주신 Replit을 처음 써봤습니다.
"Create a web application using HTML, JavaScript, and Three.js that allows users to upload a 3D image file (e.g., .2D tiff) and view it in a 3D viewer. The app should:
Provide a file upload input for 3D model files.
Display the uploaded model using Three.js inside a canvas.
Allow users to rotate, zoom, and pan the 3D model using mouse controls (use OrbitControls).
Show a default message or placeholder if no model is loaded.
Automatically center and scale the model in the scene for best visibility.
Ensure the app works when deployed on Replit with no additional server configuration.
Use modular and clean code structure with comments for clarity."
결과와 배운 점
• 개발 경험 없이도 아이디어를 빠르게 프로토타이핑할 수 있다는 점에서 AI+Replit 조합의 가능성을 실감했으며, 외주를 주지 않고 직접 만들어도 해볼만하겠다(?)라는 근자감을 얻었습니다. 물론 TIFF 파일 처리를 제대로 못해서 3차원으로 보는 것엔 실패했지만, 파일을 업로드하고 마우스로 핸들링이 되는 것까지 확인 했습니다.
⚠ 시행착오
• 처음에는 업로드 칸만 있고, 눌러도 팝업이 열리지 않기도 했고, 파일을 한장밖에 못올리게 만들기도 했구요. (제 데이터는 2D 스택이라 여러장을 올려야합니다.) 여러장을 올렸더니 그냥 한장씩 뛰엄뛰엄 보이게 나오기도 했습니다. 마지막 10번째에는 한장을 두껍게 보여주더라구요...ㅎㅎㅎㅎㅎ 그렇게 10번의 무료사용을 모두 끝냈습니다.
앞으로의 계획
이번 스터디의 목표는 오프라인 때 말씀해주신 것처럼 전 이번 스터디 기간동안 회사의 랜딩페이지를 만드는 것을 목표로 하려구 합니다. 랜딩페이지가 만들어지면 이미지 뷰어나 데이터 업로더 다운로더 와 같은 기능을 추가할 계획입니다.