VIBE CODING / FIELD HANDBOOK

1일차 · 본문 교재

이 폴더 안에서 발표·교재·코드·심화 원문을 오프라인으로 이동할 수 있습니다.

이 일차 자료 목차1일차 발표학생용 실습 교재4교시 본문 교재예제 코드 열람·ZIP이 일차 심화 배치표생성도구 원문
01일차
04교시
45발표 슬라이드
04공통 원문 파일
TECHNOLOGY

프런트엔드·백엔드·DB의 실제 역할

기술종류역할
HTML·CSS마크업·스타일 언어화면 구조와 표현
JavaScript·TypeScript프로그래밍 언어화면·서버의 동작
React·Next.jsUI 라이브러리·웹 프레임워크컴포넌트·페이지·서버 경로
Node.js서버 실행 환경TypeScript/JavaScript 서버 실행
PostgreSQL·SQL관계형 DB·질의 언어저장·조회·무결성
Supabase백엔드 플랫폼DB·Auth·Storage·API
Docker·Vercel컨테이너 도구·배포 플랫폼로컬 스택·공개 앱

세 프로젝트의 주 DB는 Supabase PostgreSQL이다. MySQL·SQLite는 관계형 DB, MongoDB는 문서형 DB의 비교 예시다. uc-anchor의 선택형 Python PDF 서비스는 Next.js·Vercel 기본 배포와 분리해 설명한다. 현재 운영 전체 기능을 재검증한 표는 아니다.

목차와 처음으로 ↑
FIELD NOTES

무료 AI로 시작하는 나의 앱

만들고 싶은 앱과 운영 방식을 고르고, 링크로 첫 결과 공유하기

CLASS / D1-1

1일차 1교시 · 무료 AI로 시작하는 나의 앱

무료 개발·배포 경로를 고르고, 내가 만들 앱의 사용자·핵심 기능·운영 형태를 설명한다.

D1-150분시연8 · 질문7 · 카드5 · 생성12 · 배포8 · 짝검증6 · 정리4

산출물: 나의 앱 기획 카드와 기능 한 개가 동작하는 공개 웹앱 링크

교시별 슬라이드 구성

번호제목진행 내용
003학생이 무료로 시작할 수 있는 AI 도구
004추천: 무료 AI에서 첫 공개 링크까지첫 버전: 가상 데이터·이 기기 저장 · 앱 내 AI 호출 없음
005무료 배포: 앱 구조와 계정으로 선택
006당신이 진짜 만들고 싶은 앱은 무엇인가요?누가 어떤 순간에 불편한가요? / 이 앱으로 어떤 행동이 쉬워지나요? / 오늘 한 가지 기능만 만든다면 무엇인가요?
007어디에서 운영하고 싶은가요? 웹 vs 모바일?사용자는 PC와 휴대폰 중 어디에서 주로 쓰나요? / 주소 공유·홈 화면 설치·스토어 배포 중 무엇이 필요한가요?
008웹 · PWA · 모바일 앱, 이렇게 고릅니다
0095분 활동: 나의 앱 기획 카드아래 단계별 실습을 진행한다.
010무료 AI에 입력할 첫 프롬프트아래 전체 구현 요청을 사용한다.
011따라 만들기: 과제 체크 앱필수: 과제명·마감일 입력,완료 표시,새로고침 후 복원 / 선택 개선: 필터·오늘/기한지남 집계·삭제 되돌리기 / 단일 index.html · 서버/DB/API/설치 없음 / 생성12분 · 배포8분 · 짝 검증6분에 사용
012과제 체크 앱: 무료 AI 생성 요청아래 전체 구현 요청을 사용한다.
013로컬 확인: index.html 저장과 실행아래 단계별 실습을 진행한다.
014GitHub: 공개 저장소에 index.html 올리기아래 단계별 실습을 진행한다.
015GitHub Pages: main / (root)로 배포아래 단계별 실습을 진행한다.
016짝 검증과 강사 확인: 실행한 것만 통과필수: 빈값 거절·추가·완료·새로고침 후 저장·휴대폰 실행 / 선택: 어제/오늘/내일 과제의 집계와 필터 확인 / 선택: 삭제와 되돌리기 후 원래 상태 확인 / 기록: URL·확인한 기능·실패 또는 미확인·다음 기능 한 개
017무료 AI로 시작하는 나의 앱무료 개발·배포 경로를 고르고, 내가 만들 앱의 사용자·핵심 기능·운영 형태를 설명한다. / 산출물: 나의 앱 기획 카드와 기능 한 개가 동작하는 공개 웹앱 링크 / 시연8 · 질문7 · 카드5 · 생성12 · 배포8 · 짝검증6 · 정리4분
018핵심 개념무료 AI 개발 도구와 무료 호스팅의 역할 / 만들고 싶은 앱의 사용자·문제·핵심 동작 / 웹·PWA·모바일 앱의 실행과 배포 경로
019생성도구: 빠른 시작과 첫 공개 링크무료 AI로 작은 HTML 앱을 만들고 GitHub Pages에서 첫 링크를 공유한다. / AI Studio·Sites·v0·Lovable·Bolt는 같은 요구를 시제품으로 확인하는 선택지다. / 생성 화면·실제 저장·로그인·공개 배포를 각각 확인한다. / 과제 앱의 필수 기능3개를 먼저 완성하고 도구 비교는 필요할 때 연다.
020kysong · 이번 실습에 적용할 판단기록: 연구 포털을 만든 뒤 자료·설문·내보내기 기능을 순차 확장했다. / 비교: 첫날 과제 앱도 작은 목록과 공개 링크부터 완성한다. / 적용: 만들고 싶은 앱·사용자·웹/모바일 운영 위치를 한 장에 적는다.
021실습 절차아래 단계별 실습을 진행한다.
022무료 AI에 입력할 기획 요청아래 전체 구현 요청을 사용한다.
023완료 확인과 오류 대응나의 앱과 사용자·해결할 문제를 한 문장으로 말한다. / 웹·PWA·모바일 선택 이유와 무료 배포 조건을 설명한다. / 공개 URL에서 핵심 동작1개를 짝이 확인한다.

학생용 시작: 무료 경로 제안 → 두 질문 → 기획 카드

진행분
무료 경로 시연8
앱·운영 방식 질문7
기획 카드5
작은 앱 생성12
공개 배포8
짝 검증6
정리4
FIELD GUIDE

S01 · 학생이 무료로 시작할 수 있는 AI 도구

지금 접근 가능한 도구 한 개를 골라 작은 앱을 만든다.

도구첫 수업 활용무료 이용 조건
Gemini 기본 / Canvas기획·화면·코드 초안표준 사용량·학교 계정 정책 확인
ChatGPT / Codex Free기획·코드 작성·수정사용량 제한, Codex 데스크톱은 순차 제공
Google AI Studio Build대화로 웹 시제품 생성18세 이상·지원 계정/지역, 배포 조건 별도
Copilot Free / Student에디터에서 코드 도움Free 한도, Student는 학생 인증·활성화

강사 해설과 적용 범위

