9~13회
개발 수업 준비자료

이 문서가 다루는 것

9회 사용자 흐름 설계와 10~13회 서비스 구현 수업 전에 교사가 준비해야 할 AI 개발 조건, 표준 프로젝트, 실행 환경, 데이터 저장 도구, 제출 자료와 대체 운영 절차를 정리합니다.

코드를 처음부터 작성하거나 개발 환경을 설계하기보다, 수행평가 2에서 작성한 PRD를 기준으로 AI가 만든 결과를 실행·확인·수정 요청·테스트하는 데 집중합니다.

수업에서 고정할 개발 방향

• 초반 Python 학습과 9~13회 웹서비스 구현 단계를 분리한다.
• 9회에는 사용자 흐름과 개발 계획을 확정하며 코드를 작성하지 않는다.
• 실제 서비스 개발은 10회부터 시작하고 Python을 사용하지 않는다.
• 학생 작품은 교사가 제공한 표준 Next.js 프로젝트 하나에서 만든다.
• 프론트엔드와 백엔드를 별도 프로젝트로 나누지 않는다.
• 화면·내부 API·SQLite의 역할은 구분하되 프론트엔드와 백엔드를 별도 프로젝트로 연결하는 절차는 가르치지 않는다.
• 학생이 프레임워크, 패키지, 포트, DB 경로와 배포 방식을 선택하거나 설정하지 않는다.
• 서비스마다 핵심 기능은 한 가지로 제한한다.
• 모든 작품은 핵심 기능과 관련된 의미 있는 기록을 하나 이상 SQLite에 저장하고 다시 보여 준다.
• 한 테이블로 충분하면 늘리지 않으며, DB 사용을 보여 주기 위한 가짜 기록을 만들지 않는다.
• 로그인·결제·외부 API·관리자 기능은 기본 수업 범위에서 제외한다.
• 파일 업로드는 핵심 기능에 꼭 필요하고 교사가 승인한 작품만 선택적으로 허용한다.

학생과 교사의 역할 경계

표준 Next.js 프로젝트의 기본 원칙

• 모든 학생이 같은 시작 파일을 사용한다.
• 한 프로젝트 안에서 화면과 서버 기능이 함께 작동한다.
• 학생이 수정해도 되는 영역과 수정하면 안 되는 설정 영역을 구분한다.
• AI가 전체 프로젝트를 다시 만들거나 패키지를 임의로 추가하지 않도록 프로젝트 안내 파일에 제한을 적는다.
• 모든 작품이 같은 SQLite 기반 템플릿을 사용한다.
• 학생 서비스와 관계없는 가짜 기록을 넣지 않고 PRD의 후보 테이블을 기준으로 최소 기록만 연결한다.
• 로컬 실행과 플랫폼 실행에 같은 코드가 사용되어야 한다.

권장 기본 구조

student-project/
├─ app/                         # 화면과 교사가 허용한 서버 기능
├─ components/                  # 반복되는 화면 요소
├─ lib/                         # 공통 처리와 데이터 접근
├─ prisma/                      # SQLite 설정
├─ public/                      # 정적 이미지
├─ docs/
│  ├─ 00_course_project_rules.md
│  ├─ 08_assessment2_학생ID_이름.md
│  ├─ 09_development_plan_학생ID_이름.md
│  └─ 12_test_record_학생ID_이름.md
├─ data/                        # 작품별 SQLite 파일
├─ project-manifest.json        # 플랫폼 실행 정보
├─ package.json
├─ lockfile
└─ README-학생용.md

템플릿에 넣을 것과 감출 것

미리 포함할 기능

• 서비스 제목·설명·입력·실행·결과 영역이 있는 최소 화면
• 빈 입력을 안내하는 최소 예시
• 화면과 서버 기능이 한 프로젝트 안에서 작동하는 예시 한 개
• 모든 작품이 사용하는 표준 SQLite 데이터 접근 위치
• 플랫폼이 지정한 SQLite 경로를 사용하는 처리
• 플랫폼 상태 확인용 경로
• 오류가 발생해도 전체 화면이 사라지지 않는 기본 안내
• 학생이 편집할 위치를 알려 주는 짧은 주석
• AI가 패키지와 설정을 바꾸지 않도록 하는 프로젝트 지침
• docs/ 폴더와 project-manifest.json 예시

템플릿에 넣을 것과 감출 것(이어서)（续）

학생에게 감출 설정

배포와 플랫폼 운영 원칙

