💡
13:30 - 14:00 (30분)
나만의 프로젝트 기획하기
Next.js + NestJS 기반 풀스택 시스템 설계
💡 "완벽하지 않아도 됩니다. 시작이 중요합니다"
🎯 학습 목표
- ✓업무에 실제로 필요한 도구 아이디어 도출하기
- ✓Next.js(프론트엔드) + NestJS(백엔드) 구조 이해하기
- ✓Plan 모드로 풀스택 프로젝트 계획 생성하기
- ✓AI가 세운 계획을 검토하고 수정 요청하기
🔄 오전 vs 오후: 무엇이 다른가요?
🌅 오전: 브라우저 앱
- • HTML/CSS/JavaScript 단일 파일
- • 서버 없이 브라우저에서 바로 실행
- • 데이터는 브라우저에 임시 저장
- • 파일 더블클릭으로 실행
🌇 오후: 풀스택 시스템
- • Next.js 프론트엔드 + NestJS 백엔드
- • 로컬 서버에서 실행 (localhost)
- • API를 통한 데이터 처리
- • 실제 서비스와 동일한 구조
💡 참고: 오늘은 로컬 환경에서 개발하고 테스트합니다. 실제 인터넷에 배포하는 것은 심화 과정에서 다룹니다.
💭 STEP 1: 아이디어 도출 (10분)
🤔 생각해볼 질문
- • 매일/매주 반복하는 귀찮은 작업이 있나요?
- • 정보를 찾느라 시간을 많이 쓰는 일이 있나요?
- • 엑셀로 관리하지만 불편한 것이 있나요?
- • 부서원들과 공유하면 좋을 도구가 있나요?
🏢 성운대 행정/총무 아이디어
- • 캠퍼스 비품 관리
- • 강의실/회의실 예약 현황
- • 스쿨버스 시간표 조회 도구
- • 부서별 연락처 통합 검색
🎓 성운대 학사/교무 아이디어
- • 학부별 수업 일정 관리
- • 학생 상담 예약 시스템
- • 졸업요건 체크리스트
- • 시간제과정 안내 조회
🐴 성운대 특성화 학과 아이디어
- • AI말산업학부 승마/조련 일정
- • 재활승마 실습 예약
- • 안경광학과 실습 장비 관리
- • 웰라이프복지학부 실습 일정
🎉 성운대 학생지원 아이디어
- • 학생 생활 관리
- • 장학금 신청 현황 조회
- • 취업상담센터 예약 시스템
- • 동아리 활동 관리
📋 STEP 2: 핵심 기능 정의 (10분)
✂️ 범위 좁히기가 핵심!
처음부터 모든 기능을 만들려고 하면 시간 내에 완성하기 어렵습니다. 가장 중요한 기능 3-5개만 선택하세요.
📝 기능 목록 작성 템플릿
1. [필수] _________________
2. [필수] _________________
3. [필수] _________________
4. [선택] _________________
5. [선택] _________________
✅ 좋은 예: 회의실 예약 시스템
- 1. 회의실 목록 보기 (이름, 위치, 수용인원)
- 2. 날짜별 예약 현황 확인
- 3. 새 예약 등록 (회의실, 시간, 예약자)
- 4. 내 예약 조회 및 취소
- 5. (선택) 예약 충돌 알림
🚀 STEP 3: Plan 모드로 풀스택 프로젝트 계획 세우기 (10분)
🤖 풀스택 프로젝트 프롬프트 작성법
[프로젝트 이름]을 만들어줘.
기술 스택:
- 프론트엔드: Next.js
- 백엔드: NestJS
핵심 기능:
1. [기능 1 설명]
2. [기능 2 설명]
3. [기능 3 설명]
로컬에서 실행할 수 있게 해줘.
디자인은 깔끔하고 사용하기 쉽게 해줘.
📌 예시: 회의실 예약 시스템
회의실 예약 시스템을 만들어줘.
기술 스택:
- 프론트엔드: Next.js (React)
- 백엔드: NestJS (API 서버)
핵심 기능:
1. 회의실 목록 API와 화면
2. 날짜별 예약 현황 캘린더
3. 새 예약 등록 (API 연동)
4. 내 예약 조회 및 취소
로컬에서 프론트엔드와 백엔드를 각각 실행할 수 있게 해줘.
가상의 회의실 5개와 샘플 예약 데이터를 넣어줘.
기술 스택:
- 프론트엔드: Next.js (React)
- 백엔드: NestJS (API 서버)
핵심 기능:
1. 회의실 목록 API와 화면
2. 날짜별 예약 현황 캘린더
3. 새 예약 등록 (API 연동)
4. 내 예약 조회 및 취소
로컬에서 프론트엔드와 백엔드를 각각 실행할 수 있게 해줘.
가상의 회의실 5개와 샘플 예약 데이터를 넣어줘.
🏗️ 생성될 프로젝트 구조 예시
my-project/
├── frontend/ # Next.js 프론트엔드
│ ├── pages/
│ ├── components/
│ └── package.json
└── backend/ # NestJS 백엔드
├── src/
│ ├── controllers/
│ └── services/
└── package.json
├── frontend/ # Next.js 프론트엔드
│ ├── pages/
│ ├── components/
│ └── package.json
└── backend/ # NestJS 백엔드
├── src/
│ ├── controllers/
│ └── services/
└── package.json
⚠️ 계획 검토 시 확인할 것
- • 프론트엔드와 백엔드가 분리되어 있는가?
- • API 엔드포인트가 명확하게 정의되어 있는가?
- • 로컬 실행 방법이 포함되어 있는가?
🖥️ 로컬 서버란?
오늘 만드는 시스템은 내 컴퓨터(localhost)에서만 동작합니다. 실제 서비스와 동일한 구조이지만, 인터넷에 공개되지는 않습니다.
✅ 오늘 할 것
- • localhost:3000 (프론트엔드)
- • localhost:4000 (백엔드 API)
- • 내 컴퓨터에서 테스트
🚀 심화 과정에서
- • 클라우드 서버에 배포
- • 도메인 연결 (예: myapp.com)
- • 누구나 접근 가능
⏭️ 다음 세션 예고
🚀 프로젝트 개발
기획한 프로젝트를 실제로 개발합니다. AI와 대화하며 기능을 하나씩 완성해 나갑니다.
- ✓ Plan 실행 및 결과 확인
- ✓ 대화로 기능 추가/수정
- ✓ 디버깅 및 개선
- ✓ 1:1 코칭 지원
👨🏫 강사 노트
⏰ 시간 배분: 아이디어 도출 10분, 기능 정의 10분, Plan 작성 10분
🎯 핵심 메시지: "완벽한 기획보다 빠른 시작이 중요합니다. 만들면서 개선하세요."
💬 코칭: 범위가 너무 큰 프로젝트는 핵심 기능만 남기도록 조언
🔄 주의: 아이디어가 안 떠오르는 분께는 예시 프로젝트 중 선택하도록 안내