[바이브코딩 HTML 웹앱 20일 챌린지] 1일차 - AI와 함께 만들 웹앱 정하기
이번 1일차에서는 AI와 함께 어떤 HTML 웹앱을 만들지 방향을 정하는 단계를 진행합니다. 바로 코드를 길게 작성하기보다, 왜 이 앱을 만들고 어떤 기능을 20일 동안 완성할지 큰 그림부터 잡아두면 이후 회차가 훨씬 쉬워집니다. 바이브코딩 방식은 완벽한 기획 문서를 먼저 만드는 방법이 아니라, AI와 짧게 대화하며 아이디어를 구체화하고 바로 실행 가능한 수준으로 다듬는 흐름에 가깝습니다.
이번 시리즈의 목표는 초보자도 HTML, CSS, JavaScript를 이용해 하루 관리 대시보드를 완성하는 것입니다. 오늘은 그 출발점으로 앱의 핵심 기능과 우선순위를 정하고, 내일 2일차에서 첫 HTML 화면을 빠르게 띄울 수 있도록 준비합니다. 오늘의 핵심은 정답 찾기가 아니라 시작 가능한 범위를 정하는 것입니다.
1. 오늘 만들 기능 소개
1일차에서 만드는 기능은 버튼이나 저장 기능처럼 눈에 보이는 UI 기능이 아니라, 20일 프로젝트의 방향을 정하는 기획 기능입니다. 이 단계에서 앱 주제를 정해두지 않으면 회차가 진행될수록 매번 다른 기능을 붙이게 되어 전체 흐름이 흔들리기 쉽습니다. 그래서 오늘은 "하루 관리 대시보드"를 최종 목표로 잡고, 할 일 목록, 메모, 기분 기록, 타이머, 습관 체크 같은 기능이 순서대로 확장되도록 설계합니다.
특히 초보자라면 처음부터 거대한 서비스를 만들겠다는 생각보다, 매일 1개의 작은 기능을 완성해 누적한다는 관점이 중요합니다. 이 방식은 실패 부담을 줄이고, 하루만 지나도 눈에 보이는 결과를 얻을 수 있어 동기 유지에 도움이 됩니다.
2. AI에게 요청할 프롬프트
바이브코딩에서는 AI에게 무엇을 요청하느냐에 따라 결과 품질이 크게 달라집니다. 오늘은 아래처럼 "현재 상태 + 원하는 결과 + 초보자 조건"을 함께 적는 프롬프트를 사용합니다.
나는 HTML/CSS/JavaScript 초보자야.
20일 동안 만들 수 있는 개인용 하루 관리 웹앱 아이디어를 제안해줘.
기능은 할 일, 메모, 타이머, 습관 체크를 포함하고,
매일 하나씩 구현할 수 있게 난이도를 나눠줘.이렇게 요청하면 AI가 단순 아이디어 나열이 아니라 단계형 계획으로 답변하기 쉽습니다. 추가로 "오늘은 1일차라서 앱 방향만 정하고 싶다"고 맥락을 넣으면, 당장 필요한 결과에 더 집중된 답변을 받을 수 있습니다.
3. 코드 작성과 실행 과정
1일차는 본격 코드 구현보다 폴더 구조와 실행 환경을 가볍게 준비하는 단계입니다. 예를 들어 프로젝트 폴더를 만들고, 내일부터 사용할 `index.html`, `style.css`, `script.js` 파일 이름을 미리 정해두면 2일차 진행 속도가 빨라집니다. 또한 브라우저에서 로컬 HTML 파일을 여는 방법을 미리 익혀두면 "코드가 맞는데 왜 안 보이지?" 같은 초반 막힘을 줄일 수 있습니다.
| 구분 | 오늘 한 일 | 의도 |
|---|---|---|
| 앱 방향 | 하루 관리 대시보드로 목표 확정 | 20일 흐름 일관성 확보 |
| AI 프롬프트 | 초보자 기준의 단계형 요청 작성 | 실행 가능한 답변 유도 |
| 개발 준비 | 파일 구조와 실행 방법 점검 | 2일차 즉시 구현 시작 |
직접 바꿔보기 미션도 하나 해보세요. "하루 관리" 대신 "공부 루틴 관리"나 "운동 기록"으로 주제를 바꿔 AI에게 같은 형식으로 다시 요청해보면, 프롬프트를 조금만 바꿔도 결과가 어떻게 달라지는지 빠르게 체감할 수 있습니다.
4. 코드 이해하기
오늘은 코드 줄 단위 분석보다 프로젝트 설계 감각을 익히는 날입니다. 초보자가 특히 이해해야 하는 포인트는 두 가지입니다. 첫째, 기능을 작은 단위로 나눌수록 구현과 디버깅이 쉬워진다는 점, 둘째, AI에게 요청할 때 현재 단계와 목표를 함께 말해야 답변이 정확해진다는 점입니다.
만약 AI 답변이 너무 길거나 어려우면 "중학생도 이해할 표현으로 다시 설명해줘", "오늘 필요한 것만 3줄로 요약해줘"처럼 재요청하면 됩니다. 막혔을 때는 내가 잘못했다는 신호가 아니라, 질문을 더 구체화할 타이밍이라고 생각하면 훨씬 수월하게 진행할 수 있습니다.
5. 오늘 만든 내용 정리
오늘은 AI와 함께 만들 20일 웹앱의 방향을 "하루 관리 대시보드"로 정하고, 기능을 작게 나눠 구현하는 바이브코딩 흐름을 잡았습니다. 코드를 많이 쓰지 않았지만, 이 단계가 정리되어 있으면 이후 회차에서 기능을 빠르게 붙이고 수정하기가 쉬워집니다. 다음 2일차에서는 브라우저에 첫 HTML 화면을 띄우며 실제 구현을 시작하겠습니다.
6. 자주 묻는 질문
Q1. 1일차인데 코드를 거의 안 써도 괜찮나요?
괜찮습니다. 오늘은 방향을 정하는 날이라 코드 양이 적어도 정상입니다. 대신 내일부터 바로 구현할 수 있는 수준으로 목표와 순서를 정하는 것이 더 중요합니다.
Q2. AI가 제안한 기능이 너무 많으면 어떻게 줄이나요?
"20일 동안 하루 1기능만 구현 가능한 범위로 줄여줘"라고 다시 요청해보세요. 난이도와 기간 조건을 명확히 주면 답변이 현실적인 계획으로 바뀝니다.
Q3. 막혔을 때 AI에게 어떤 식으로 다시 물어보면 좋나요?
현재 상태, 시도한 것, 발생한 문제를 한 번에 적어 질문하면 좋습니다. 예를 들어 "2일차 준비 중인데 index.html이 브라우저에 안 열려, 확인 순서를 알려줘"처럼 구체적으로 묻는 방식이 효과적입니다.