FIELD LIBRARY / READ WHEN NEEDED
1일차 · 선택 심화 자료
이 폴더 안에서 발표·교재·코드·심화 원문을 오프라인으로 이동할 수 있습니다.
01일차
04교시
45발표 슬라이드
04공통 원문 파일
REFERENCE LIBRARY
1일차 · 필요한 교시에서 더 깊게
이 일차의4교시 배치표와 공통 참고 원문4개를 포함합니다. 외부 원문은 온라인 참고 안내에서 주소를 확인하세요.
목차와 처음으로 ↑FIELD NOTES
1일차 · 무료 AI로 시작하는 나의 앱
만들고 싶은 앱과 운영 방식을 고르고, 링크로 첫 결과 공유하기
CONNECTED READING
D1-1 · 무료 AI로 시작하는 나의 앱
핵심 연결은 본 교시 안에 포함된다. 아래 원문은 선택 심화다.
생성도구: 빠른 시작과 첫 공개 링크
- 무료 AI로 작은 HTML 앱을 만들고 GitHub Pages에서 첫 링크를 공유한다.
- AI Studio·Sites·v0·Lovable·Bolt는 같은 요구를 시제품으로 확인하는 선택지다.
- 생성 화면·실제 저장·로그인·공개 배포를 각각 확인한다.
- 과제 앱의 필수 기능3개를 먼저 완성하고 도구 비교는 필요할 때 연다.
kysong 사례 · 이번 실습에 적용할 판단
- 기록: 연구 포털을 만든 뒤 자료·설문·내보내기 기능을 순차 확장했다.
- 비교: 첫날 과제 앱도 작은 목록과 공개 링크부터 완성한다.
- 적용: 만들고 싶은 앱·사용자·웹/모바일 운영 위치를 한 장에 적는다.
kysong 전체 구축 과정·기술 역할 ↗
선택 심화 · 원문 4개 열기
해당 교시의 설명을 대체하거나 실습 뒤 선택한다. 별도 수업시간을 추가하지 않는다.
연결 내용을 설명하는 강사 메모
도구별 새 계정 가입을 모두 실습하지 않는다. 첫날은 무료 시작과 Pages 완주에 시간을 쓰고 도구 비교표는 선택 심화로 연결한다.
이 교시 발표로 돌아가기 ↗ · 이 교시 상세 교재 ↗
목차와 처음으로 ↑CONNECTED READING
D1-2 · 파일 정리 도구 만들기
핵심 연결은 본 교시 안에 포함된다. 아래 원문은 선택 심화다.
사이트 밖의 생성: 파일·문서 업무 자동화
- 파일 이름·폴더 분류·문서 추출도 바이브코딩의 결과물이다.
- 원본을 보존하고 복사본에서 변경 예정 목록을 먼저 출력한다.
- 브라우저 UI·서버 처리·로컬 스크립트의 실행 위치를 구분한다.
- 입력 예시·예외·되돌리기 기준을 AI 요청에 함께 적는다.
uc-anchor 사례 · 이번 실습에 적용할 판단
- 기록: 화면 외에 문서 내보내기와 선택형 Python PDF 처리가 함께 등장한다.
- 기술: 브라우저 TypeScript와 별도 Python 서비스는 실행 위치가 다르다.
- 적용: 파일 정리 도구는 가상 파일 복사본으로 결과를 대조한다.
uc-anchor 전체 구축 과정·기술 역할 ↗
선택 심화 · 원문 1개 열기
해당 교시의 설명을 대체하거나 실습 뒤 선택한다. 별도 수업시간을 추가하지 않는다.
연결 내용을 설명하는 강사 메모
선택형 PDF 서비스가 Vercel 기본 배포에 자동 포함된다고 설명하지 않는다. 실습은 원본 보존과 변경 예정 목록 확인을 중심으로 진행한다.
이 교시 발표로 돌아가기 ↗ · 이 교시 상세 교재 ↗
목차와 처음으로 ↑CONNECTED READING
D1-3 · CSV 정리와 보고서 자동화
핵심 연결은 본 교시 안에 포함된다. 아래 원문은 선택 심화다.
생성한 보고서는 원본 CSV와 맞는가?
- CSV의 행 수·합계·빈값 처리 규칙을 먼저 정한다.
- Sites 등으로 보고서 화면을 생성해도 계산 근거는 원본에서 확인한다.
- 저장하지 않은 결과를 저장 성공이라고 표시하지 않는다.
- 출력 파일을 다시 열어 한글·숫자·열 구조를 대조한다.
kysong 사례 · 이번 실습에 적용할 판단
- 기록: 화면 데이터를 Excel·HWPX로 재사용하는 기능을 확장했다.
- 판단: 다운로드 성공과 다시 열어 수정 가능한 결과는 서로 다른 검사다.
- 적용: CSV 원본·보고서 합계·실제 출력 파일을 세 곳에서 대조한다.
kysong 전체 구축 과정·기술 역할 ↗
선택 심화 · 원문 1개 열기
해당 교시의 설명을 대체하거나 실습 뒤 선택한다. 별도 수업시간을 추가하지 않는다.
연결 내용을 설명하는 강사 메모
생성도구의 시각적 완성도보다 원본 대조를 평가한다. 실제 개인정보 대신 가상 수치와 문장으로 결과물을 만든다.
이 교시 발표로 돌아가기 ↗ · 이 교시 상세 교재 ↗
목차와 처음으로 ↑CONNECTED READING
D1-4 · 작은 서비스의 요구사항과 설계
핵심 연결은 본 교시 안에 포함된다. 아래 원문은 선택 심화다.
구축 지도를 그리기: 언어·서버·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와 혼동하지 않는다.
이 교시 발표로 돌아가기 ↗ · 이 교시 상세 교재 ↗
목차와 처음으로 ↑