# data[].attributes.attachment_link.title
고급과정_5~8차시_AI SW 정보 역량강화 연수(바이브 코딩)_박권 수정

# data[].attributes.attachment_link.description
Meet Gemini, Google’s AI assistant. Get help with writing, planning, brainstorming, and more. Experience the power of generative AI.

# data[].attributes.headline
데이터 베이스 (구글시트)

# data[].attributes.subject
데이터 베이스 (구글시트)

# data[].attributes.attachment_link.readable_text
Lovable is your superhuman full stack engineer.

Describe what you want to build.

Get a first version in seconds.

Iterate & improve with chat.

One-click to deploy and share.

USE CASES

A new era for product builders and developers.

Product teams

Empower non-technical team members to code. Align on abstract ideas by building real prototypes.

Founders, solopreneurs & indie-hackers

Iterate and validate in minutes. Launch a full product in less than a day.

Product designers

Bring your design idea to life without tedious prototyping work in tools like Figma.

Human software engineers

Ship an entire frontend in one prompt. Let Lovable fix bugs and do your UI edits.

THE PRODUCT

Build high quality software without writing code.

Creating software has never been more accessible. With Lovable, simply describe your idea in your own words, and watch it transform into a fully functional application with beautiful aesthetics.

20x faster than coding.

Use your native language to describe your idea, then watch Lovable do the rest. Creating for the web is faster and easier than ever before.

Prompt to edit.

Forget about the overhead of frontend engineers or freelancers to maintain your website. Ask in text to change anything.

You own the code.

Everything that Lovable builds is yours. Sync your codebase to Github and edit in any code editor, export or publish your app instantly with one click.

FEATURES

A superhuman full stack product engineer.

Instant & intuitive

Live rendering, handles image input, has instant undo and lets you collaborate with branching. The AI fixes your bugs. One-click deploy when ready.

Beautiful design

We believe your product should look good. Lovable follows best practice UI & UX principles to make sure every idea you bring to life is beautifully designed.

Support any backend

Lovable has support for databases, API integrations and back-end functionality. Connect your own or use our Supabase connector.

Select & edit

The accuracy you need to make fine grained changes. With Select & Edit you click an element and describe what you want updated.

Github integration

Connect Lovable to your GitHub account to automatically sync the code to your repository. Perfect for project hand offs and more advanced workflows.

Loved by thousands of product creators

Frequently Asked Questions

Pricing

Start for free. Get in touch to learn about custom plans for your team's needs.

We work with both agencies, startups and enterprises.

# data[].attributes.attachment_link.description
Build software products, using only a chat interface

# data[].attributes.body
1. 문제 정의 (Problem Statement)

학년 초 교사는 학생 개개인의 성향을 빠르게 파악하고, 학생들은 부담 없이 자신을 표현하며 같은 성향의 친구를 찾아 관계를 형성할 필요가 있다. 그러나 일반적인 MBTI·DISC 웹서비스는 계정 로그인, 서버 저장, 개인정보 수집이 수반되어 학교 현장에서 활용하기 어렵다.

본 프로젝트의 목적은 DB·서버·개인정보 수집 없이, 각 학생의 개별 노트북(크롬북)에서 단독 실행되는 오프라인 성향 탐색 도구를 제작하는 것이다. 이 도구는 심리 진단이 아닌 학기 초 관계 형성 활동용 학습 도구로 활용된다.

2. 목표 (Goals)

1. 인터넷 연결 없이도 수업 중 즉시 실행 가능

2. 로그인·이름·학번 등 개인정보 입력 완전 배제

3. MBTI + DISC 구조를 차용한 간단한 문항으로 5~7분 내 완료

4. 결과를 기반으로 같은 성향 친구를 쉽게 찾도록 지원

5. 학생 결과는 기기 밖으로 전송·저장되지 않음

3. 핵심 설계 원칙 (Design Principles)

오프라인 우선: 단일 HTML 파일로 실행

무저장: DB, localStorage, 쿠키 사용하지 않음

라벨 제거: MBTI/DISC 알파벳 미사용

경향성 표현: 고정 성격이 아닌 ‘지금의 행동 경향’

교실 즉시 활용: 결과 화면을 보고 바로 이동·모둠 구성 가능

4. 대상 사용자 (Target Users)

주 사용자: 중학교 1~3학년 학생

활용자: 담임 교사, 교과 교사

5. 사용자 시나리오 (User Scenarios)

학생 시나리오

1. 교사가 배포한 HTML 파일을 노트북에서 실행

2. 활동 목적 안내 화면 확인

3. MBTI 스타일 8문항 응답

4. DISC 스타일 8문항 응답

5. 개인 결과 카드 + 그룹 코드 확인

6. 교사 안내에 따라 같은 코드 친구들과 이동

교사 시나리오

1. 수업 전 HTML 파일을 클래스룸/USB 등으로 배포

2. 학생 실행 확인 후 활동 안내

3. 칠판에 그룹 코드별 위치 제시

4. 같은 성향 학생 활동 진행

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차시 예시)

1. 도입(5분): 활동 목적 설명 – 성격 규정 아님

2. 실행(10분): 개별 노트북에서 검사 진행

3. 확인(5분): 결과 카드·그룹 코드 확인

4. 이동(5분): 같은 코드 친구 모이기

5. 활동(15분): 공통점·강점 나누기

6. 정리(5분): 다양성 존중 메시지 강조

