비전공자가 하루 만에 완성! 웹서비스 제작 과정과 바이브코딩 프롬프트 공개
코딩을 배운 적이 없는 사람이 하루 만에 웹서비스를 만들었다고 하면 과장처럼 들릴 수 있습니다. 하지만 목표를 작게 정하고 AI에게 필요한 내용을 단계별로 요청하면 간단한 서비스는 충분히 완성할 수 있습니다. 중요한 점은 처음부터 거대한 플랫폼을 만들려 하지 않는 것입니다.
이번 글에서는 비전공자가 하루 만에 만든 웹서비스 제작 과정과 사용한 프롬프트를 시간 순서대로 정리했습니다. 어떤 아이디어를 골랐는지, AI에게 무엇을 요청했는지, 오류가 생겼을 때 어떻게 해결했는지 살펴보면 바이브코딩을 처음 시작하는 분도 자신의 첫 프로젝트를 구체적으로 계획할 수 있습니다.
오전 9시, 하루 안에 끝낼 수 있는 주제를 골랐습니다
처음 떠올린 아이디어는 일정 관리, 가계부, 독서 기록, 습관 관리처럼 다양했습니다. 하지만 하루 안에 완성하려면 회원가입이나 결제 기능이 없는 주제가 적합했습니다.
최종적으로 선택한 서비스는 오늘 해야 할 일을 기록하고 완료 여부를 표시하는 할 일 관리 웹서비스였습니다.
첫 목표는 아래 네 가지로 제한했습니다.
- 할 일 입력
- 목록에 추가
- 완료 표시
- 항목 삭제
통계, 알림, 사용자 계정, 여러 기기 동기화는 제외했습니다. 기능이 많아지면 제작 시간이 길어지고 오류를 확인하기 어려워지기 때문입니다.
하루 프로젝트의 핵심은 멋진 아이디어보다 끝낼 수 있는 범위를 정하는 것입니다.
오전 10시, 코드를 받기 전에 요구사항부터 정리했습니다
AI에게 바로 “할 일 앱을 만들어 줘”라고 입력하지 않았습니다. 사용 환경과 완료 기준을 먼저 적었습니다.
- 사용자: 개인 일정 관리가 필요한 초보자
- 사용 환경: PC와 휴대전화 웹브라우저
- 개발 방식: HTML, CSS, 자바스크립트
- 저장 방식: 브라우저 내부 저장
- 완료 기준: 새로고침해도 목록이 유지되어야 함
처음 사용한 프롬프트는 아래와 같습니다.
“코딩을 모르는 비전공자가 관리할 수 있는 할 일 웹서비스를 만들어 줘. HTML, CSS, 자바스크립트를 각각 별도 파일로 구성해 줘. 할 일 입력, 추가, 완료 체크, 삭제 기능이 필요해. 새로고침해도 데이터가 남도록 localStorage를 사용해 줘. 먼저 파일 구조와 작업 순서를 설명하고 코드를 작성해 줘.”
이 프롬프트에는 서비스 목적, 사용 기술, 필요한 기능, 저장 조건이 모두 들어 있습니다.
AI가 추측해야 할 내용을 줄이자 첫 결과부터 원하는 방향에 가까운 코드가 나왔습니다.
오전 11시, 첫 화면을 실행하고 파일 역할을 배웠습니다
AI가 제공한 코드를 index.html, style.css, script.js 파일에 나누어 저장했습니다.
처음에는 파일 이름조차 낯설었기 때문에 아래 프롬프트를 추가로 사용했습니다.
“각 파일이 어떤 역할을 하는지 코딩을 처음 보는 사람도 이해할 수 있게 설명해 줘. 수정할 때 어느 파일을 고쳐야 하는지도 알려 줘.”
AI의 설명을 통해 HTML은 화면 구조, CSS는 디자인, 자바스크립트는 버튼과 저장 기능을 담당한다는 점을 이해했습니다.
브라우저에서 index.html을 열자 제목과 입력창, 추가 버튼이 나타났습니다. 화면은 단순했지만 할 일을 입력하면 목록에 정상적으로 추가되었습니다.
첫 단계에서는 디자인보다 아래 기능만 확인했습니다.
- 글자가 입력되는가
- 추가 버튼이 작동하는가
- 완료 표시가 되는가
- 삭제 버튼이 작동하는가
오후 1시, 새로고침하면 내용이 사라지는 문제를 해결했습니다
점심 식사 후 다시 테스트하니 새로고침할 때 기록이 사라졌습니다. 처음에는 전체 코드를 다시 만들어 달라고 요청하려 했지만, 기존 기능이 망가질 수 있어 문제 범위를 좁혔습니다.
실제로 사용한 프롬프트는 다음과 같습니다.
“할 일 추가, 완료 체크, 삭제 기능은 정상 작동해. 하지만 새로고침하면 목록이 사라져. 기존 HTML 구조와 CSS 디자인은 변경하지 말고 script.js의 저장 기능만 확인해 줘. 수정한 코드와 변경 이유를 함께 설명해 줘.”
AI는 데이터를 저장하는 시점과 화면을 불러오는 시점을 수정했습니다. 코드를 적용한 뒤 새로고침해도 기록이 유지되었습니다.
오류를 해결할 때는 잘되는 기능, 문제가 생기는 상황, 변경하면 안 되는 영역을 함께 알려 주는 것이 효과적입니다.
오후 2시, 빈칸 입력과 긴 문장을 테스트했습니다
기본 기능이 작동한 뒤 정상적인 사용만 확인하지 않았습니다. 사용자가 실수할 수 있는 상황도 시험했습니다.
- 빈칸으로 추가 버튼 누르기
- 공백만 입력하기
- 같은 내용을 여러 번 입력하기
- 긴 문장 입력하기
- 모든 항목 삭제하기
빈칸으로 버튼을 누르면 내용 없는 줄이 추가되는 문제가 발견되었습니다.
아래와 같이 요청했습니다.
“입력값이 비어 있거나 공백만 있으면 목록에 추가하지 말아 줘. 입력창 아래에 ‘할 일을 입력해 주세요’라는 안내 문구를 보여 줘. 기존 저장과 삭제 기능은 유지해 줘.”
이 요청으로 기본적인 입력 검사가 추가되었습니다. 긴 문장이 화면 밖으로 나가는 문제는 CSS에서 줄바꿈이 되도록 수정했습니다.
오후 3시, 기능을 건드리지 않고 디자인만 바꿨습니다
웹서비스가 정상 작동한 뒤 화면을 정리했습니다. 이때 기능과 디자인을 한꺼번에 수정하지 않았습니다.
디자인 프롬프트는 아래처럼 작성했습니다.
“자바스크립트 기능과 HTML 요소 이름은 변경하지 말고 CSS만 수정해 줘. 배경은 밝은 회색, 서비스 영역은 흰색 카드 형태로 만들고 버튼은 파란색으로 구성해 줘. 휴대전화에서는 화면 너비에 맞게 줄어드는 반응형 디자인을 적용해 줘.”
AI가 CSS만 수정하도록 범위를 제한했기 때문에 저장과 삭제 기능은 그대로 유지되었습니다.
완료된 항목에 취소선과 흐린 색상을 적용하기 위해 다음 요청도 사용했습니다.
“완료된 할 일은 글자 가운데 취소선을 표시하고 색상을 연하게 바꿔 줘. 완료 상태를 해제하면 원래 디자인으로 돌아오게 해 줘.”
기능이 안정된 뒤 디자인을 손보면 오류 원인을 찾기 쉬워집니다.
오후 5시, 모바일과 다양한 상황에서 점검했습니다
화면을 브라우저에서 줄여 휴대전화 크기로 확인했습니다. 입력창과 버튼이 한 줄에 있어 작은 화면에서 좁아지는 문제가 보였습니다.
다음 프롬프트로 수정했습니다.
“화면 너비가 600px 이하일 때 입력창과 추가 버튼이 세로로 배치되게 해 줘. 데스크톱 디자인은 유지하고 모바일 관련 CSS만 추가해 줘.”
이후 아래 항목을 최종 점검했습니다.
- PC에서 화면이 정상적으로 보이는가
- 휴대전화 크기에서 버튼이 잘 눌리는가
- 새로고침 후 데이터가 유지되는가
- 완료 상태도 저장되는가
- 삭제 후 목록이 정확히 반영되는가
- 빈 입력이 차단되는가
문제가 없는 상태를 확인한 뒤 폴더를 복사해 todo_final이라는 이름으로 저장했습니다.
하루 제작에 가장 유용했던 만능 프롬프트
제작 과정에서 반복해서 활용한 문장은 아래와 같습니다.
“현재 정상 작동하는 기능은 모두 유지해 줘. [수정할 내용]만 변경하고 다른 파일이나 기능은 건드리지 말아 줘. 수정한 부분, 수정 이유, 테스트해야 할 항목을 함께 알려 줘.”
이 프롬프트는 오류 수정, 디자인 변경, 기능 추가에 모두 활용할 수 있었습니다.
AI가 전체 코드를 다시 작성하는 일을 줄이고, 사용자가 바뀐 내용을 확인하는 데도 도움이 됩니다.
하루 만에 완성할 수 있었던 이유
비전공자가 하루 만에 웹서비스를 완성할 수 있었던 이유는 AI가 모든 일을 한 번에 처리했기 때문이 아닙니다. 목표를 네 가지 기능으로 줄이고, 코드를 작은 단계로 요청하며, 단계마다 직접 테스트했기 때문입니다.
오전에는 요구사항과 기본 화면을 만들고, 오후에는 저장 오류와 입력 문제를 해결한 뒤 마지막에 디자인과 모바일 화면을 점검했습니다. 문제가 생길 때마다 전체를 다시 만들지 않고 수정 범위를 좁힌 점도 중요했습니다.
바이브코딩의 속도는 프롬프트를 길게 쓰는 능력보다 작업을 작게 나누고 결과를 확인하는 습관에서 나옵니다. 첫 프로젝트라면 회원가입과 결제가 필요한 서비스보다 기록장, 계산기, 퀴즈, 체크리스트처럼 구조가 단순한 주제를 선택해 보세요.
하루 안에 완벽한 상용 서비스를 만드는 것은 어렵지만, 자신이 실제로 사용할 수 있는 작은 웹서비스는 충분히 완성할 수 있습니다.
첫 결과물을 끝까지 만들어 본 경험은 다음 프로젝트에서 더 정확한 요구사항을 작성하고 AI의 코드도 차분하게 검토하는 힘이 되어 줄 것입니다.