Chat GPT랑 Replit으로 문과생이 30분만에 만든 서비스

8살 아이도 자기 서비스를 만드는 시대

작년에 우연히 본 한 영상이 아직도 기억에 남습니다. 8살 아이가 AI 코딩 도구인 Cursor AI를 활용해 단 45분 만에 해리포터 챗봇을 만든 이야기였는데요.

코딩이 뭔지도 모르는 초등학교 2학년 학생이 자신만의 서비스를 만들어냈다는 사실이 정말 놀라웠습니다. 더 놀라운 건 그 과정을 영상으로 기록해 유튜브에 공유까지 했다는 점이죠.

이처럼 AI 기술 덕분에 진입장벽이 크게 낮아져, 좋은 아이디어만 있다면 누구나 자기만의 서비스를 만들어볼 수 있는 시대가 되었습니다.

영상을 다시 보고 문득 이런 생각이 들었어요.

"8살 아이도 하는데, 나라고 못할까?"

그래서 저도 AI 도구만 활용해서 직접 웹 서비스를 만들어보기로 했습니다.

AI 코딩 도구의 현재: Cursor vs Replit

요즘 AI 기반 코딩 도구들은 초보자와 비개발자들에게 많은 변화를 가져다주고 있습니다.

그중에서도 Cursor AI와 Replit은 대표적인 툴인데요. 두 서비스 중 어떤 것이 제게 더 적합한지 확인하기 위해 몇 가지 기준을 세워 비교해 보았습니다.

서비스를 기획하고 실제 배포까지 가능할 것
AI의 도움을 받아 기능 추가, 수정, 보완이 가능할 것

Cursor AI: 간단한 아이디어 실현에 적합

Cursor AI는 코딩 지식이 없어도 AI가 코드를 자동 생성해주는 도구입니다. 사용자가 무엇을 만들고 싶은지 자연어로 설명하기만 하면 AI가 코드를 작성하고 필요한 기능을 구현해줍니다.

Cursor AI의 강점

원하는 내용을 자연어로 설명하면 즉시 코드를 생성해줍니다.
복잡한 기술 용어를 몰라도 사용할 수 있어 간단한 아이디어를 구현하기에 좋습니다.

Cursor AI의 한계

생성된 코드를 수정하거나 기능을 보완하려면 AI에 의존해야 합니다.
코드에서 예상치 못한 오류가 발생하면 해결하기 어려운 경우가 생깁니다.

💡추천 대상: 아이디어를 빠르게 테스트하거나 간단한 프로젝트를 시도해보고 싶은 사람

Replit: 기획에서 배포까지 모두 가능

Replit은 브라우저 기반 통합 개발 환경(IDE)으로, 초보자도 쉽게 사용할 수 있도록 설계된 도구입니다. AI Assistant 기능을 활용해 코드 작성은 물론 디버깅, 수정, 기능 추가까지 가능합니다.

Replit의 강점

코드 작성, 수정, 배포까지 한곳에서 처리할 수 있습니다.
초보자도 쉽게 문제를 해결하고 기능을 추가할 수 있도록 돕습니다.
여러 사람이 동시에 작업하거나 피드백을 받을 수 있습니다.

Replit의 한계

완전히 초보자라면 기본적인 코딩 문법을 알고 있어야 원활한 진행이 가능합니다.

💡 추천 대상: 서비스를 완성하고 실제로 배포까지 경험하고 싶은 사람, 코드를 이해하며 성장하고 싶은 초보자

두 서비스를 비교해본 결과, 저는 웹서비스를 만들어 배포까지 해보는 것을 목표로 삼았기에 Replit을 선택했습니다.

Replit 사용법: Chat GPT와 함께 기획부터 배포까지

개발에 대한 지식이 전혀 없는 상태에서 시작하다 보니, 외부 서비스와 연동하거나 복잡한 자동화 기능을 구현하는 건 어려울 거라 판단했습니다. 그래서 로컬 환경에서 작동할 수 있는 단독 웹사이트를 만들기로 했습니다.

아이디어 : 글쓰기를 강제하는 웹사이트 제작

최근 글쓰기에 대한 관심이 커지면서, 글을 꾸준히 쓸 수 있도록 돕는 웹사이트를 만들면 좋겠다는 생각이 떠올랐습니다. 단순히 글을 작성하는 공간이 아니라, 사용자가 목표를 설정하고 그 목표를 이루기 위해 글을 쓰도록 ‘강제’하는 요소를 더해보고 싶었습니다.

아이데이션 과정 : Chat GPT와 협업

Chat GPT에게 질문을 던지면서 아이데이션 과정을 거쳤습니다.

