(20260110) 세종 바이브코딩 고급과정 -2차
세종특별자치시교육청
강의용 슬라이드
고급과정_5~8차시_AI SW 정보 역량강화 연수(바이브 코딩)_박권 수정-TechBook.pdf9.01MB
바이브 코딩 과정 살펴보기
1.
질문? 나노바나나 성능이 좋은데 뭘 할수 있을까? → 제미나이로 초안 만들기
2.
질문? 매번 새로운 게임을 만들기 힘든데 자동화 할 수 있을까? → 자동화 에이전트를 활용하여 게임을 바꿔보기(제미나이 젬스 활용)
3.
질문? 학생들에게 미리 만들어 놓은 문제지 세트를 제공하고, 학생들의 점수를 취합할 수 있을까? → 구글 시트와 연동하기
4.
질문? 게임이 여러개 인데 여러개의 게임을 동시에 연동해서 프로그램을 만들 수 없을까? 예시 블루킷 → 풀스텍 코딩
러버블을 이용한 코딩
PRD 문서 샘플
1. 문제 정의 (Problem Statement)
학년 초 교사는 학생 개개인의 성향을 빠르게 파악하고, 학생들은 부담 없이 자신을 표현하며 같은 성향의 친구를 찾아 관계를 형성할 필요가 있다. 그러나 일반적인 MBTI·DISC 웹서비스는 계정 로그인, 서버 저장, 개인정보 수집이 수반되어 학교 현장에서 활용하기 어렵다.
본 프로젝트의 목적은 DB·서버·개인정보 수집 없이, 각 학생의 개별 노트북(크롬북)에서 단독 실행되는 오프라인 성향 탐색 도구를 제작하는 것이다. 이 도구는 심리 진단이 아닌 학기 초 관계 형성 활동용 학습 도구로 활용된다.
2. 목표 (Goals)
인터넷 연결 없이도 수업 중 즉시 실행 가능
로그인·이름·학번 등 개인정보 입력 완전 배제
MBTI + DISC 구조를 차용한 간단한 문항으로 5~7분 내 완료
결과를 기반으로 같은 성향 친구를 쉽게 찾도록 지원
학생 결과는 기기 밖으로 전송·저장되지 않음
3. 핵심 설계 원칙 (Design Principles)
오프라인 우선: 단일 HTML 파일로 실행
무저장: DB, localStorage, 쿠키 사용하지 않음
라벨 제거: MBTI/DISC 알파벳 미사용
경향성 표현: 고정 성격이 아닌 ‘지금의 행동 경향’
교실 즉시 활용: 결과 화면을 보고 바로 이동·모둠 구성 가능
4. 대상 사용자 (Target Users)
주 사용자: 중학교 1~3학년 학생
활용자: 담임 교사, 교과 교사
5. 사용자 시나리오 (User Scenarios)
학생 시나리오
교사가 배포한 HTML 파일을 노트북에서 실행
활동 목적 안내 화면 확인
MBTI 스타일 8문항 응답
DISC 스타일 8문항 응답
개인 결과 카드 + 그룹 코드 확인
교사 안내에 따라 같은 코드 친구들과 이동
교사 시나리오
수업 전 HTML 파일을 클래스룸/USB 등으로 배포
학생 실행 확인 후 활동 안내
칠판에 그룹 코드별 위치 제시
같은 성향 학생 활동 진행
6. 기능 요구 사항 (Functional Requirements)
6-1. 실행 방식
단일 HTML 파일
더블 클릭 또는 브라우저 열기만으로 실행
네트워크 요청 0
6-2. 검사 구성
MBTI 스타일 모듈
4개 영역 × 2문항 (총 8문항)
2지선다 형식
영역: 에너지 방향 / 정보 처리 / 결정 기준 / 생활 방식
DISC 스타일 모듈
4개 행동 영역 × 2문항 (총 8문항)
상황 중심 질문
영역: 빠르게 밀기 / 분위기 소통 / 안정적 실행 / 꼼꼼한 확인
6-3. 결과 처리
브라우저 내 즉시 계산 (JavaScript)
결과 저장 없음
새로고침 시 초기화
6-4. 결과 화면
개인 성향 요약 문장 표시
성향 아이콘 또는 색상 카드
그룹 코드(예: A2, B3) 크게 표시
6-5. 같은 유형 친구 찾기
그룹 코드는 학생 화면에만 표시
교사는 코드별 집합 위치를 오프라인으로 안내
7. 비기능 요구 사항 (Non-Functional Requirements)
개인정보 입력 필드 없음
데이터 외부 전송 없음
5분 이내 완료 가능
크롬북 해상도 최적화
8. 기술 스택 (고정)
HTML / CSS / Vanilla JavaScript
외부 라이브러리 사용 최소화 또는 미사용
단일 파일 배포
9. 수업 활용 흐름 (1차시 예시)
도입(5분): 활동 목적 설명 – 성격 규정 아님
실행(10분): 개별 노트북에서 검사 진행
확인(5분): 결과 카드·그룹 코드 확인
이동(5분): 같은 코드 친구 모이기
활동(15분): 공통점·강점 나누기
정리(5분): 다양성 존중 메시지 강조
10. 성공 지표 (Success Metrics)
학생 참여율 95% 이상
개인정보 수집 0건
활동 중 라벨링/비하 발언 0건
11. 범위 외 (Out of Scope)
서버 구축
DB 저장
개인 식별 데이터 수집
장기 추적·분석
12. 최종 요약
본 PRD는 DB·개인정보·서버 없는 오프라인 성향 탐색 도구를 목표로 하며, 학년 초 학생 이해와 라포 형성에 최적화된 구조를 가진다. 핵심 가치는 정확한 성격 분류가 아니라, 교실 안에서 서로를 안전하게 이해하고 연결하는 경험이다.
본 웹서비스는 MBTI와 DISC의 형식을 교육적으로 재해석하여, 학년 초 학생 이해와 라포 형성에 최적화된 성향 탐색 도구를 제공한다. 핵심 가치는 정확한 분류가 아니라, 서로 다름을 안전하게 발견하고 연결하는 경험이다.
오팔을 이용한 자동화 에이전트 체험
PRD 문서 샘플
당신은 도시 브랜딩 전문 영상 제작 AI입니다.
사용자는 교사이며, 단 한 번의 텍스트 입력만 제공합니다.
입력된 텍스트를 바탕으로
세종시의 정체성과 미래 이미지를 효과적으로 전달하는
브랜딩 영상을 제작하세요.
요구 사항은 다음과 같습니다.
입력된 텍스트의 핵심 메시지를 분석해
세종시 브랜딩에 어울리는 영상 콘셉트를 설정합니다.
동일한 텍스트를 기반으로
영상 길이가 다른 여러 개의 영상 버전을 생성합니다.
예를 들어
짧은 홍보용 영상
표준 브랜딩 영상
스토리텔링 중심의 비교적 긴 영상
처럼 길이와 구성 아이디어가 서로 달라야 합니다.
각 영상은
세종시의 미래성, 공공성, 교육적 이미지, 도시 브랜드를
긍정적으로 표현해야 합니다.
추가 질문은 하지 말고
입력된 텍스트만으로 판단하여
즉시 영상 결과를 화면에 보여주세요.
개인정보는 수집하거나 사용하지 않습니다.
웹서비스 환경에서 바로 실행 가능한 형태로 결과를 제공합니다.
구글 스티치를 이용한 UI 디자인
•
스티치 샘플 다운로드
stitch_ (1).zip11.63MB
내 코드를 배포하기
•
vercel
chrome 확장 프로그램 만들기
PRD 문서 예시
────────────────
제품 요구사항 정의서 (PRD)
────────────────
문서명
Chrome Sidebar Calculator – Product Requirements Document
버전
v1.0
작성 목적
본 문서는 Chrome 브라우저 확장 프로그램 형태의 사이드바 계산기 개발을 위한 기능, 범위, 제약사항을 명확히 정의하기 위해 작성되었다.
────────────────
제품 개요
────────────────
1.1 제품명
Chrome Sidebar Calculator (가칭)
1.2 제품 형태
Chrome Extension
브라우저 사이드바(Side Panel)에 상시 노출되는 계산기
1.3 개발 배경
웹 브라우저 사용 중 계산이 필요한 상황이 빈번하나,
기존 계산기 사용 방식은 다음과 같은 문제를 가진다.
별도 앱 실행 또는 새 탭 이동 필요
작업 흐름 중단
계산 결과를 다시 확인해야 하는 번거로움
본 제품은 웹 작업 흐름을 유지한 채 즉시 계산 가능한 환경을 제공하는 것을 목표로 한다.
1.4 핵심 가치 제안
페이지 이동 없는 즉시 계산
항상 접근 가능한 사이드바 UI
개인정보를 수집하지 않는 경량 도구
────────────────
2. 목표 사용자
────────────────
2.1 주요 사용자
교사: 온라인 문서, 평가 자료, 수업 준비 중 계산
학생: 학습 사이트, 과제 수행 중 계산
일반 사용자: 웹 서핑, 쇼핑, 업무 중 간단 계산
2.2 사용자 공통 요구
빠른 접근성
단순하고 직관적인 사용
설치 후 별도 학습 불필요
────────────────
3. 문제 정의
────────────────
현재 사용자는
계산기 앱 실행
새 탭 계산기 접속
모바일 계산기 병행 사용
등의 불필요한 단계를 거치고 있으며, 이는 집중력 저하와 작업 효율 감소로 이어진다.
문제의 핵심은
“계산 자체가 아니라 계산기에 접근하는 과정”이다.
────────────────
4. 제품 범위 (Scope)
────────────────
4.1 포함 범위 (In Scope)
브라우저 사이드바에 계산기 UI 제공
기본 사칙연산 기능
키보드 및 마우스 입력 지원
확장 아이콘 클릭으로 사이드바 열기/닫기
로컬 환경에서만 동작
4.2 제외 범위 (Out of Scope)
로그인 기능
서버 연동
클라우드 저장
사용자 계정 관리
개인정보 수집 및 분석
────────────────
5. 핵심 기능 요구사항
────────────────
5.1 계산 기능
덧셈, 뺄셈, 곱셈, 나눗셈
소수점 계산 지원
연속 계산 가능
5.2 UI 기능
사이드바 고정 표시
브라우저 페이지 가림 최소화
간결한 계산기 버튼 레이아웃
계산 결과 즉시 표시
5.3 사용성 기능
키보드 숫자 입력 가능
결과 복사 기능 (선택)
계산 기록 표시 (선택)
────────────────
6. UX/UI 설계 원칙
────────────────
한눈에 이해 가능한 계산기 형태
클릭 수 최소화
브라우저 콘텐츠를 방해하지 않는 배치
초등학생부터 성인까지 사용 가능한 직관성
────────────────
7. 기술 요구사항
────────────────
7.1 기술 스택
Chrome Extension (Manifest V3)
JavaScript
HTML / CSS
7.2 구조 개요
Side Panel API 활용
계산 로직은 클라이언트 로컬 처리
외부 API 호출 없음
7.3 데이터 처리
모든 계산은 로컬에서 수행
저장 기능 사용 시 Local Storage 활용
────────────────
8. 개인정보 및 보안 정책
────────────────
개인정보 수집 없음
사용자 입력 데이터 외부 전송 없음
광고, 트래커, 분석 도구 사용 안 함
────────────────
9. 성공 기준 (Success Metrics)
────────────────
설치 후 즉시 사용 가능
계산기 접근에 걸리는 단계 1단계 이내
오류 없이 기본 계산 수행
크롬 웹스토어 정책 위반 요소 없음
────────────────
10. 향후 확장 가능성
────────────────
교사용 특화 계산기 모드
단축키 커스터마이징
수식 계산(고급 모드)
교육용 계산 활동 연계
────────────────
최종 요약
────────────────
본 PRD는
**“항상 옆에 있는 계산기”**를 목표로 한
Chrome 사이드바 확장 프로그램의 최소 기능 요구사항을 정의한다.
개인 개발, 교육용 프로젝트, 크롬 웹스토어 등록 모두에 적합한
가볍고 명확한 구조를 갖는다.
다음 단계로는
와이어프레임
Manifest v3 구조 설계
실제 코드 PRD 분해
로 자연스럽게 이어갈 수 있습니다.•
테스트 시 개발자 모드를 활성화 해야 합니다.
•
확장 프로그램 샘플
sejong-branding.zip9.20KB
•
확장 프로그램 스토어 안내
무료 api 추천
코딩시 주의사항
주의사항 인포그래픽
체크리스트
upstage-aws api