10. 성공 지표 (Success Metrics)

학생 참여율 95% 이상

개인정보 수집 0건

활동 중 라벨링/비하 발언 0건

11. 범위 외 (Out of Scope)

서버 구축

DB 저장

개인 식별 데이터 수집

장기 추적·분석

12. 최종 요약

본 PRD는 DB·개인정보·서버 없는 오프라인 성향 탐색 도구를 목표로 하며, 학년 초 학생 이해와 라포 형성에 최적화된 구조를 가진다. 핵심 가치는 정확한 성격 분류가 아니라, 교실 안에서 서로를 안전하게 이해하고 연결하는 경험이다.

본 웹서비스는 MBTI와 DISC의 형식을 교육적으로 재해석하여, 학년 초 학생 이해와 라포 형성에 최적화된 성향 탐색 도구를 제공한다. 핵심 가치는 정확한 분류가 아니라, 서로 다름을 안전하게 발견하고 연결하는 경험이다.

# data[].attributes.body
당신은 도시 브랜딩 전문 영상 제작 AI입니다.

사용자는 교사이며, 단 한 번의 텍스트 입력만 제공합니다.

입력된 텍스트를 바탕으로

세종시의 정체성과 미래 이미지를 효과적으로 전달하는

브랜딩 영상을 제작하세요.

요구 사항은 다음과 같습니다.

입력된 텍스트의 핵심 메시지를 분석해

세종시 브랜딩에 어울리는 영상 콘셉트를 설정합니다.

동일한 텍스트를 기반으로

영상 길이가 다른 여러 개의 영상 버전을 생성합니다.

예를 들어

짧은 홍보용 영상

표준 브랜딩 영상

스토리텔링 중심의 비교적 긴 영상

처럼 길이와 구성 아이디어가 서로 달라야 합니다.

각 영상은

세종시의 미래성, 공공성, 교육적 이미지, 도시 브랜드를

긍정적으로 표현해야 합니다.

추가 질문은 하지 말고

입력된 텍스트만으로 판단하여

즉시 영상 결과를 화면에 보여주세요.

개인정보는 수집하거나 사용하지 않습니다.

웹서비스 환경에서 바로 실행 가능한 형태로 결과를 제공합니다.

# data[].attributes.attachment_link.description
Stitch generates UIs for mobile and web applications, making design ideation fast and easy.

# data[].attributes.attachment_link.description
Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요.

# data[].attributes.attachment_link.readable_text
Netlify is the modern development platform for Enterprises to realize the speed, agility and performance of a scalable, composable web architecture.

Netlify Composable Web Platform

Streamlined orchestration, simplified and unified workflows, and real-time updates across infrastructure, workflows, websites and teams - all supported by Enterprise-grade security, services, and a world-class partner ecosystem.
Explore platform

3 solutions 1 platform

Netlify Connect

Unify all content

Netlify Connect is a data unification layer that gives web teams the freedom to create world-class websites, online stores, and applications with data from any existing or new content source.

Netlify Core

Deploy faster

Netlify Core is a frontend cloud solution for developers to build and deploy future-proof digital solutions with modern, composable tooling that works with all modern frameworks.

Netlify Create

Click, edit, publish

Netlify Create gives digital teams the freedom to autonomously perform content and website updates faster than ever before with an intuitive visual editor.

We aspire to be the most player-focused gaming company in the world, and Netlify absolutely carries the same spirit of aspiring to be the most developer-focused technology company in the world... Ultimately, there was a sense of deep collaboration, understanding and meeting our business requirements, and providing extremely knowledgeable and highly professional solutions every single step along the way.

# data[].attributes.attachment_link.title
Scale & Ship Faster with a Composable Web Architecture | Netlify

# data[].attributes.attachment_link.description
Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!

# data[].attributes.attachment_link.readable_text
Quickstart templates. You can deploy an AI app in seconds on Vercel, using our pre-built templates.

Optimized compute. Deliver globally performant apps without additional infrastructure complexity.

Zero-config streaming. Easily stream long-running LLM responses for a better user experience.

Fast load times, zero overhead. Highly optimized infrastructure and CDN ensure fast loading times, reducing bounce rates and improving SEO.

Security at every step. Make it easier to manage authentication with a SAML Single-Sign On (SSO) with third-party solutions like Okta.

Iteration at light speed. Vercel's intuitive development platform accelerates development cycles and enhances team productivity.

# data[].attributes.attachment_link.title
Vercel: Build and deploy the best Web experiences with The Frontend Cloud

# data[].attributes.attachment_link.description
Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

# data[].attributes.body
────────────────
제품 요구사항 정의서 (PRD)
────────────────

문서명
Chrome Sidebar Calculator – Product Requirements Document

버전
v1.0

작성 목적
본 문서는 Chrome 브라우저 확장 프로그램 형태의 사이드바 계산기 개발을 위한 기능, 범위, 제약사항을 명확히 정의하기 위해 작성되었다.

────────────────

1. 제품 개요
────────────────

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 분해
로 자연스럽게 이어갈 수 있습니다.

# data[].attributes.attachment_link.description
The LPU™ Inference Engine by Groq is a hardware and software platform that delivers exceptional compute speed, quality, and energy efficiency. Groq provides cloud and on-prem solutions at scale for AI applications.

# data[].attributes.attachment_link.title
학교 현장을 위한 AI 교육 안전 & 개발 가이드북