기본 화면 설계

📝학급 대시보드 기본 화면 만들기 프롬프트

너는 학교 현장을 잘 아는 프론트엔드 개발자야. 초등학교 교실에서 아침 조회 시간이나 쉬는 시간에 띄워둘 '학급 대시보드' 웹페이지(HTML/CSS)를 만들려고 해.

화면은 가로로 넓게 쓰고, 전체적인 배경은 깔끔한 연회색으로 해줘.
맨 위에는 현재 날짜와 시간이 나오는 작은 바를 하나 만들어 줘.
그 아래로 총 6개의 네모난 카드를 바둑판(Grid) 모양으로 배치해 줘. 카드의 배경색은 차분한 파란색(청록색 계열)으로 하고, 글씨는 흰색으로 해줘. 모서리는 둥글게 해줘.
카드의 구성은 다음과 같아:
- 첫 번째 줄: '칭찬 통장' (1칸 차지), '오늘 할일 안내판' (2칸 차지), '타이머' (1칸 차지)
- 두 번째 줄: '발표 뽑기' (1칸 차지), '숙제 알림장' (1칸 차지), '오늘의 행사' (1칸 차지), '오늘의 식단' (1칸 차지)
지금은 기능이 작동하지 않아도 되니까, 각 카드 안에 디자인이 예뻐 보이도록 가짜 데이터(예: 오늘의 식단에는 가짜 메뉴들, 칭찬 통장에는 1200점 등)와 어울리는 이모지를 넣어줘.
HTML 단일 파일로 뼈대를 짜줘. CSS는 Tailwind CSS를 사용해.

타이머

📝 타이머 기능 완성하기 프롬프트

방금 만들어준 HTML 코드에서 '타이머' 부분을 실제로 작동하게 만들어줘.

타이머 영역 안에는 시간을 보여주는 '00:00' 글씨와 그 아래에 버튼들이 있어야 해.
버튼은 총 5개로 만들어줘: [시작], [정지], [+1분], [+10초], [리셋]
JavaScript를 추가해서 버튼을 누르면 시간이 올라가고, 시작을 누르면 1초씩 줄어들게 해줘.
시간이 00:00이 되면 브라우저 내장 기능(Web Audio API)을 사용해서 '삐- 삐- 삐-' 하는 전자 알람 소리가 나게 해줘. (학교 방화벽 때문에 외부 mp3 링크는 작동하지 않아)
추가로, 타이머 영역 우측 상단에 십자 화살표(확대) 모양의 SVG 아이콘을 하나 넣어줘. 이 아이콘을 누르면 화면 전체를 덮는 거대한 팝업창(모달)이 뜨고, 그 안에서도 커다란 글씨로 타이머를 볼 수 있고 똑같은 버튼들로 조작할 수 있게 해줘.

전체 코드를 다시 주지 말고, 추가되거나 수정되어야 하는 부분(수정된 타이머 HTML 영역과 새로 추가할 JavaScript 코드)만 알려줘.

💻 타이머 기능 완성 코드

<!DOCTYPE html>

<head>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Noto Sans KR', 'sans-serif'],

},

colors: {

'dashboard-blue': '#1a6582', // 이미지와 유사한 청록색 테마

'dashboard-dark': '#134e66'

}

</script>

<style>

/* 스크롤바 숨기기 등 부가적인 스타일 */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #f1f1f1;

}

::-webkit-scrollbar-thumb {

background: #888;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #555;

}

.card-hover:hover {

transform: translateY(-2px);

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

transition: all 0.3s ease;

}

</style>

</head>

</div>

</div>

</ul>

</div>

<li>내일은 현장체험학습 가는 날입니다.</li>

<li>체육복 꼭 챙겨오세요.</li>

</ul>

</div>

</svg>

</button>

</div>

무작위 뽑기

</button>

</div>

<li>가정통신문(방과후학교 신청) 부모님께 전달하기</li>

</ul>

</div>

</div>

<li>쇠고기미역국</li>

<li>시금치나물</li>

<li class="text-yellow-300 pt-2 text-sm border-t border-white/20 mt-2">방울토마토</li>

</ul>

</div>

</div>

// 실시간 시계 업데이트 기능

