“나만의 프로젝트를 만들고 싶다”는 생각은 있지만, 어디서 어떻게 시작해야 할지 모르겠다면 이 글이 도움이 됩니다. VIBEE와 함께 React 사이드 프로젝트를 아이디어에서 배포까지 한 번에 완성하는 과정을 안내합니다.
왜 사이드 프로젝트인가?
사이드 프로젝트는 단순한 토이 프로젝트가 아닙니다. 포트폴리오에서 가장 강력한 증거 자료이고, 실제 문제를 해결하는 과정에서 누구보다 빠르게 실력이 쌓입니다.
- 포트폴리오 강화 — 코딩 테스트보다 실제 서비스 URL이 더 설득력 있습니다.
- 진짜 학습 — 강의를 듣는 것과 직접 만드는 것은 차원이 다릅니다.
- 창업 가능성 — 많은 스타트업이 사이드 프로젝트에서 시작했습니다.
- 동기 유지 — 내가 쓰는 앱을 만들면 공부가 재미있어집니다.
VIBEE에서 프로젝트 만드는 과정
VIBEE의 사이드 프로젝트 기능은 네 단계로 이루어집니다. 복잡한 설정 없이 바로 시작할 수 있습니다.
1
아이디어 정하기
어떤 앱을 만들고 싶은지 한 문장으로 정리하세요. “친구들과 공유할 수 있는 독서 기록 앱”, “오늘 뭐 먹을지 랜덤으로 골라주는 앱”처럼 구체적일수록 좋습니다. 작은 범위에서 시작하는 것이 핵심입니다.
2
AI에게 프롬프트 작성
VIBEE AI 채팅에서 원하는 기능을 설명합니다. 기술 스택(React), 원하는 UI, 핵심 기능을 함께 전달하면 AI가 코드 구조를 잡아줍니다. 처음에는 화면 레이아웃부터 요청하세요.
3
반복 수정 (Iterate)
첫 결과물이 완벽하지 않아도 됩니다. “버튼 색 바꿔줘”, “목록이 비어있으면 안내 메시지 보여줘” 같은 구체적인 수정 요청을 반복하면서 원하는 모습으로 만들어갑니다.
4
배포하기
VIBEE에서 코드가 완성되면 배포 버튼 하나로 인터넷에 올릴 수 있습니다. Vercel 연동을 통해 자동 URL이 발급되며, 도메인 연결도 지원합니다.
프롬프트 예시
실제로 사용할 수 있는 React 프로젝트 시작 프롬프트입니다. 이 구조를 그대로 복사해서 내 아이디어에 맞게 바꿔보세요.
React + TypeScript + Tailwind CSS로 독서 기록 앱을 만들어줘.
기능:
- 책 제목, 저자, 읽은 날짜, 별점(1~5)을 입력해서 추가
- 추가된 책 목록을 카드 형태로 표시
- 별점 평균을 상단에 표시
- 책이 없을 때는 "아직 기록한 책이 없어요" 안내 표시
기술 요구사항:
- 외부 라이브러리 없이 React hooks만 사용
- localStorage로 데이터 유지
- 모바일에서도 잘 보이게 (반응형)
스타일:
- 깔끔하고 미니멀한 UI
- 카드에 그림자 효과
- 파란색 계열 포인트 색상배포까지 한 번에
VIBEE의 배포 시스템은 별도의 서버 지식 없이도 사용할 수 있습니다. 코드가 준비되면 대시보드 내 배포 탭에서 Vercel 연동을 설정하고, 버튼 하나로 라이브 URL을 발급받을 수 있습니다.
배포된 프로젝트 링크는 포트폴리오, 이력서, SNS에 바로 공유할 수 있습니다. 취업 준비 중이라면 Pro 플랜 에서 무제한 사이드 프로젝트와 배포 기능을 모두 활용해보세요.
프롬프트 작성이 아직 어렵다면 프롬프트 잘 쓰는 법 5가지 글을 먼저 읽어보세요. 훨씬 좋은 결과를 얻을 수 있습니다.