AI와 함께 14일 만에 나만의 웹앱 만들기

코딩 공부는 했지만, 막상 혼자 웹앱 하나를 만들려고 하면 어디서부터 시작해야 할지 막막하지 않으셨나요?

HTML과 CSS는 배웠고 JavaScript도 조금 공부했지만, 실제 프로젝트를 시작하려고 하면 화면 구성부터 기능 구현까지 모든 과정이 어렵게 느껴질 수 있습니다.

이번 「AI와 함께 14일 만에 나만의 웹앱 만들기」 챌린지에서는 ChatGPT, GitHub Copilot과 같은 AI 도구를 활용하여 아이디어를 정하고, 화면을 만들고, 기능을 구현하고, 코드를 개선한 뒤 React로 확장하는 과정을 직접 경험합니다.

목표는 많은 내용을 배우는 것이 아닙니다.

14일 안에 작더라도 직접 동작하는 웹앱 하나를 끝까지 완성하는 것이 이번 챌린지의 가장 중요한 목표입니다.

🚀 14일 동안 이렇게 진행합니다

이번 챌린지는 라이브 수업 없이 진행됩니다.

정해진 시간에 접속할 필요 없이 자신의 일정에 맞춰 제공되는 수업자료를 참고하고, 단계별 미션을 수행하면 됩니다.

총 6개의 미션을 통해 하나의 웹앱을 점진적으로 완성합니다.

Mission 1. 나만의 웹앱 주제 정하기 & 개발환경 준비하기
만들고 싶은 웹앱의 주제를 정하고 VS Code와 프로젝트 폴더를 준비합니다.

Mission 2. AI와 함께 웹앱 기능 기획하기
AI에게 프로젝트의 목적을 설명하고, 14일 안에 구현할 핵심 기능을 3~5개로 정리합니다.

Mission 3. HTML·CSS로 웹앱 기본 화면 만들기
검색창, 버튼, 카드 목록 등 기능이 들어갈 기본 UI를 HTML과 CSS로 구성합니다.

Mission 4. JavaScript로 동작하는 기능 만들기
검색, 필터, 버튼 이벤트 등 화면에 실제 동작을 추가합니다.

Mission 5. AI와 함께 코드 개선하기
작성한 코드를 AI에게 리뷰받고 중복 코드, 변수명, 함수 구조 등을 직접 개선해봅니다.

Mission 6. React로 웹앱 확장하기
완성한 HTML·CSS·JavaScript 프로젝트를 React 방식으로 변환하고, useState와 컴포넌트 구조를 경험합니다.

🤖 모든 코드를 직접 작성하지 않아도 됩니다

이번 챌린지에서는 AI를 적극적으로 활용합니다.

AI에게 단순히

“코드 만들어줘”

라고 요청하는 것에서 끝나는 것이 아니라,

• 현재 프로젝트 상황을 설명하고

• 구현하려는 기능을 구체적으로 요청하고

• 생성된 코드를 실행하고

• 문제가 발생하면 원인을 질문하고

• 코드 개선 방법을 다시 요청하는

과정을 반복합니다.

이를 통해 AI를 단순한 코드 생성기가 아니라 개발을 함께하는 도구로 활용하는 방법을 경험할 수 있습니다.

💡 어떤 프로젝트를 만들 수 있나요?

주제는 자유롭게 선택할 수 있습니다.

예를 들어 다음과 같은 웹앱을 만들 수 있습니다.

• 상품 탐색 웹앱

• 영화 검색 웹앱

• 여행지 탐색 웹앱

• TODO 웹앱

• 포트폴리오 웹앱

• 관심 콘텐츠 모음

• 나만의 아이디어를 활용한 간단한 웹앱

처음부터 복잡한 서비스를 만들 필요는 없습니다.

회원가입, 결제, 실시간 채팅처럼 구현 범위가 큰 기능보다는 검색, 필터, 목록, 버튼 이벤트처럼 직접 결과를 확인할 수 있는 기능부터 구현합니다.

📚 단계별 수업자료를 제공합니다

각 미션에는 미션 수행 방법을 설명하는 단계별 수업자료가 제공됩니다.

단순히 “이 기능을 만들어보세요”라고 과제를 제시하는 것이 아니라,

STEP 1 → STEP 2 → STEP 3

순서로 자료를 따라가면서 미션을 수행할 수 있도록 구성합니다.

코딩 중 막히는 경우 활용할 수 있는 AI 프롬프트 예시와 체크리스트도 함께 제공합니다.

따라서 혼자 프로젝트를 시작하는 것이 부담스러웠던 분도 하나씩 따라가며 진행할 수 있습니다.

