웹앱은 코드만 있다고 바로 켜지지 않습니다. 필요한 부품을 설치하고, 개발 서버를 켜고, 브라우저 주소로 접속하는 세 단계를 거칩니다.
DAY 1 · 2교시 · 60분
웹서비스 레이아웃 및 개발서버 기동
➔
➔
📚1단계: 주요 개념 설명
이번 단원의 목표
Next.js 웹 프로젝트 개발 환경을 가동하고 스토리보드 레이아웃을 확인한다.
🗂️강의 슬라이드
슬라이드 1 / 10
웹 프론트엔드 구동 환경 이해
- Next.js 프로젝트는 웹 화면을 만들기 위한 준비된 작업 공간입니다.
- npm은 프로젝트에 필요한 부품을 설치하고 실행 명령을 관리하는 도구입니다.
🛠️2단계: 따라하기 실습
🛠 따라 만들기 · AI 바이브 코딩
AI 코딩 도구로 프로젝트 시작하기본격 개발에 앞서, Kiro(키로)에게 시켜 Next.js 프로젝트 뼈대를 만들고 첫 화면을 띄웁니다. '말로 시키고 → 결과를 확인'하는 바이브 코딩의 기본 리듬을 익힙니다. (강사 시연을 따라 하고, 막히면 아래 '완성 코드'를 붙여넣으세요.)
🎯 완성 결과: localhost:3000에서 내가 만든 첫 화면이 뜨는 Next.js 프로젝트
1프로젝트 뼈대 만들기
명령어 한 줄로 Next.js 프로젝트를 생성합니다.
🤖 AI에게 이렇게 시켜보세요
Next.js 최신 버전으로 App Router와 TypeScript를 쓰는 새 프로젝트를 만드는 터미널 명령어를 알려줘. 폴더 이름은 ai-shorts로 하고 싶어.
💡 핵심 코드 설명
- create-next-app이 필요한 폴더·설정 파일을 한 번에 만들어 줍니다. 옵션 질문에는 App Router와 TypeScript를 선택합니다.
- '명령어를 알려줘'라고 AI에게 묻는 것도 바이브 코딩입니다 — 모르면 도구에게 묻는 습관을 들입니다.
2개발 서버 켜서 확인하기
만든 프로젝트를 브라우저에서 엽니다.
💡 핵심 코드 설명
- 개발 서버가 켜지면 브라우저에 기본 페이지가 보입니다.
- 코드를 저장하면 새로고침 없이 바로 반영되는 핫리로드를 확인해 보세요.
3첫 화면 내 맘대로 바꾸기 (첫 바이브 코딩)
AI에게 시켜 화면을 바꿔 보며 흐름을 체감합니다.
🤖 AI에게 이렇게 시켜보세요
app/page.tsx의 내용을 지우고, 화면 가운데에 'AI 쇼츠 생성기'라는 제목만 크게 보여주는 아주 간단한 페이지로 바꿔줘.
💡 핵심 코드 설명
- AI가 써 준 코드를 저장하고 브라우저를 확인합니다 — 말한 대로 화면이 바뀌면 성공입니다.
- 이 '요청 → 확인'의 짧은 반복이 앞으로 모든 기능을 만드는 방식입니다. 3교시부터 이 화면에 진짜 기능을 붙입니다.
✓실습 미션 체크리스트
우측 터미널 시뮬레이터에서 의존성을 다운로드(npm install)하고 개발 서버(npm run dev)를 켜서 3000포트 접속 준비를 완료해 보세요.
웹 개발 서버 기동 명령어
# 1. 관련 패키지 모듈 다운로드 npm install # 2. 로컬 3000 포트 테스트용 개발 서버 구동 npm run dev
💡 코딩 중 막히나요? 모범 솔루션 코드
🧩3단계: 개념 검증 퀴즈
검증 챌린지 미션
터미널에 Next.js Ready 사인이 뜨고, 웹 서버가 정상 실행되었음을 확인합니다.
📝 객관식 개념 확인 (2문항)
Q1. npm install 명령이 하는 일은?
Q2. 개발 서버(npm run dev)의 핫리로딩(Hot Reload)이란?
🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요
student@dev: ~/aimovie
student@dev:~/aimovie$ _