아이디어를 구체화하기 위해 ChatGPT와 대화를 나누며 다양한 가능성을 알아보았어요. ChatGPT는 단순히 아이디어를 구체화하는 데 그치지 않고, 다음과 같은 방식으로 도움을 주었습니다.

기능 목록 정리

사용자가 하루 글쓰기 목표를 설정할 수 있도록 하기
목표에 따라 글쓰기를 독려하는 알림 기능 추가
작성된 글을 저장하거나 관리할 수 있는 간단한 데이터베이스 구조 구상
목표를 이루지 못했을 경우 재미있는(혹은 약간 짜증나는) 메시지 출력

사용자 경험 설계

깔끔하고 직관적인 UI 구성 방안 제안
사용자가 쉽게 목표를 설정하고 결과를 확인할 수 있는 흐름 설계

기술 스택 추천

HTML, CSS, JavaScript를 기본으로 하되, Replit에서 제공하는 간단한 데이터 저장 방식을 활용해 파일로 데이터를 관리

ChatGPT와 아이데이션을 진행하다 보니 다양한 아이디어가 더해지면서 기능이 점점 많아졌습니다. 하지만 생각해보니, 기능이 많아질수록 처음 시도하는 입장에서 오히려 혼란만 커질 것 같았어요.

특히 Replit으로 프로덕트를 만들어본 적 없는 상황에서는, 복잡한 기능이 오류를 유발하고 작업 속도를 늦출 가능성이 크다고 판단했습니다.

그래서 핵심 기능 하나만 남기고 나머지 기능은 과감히 제외하기로 했습니다.

✅ 핵심 기능 정의

- 글쓰기 클럽 챌린지 참여자를 위한 강제 글쓰기 웹사이트
- 30초 이내에 글을 쓰지 않을 시 글이 모두 지워짐
- 글을 쓰고 [ 완료 ] 버튼을 눌러야 글이 더이상 지워지지 않음

실제 Chat GPT를 통해 나온 Replit 프롬프트

"Build a modern, minimalist web application called <하이아웃풋 글쓰기 클럽> with the following core features and intuitive UI/UX design."

Core Features:

Timed Writing Challenge

A text input field where users can write.
If no typing occurs within 30 seconds, the entire text field is cleared automatically.
A countdown timer is displayed prominently.
Completion Button

Users can click the [ 완료 ] button to stop the timer and save their progress.
After clicking [ 완료 ], the text in the field will no longer be cleared.
New Writing Button

A [ 새글 쓰기 ] button that clears the current text field, resets the timer, and starts a new session.
UI/UX Requirements:

Minimalist Design:

Use a clean, white background with simple typography (e.g., sans-serif fonts like Pretendard or SF Pro).
Text field and buttons should be centered on the page, ensuring focus remains on the writing experience.
Color Palette:

White background (#FFFFFF).
Black text (#212121) for readability.
Accent colors like blue (#007AFF) for interactive elements such as the [ 완료 ] button.
Intuitive Layout:

Display the title "하이아웃풋 글쓰기 클럽" prominently at the top.
Include the countdown timer and word count tracker in a small, unobtrusive section at the top-right of the text area.
Interactive Feedback:

Add subtle hover effects on buttons for a modern touch.
Use smooth transitions (200ms) for timer and button states.
Responsive Design:

Ensure the web application works seamlessly on both desktop and mobile devices.
Technical Details:

Frontend: Use HTML, CSS, and JavaScript for building the interface and core functionalities (timer, button actions, etc.).

Backend: Implement Flask to serve the application and handle potential data persistence (optional).

Deployment: 

Deploy the application on Replit with a publicly accessible URL.
Ensure the site is lightweight and loads quickly.
Functional Flow:

Homepage Layout:

Display the title, "하이아웃풋 글쓰기 클럽," centered at the top.
Include a single text input field for writing.
Timer Behavior:

Start a 30-second countdown timer as soon as the user starts typing.
Reset the timer whenever the user types.
Clear the text field and display an alert if the timer reaches zero without input.
Button Actions:

[ 완료 ]: Stops the timer and ensures the text is preserved.
[ 새글 쓰기 ]: Resets the text field and restarts the timer.

Replit 사용법: 개발 과정과 UI/UX 개선하기

ChatGPT를 통해 구체적인 프롬프트를 얻었으니, 이제는 그 내용을 기반으로 Replit에서 직접 개발하는 단계로 넘어갔습니다. Replit에서는 Flask(파이썬 기반 웹 프레임워크)와 vanilla JavaScript를 활용해 간단한 글쓰기 서비스를 구현하기로 했습니다.