function updateClock() {

const now = new Date();

const year = now.getFullYear();

// 월과 일은 2자리 숫자로 맞춤 (예: 07, 03)

const month = String(now.getMonth() + 1).padStart(2, '0');

const date = String(now.getDate()).padStart(2, '0');

const hours = String(now.getHours()).padStart(2, '0');

const minutes = String(now.getMinutes()).padStart(2, '0');

const timeString = `${year}. ${month}. ${date}. ${hours}:${minutes}`;

document.getElementById('realtime-clock').textContent = timeString;

}

// 1초마다 시계 업데이트

setInterval(updateClock, 1000);

// 페이지 로드 시 즉시 시계 표시

updateClock();

// --------------------------------------------------

// 타이머 기능 로직 추가

// --------------------------------------------------

let timeLeft = 0; // 남은 시간 (초 단위)

let timerInterval = null; // setInterval 제어용 변수

const displayTimeElement = document.getElementById('display-time');

const modalDisplayTimeElement = document.getElementById('modal-display-time'); // 모달 시간 표시 요소 추가

// 브라우저 내장 오디오(Web Audio API)를 활용하여 외부 링크 차단 문제 해결

let audioCtx;

function initAudio() {

// 브라우저 호환성을 위해 AudioContext 초기화

if (!audioCtx) {

audioCtx = new (window.AudioContext || window.webkitAudioContext)();

}

// 브라우저 정책상 정지된 오디오 컨텍스트를 사용자 클릭 시점에 깨워줌

if (audioCtx.state === 'suspended') {

audioCtx.resume();

}

function playBeepAlarm() {

initAudio();

// 삐- 삐- 삐- 알람 소리 3번 울림

for (let i = 0; i < 3; i++) {

const oscillator = audioCtx.createOscillator();

const gainNode = audioCtx.createGain();

oscillator.type = 'square'; // 알람 소리에 적합한 파형 (전자음 느낌)

oscillator.frequency.setValueAtTime(800, audioCtx.currentTime + i * 0.5); // 주파수(음높이)

// 볼륨 설정 (점점 줄어드는 효과)

gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime + i * 0.5);

gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + i * 0.5 + 0.3);

oscillator.connect(gainNode);

gainNode.connect(audioCtx.destination);

oscillator.start(audioCtx.currentTime + i * 0.5);

oscillator.stop(audioCtx.currentTime + i * 0.5 + 0.3);

}

// 화면에 시간을 00:00 형식으로 그려주는 함수