2026-11-10 공식 문서 확인. Gemini 기본 플랜과 Canvas, OpenAI Docs의 Free Codex 데스크톱 제공 조건을 참고한다. 특정 모델이나 요청 횟수를 무제한으로 약속하지 않는다. Copilot 학생 인증은 수업 중 기다리지 않고 사전 준비한다. 18세 미만 학생에게 AI Studio를 필수로 요구하지 않는다. 도구 접근이 어려우면 강사 예제 코드로 실습을 이어간다.

근거와 참고 자료

이 내용을 사용하는 교시

    목차와 처음으로 ↑
    FIELD GUIDE

    S02 · 추천: 무료 AI에서 첫 공개 링크까지

    과제 체크·학습 타이머·플래시카드처럼 기능 하나로 시작한다.

    • 첫 버전: 가상 데이터·이 기기 저장 · 앱 내 AI 호출 없음
    1. 01AI 한 개 선택

      Gemini / ChatGPT / 제공된 Codex

    2. 02작은 웹앱 생성

      index.html · HTML/CSS/JS

    3. 03로컬 확인

      브라우저에서 입력·출력 검사

    4. 04GitHub에 기록

      학생 개인의 공개 저장소

    5. 05GitHub Pages 배포

      main / (root) · 기본 제공 URL

    6. 06휴대폰으로 공유

      링크를 열고 짝이 동작 확인

    강사 해설과 적용 범위

    추천 기본 경로는 별도 API 키·서버 없이 실행되는 정적 웹앱이다. AI는 개발을 돕고 완성 앱은 브라우저에서 동작한다. localStorage는 같은 origin의 브라우저 저장이며 다른 기기와 자동 공유되지 않는다. GitHub Pages는 HTML·CSS·JS를 제공하며 서버·DB·비밀키를 실행하는 곳으로 설명하지 않는다.

    근거와 참고 자료

    이 내용을 사용하는 교시

      목차와 처음으로 ↑
      FIELD GUIDE

      S03 · 무료 배포: 앱 구조와 계정으로 선택

      무료 생성 · 무료 호스팅 · 앱 안의 AI API 사용량을 나눠 확인한다.

      배포 대상어떤 앱에 맞나무료 조건과 범위
      GitHub Pages · 기본단일 HTML·정적 웹앱GitHub Free는 공개 저장소, 서버·DB 없음
      Vercel Hobby · 선택개인 웹앱·정적/지원 서버 기능개인 비상업 용도, 자원 한도·외부 서비스 별도
      AI Studio Starter Tier · 선택Build에서 만든 앱 직접 공개적격 계정 최대2개, 학교 Workspace 등 제외 가능

      강사 해설과 적용 범위

      GitHub Pages는 수업용 공개 소스와 가상 데이터만 올린다. Vercel Hobby는 개인 비상업 프로젝트에 적용한다. AI Studio Starter Tier는 적격 계정 최대2개 앱을 공개할 수 있으나 Workspace for Education 등 Workspace 계정, 현재 또는 과거 유료 Cloud billing 보유 계정 등이 부적격일 수 있다. 일반 Cloud 배포는 billing을 요구하며 Gemini API·외부 DB·메일 등은 별도 요금과 한도를 확인한다. 유료 전환이나 카드 등록을 수업 참여 조건으로 삼지 않는다.

      근거와 참고 자료

      이 내용을 사용하는 교시

        목차와 처음으로 ↑
        FIELD GUIDE

        S04 · 당신이 진짜 만들고 싶은 앱은 무엇인가요?

        나 또는 주변 사람이 반복해서 겪는 불편 한 가지부터 적어보세요.

        • 누가 어떤 순간에 불편한가요?
        • 이 앱으로 어떤 행동이 쉬워지나요?
        • 오늘 한 가지 기능만 만든다면 무엇인가요?

        강사 해설과 적용 범위

        여기부터 학생의 답을 먼저 듣는다. AI 도구 목록을 추가로 소개하지 않는다. 1분 개인 메모 뒤2명에게 사용자가 누구인지와 불편한 순간을 묻는다. “학교생활 관리 앱”처럼 넓은 답은 “내일 마감 과제를 빠뜨리지 않기”처럼 관찰 가능한 상황으로 줄인다. 첫 기능 예시는 과제 추가·완료 표시, 학습 타이머 시작/중지, 단어 카드 뒤집기다.

        이 내용을 사용하는 교시

          목차와 처음으로 ↑
          FIELD GUIDE

          S05 · 어디에서 운영하고 싶은가요? 웹 vs 모바일?

          링크로 바로 열까요? 휴대폰에 설치할까요? 앱스토어에서 찾게 할까요?

          • 사용자는 PC와 휴대폰 중 어디에서 주로 쓰나요?
          • 주소 공유·홈 화면 설치·스토어 배포 중 무엇이 필요한가요?

          강사 해설과 적용 범위

          직전 질문에서 고른 앱의 사용자와 이용 장소를 연결한다. “휴대폰에서 쓰니까 모바일 앱”으로 바로 결정하지 않고, 브라우저 링크가 충분한지, 홈 화면 설치가 필요한지, OS 기능과 스토어 유통이 핵심인지 이유를 말하게 한다. 정답을 고르는 시험이 아니라 배포와 검증 범위를 결정하는 활동이다.

          이 내용을 사용하는 교시

            목차와 처음으로 ↑
            FIELD GUIDE

            S06 · 웹 · PWA · 모바일 앱, 이렇게 고릅니다

            사용자에게 전달하는 방법과 필요한 기기 기능으로 선택한다.

            형태운영·전달 방식학생 프로젝트의 첫 선택
            웹앱브라우저 URL · PC/휴대폰링크 공유가 중요: Pages / Vercel
            PWA웹 URL + 지원 기기에 설치홈 화면 아이콘이 필요: manifest 등 추가
            모바일 앱Android/iOS 앱 설치·스토어Expo Go로 기기 시연 후 빌드·심사 계획

            강사 해설과 적용 범위

            웹도 휴대폰에서 사용할 수 있다. PWA는 웹 기술로 만들며 설치 조건과 기기·브라우저 지원을 확인한다. 오프라인·알림은 자동으로 생기지 않고 구현과 지원 검증이 필요하다. 모바일 학습 경로는 React Native/Expo 예시로 소개하고 Expo Go 기기 실행과 실제 앱스토어 출시를 구분한다. 스토어 등록·빌드·심사·개발자 비용은 플랫폼별 별도 확인 항목이다. 이번5일 과정의 공통 실습은 웹 배포이며 모바일 선택자는 웹으로 핵심 흐름을 먼저 검증하고 후속 계획을 남긴다.

            근거와 참고 자료

            이 내용을 사용하는 교시

              목차와 처음으로 ↑
              FIELD GUIDE

              S07 · 5분 활동: 나의 앱 기획 카드

              “나는 [누구]를 위해 [문제]를 해결하는 [형태] 앱을 만든다.”

              • 사용자와 불편한 순간: 누가, 언제, 무엇을 어려워하나요?
              • 핵심 동작1개와 첫 화면: 버튼을 누르면 무엇이 달라지나요?
              • 운영: 웹 / PWA / 모바일, 고른 이유와 배포 대상은?
              • 저장: 이 기기 저장으로 충분한가요? 여러 기기 공유가 필요한가요?
              • 무료 경로: 사용할 AI 한 개, 소스 저장소와 공개 URL 계획은?
              • 성공 기준: 친구가 어떤 행동을 끝내면 성공인가요?

              강사 해설과 적용 범위

              실습ZIP의 worksheets/student-app-card.csv를 채운다. 생성형 AI를 기능으로 넣거나 동시 공유·회원가입이 필요한 앱은 그 부분을 다음 단계로 적는다. 오늘은 가상 데이터와 기기 내부 저장으로 핵심 동작을 확인한다. 짝에게30초 소개하고 사용자가 실제로 필요로 하는 기능인지 피드백을 받는다.

              이 내용을 사용하는 교시

                목차와 처음으로 ↑
                FIELD GUIDE

                S08 · 무료 AI에 입력할 첫 프롬프트

                Gemini·ChatGPT·제공된 Codex 중 접근 가능한 한 곳에 입력한다.

                • 학생이 사용하는 [앱 이름]을 만들어줘. 사용자 [누구], 해결할 문제 [상황], 핵심 동작 [한 가지]다. HTML·CSS·JavaScript를 index.html 한 파일에 작성해줘. 휴대폰과 PC에서 읽기 쉬운 화면, 입력 검증, 빈 상태, 오류 안내, 초기화 기능을 넣어줘. 저장이 필요하면 이 기기의 localStorage만 사용하고 다른 사람이나 기기와 공유되지 않는다고 표시해줘. 로그인·DB·유료 API·외부 AI 호출·결제·서버 기능은 추가하지 마. 가상 데이터만 사용해줘. 실행할 전체 코드, 저장과 테스트 방법, GitHub Pages 공개 저장소의 main/(root)에서 배포하는 절차와 확인 질문을 제시해줘.

                강사 해설과 적용 범위

                기획 카드의 앱 이름·사용자·문제·핵심 동작을 자리표시자에 넣고 요청한다. 출력 코드를 index.html로 저장해 실행하고 하나씩 수정한다. 생성 앱에 런타임 AI API·서버가 들어가면 요청한 무료 정적 범위로 되돌린다. 생성 프롬프트와 검증 프롬프트를 복사해 사용한다. 수업 전 준비한 공개 저장소를 사용하고 첫 배포 대기는 다음 활동과 병행한다.

                Codex 구현 요청

                학생이 사용하는 [앱 이름]을 만들어줘. 사용자 [누구], 해결할 문제 [상황], 핵심 동작 [한 가지]다. HTML·CSS·JavaScript를 index.html 한 파일에 작성해줘. 휴대폰과 PC에서 읽기 쉬운 화면, 입력 검증, 빈 상태, 오류 안내, 초기화 기능을 넣어줘. 저장이 필요하면 이 기기의 localStorage만 사용하고 다른 사람이나 기기와 공유되지 않는다고 표시해줘. 로그인·DB·유료 API·외부 AI 호출·결제·서버 기능은 추가하지 마. 가상 데이터만 사용해줘. 실행할 전체 코드, 저장과 테스트 방법, GitHub Pages 공개 저장소의 main/(root)에서 배포하는 절차와 확인 질문을 제시해줘.

                Codex 검증 요청

                새로고침 뒤 이 기기의 저장 유지, 빈 입력과 잘못된 값, 초기화, 휴대폰 화면, 공개 URL을 다른 브라우저에서 열었을 때를 확인해줘. 같은 origin·브라우저의 localStorage에만 저장되고 기기 간 동기화되지 않음을 설명해줘. 서버·API·결제·비밀키 의존성이 없는지 확인하고 통과한 항목과 미확인 항목을 나눠줘.
                근거와 참고 자료

                이 내용을 사용하는 교시

                  목차와 처음으로 ↑
                  DAY 01 / HANDS-ON

                  과제 체크 앱 · 실습 목표와 파일

                  무료 AI로 만든 index.html을 학생 자신의 GitHub Pages에 공개하는1일차 선택 실습이다. 자율 앱 또는 이 예제 중 한 개만 진행한다.

                  실제 GitHub Pages 앱 열기 ↗ · 완성 코드 ZIP · 강사 공개 소스 ↗ (온라인 안내)

                  필수 완료선택 개선
                  과제 추가·완료·같은 브라우저 새로고침 후 저장·나의 공개 URL필터·오늘/기한지남 집계·삭제/되돌리기

                  수업 시간과 기준 코드

                  기존1교시50분 중 생성12분·배포8분·짝검증6분의 예제다. 계정은 수업 전에 준비한다. 무료 한도나 코드 오류로 막히면 완성 ZIP으로 이어가며 나머지 필수 동작을 확인한다. 기준 코드는 강사 검증용 준비본이며 특정 무료 AI에서 실제 생성했다는 실행 기록을 뜻하지 않는다.

                  완성 ZIP의 assignment-check-demo 폴더 안 index.html을 사용한다. Pages에 올릴 때는 이 파일을 저장소 최상위에 둔다. 앱의 입력값은 브라우저별 localStorage에 저장된다.

                  목차와 처음으로 ↑
                  PROMPT CARDS

                  무료 AI에 입력할 예제 요청3종

                  Gemini 기본 또는 ChatGPT Free 등 접근 가능한 무료 도구 한 개를 사용한다. 생성→선택 개선→검증을 나누고 전체 수정 코드를 확인한다.

                  1. 생성 요청 · 필수 기능

                  학생용 과제 체크 웹앱을 만들어줘. HTML·CSS·JavaScript를 index.html 한 파일에 넣고 외부 라이브러리·서버·DB·로그인·유료 API·앱 내 AI 호출 없이 실행되게 해줘. 과제명(필수, 공백만 불가,60자 이내), 과목(선택,20자 이내), 마감일(필수)을 입력해 목록에 추가하고 완료 체크를 할 수 있게 해줘. 현재 브라우저의 localStorage에 저장하고 새로고침 뒤 복원해줘. 이 브라우저에만 저장되고 다른 기기와 공유되지 않는다고 화면에 표시해줘. 날짜는 기기의 로컬 달력 날짜로 비교해줘. label과 네이티브 입력·버튼,빈 상태·입력 오류·저장 실패 안내, 휴대폰에서 한 열로 보이는 디자인을 넣어줘. 사용자 입력은 textContent로 표시해줘. 처음에는 목록을 비워두고 가상 예제 버튼은 선택으로 제공해줘. 전체 코드와 저장/실행 방법, 실제 확인할 체크리스트를 줘.

                  2. 선택 개선 요청

                  현재 동작하는 과제 추가·완료·localStorage 기능을 유지하며 최소 수정해줘. 전체/미완료/완료 필터와 미완료 우선·마감일순 정렬,남은 과제·오늘 마감·기한 지남 집계를 추가해줘. 오늘 마감은 오늘과 같은 날짜, 기한 지남은 오늘보다 이전인 미완료 과제만 세어줘. 개별 삭제와 되돌리기도 추가해줘. 기능을 바꾸기 전 현재 코드를 읽고 변경 지점을 설명한 뒤 전체 수정 코드를 줘. 새 서버·API·결제·공동 저장은 추가하지 마.

                  3. 검증·오류 해결 요청

                  이 과제 체크 앱을 실제 확인한 결과로 검토해줘. 빈 과제명과 공백만 입력,오늘/어제/내일 마감,완료 표시,새로고침 후 복원,휴대폰 화면,공개 Pages URL을 검사해줘. 필터·집계·삭제 되돌리기를 구현했다면 해당 동작도 확인해줘. 다른 브라우저나 기기에 데이터가 자동 공유되지 않는 이유와 file/localhost/Pages 저장 영역 차이를 설명해줘. 오류가 있으면 재현 단계·현재 코드·실제 결과·예상 결과를 근거로 최소 수정해줘. 실행하지 않은 항목을 통과라고 쓰지 마. API 키나 계정 비밀번호는 요구하지 마.
                  목차와 처음으로 ↑
                  FOLLOW ALONG

                  A01 · 준비: 도구 한 개와 완료 기준 정하기

                  Gemini 기본 또는 ChatGPT Free 등 접근 가능한 무료 도구 한 개와 GitHub 계정,일반 텍스트 편집기를 준비한다. 계정과 이용 조건은 수업 전에 확인한다. 강사 예제를 열어 입력·완료·저장의 목표를 본다.

                  학생 확인

                  최소 통과: 과제 추가·완료 체크·새로고침 뒤 복원·나의 공개 URL. 강사 기준 화면과 모양이 같을 필요는 없다.

                  강사용 설명

                  생성12분·배포8분·짝검증6분의 선택 예제로 사용한다. 앞의 앱 기획 카드와 두 질문은 유지하며 자율 앱 또는 이 예제 중 한 개만 만든다. 무료 한도에 막히면 완성 ZIP으로 이어간다.

                  목차와 처음으로 ↑
                  FOLLOW ALONG

                  A02 · 생성: 첫 프롬프트로 index.html 만들기

                  아래 생성 요청을 무료 AI에 입력한다. 전체 코드 출력을 요청하고 코드 블록 안의 HTML만 복사한다. 유료 API나 복잡한 프레임워크가 생기면 단일 HTML 범위로 다시 요청한다.

                  학생 확인

                  처음은 과제명·마감일·추가·완료·이 브라우저 저장만 구현한다. 필터·집계·삭제 되돌리기는 선택 개선이다.

                  강사용 설명

                  AI가 만든 코드와 실제 동작은 다르다. 정답 화면을 베끼게 하지 않고 같은 입력과 예상 결과로 검사한다. 강사 기준 코드는 검증용 준비본이며 Gemini에서 실제 생성했다는 기록이 아니다.

                  목차와 처음으로 ↑
                  FOLLOW ALONG

                  A03 · 저장·실행: 파일 이름과 동작 확인

                  일반 텍스트 편집기에 붙여넣고 UTF-8의 index.html로 저장한다. ```html 같은 코드 울타리는 넣지 않는다. 확장자가 .html.txt가 아닌지 확인하고 브라우저에서 연다. “국어 독서 감상문”,과목“국어”,오늘 날짜를 넣고 추가·완료·새로고침을 시험한다.

                  학생 확인

                  파일 환경의 저장이 제한될 수 있다. 저장 오류 안내를 보고, 최종 보존 확인은 공개 HTTPS Pages에서 한다. 초기 화면의 빈 목록은 정상이다.

                  강사용 설명

                  문서 편집기나 워드 형식으로 저장하지 않도록 시연한다. 오류를 고칠 때 현재 코드·입력·실제 결과·예상 결과를 AI에 준다. 수정 후 성공한 기능을 다시 확인한다.

                  목차와 처음으로 ↑
                  FOLLOW ALONG

                  A04 · GitHub: 공개 저장소에 파일 업로드

                  GitHub에서 New repository를 열고 이름 assignment-check,Public을 선택한다. Add a README file을 켜고 Create repository로 만든다. Code 화면의 Add file→Upload files에서 index.html을 최상위에 올리고 Commit changes로 저장한다.

                  학생 확인

                  저장소 첫 화면에서 README.md와 index.html이 같은 깊이에 보여야 한다. 완성 ZIP을 풀었다면 안쪽 index.html 파일을 올리며 ZIP 자체나 한 단계 위 폴더를 올리지 않는다.

                  강사용 설명

                  공개할 소스에는 가상 데이터만 둔다. 브라우저에서 입력한 과제 목록이 GitHub에 자동 올라가는 것은 아니다. 파일 업로드와 저장소 commit,Pages 공개는 다른 단계임을 보여준다.

                  목차와 처음으로 ↑
                  FOLLOW ALONG

                  A05 · Pages: main / (root)에서 배포

                  저장소 Settings→Pages로 이동한다. Build and deployment의 Source에서 Deploy from a branch를 고른다. Branch는 index.html을 올린 main,폴더는/(root),Save를 누른다. 기본 브랜치 이름이 다르면 실제 파일을 올린 브랜치를 선택한다.

                  학생 확인

                  별도 유료 서비스·결제·API 키·커스텀 도메인은 필요하지 않다. GitHub Free의 이 경로는 공개 저장소로 진행한다. 저장소에 파일과 브랜치가 먼저 있어야 한다.

                  강사용 설명

                  Save 직후 바로 성공이라고 말하지 않는다. Pages 설정과 Actions에서 배포 작업의 진행·완료를 확인한다. 공개 예제는 main/(root)로 실제 배포한다.

                  목차와 처음으로 ↑
                  FOLLOW ALONG

                  A06 · 공개 확인: 배포 주소를 직접 열기

                  Pages가 알려주는 Visit site 주소를 열고 완료 상태를 확인한다. 프로젝트 주소 형식은 https://사용자명.github.io/assignment-check/이다. 휴대폰이나 짝에게 링크를 보내 핵심 기능을 시험한다. 배포가 대기 중이면 상태를 기록하고 다음 활동 중 완료를 확인한다.

                  학생 확인

                  github.com의 소스 저장소 주소와 github.io의 실행 앱 주소를 구분한다. 로컬 파일에 넣은 목록이 공개 앱에 자동 복사되지 않는 것은 정상이다.

                  강사용 설명

                  Pages 배포에는 시간이 걸릴 수 있다. 배포8분은 설정·상태 확인 시간이며 대기 중에는 강사 예제로 짝 검증을 이어간다. 완료 후 각자 URL을 기록한다.

                  목차와 처음으로 ↑
                  FOLLOW ALONG

                  A07 · 짝 검증: 입력·마감·저장 경계 확인

                  제목 없음과 공백만 입력을 막는지 확인한다. 어제·오늘·내일 마감의 가상 과제 세 개를 만든다. 완료 상태를 바꾸고 새로고침한다. 선택 기능을 넣었다면 필터·집계·삭제/되돌리기도 확인한다.

                  학생 확인

                  어제 미완료만 기한 지남1개,오늘 미완료는 오늘 마감1개다. 완료한 과제는 두 집계에서 빠진다. 다른 브라우저에는 같은 데이터가 없을 수 있다.

                  강사용 설명

                  짝이 동작을 직접 해보고 통과/실패/미확인을 기록한다. 내 컴퓨터에서만 작동했다는 설명으로 공개 URL 확인을 대체하지 않는다.

                  목차와 처음으로 ↑
                  FOLLOW ALONG

                  A08 · 수정·회고: 작은 변경을 다시 배포

                  제목 문구나 버튼 색 한 곳을 바꾸고 같은 index.html을 저장소에서 교체·commit한다. 새 Pages 배포가 끝난 뒤 새로고침하고 변경을 확인한다. 나의 URL,수정한 것,남은 기능 한 개를 적는다.

                  학생 확인

                  최신 commit과배포 완료 시각을 대조한다. 변경이 안 보이면 배포 상태·파일 위치·정확한 URL·캐시를 순서대로 확인한다.

                  강사용 설명

                  다음 확장은 여러 기기 공유·로그인·실제 DB이다. localStorage만으로 다른 학생의 목록을 공유하거나 비밀번호로 보호할 수 있다고 설명하지 않는다.

                  목차와 처음으로 ↑
                  CHECK

                  짝 검증 체크리스트

                  구분확인 항목입력/행동예상 결과
                  필수과제 추가국어 독서 감상문·국어·오늘목록1개와 마감일 표시
                  필수빈값·공백제목 없음 또는 공백만추가되지 않고 오류 안내
                  필수완료 표시목록의 완료 체크완료 상태가 바뀜
                  필수저장공개 Pages에서 추가 후 새로고침같은 브라우저에 목록·완료 유지
                  필수공개 주소github.io URL을 휴대폰에서 열기앱 실행·화면 가로 잘림 없음
                  선택날짜 집계어제·오늘·내일 미완료3개기한지남1·오늘마감1·남은과제3
                  선택완료 제외오늘 과제를 완료오늘마감0·남은과제2
                  선택필터전체/미완료/완료 선택해당 항목만 표시
                  선택삭제/되돌리기한 항목 삭제 후 되돌리기같은 제목·날짜·상태 복구
                  설명저장 범위다른 브라우저·기기와 비교동기화되지 않음을 설명

                  통과/실패/미확인,나의 URL,확인자와 실제 결과를 기록한다. 다른 브라우저나 기기에는 이 목록이 자동 복제되지 않는다.

                  목차와 처음으로 ↑
                  TROUBLESHOOTING

                  자주 막히는 지점

                  증상확인 순서조치
                  HTML이 아닌 글자/코드가 보임파일명·일반텍스트 저장·코드 울타리 확인index.html로 다시 저장
                  파일 더블클릭에서 저장 실패file: 환경 또는 브라우저 저장 정책 확인최종 저장 검사는 공개 HTTPS에서
                  Pages 메뉴/브랜치가 없음저장소 권한·Public·최소1회commit 확인파일을 올린 기본브랜치 선택
                  404배포 진행·URL/저장소명·index.html 대소문자·루트 위치 확인main/(root)와최상위index.html
                  이전 화면이 보임새commit/Pages작업 완료 확인 후 새로고침정확한 github.io주소와캐시 확인
                  휴대폰에 내 과제가 없음브라우저별localStorage저장범위 확인자동 공유는 별도DB가필요
                  기한 지남 집계가 이상함기기의 오늘날짜·완료여부·로컬달력값 비교오늘은 기한 지남에서 제외
                  임시 모드 안내저장공간·브라우저정책·저장데이터오류 확인새로고침 전 필요한내용 따로기록
                  근거와 참고 자료
                  목차와 처음으로 ↑

                  생성도구: 빠른 시작과 첫 공개 링크

                  • 무료 AI로 작은 HTML 앱을 만들고 GitHub Pages에서 첫 링크를 공유한다.
                  • AI Studio·Sites·v0·Lovable·Bolt는 같은 요구를 시제품으로 확인하는 선택지다.
                  • 생성 화면·실제 저장·로그인·공개 배포를 각각 확인한다.
                  • 과제 앱의 필수 기능3개를 먼저 완성하고 도구 비교는 필요할 때 연다.

                  kysong 사례 · 이번 실습에 적용할 판단

                  • 기록: 연구 포털을 만든 뒤 자료·설문·내보내기 기능을 순차 확장했다.
                  • 비교: 첫날 과제 앱도 작은 목록과 공개 링크부터 완성한다.
                  • 적용: 만들고 싶은 앱·사용자·웹/모바일 운영 위치를 한 장에 적는다.

                  kysong 전체 구축 과정·기술 역할 ↗

                  선택 심화 · 원문 4개 열기

                  해당 교시의 설명을 대체하거나 실습 뒤 선택한다. 별도 수업시간을 추가하지 않는다.

                  연결 내용을 설명하는 강사 메모

                  도구별 새 계정 가입을 모두 실습하지 않는다. 첫날은 무료 시작과 Pages 완주에 시간을 쓰고 도구 비교표는 선택 심화로 연결한다.

                  강사용 설명

                  수업 전 GitHub 계정·무료 AI 접근·공개 저장소를 준비한다. S01~S08을 먼저 사용한다. 무료경로시연8·질문7·카드5·생성12·배포8·짝검증6·정리4=50분이다. 모든 AI 도구에 가입시키지 않고 접근 가능한 한 개만 고른다. 강사는 결제 없이 실행하는 단일 HTML 예제를 준비한다. Pages 배포가 대기 중이면 로컬 동작과 저장소 설정을 검증하고 링크 확인은 다음 교시 시작에 마무리한다. 학생이 제안한 복잡한 앱은 핵심 동작 한 개로 줄인다. 학교 계정·연령·지역 정책을 확인하며, Google AI Studio는18세 이상 조건이 있어 미충족 학생에게 계정 생성을 요구하지 않는다. 앱 제작에 AI를 쓰는 것과 배포 앱에서 모델 API를 호출하는 것은 사용량과 비용이 다르다. 2~4교시 파일·CSV 자동화는 앱의 입력 데이터를 다루는 연습,4교시는 오늘 카드의 상세 설계로 연결한다. 선택 실습은 H01~H06의 과제 체크 예제다. 생성12분·배포8분·짝검증6분을 이 예제 또는 자율 앱 한 개에 사용한다. 기준 HTML과 단계별 교재·완성 ZIP을 제공하며 필수 기능부터 완주한다.

                  실습 절차

                  1. 8분 시연: 무료 AI 한 개로 만든 index.html을 GitHub Pages에서 공개하는 경로를 본다.
                  2. 7분 질문: 진짜 만들고 싶은 앱과 사용할 사람, 웹·PWA·모바일 운영 형태를 고른다.
                  3. 5분 카드: 사용자·문제·기능1개·첫 화면·저장·성공 기준을 적는다.
                  4. 12분 생성: S08의 무료 시작 프롬프트로 단일 HTML 앱을 만들고 로컬에서 실행한다.
                  5. 8분 배포: 준비된 공개 저장소에 index.html을 올리고 Settings→Pages→Deploy from a branch→main/(root)→Save, 배포 URL을 확인한다.
                  6. 6분 짝 검증: 휴대폰 또는 다른 브라우저로 링크를 열고 핵심 동작과 빈 입력·저장 범위를 확인한다.
                  7. 4분 정리: 30초 앱 소개와 다음에 구현할 기능 한 개를 남긴다.

                  무료 AI 기획 요청

                  학생인 내가 진짜 만들고 싶은 앱을 구체화하도록 도와줘. 먼저 “당신이 진짜 만들고 싶은 앱은 무엇인가요?”를 묻고 답을 기다려줘. 이어 “어디에서 운영하고 싶은가요? 웹 vs 모바일?”을 묻고, 웹·휴대폰 설치형 웹앱(PWA)·모바일 앱 중 선택 이유를 확인해줘. 사용자·해결할 문제·핵심 동작1개·첫 화면·데이터 저장 위치·무료 개발 도구와 배포 대상·성공 기준을 한 장 기획 카드로 정리해줘. 첫 수업에서는 단일 HTML과 가상 데이터로 20분 안에 만들 범위로 줄여줘. 앱 안에서 AI를 호출해야 하는 기능은 다음 단계 후보로 남기고 별도 API 비용을 설명해줘.

                  AI 검증·오류 해결 요청

                  이 학생 앱 기획 카드를 검토해줘. 사용자가 겪는 문제가 구체적인지, 첫 기능이 하나인지, 웹·PWA·모바일 선택에 이유가 있는지, 실제 무료 경로와 사용 조건을 구분했는지 확인해줘. 첫 버전은 유료 API나 서버 없이 실행 가능해야 한다. localStorage가 이 브라우저·기기에만 저장됨을 설명하고, 동작을 확인할 입력과 예상 출력 한 쌍을 만들어줘. 범위가 크면 오늘 만들 기능 하나로 줄여줘.

                  완료 확인

                  • 나의 앱과 사용자·해결할 문제를 한 문장으로 말한다.
                  • 웹·PWA·모바일 선택 이유와 무료 배포 조건을 설명한다.
                  • 공개 URL에서 핵심 동작1개를 짝이 확인한다.

                  자주 막히는 지점

                  • AI 한도나 계정 제한: 강사의 단일 HTML 예제로 계속 실습한다.
                  • Pages 미표시: 공개 저장소·index.html 위치·main/(root)·배포 진행 상태를 확인한다.
                  • 휴대폰 데이터 없음: localStorage의 기기·브라우저별 저장 범위를 확인한다.

                  확인 질문

                  당신이 진짜 만들고 싶은 앱은 무엇인가요? 어디에서 운영하고 싶은가요? 웹 vs 모바일?

                  예: 나는 과제를 놓치는 학생을 위해 마감일을 기록하는 웹앱을 만든다. 링크로 바로 공유하려고 웹을 고르고, 첫 기능은 과제 추가와 완료 표시로 줄인다.

                  이 교시 발표 화면 열기 ↗

                  근거와 참고 자료
                  목차와 처음으로 ↑
                  CLASS / D1-2

                  1일차 2교시 · 파일 정리 도구 만들기

                  Codex로 안전하게 반복 실행하는 파일 처리 도구를 만든다.

                  D1-250분도입8 · 실습30 · 짝검증8 · 정리4

                  산출물: 변경 예정 목록과 실행 결과 기록

                  교시별 슬라이드 구성

                  번호제목진행 내용
                  024파일 정리 도구 만들기Codex로 안전하게 반복 실행하는 파일 처리 도구를 만든다. / 산출물: 변경 예정 목록과 실행 결과 기록 / 도입8 · 실습30 · 짝검증8 · 정리4분
                  025핵심 개념작업 폴더의 범위 / 미리보기와 실제 실행의 분리 / 중복 파일명과 재실행 처리
                  026사이트 밖의 생성: 파일·문서 업무 자동화파일 이름·폴더 분류·문서 추출도 바이브코딩의 결과물이다. / 원본을 보존하고 복사본에서 변경 예정 목록을 먼저 출력한다. / 브라우저 UI·서버 처리·로컬 스크립트의 실행 위치를 구분한다. / 입력 예시·예외·되돌리기 기준을 AI 요청에 함께 적는다.
                  027uc-anchor · 이번 실습에 적용할 판단기록: 화면 외에 문서 내보내기와 선택형 Python PDF 처리가 함께 등장한다. / 기술: 브라우저 TypeScript와 별도 Python 서비스는 실행 위치가 다르다. / 적용: 파일 정리 도구는 가상 파일 복사본으로 결과를 대조한다.
                  028실습 절차아래 단계별 실습을 진행한다.
                  029Codex에 입력할 요청아래 전체 구현 요청을 사용한다.
                  030완료 확인과 오류 대응미리보기에서 파일 내용과 위치가 유지된다. / 가상 파일만 지정한 하위 폴더로 이동한다. / 재실행과 중복 이름에서 덮어쓰기가 없다.

                  사이트 밖의 생성: 파일·문서 업무 자동화

                  • 파일 이름·폴더 분류·문서 추출도 바이브코딩의 결과물이다.
                  • 원본을 보존하고 복사본에서 변경 예정 목록을 먼저 출력한다.
                  • 브라우저 UI·서버 처리·로컬 스크립트의 실행 위치를 구분한다.
                  • 입력 예시·예외·되돌리기 기준을 AI 요청에 함께 적는다.

                  uc-anchor 사례 · 이번 실습에 적용할 판단

                  • 기록: 화면 외에 문서 내보내기와 선택형 Python PDF 처리가 함께 등장한다.
                  • 기술: 브라우저 TypeScript와 별도 Python 서비스는 실행 위치가 다르다.
                  • 적용: 파일 정리 도구는 가상 파일 복사본으로 결과를 대조한다.

                  uc-anchor 전체 구축 과정·기술 역할 ↗

                  선택 심화 · 원문 1개 열기

                  해당 교시의 설명을 대체하거나 실습 뒤 선택한다. 별도 수업시간을 추가하지 않는다.

                  연결 내용을 설명하는 강사 메모

                  선택형 PDF 서비스가 Vercel 기본 배포에 자동 포함된다고 설명하지 않는다. 실습은 원본 보존과 변경 예정 목록 확인을 중심으로 진행한다.

                  강사용 설명

                  시연에서는 적용 전 파일 수를 함께 센다. 미리보기와 적용 옵션이 있다는 사실을 말로 끝내지 말고 같은 도구를 두 방식으로 실행한다. 삭제와 이름 덮어쓰기를 이 실습에 추가하지 않는다. 학생이 다른 자료를 넣고 싶어 하면 수업용 복사본으로 먼저 확인하도록 안내한다.

                  실습 절차

                  1. 실습 ZIP의 sample-files 폴더를 작업 폴더로 복사하고 원본을 보존한다.
                  2. 확장자를 기준으로 documents와 images에 분류하는 규칙을 적는다.
                  3. Codex에게 Node.js 도구를 만들되 기본 동작을 미리보기로 지정한다.
                  4. 예정 목록을 보고 대상 폴더 밖의 파일이 없는지, 중복 이름이 생기는지 확인한다.
                  5. 복사본에만 --apply 옵션으로 실행하고 결과 목록을 저장한다.
                  6. 같은 명령을 다시 실행해 추가 변경이 없는지 확인한다.

                  Codex 구현 요청

                  현재 작업 폴더에서 tools/organize-files.mjs를 만들어줘. Node.js 내장 모듈을 사용하고 입력은 labs/sample-files의 복사본으로 제한해줘.
.txt와 .csv는 documents, .svg는 images로 분류해줘. 기본 실행은 원본을 바꾸지 않는 미리보기이고 --apply일 때만 이동해줘. 기존 파일을 덮어쓰지 말고 중복은 건너뛰어 이유를 출력해줘. 심볼릭 링크와 작업 폴더 밖 경로는 거부해줘. 실행 방법을 설명하고 미리보기를 먼저 실행해줘.

                  AI 검증·오류 해결 요청

                  도구의 변경 범위를 확인해줘. 아직 적용하지 말고 예상 이동 건수와 제외 이유를 보여줘. 적용 후 같은 입력으로 재실행해 추가 이동이 없는지 확인할 명령도 제안해줘. 실제 사용자 폴더를 탐색하지 마.

                  완료 확인

                  • 미리보기에서 파일 내용과 위치가 유지된다.
                  • 가상 파일만 지정한 하위 폴더로 이동한다.
                  • 재실행과 중복 이름에서 덮어쓰기가 없다.

                  자주 막히는 지점

                  • 경로를 찾을 수 없음: 현재 작업 폴더와 복사본 위치를 확인한다.
                  • 파일이 예상보다 적음: 확장자 대소문자와 이미 분류된 하위 폴더를 확인한다.

                  확인 질문

                  실행 결과에 성공이라고 나오면 무엇을 더 확인해야 하는가?

                  실제 파일 위치와 내용, 제외된 파일, 다시 실행했을 때의 동작을 확인한다.

                  이 교시 발표 화면 열기 ↗

                  근거와 참고 자료
                  목차와 처음으로 ↑
                  CLASS / D1-3

                  1일차 3교시 · CSV 정리와 보고서 자동화

                  원본과 정리 결과의 차이를 수치로 확인한다.

                  D1-350분도입8 · 실습30 · 짝검증8 · 정리4

                  산출물: clean.csv와 summary.json 및 보고서

                  교시별 슬라이드 구성

                  번호제목진행 내용
                  031CSV 정리와 보고서 자동화원본과 정리 결과의 차이를 수치로 확인한다. / 산출물: clean.csv와 summary.json 및 보고서 / 도입8 · 실습30 · 짝검증8 · 정리4분
                  032핵심 개념중복 판정 키 / 금액과 날짜의 입력 규칙 / 원본 보존과 결과 검산
                  033생성한 보고서는 원본 CSV와 맞는가?CSV의 행 수·합계·빈값 처리 규칙을 먼저 정한다. / Sites 등으로 보고서 화면을 생성해도 계산 근거는 원본에서 확인한다. / 저장하지 않은 결과를 저장 성공이라고 표시하지 않는다. / 출력 파일을 다시 열어 한글·숫자·열 구조를 대조한다.
                  034kysong · 이번 실습에 적용할 판단기록: 화면 데이터를 Excel·HWPX로 재사용하는 기능을 확장했다. / 판단: 다운로드 성공과 다시 열어 수정 가능한 결과는 서로 다른 검사다. / 적용: CSV 원본·보고서 합계·실제 출력 파일을 세 곳에서 대조한다.
                  035실습 절차아래 단계별 실습을 진행한다.
                  036Codex에 입력할 요청아래 전체 구현 요청을 사용한다.
                  037완료 확인과 오류 대응원본 12행에서 유효 고유 8행이 나온다. / 중복 2행과 오류 2행을 구분한다. / 유효 금액 합계 160000원과 프로그램별 집계가 맞다.

                  생성한 보고서는 원본 CSV와 맞는가?

                  • CSV의 행 수·합계·빈값 처리 규칙을 먼저 정한다.
                  • Sites 등으로 보고서 화면을 생성해도 계산 근거는 원본에서 확인한다.
                  • 저장하지 않은 결과를 저장 성공이라고 표시하지 않는다.
                  • 출력 파일을 다시 열어 한글·숫자·열 구조를 대조한다.

                  kysong 사례 · 이번 실습에 적용할 판단

                  • 기록: 화면 데이터를 Excel·HWPX로 재사용하는 기능을 확장했다.
                  • 판단: 다운로드 성공과 다시 열어 수정 가능한 결과는 서로 다른 검사다.
                  • 적용: CSV 원본·보고서 합계·실제 출력 파일을 세 곳에서 대조한다.

                  kysong 전체 구축 과정·기술 역할 ↗

                  선택 심화 · 원문 1개 열기

                  해당 교시의 설명을 대체하거나 실습 뒤 선택한다. 별도 수업시간을 추가하지 않는다.

                  연결 내용을 설명하는 강사 메모

                  생성도구의 시각적 완성도보다 원본 대조를 평가한다. 실제 개인정보 대신 가상 수치와 문장으로 결과물을 만든다.

                  강사용 설명

                  정리 규칙은 데이터에 맞춰 먼저 정한다. 같은 이메일이라고 무조건 중복으로 지우는 예시는 사용하지 않는다. kysong의 설문 내보내기와 임시저장 복구를 연결해 원본 보존과 결과 대조가 자동화의 일부임을 설명한다. 함수가 생성됐다는 말보다 정해진 12행이 어떻게 8행이 되는지를 학생이 설명하도록 한다.

                  실습 절차

                  1. labs/registrations.csv의 열 이름과 12개 원본 행을 확인한다.
                  2. 신청 id가 같은 행은 중복이며 처음의 유효 행을 유지하는 규칙을 정한다.
                  3. 금액이 음수이거나 숫자가 아닌 행은 별도 오류 목록에 남기도록 요청한다.
                  4. program별 인원·금액 합계와 상태별 집계를 만드는 도구를 실행한다.
                  5. 제공된 expected-summary.json과 행 수·금액을 대조한다.
                  6. 정리된 CSV를 다시 입력해 결과가 안정적인지 확인하고 처리 규칙을 설명한다.

                  Codex 구현 요청

                  labs/registrations.csv를 읽는 tools/summarize-csv.mjs를 만들어줘. 따옴표가 포함된 CSV도 처리할 수 있게 해줘.
id 중복은 처음의 유효 행을 유지하고, amount가 음수이거나 유한한 숫자가 아니면 errors.csv로 분리해줘. 원본은 변경하지 마.
output/clean.csv와 summary.json, 사람이 읽을 수 있는 요약 보고서를 만들어줘. program별 인원과 금액, status별 인원을 집계해줘. 실제 결과를 expected-summary.json과 비교해 차이를 설명해줘.

                  AI 검증·오류 해결 요청

                  원본 행 수, 유효 고유 행 수, 중복 수, 오류 수가 맞는지 검산해줘. 합계만 맞추려고 자료를 수정하지 말고, 제외한 행의 id와 이유를 보여줘. CSV 셀의 쉼표·따옴표·빈값도 확인해줘.

                  완료 확인

                  • 원본 12행에서 유효 고유 8행이 나온다.
                  • 중복 2행과 오류 2행을 구분한다.
                  • 유효 금액 합계 160000원과 프로그램별 집계가 맞다.

                  자주 막히는 지점

                  • 금액 합계가 문자열처럼 붙음: 숫자 변환과 유효성 검사를 확인한다.
                  • CSV 열이 밀림: 쉼표로 단순 분리하지 않고 CSV 인용 규칙을 처리한다.

                  확인 질문

                  중복을 제거할 때 이메일보다 신청 id를 먼저 쓰는 이유는?

                  한 사람이 여러 프로그램에 신청할 수 있기 때문이다. 업무에서 정의한 고유 식별자를 사용해야 한다.

                  이 교시 발표 화면 열기 ↗

                  근거와 참고 자료
                  목차와 처음으로 ↑
                  CLASS / D1-4

                  1일차 4교시 · 작은 서비스의 요구사항과 설계

                  한 종류의 사용자 흐름을 구현 가능한 계획으로 나눈다.

                  D1-450분도입8 · 실습30 · 짝검증8 · 정리4

                  산출물: 요구사항 한 장과 데이터·화면 초안

                  교시별 슬라이드 구성

                  번호제목진행 내용
                  038작은 서비스의 요구사항과 설계한 종류의 사용자 흐름을 구현 가능한 계획으로 나눈다. / 산출물: 요구사항 한 장과 데이터·화면 초안 / 도입8 · 실습30 · 짝검증8 · 정리4분
                  039핵심 개념프런트엔드 HTML CSS JavaScript와 TypeScript / 백엔드 Node.js와 TypeScript API / 관계형 DB PostgreSQL과 SQL
                  040구축 지도를 그리기: 언어·서버·DBHTML/CSS는 구조·표현, JavaScript/TypeScript는 동작을 담당한다. / React/Next.js는 UI·웹 프레임워크, Node.js는 서버 실행 환경이다. / PostgreSQL은 DB, SQL은 질의 언어, Supabase는 백엔드 플랫폼이다. / Codex→GitHub→Supabase→Vercel→Resend/SNS의 역할과 설정 위치를 적는다.
                  041uc-anchor · 이번 실습에 적용할 판단프런트엔드: TypeScript·React·Next.js로 화면과 상호작용을 구성한다. / 백엔드: Node.js·TypeScript API가 서버의 처리와 검증을 담당한다. / DB: Supabase PostgreSQL과 SQL·RLS가 저장·조회·행 접근을 맡는다.
                  042실습 절차아래 단계별 실습을 진행한다.
                  043Codex에 입력할 요청아래 전체 구현 요청을 사용한다.
                  044완료 확인과 오류 대응필수 기능이 세 묶음 이내로 정리된다. / 각 화면이 읽고 쓰는 데이터와 권한이 연결된다. / 완료 기준을 실제 행동으로 표현한다.

                  구축 지도를 그리기: 언어·서버·DB

                  • HTML/CSS는 구조·표현, JavaScript/TypeScript는 동작을 담당한다.
                  • React/Next.js는 UI·웹 프레임워크, Node.js는 서버 실행 환경이다.
                  • PostgreSQL은 DB, SQL은 질의 언어, Supabase는 백엔드 플랫폼이다.
                  • Codex→GitHub→Supabase→Vercel→Resend/SNS의 역할과 설정 위치를 적는다.

                  uc-anchor 사례 · 이번 실습에 적용할 판단

                  • 프런트엔드: TypeScript·React·Next.js로 화면과 상호작용을 구성한다.
                  • 백엔드: Node.js·TypeScript API가 서버의 처리와 검증을 담당한다.
                  • DB: Supabase PostgreSQL과 SQL·RLS가 저장·조회·행 접근을 맡는다.

                  uc-anchor 전체 구축 과정·기술 역할 ↗

                  선택 심화 · 원문 3개 열기

                  해당 교시의 설명을 대체하거나 실습 뒤 선택한다. 별도 수업시간을 추가하지 않는다.

                  연결 내용을 설명하는 강사 메모

                  프레임워크 전환 과정 대신 언어·실행 환경·DB의 종류와 역할을 예로 든다. MySQL/SQLite/MongoDB는 비교 예시이며 세 프로젝트의 실제 주 DB와 혼동하지 않는다.

                  강사용 설명

                  u-livet이 데이터 구조와 교육 운영 흐름을 먼저 만든 기록을 보여준다. 단순히 예쁘게 만들어 달라는 요청에서 누가 무엇을 저장하는지 설명하는 요청으로 바꾸는 시간이다. 수강신청과 결제, 출석, 증명 발급 전체를 5일 안에 모두 구현하는 목표로 넓히지 않는다. 1교시의 student-app-card.csv를 다시 열고 학생이 고른 앱의 사용자·문제·운영 방식·기능1개를 입력·처리·출력·권한·예외로 확장한다. 아직 구현하지 않은 서버·로그인 기능은 다음 날 과제로 표시한다.

                  실습 절차

                  1. 공통 프로젝트인 미니 교육 운영 포털의 방문자·회원·운영자 역할을 정리한다.
                  2. 필수 기능을 프로그램 조회, 회원 신청, 내 신청 조회로 제한한다.
                  3. programs와 applications의 필요한 열을 적고 user_id의 의미를 설명한다.
                  4. 목록·내 신청·로그인·보안 화면을 종이에 그리거나 문서로 작성한다.
                  5. Codex에게 파일을 만들기 전에 계획과 구현 순서, 검증 방법을 요청한다.
                  6. 짝과 계획을 검토하고 민감한 작업은 MFA 단원에서 확장한다고 표시한다.

                  Codex 구현 요청

                  미니 교육 운영 포털의 요구사항을 정리해줘. 대상은 방문자와 로그인 회원이다. 필수 기능은 프로그램 목록, 신청, 본인 신청 조회·메모 수정·취소다.
Next.js App Router와 TypeScript, Supabase Auth·DB·RLS, Vercel을 사용한다. Git으로 변경을 기록하고 Docker는 로컬 Supabase 실험에 사용한다.
화면, 두 테이블의 데이터 모델, 사용자별 권한, 구현 순서와 완료 기준을 먼저 작성해줘. 결제·정원 동시성·실제 문자 발송은 이번 범위에 넣지 마.

                  AI 검증·오류 해결 요청

                  계획의 각 기능에 사용자가 실행할 검증 한 가지를 붙여줘. 개인정보 없이 만들 수 있는 샘플 3개를 제안하고, 아직 결정하지 않은 요구사항을 구분해줘. 설계와 무관한 기능을 추가하지 마.

                  완료 확인

                  • 필수 기능이 세 묶음 이내로 정리된다.
                  • 각 화면이 읽고 쓰는 데이터와 권한이 연결된다.
                  • 완료 기준을 실제 행동으로 표현한다.

                  자주 막히는 지점

                  • 기능이 계속 늘어남: 필수·선택·후속 작업으로 나눈다.
                  • 권한이 화면 설명에만 있음: 데이터 읽기와 쓰기 규칙을 함께 적는다.

                  확인 질문

                  화면이 세 개인 것과 기능이 세 개인 것은 같은 의미인가?

                  같지 않다. 기능 하나가 여러 화면과 데이터 변경을 포함할 수 있으므로 사용자 행동과 완료 조건으로 범위를 잡는다.

                  이 교시 발표 화면 열기 ↗

                  근거와 참고 자료
                  목차와 처음으로 ↑

                  프롬프트 직접 복사

                  아래 전체 문장을 선택해서 복사하세요.