학생에게 외부 호스팅 서비스 가입과 공개 배포를 요구하지 않습니다. 플랫폼 업로드는 배포 기술을 배우는 활동이 아니라 제출한 작품이 다른 환경에서도 실행되는지 확인하는 절차로 다룹니다.

• 학생은 외부 배포 계정을 만들지 않는다.
• 학생은 서버, 도메인, 포트와 인증서를 설정하지 않는다.
• 교사 플랫폼이 ZIP 검증·빌드·실행·미리보기를 담당한다.
• 외부 공개는 교사가 승인한 작품과 버전에만 적용한다.
• 공개 주소에는 실제 학번과 학생 실명을 사용하지 않는다.
• 플랫폼 실행 성공 여부만으로 수행평가 결과를 결정하지 않는다.
• 플랫폼 장애나 교사 준비 미완료는 학생 감점 사유가 될 수 없다.

차시별 교사 준비자료

9회 · 사용자 흐름과 개발 계획

• AI가 먼저 읽을 수업 프로젝트 개발 조건 (09-0.html)
• 정상 흐름·예외 흐름 작성 양식과 쉬운 예시
• 기능별 구현 가능성 판정 예시
• 외부 AI·유료 키·로그인·외부 DB 등이 필요한 아이디어의 대안 자료
• 09_development_plan_학생ID_이름.md 작성 구조
• AI가 코드를 만들지 않고 질문·흐름·범위·개발 순서만 제안하게 하는 요청문

10회 · API 이해와 핵심 요청·응답 연결

• 최종 표준 프로젝트 ZIP과 학생용 한 장 실행 안내
• 수업 조건·PRD·개발 계획을 docs/에 넣는 예시
• 프로젝트 폴더 이름 규칙과 AI에 전달할 기본 프로젝트 지침
• 교사용 정상 실행본과 화면 캡처, 기본 템플릿 복구본
• 사용자 행동 → 요청 → 내부 API → 응답 → 화면 변화의 최소 예시
• GET·POST, JSON 이름: 값, 성공·실패 응답 예시와 학생별 API 약속표
• AI가 수정해도 되는 파일 목록
• 프로젝트 전체 재작성과 패키지 추가를 막는 요청문
• 화면은 열리지만 기능이 작동하지 않을 때의 교사용 점검 순서

차시별 교사 준비자료(이어서)（续）

11회 · 핵심 기록 저장

• 계산·추천·퀴즈·목록 등 서로 다른 서비스가 의미 있는 최소 기록을 남기는 예시
• 한 테이블로 충분한 예시와 여러 테이블 관계가 필요한 참고 예시
• SQLite가 포함된 교사용 정상 실행본
• 승인한 SQLite Viewer의 정확한 확장 이름과 설치 안내
• 화면의 값과 DB 행을 비교하는 예시
• DB 파일 위치와 재실행 후 데이터 유지 확인법
• 파일 업로드 승인 기준과 안전한 시험 파일

12~13회 준비자료

12회 · 사용자 흐름 테스트와 시험 제출

• 12_test_record_학생ID_이름.md 양식
• 처음 방문·대표 정상 흐름·예외 뒤 회복·다시 방문 시나리오의 예시
• 학생용 ZIP 생성 안내
• ZIP 제외 목록: node_modules, 빌드 캐시, .env, 비밀키, 실제 개인정보, 실행 중 생성된 업로드 파일
• 플랫폼 시험 제출 과제와 오류 요약 화면
• 플랫폼을 사용할 수 없을 때의 대체 제출 위치

13회 · 수행평가 3

• 최종 제출 체크리스트
• 수행평가 3 평가 기준과 설명 질문
• 최종 ZIP 파일명 자동 확인
• 로컬 실행 확인용 교사 체크표
• 플랫폼 최종 제출 확정 절차
• 플랫폼 장애 시 대체 평가 기록 양식

수업 전 필수 준비 게이트

9회 전

• 수행평가 2로 제출된 모든 PRD를 미리 읽고 구현 가능성을 1차 분류한다.
• 모든 PRD에 핵심 기능과 연결된 의미 있는 기록, 기록이 생기는 행동과 다시 보는 순간이 있는지 확인한다.
• 외부 AI·유료 키·소셜 로그인·외부 DB·파일 업로드가 포함된 아이디어를 표시한다.
• 그대로 만들기 어려운 학생에게 제시할 작은 대안 한두 개를 준비한다.
• 학생이 사용하는 AI 도구가 수업 개발 조건·PRD·Markdown 문서를 읽을 수 있는지 확인한다.
• 학생 계정의 모델 사용 한도와 로그인 상태를 확인하고, 사용할 도구를 하나로 확정한다.
• 특정 AI 도구 이름에 의존하지 않도록 같은 조건과 요청문을 쓸 수 있게 준비한다.

