나만의 과학실험 대시보드,
질문에 답하며 함께 기획해요
몇 가지 질문에 답하고, 원하는 모듈을 화면에 직접 배치해 보세요.
완성된 기획은 바이브 코딩용 프롬프트로 만들어 드려요.
💡 실험 대시보드를 선택하면 계측 화면에 더해, 학생이 읽고 답하는 학습지(활동지) 콘텐츠와 실험 보고서 기능까지 함께 기획할 수 있어요.
어떤 스타일의 대시보드를 만들고 싶나요?
대시보드의 목적에 따라 이후 기획 단계가 달라져요. 실험 대시보드를 고르면 학습지 콘텐츠·보고서 단계가 추가돼요.
센서는 유선으로 연결하나요, 무선으로 연결하나요?
사용하는 보드에 따라 브라우저 통신 방식이 정해져요.
어떤 센서 데이터를 사용하나요? (여러 개 선택 가능)
선택한 센서마다 실시간 값 카드가 만들어지고, 그래프의 데이터가 돼요.
계측 영역에 어떤 기능을 넣을까요? (여러 개 선택 가능)
센서가 보낸 값을 보여주고 다루는 요소예요. 필요한 것만 골라 배치하면 돼요. ⭐ 표시는 추천 기능이에요.
학습지(워크시트)를 구성해 볼까요?
퀴즈가 아니라 학생이 기록을 남기는 워크시트예요. 응답 유형을 골라 입력칸을 배치하고, 각 입력칸의 질문과 세부 옵션(표 구성·보기 목록·단위 등)을 아래에서 직접 설정해 주세요.
대시보드 화면을 직접 배치해 보세요
왼쪽 모듈을 클릭하거나 캔버스로 드래그해서 추가해요. 배치된 모듈은 드래그로 이동, 오른쪽 아래 모서리로 크기 조절할 수 있어요.
왼쪽 팔레트에서 모듈을 클릭하거나 끌어다 놓아 보세요!
대시보드를 어떤 스타일로 보여줄까요?
색·테두리·글씨 크기 같은 겉모습만 달라지고, 배치한 모듈과 기능은 그대로예요. 스타일을 고르면 아래에 내가 배치한 화면 그대로 미리보기가 나타나요.
🎉 기획 완성! 이제 바이브 코딩을 시작해 보세요
아래 프롬프트를 복사해서 AI(클로드 등)에게 붙여 넣으면, 기획한 대시보드를 코드로 만들어 줘요.
📋 기획 요약
🗺 화면 배치도
▶ 미리보기는 배치한 모듈이 실제로 동작하는 대시보드로 열려요. 데모 데이터가 자동으로 흐르고, 실제 보드 연결(유선/무선)도 시험할 수 있어요.
✨ 바이브 코딩 프롬프트
🚀 바이브 코딩, 이렇게 하면 돼요
- 1
프롬프트와 기본 파일을 준비해요
위의 “📋 프롬프트 복사하기”를 누르고, 아래에 있는 기본 템플릿 파일도 함께 내려받아요.
- 2
AI에게 붙여 넣어요
AI(클로드 등)를 열고 대화창에 프롬프트를 붙여 넣은 뒤, 내려받은 기본 파일을 함께 첨부해요.
- 3
완성된 HTML을 파일로 저장해요
AI가 만들어 준 HTML을 다운로드하거나, 코드를 복사해 메모장에 붙여 넣고 확장자 .html로 저장해요.
- 4
실행해서 확인해요
저장한 HTML 파일을 더블클릭해 브라우저에서 열고, 화면이 잘 나오는지 확인해요. (장치 연결은 Chrome·Edge에서)
- 5
웹으로 공개하고 싶을 땐
파일 이름을 index.html로 바꾼 뒤 Netlify 같은 무료 배포 사이트에 올리면 주소가 생겨요.