✅ 이런 분께 추천합니다

• HTML과 CSS를 배웠지만 다음 단계가 막막한 분

• JavaScript 문법은 공부했지만 프로젝트 경험이 부족한 분

• ChatGPT나 Copilot을 코딩에 어떻게 활용해야 하는지 궁금한 분

• 강의만 계속 듣기보다 직접 결과물을 만들어보고 싶은 분

• React를 본격적으로 공부하기 전에 전체 개발 흐름을 경험하고 싶은 분

• AI와 함께 코딩하는 새로운 개발 방식을 경험해보고 싶은 분

HTML과 CSS의 기본 구조를 한 번 정도 학습한 경험이 있다면 더욱 수월하게 진행할 수 있습니다.

JavaScript와 React를 완벽하게 알고 있을 필요는 없습니다.

⏱ 부담 없이 진행할 수 있습니다

총 기간은 14일, 필수 미션은 6개입니다.

매일 새로운 미션을 수행하는 방식이 아니라 하나의 미션을 1~2일 동안 진행할 수 있도록 구성합니다.

미션 하나당 약 20~50분 정도를 목표로 하며, 중간에는 진행하지 못한 내용을 따라잡을 수 있는 시간도 마련합니다.

직장인이나 일정이 불규칙한 분도 자신의 일정에 맞춰 참여할 수 있습니다.

🏁 14일 후에는 무엇이 남을까요?

이번 챌린지를 완료하면 단순히 강의를 들었다는 기록만 남는 것이 아닙니다.

직접

아이디어를 정하고 → 기능을 기획하고 → 화면을 만들고 → JavaScript로 동작을 구현하고 → AI와 코드를 개선하고 → React로 확장하는

전체 과정을 경험하게 됩니다.

그리고 마지막에는

“내가 직접 완성한 웹앱 하나”

가 남습니다.

완벽한 프로젝트를 만드는 것이 목표는 아닙니다.

작더라도 끝까지 직접 완성해보는 경험이 다음 프로젝트를 시작할 수 있는 가장 좋은 출발점이 됩니다.

🚀 챌린지 완주 후, 다음 단계로 성장해 보세요!

축하합니다!
이번 챌린지를 통해 아이디어를 정하고, AI와 함께 화면을 만들고, JavaScript 기능을 구현하고, React로 확장하는 과정까지 경험했습니다.

이제 직접 만들어 본 경험을 바탕으로 기초 개념을 조금 더 탄탄하게 다지고, React와 실전 프로젝트로 학습을 확장해 보세요.

1️⃣ JavaScript의 기초를 제대로 이해하고 싶다면

챌린지에서는 AI와 함께 필요한 JavaScript 기능을 빠르게 구현해 봤다면, 이제 변수, 배열, 객체, 함수, DOM, 이벤트와 같은 핵심 개념을 체계적으로 학습해 볼 차례입니다.

2️⃣ JavaScript 다음 단계로 React를 배우고 싶다면

챌린지에서 HTML/JavaScript로 만든 화면을 React로 변환해 보면서 컴포넌트와 상태 관리의 개념을 가볍게 경험했습니다.

이제 React의 구조와 핵심 개념을 처음부터 차근차근 익혀보세요.

3️⃣ React로 실제 서비스를 끝까지 만들어 보고 싶다면

React의 기본 개념까지 익혔다면 이제 실제 데이터를 저장하고 관리하는 프로젝트에 도전해 볼 수 있습니다.

React와 Firebase를 활용해 인증, 데이터베이스, 이미지 업로드 등 실제 웹서비스에서 사용되는 기능을 구현하면서 하나의 프로젝트를 완성해 봅니다

🌱 이렇게 이어서 학습해 보세요

14일 웹앱 챌린지
→ 직접 만들어 보며 전체 흐름 경험

JavaScript 기초
→ 사용했던 코드의 원리 이해

처음 만나는 React
→ React 핵심 개념과 개발 방식 학습

React + Firebase 실전 프로젝트
→ 실제 서비스 수준의 프로젝트 완성

이번 챌린지에서 만든 웹앱은 끝이 아니라 첫 번째 프로젝트입니다.

처음부터 모든 것을 알고 개발할 필요는 없습니다.
직접 만들어 보고, 부족한 부분을 다시 공부하고, 또 새로운 기능을 추가하는 과정을 반복하면서 개발 실력이 쌓이게 됩니다.

이제 ‘따라 하는 학습’에서 한 단계 더 나아가, 직접 만들고 확장하는 학습을 이어가 보세요. 🚀