AI와 풀스택 미니 프로젝트 완성하기

배운 것을 하나로 모읍니다

이번 글은 커리큘럼의 마무리입니다. HTML·CSS·자바스크립트·API·Git·배포까지, 지금까지 익힌 모든 것을 모아 작은 프로젝트 하나를 끝까지 만들어봅니다. 예시로 “오늘의 명언 카드” 앱을 만듭니다. 버튼을 누르면 외부 API에서 명언을 받아 화면에 보여주고, 인터넷에 배포하는 것까지가 목표입니다.

기획에서 화면, 동작·데이터, 배포로 이어지는 풀스택 미니 프로젝트 단계 파이프라인 — 기획 → 화면 → 동작·데이터 → 배포. 지금까지 배운 모든 단계를 한 번에 거쳐 작은 프로젝트를 완성합니다.

1단계: 기획을 말로 정리하기

먼저 무엇을 만들지 한 문단으로 적습니다. AI에게도 이 문단을 그대로 전합니다.

“버튼을 누르면 명언 API에서 무작위 명언을 하나 받아 화면 가운데 카드에 보여주는 한 페이지 앱을 만들고 싶어. 상아색 배경, 검정 글씨, 외부 라이브러리 없이.”

2단계: 뼈대와 화면

AI에게 위 기획을 전하고 HTML·CSS 뼈대를 받습니다. 제목, 명언 카드 영역, 버튼이 있으면 됩니다.
받은 코드를 index.html 에 넣고 미리보기로 화면을 확인합니다.
색·여백을 본인 취향대로 다듬습니다.

3단계: 동작과 데이터 연결

버튼을 누르면 API에서 명언을 받아오도록 자바스크립트를 추가합니다. (앞의 API 연동 기초 참고)
받은 데이터에서 명언 문장과 작가를 꺼내 카드에 표시합니다.
동작이 안 되면 콘솔의 에러를 확인하고, AI로 버그 잡기 글의 방법으로 해결합니다.

4단계: 다듬고 배포하기

작은 개선을 더합니다. 예: “명언이 바뀔 때 부드럽게 나타나게 해줘”, “로딩 중에는 ’불러오는 중…’을 보여줘.”
코드를 GitHub에 올립니다. (git add → commit → push)
Vercel에 연결해 배포합니다. (앞의 배포하기 글 참고)
생성된 링크를 친구에게 보내 직접 써보게 합니다. 첫 배포의 순간입니다.

여기서 멈추지 마세요

축하합니다. 기획부터 배포까지 한 바퀴를 완주했습니다. 이 흐름은 더 큰 프로젝트에서도 그대로 반복됩니다.

관심 있는 다른 API로 같은 구조의 앱을 만들어보세요. (날씨, 환율, 공공데이터)
만든 앱에 저장 기능, 검색, 디자인 테마를 하나씩 더해보세요.
막히는 지점마다 AI에게 묻고, 동작하는 코드를 읽으며 이해를 넓히세요.

마치며

여기까지 따라온 당신은 이제 아이디어를 직접 만들어 세상에 내놓을 수 있습니다. 바이브 코딩의 핵심은 완벽함이 아니라 계속 만들어보는 것입니다. 다음 아이디어를 시작해보세요.