function updateTimerDisplay() {

const minutes = String(Math.floor(timeLeft / 60)).padStart(2, '0');

const seconds = String(timeLeft % 60).padStart(2, '0');

const timeString = `${minutes}:${seconds}`;

displayTimeElement.textContent = timeString; // 대시보드 화면 업데이트

// 모달 화면이 존재하면 동시에 업데이트

if (modalDisplayTimeElement) {

modalDisplayTimeElement.textContent = timeString;

}

// 팝업(모달) 열기/닫기 함수 추가

function openTimerModal() {

document.getElementById('timer-modal').classList.remove('hidden');

document.getElementById('timer-modal').classList.add('flex');

}

function closeTimerModal() {

document.getElementById('timer-modal').classList.add('hidden');

document.getElementById('timer-modal').classList.remove('flex');

}

// 시작 버튼 클릭 시

function startTimer() {

initAudio(); // 버튼 클릭 시 오디오 권한 활성화 (브라우저 정책 우회 필수)

if (timerInterval) clearInterval(timerInterval); // 이미 실행 중이면 중복 실행 방지

if (timeLeft <= 0) return; // 0초면 시작하지 않음

timerInterval = setInterval(() => {

timeLeft--;

updateTimerDisplay();

// 타이머가 0이 되었을 때

if (timeLeft <= 0) {

clearInterval(timerInterval);

timerInterval = null;

playBeepAlarm(); // 내장 비프음 알람 발생

}

}, 1000);

}

// 정지 버튼 클릭 시

function stopTimer() {

if (timerInterval) {

clearInterval(timerInterval);

timerInterval = null;

}

// +1분 버튼 클릭 시

function addOneMinute() {

timeLeft += 60; // 60초 추가

updateTimerDisplay();

}

// +10초 버튼 클릭 시

function addTenSeconds() {

timeLeft += 10; // 10초 추가

updateTimerDisplay();

}

// 리셋 버튼 클릭 시

function resetTimer() {

stopTimer(); // 진행 중인 타이머 멈춤

timeLeft = 0; // 0초로 초기화

updateTimerDisplay();

}

// 페이지 로드 시 타이머 00:00 표시

updateTimerDisplay();

</script>

</body>

</html>

발표 뽑기

💻 학급데이터 스프레드시트 앱스스크립트 완성 코드

// 스프레드시트의 '학생명부' 탭에서 학생 이름을 가져오는 API

function doGet(e) {

// 선생님의 스프레드시트 ID (URL 중간에 있는 긴 문자열)

const sheetId = '1l1L0BQCLIs7uoDkipRYKcfEuooXwxFJHMUZEmARYFuc';

const sheet = SpreadsheetApp.openById(sheetId).getSheetByName('학생명부');

// A열(이름) 데이터 가져오기 (1행이 '이름' 등 제목이라고 가정하고 2행부터 마지막 행까지)

// 만약 이름이 B열에 있다면 getRange(2, 2, ...) 로 수정하면 됩니다.

const data = sheet.getRange(2, 2, sheet.getLastRow() - 1, 1).getValues();

// 빈 칸을 제외하고 이름만 있는 깔끔한 리스트(배열)로 만들기

const students = data.map(row => row[0]).filter(name => name !== "");

// 대시보드가 읽을 수 있게 JSON 형태로 포장해서 배달!

return ContentService.createTextOutput(JSON.stringify(students))

.setMimeType(ContentService.MimeType.JSON);

}

📝 발표 뽑기(N명 다중 선택 + 구글 시트 연동) 프롬프트

기존 대시보드 코드에서 '발표 뽑기' 구역을 다음 조건에 맞게 완전히 업그레이드해 줘.

1. 화면 구성 (UI):

기존 이모지(🙋‍♂️)를 지우고, 그 자리에 뽑을 인원수를 조절하는 [-] 버튼, 1명 뽑기 텍스트, [+] 버튼을 가로로 나란히 배치해 줘.
그 아래에는 학생 이름이 표시될 넉넉한 공간을 만들어 줘. 여러 명이 뽑힐 경우 이름들이 예쁜 노란색 캡슐(Chip) 모양으로 줄바꿈 되며 나열되도록 해줘.
맨 아래에는 [무작위 뽑기] 버튼을 배치해 줘.

2. 데이터 연동 (GAS 연동 로직):

JavaScript 최상단에 const GAS_WEB_APP_URL = "여기에_자신의_주소_입력"; 변수를 만들어 줘.
fetch 함수를 써서 저 주소에서 학생 명단 배열을 가져오게 해줘. (구글 서버 특성상 fetch 옵션에 { redirect: 'follow' }를 반드시 넣어야 해!)
만약 주소가 비어있거나 불러오는 데 실패하면, 테스트용 가짜 명단(김철수, 이영희 등 8명)을 기본값으로 사용하게 해줘.

3. 무작위 뽑기 로직 (중복 방지 & 애니메이션):

[+] 버튼으로 올릴 수 있는 최대 인원수는 불러온 명단의 총인원수를 넘지 못하게 막아줘.
[무작위 뽑기] 버튼을 누르면 약 2초 동안 학생 이름이 무작위로 빠르게 바뀌는 애니메이션(두구두구 효과)을 보여줘.
애니메이션이 끝나면 설정한 인원수만큼 절대 중복되지 않게 최종 학생들을 화면에 띄워줘. (배열을 섞은 뒤 자르는 방식을 써줘)

4. 효과음 (학교 방화벽 필수 고려):

최종 학생이 뽑히는 순간, 브라우저 내장 기능인 Web Audio API를 사용해서 '짠~!' 하고 올라가는 느낌의 주파수 효과음(사인파)을 만들어 줘. 학교 방화벽 때문에 외부 mp3나 ogg 링크는 절대 사용하면 안 돼.

전체 HTML 코드를 처음부터 끝까지 다 주지 말고, '발표 뽑기' 구역의 변경된 HTML과 하단에 추가할 JavaScript 코드만 딱 잘라서 제공해 줘.