[개발자 아님 주의] AI와 Replit으로 3시간 만에 '피규어 생성 웹' 만든 과정 (비용 0원)

긴 설명보다 결과물을 먼저 보여드리는 게 빠르겠죠? 제가 주말 동안 AI와 대화하며 뚝딱 만들어낸 '나만의 피규어 박스 생성기'입니다.

"사이버펑크 스타일의 고양이", "중세 시대 갑옷을 입은 햄스터" 등 상상하는 무엇이든 입력하면, 그럴싸한 피규어 패키지로 만들어줍니다. 놀라운 점은, 이 서비스를 런칭하는 데 복잡한 서버 구축이나 인프라 설정이 전혀 필요 없었다는 사실입니다.

저는 평소 피규어나 토이 프로젝트에 관심이 많습니다. 문득 "내가 상상한 캐릭터가 실제 피규어 박스에 담겨 있다면 어떤 느낌일까?"라는 생각이 들었습니다.

과거였다면 개발 환경을 세팅하고, 서버를 사고, 디자인을 의뢰하느라 포기했을 겁니다. 하지만 지금은 AI(생성형 인공지능)와 Replit(클라우드 통합 개발 환경)이 있습니다.

이 글을 쓰는 이유는 제 서비스를 자랑하기 위함이 아닙니다. 아이디어만 있다면, 누구나(개발자가 아니더라도) 자신만의 웹 서비스를 가질 수 있다는 것을 보여드리기 위해서입니다.

복잡한 코드는 보여드리지 않겠습니다. 여러분이 따라 할 수 있는 '과정'에 집중해주세요.

Step 1. AI에게 '질문'하기 (기획 & 코딩) 저는 직접 코드를 짜는 대신, AI(ChatGPT/Claude 등)에게 팀장처럼 지시했습니다.

"사용자가 텍스트를 입력하면, 그 내용을 바탕으로 피규어 이미지를 생성해서 보여주는 웹사이트를 만들고 싶어. HTML, CSS, JS 코드를 짜줘. 디자인은 모던하고 깔끔하게 부탁해."

AI는 불과 10초 만에 기본적인 웹페이지의 뼈대(Code)를 작성해 주었습니다.

Step 2. Replit으로 '배포'하기 (실행) 코드를 받았다면 실행할 곳이 필요합니다. 저는 Replit을 선택했습니다.

이유: 내 컴퓨터에 아무것도 설치할 필요가 없습니다. 웹 브라우저만 있으면 개발부터 배포까지 한 곳에서 끝납니다.
과정: Replit에서 새 프로젝트를 만들고, AI가 준 코드를 붙여넣기(Ctrl+V) 했습니다. 그리고 Run 버튼을 누르니 바로 화면이 나왔습니다.

Step 3. 오류 수정과 다듬기 (협업) 처음부터 완벽하진 않았습니다. 이미지가 안 뜨거나 레이아웃이 깨지기도 했죠. 이때도 저는 당황하지 않고 AI에게 물었습니다.

"지금 이미지가 로딩되지 않고 에러가 나. 에러 메시지는 이거야. 어떻게 고쳐야 해?"

AI는 즉시 수정된 코드를 주었고, 저는 다시 붙여넣기만 했습니다. 이 과정은 마치 숙련된 개발자 친구 옆에서 과외를 받는 느낌이었습니다.

이 프로젝트를 통해 제가 깨달은 것은 명확합니다. 이제 개발은 암기의 영역이 아니라 상상과 질문의 영역이 되었습니다.

제가 만든 '피규어 박스'에서 여러분만의 아이디어를 실험해보세요. 여러분이 만든 가장 기발한 피규어는 무엇인가요?

Tip: "Golden retriever wearing sunglasses, riding a skateboard, detailed plastic texture" 처럼 구체적인 영어 묘사를 넣으면 퀄리티가 훨씬 좋아집니다! (한글도 가능합니다)

#노코드 #AI개발 #Replit #토이프로젝트 #피규어 #웹개발독학

Ai Creator