수업 전 필수 준비 게이트(이어서)（续）

10회 전

• 2회에 설치한 Node.js와 npm이 학생 기기에서 계속 실행되는지 다시 확인한다.
• Next.js 템플릿이 사용할 Node.js 버전과 학생 기기의 버전이 맞는지 확인한다.
• 템플릿의 의존성을 수업 중 인터넷 다운로드에 의존하지 않도록 설치 방식과 로컬 캐시를 준비한다.
• 학생이 실행할 명령은 한 개로 고정하고 교사용 설치·복구 명령은 별도로 둔다.
• 최소 사양 수업용 노트북에서 Next.js와 AI 도구를 함께 실행해 속도와 메모리를 확인한다.
• 한 테이블에 핵심 기록을 저장·조회하는 정상 예제를 준비한다.
• 서비스와 관계없는 가짜 기록을 넣은 잘못된 예시도 비교용으로 준비한다.
• 깨끗한 폴더에 템플릿을 복사하여 처음부터 실행하는 과정을 최소 두 번 확인한다.

11회 전

• SQLite Viewer가 학생 기기에서 설치·실행되는지 확인한다.
• Prisma 또는 DB 구조 변경 명령은 학생이 직접 조합하지 않도록 템플릿에 고정한다.
• 각 학생의 PRD에서 처음 연결할 후보 테이블과 저장·조회 흐름을 미리 표시한다.
• 파일 업로드를 허용할 학생과 허용하지 않을 학생을 수업 전에 확정한다.

수업 전 필수 준비 게이트(이어서)（续）

12회 전

• 학생이 파일을 직접 골라 제외하지 않아도 되도록 ZIP 생성 방법 또는 교사용 도구를 준비한다.
• ZIP 결과에서 node_modules, 빌드 캐시, 비밀정보와 업로드 파일이 제외되는지 확인한다.
• 플랫폼 시험 제출이 가능한지 확인하고, 불가능하면 대체 제출 위치를 수업 시작 전에 공지한다.
• 플랫폼과 상관없이 로컬 실행으로 평가할 수 있는 교사용 확인표를 준비한다.

차시별 45분 운영 기준

차시별 45분 운영 기준(이어서)（续）

배포 전 템플릿 검증

학생에게 배포하기 전 깨끗한 수업용 환경에서 다음을 직접 확인합니다.

• 새 폴더에 복사한 뒤 안내된 명령 하나로 실행된다.
• 학생이 보는 로컬 주소가 하나다.
• 다른 학생 프로젝트와 동시에 실행해도 교사가 대응할 수 있다.
• 한글·공백이 포함된 상위 경로에서도 문제가 없는지 확인했다.
• 기본 화면과 최소 서버 기능이 작동한다.
• 빈 입력 안내가 작동한다.
• 핵심 기록 저장 예시는 재실행 후에도 데이터가 남는다.
• 서비스와 관계없는 가짜 기록을 저장하지 않는다.
• SQLite Viewer에서 DB를 읽기 전용으로 확인할 수 있다.
• ZIP에 불필요한 대용량 파일과 비밀정보가 들어가지 않는다.
• 제출 ZIP을 새 폴더에 풀어 다시 실행할 수 있다.
• 플랫폼이 같은 ZIP을 검증·빌드·실행할 수 있다.
• 플랫폼이 실패해도 로컬 제출본과 이전 버전이 보존된다.

수업 중 문제 대응 순서

학생에게 상세 원인을 모두 해석하게 하지 않고 마지막으로 성공한 단계를 찾습니다.

수업 중 문제 대응 순서(이어서)（续）

평가에서 제외할 기술 요소

최종 확정이 필요한 항목

템플릿 제작 전에 다음 값을 하나로 고정합니다.

• Node.js 버전
• Next.js·React·TypeScript 버전
• 패키지 관리자와 lockfile 종류
• 학생이 사용할 실행 명령 한 개
• 화면과 서버 기능의 기본 구현 방식
• Prisma·SQLite 버전과 DB 파일 위치
• 상태 확인 경로
• 플랫폼 주소 방식: 경로형 또는 서브도메인형
• 파일 업로드 허용 여부와 제한
• 프로젝트 ZIP 최대 크기
• 플랫폼 시험 운영 가능 시점
• 플랫폼 미완성·장애 시 대체 제출 위치

준비물 관리표

준비물 관리표(이어서)（续）