간편 생성도구 실습 가이드

간편 생성도구 실습 가이드 · 별도 원문

본문의 관련 교시에서 연결한 선택 심화다. 각 항목 끝의 교시 링크로 발표와 교재에 돌아갈 수 있다.

일차별 배치표 ↗

T01 · 두 가지 출발점과 하나의 검증 기준

주 경로는 로컬 Codex, 간편 도구는 아이디어 확인과 빠른 시제품에 활용한다.

• A: Codex에서 로컬 구현, GitHub 기록, Supabase 연결, Vercel 공개, Resend·SNS 설정.
• B: AI Studio·Sites 등에서 시제품 생성, 동작과 저장 검증, 필요한 경우 호환성을 확인해 Git 기반 개발로 이관.
• 모든 결과는 입력 검증·재조회·다른 계정 접근·실제 공개 주소에서 확인한다.

1. 01로컬 Codex

   소스·실행·검증

2. 02GitHub

   이력·PR·검토

3. 03Supabase

   DB·Auth·RLS

4. 04Vercel

   공개 앱·환경

5. 05Resend

   인증 메일 전달

6. 06SNS 개발자센터

   외부 계정 인증

이 내용을 사용하는 교시

• D1-1 교재 · 발표로 돌아가기

T02 · 간편 생성도구 비교표

생성 속도, 저장·인증, 소스 이관과 배포를 함께 비교한다.

이 내용을 사용하는 교시

• D1-1 교재 · 발표로 돌아가기

T03 · Google AI Studio 15분 시연

같은 요구를 실행 가능한 시제품으로 바꾸고 소스와 배포 경로를 살핀다.

• 현재 Build 문서는 기본 React 프런트엔드와 Node.js 서버, GitHub 연결 및 ZIP 내보내기를 안내한다.
• 기본 제공 배포 경로로 Cloud Run을 소개하며, Vercel은 소스 구조를 점검한 뒤 선택하는 별도 대상이다.

절차와 실습

1. 3분: 사용자·3개 샘플 프로그램·검색·빈 결과의 요구를 입력한다.
2. 5분: 생성 화면에서 검색과 신청 입력을 확인한다.
3. 4분: 데이터 저장 여부와 서버 처리·비밀값 위치를 확인한다.
4. 3분: GitHub 동기화 또는 ZIP 내보내기 위치를 확인하고 로컬 경로와 비교한다.

개인정보 없는 교육 프로그램 3개를 보여주는 웹 시제품을 만들어줘. 제목 검색, 검색 결과 없음, 신청 메모 길이 검증을 넣어줘. 실제 DB와 인증을 연결하지 않았다면 샘플 동작임을 화면에 표시하고 저장되는 척하지 마. 프런트엔드·서버·외부 API 의존성과 로컬 실행 방법을 설명해줘.

이 내용을 사용하는 교시

• D3-1 교재 · 발표로 돌아가기

T04 · ChatGPT Sites로 만드는 업무 도구

대화에 자료와 동작 규칙을 주고 웹사이트·도구를 생성하고 다듬는다.

• 예시: 강의 자료 허브, 집계 대시보드, 행사 신청, 업무 추적, 계산기와 단계별 안내.
• 원본의 열·단위·빈값·권한·저장 위치를 설명하고 결과를 다시 검산한다.
• Sites의 호스팅과 저장 기능을 이용하는 경로이며 Supabase·Vercel이 자동으로 연결됐다고 가정하지 않는다.

절차와 실습

1. 가상 CSV와 열 설명, 사용할 사람과 화면 요구를 제공한다.
2. 입력·필터·계산·저장 위치와 접근 범위를 명시한다.
3. 생성된 화면에서 원본과 합계, 빈 결과, 재조회와 권한을 확인한다.
4. 공유 대상과 공개 내용을 점검한 후 필요한 범위로 공유한다.

ChatGPT Sites로 가상 교육 프로그램 안내와 신청 현황 대시보드를 만들어줘. 원본 CSV의 합계와 상태별 인원을 표시하고, 검색·상태 필터·빈 결과를 처리해줘. 저장 기능과 로그인은 연결한 방식과 확인된 범위를 명시해줘. 제출된 정보가 저장되지 않으면 성공이라고 표시하지 마. 원본 대조와 공유 전 점검 항목을 제시해줘.

이 내용을 사용하는 교시

• D1-1 교재 · 발표로 돌아가기
• D1-3 교재 · 발표로 돌아가기
• D5-1 교재 · 발표로 돌아가기

T05 · v0·Lovable·Bolt를 선택할 때

화면을 빨리 확인한 뒤 연결과 운영 책임을 확인한다.

• v0는 화면과 앱 생성, GitHub와 Vercel 연결을 살펴보는 예시다.
• Lovable은 대화형 웹 앱 제작과 데이터·Git 연동을 비교한다.
• Bolt는 브라우저 안의 생성·코드 편집·미리보기 흐름을 관찰한다.
• 학생은 한 도구만 선택한다. 동일 요구와 동일 완료 기준으로 결과를 비교한다.

이 내용을 사용하는 교시

• D1-1 교재 · 발표로 돌아가기

T06 · 시제품을 Codex로 이어받는 절차

내보낸 소스의 실행 계약을 먼저 확인한다.

• ZIP 해제 또는 Git clone 후 README, package.json, lockfile, 프런트·서버 경로를 읽는다.
• 설치·실행·build를 재현하고 외부 서비스와 비밀값 이름을 파악한다.
• 소스와 가상 샘플만 Git에 기록하고 기존 토큰·운영 데이터는 옮기지 않는다.
• Vercel 지원 런타임과 상태 저장·장기 실행·포트·파일 쓰기 의존성을 점검한다.

내보낸 시제품을 수정하기 전에 파일 구조와 실행 명령을 분석해줘. 프런트엔드·서버·DB·스토리지·외부 AI 서비스, 필요한 환경변수 이름과 비밀 여부를 표로 정리해줘. 로컬에서 재현하고 Vercel로 옮길 때 바꿔야 할 런타임과 저장 방식을 설명해줘. 설정이 없는 외부 기능을 모의 성공으로 처리하지 마.

이 내용을 사용하는 교시

• D2-1 교재 · 발표로 돌아가기

T07 · 도구를 평가하는 여섯 질문

보이는 화면 다음에 저장과 권한을 확인한다.

• 원본 코드와 변경 이력을 가져올 수 있는가?
• 데이터가 어디에 저장되고 새로고침 뒤 유지되는가?
• 다른 계정이 내 기록을 읽거나 바꿀 수 있는가?
• 인증·메일·비밀값을 어느 서비스에서 관리하는가?
• 배포 런타임·도메인·비용·사용량을 확인할 수 있는가?
• 오류를 재현하고 이전 코드와 데이터를 복구할 수 있는가?

이 내용을 사용하는 교시

• D1-4 교재 · 발표로 돌아가기

T08 · 웹사이트 밖의 바이브코딩

업무의 입력과 출력이 있으면 작은 도구로 시작할 수 있다.

• 파일 확장자별 분류와 이름 변경 계획, 중복 탐지.
• CSV·Excel 정제와 요약 보고서, 편집 가능한 문서 생성.
• API 자료 수집과 정기 집계, 알림과 승인 흐름.
• 문서 검색·질의응답·분류·초안 작성, 결과 검산과 출처 확인.

이 내용을 사용하는 교시

• D1-2 교재 · 발표로 돌아가기