게임화된 수업 카드 만들기
콘텐츠를 게임으로 만들어 보세요
학습이 게임처럼 느껴질 때 학생들은 집중합니다. 포인트, 진행 상황, 명확한 도전 과제는 평범한 수업을 끝까지 완료하고 싶은 무언가로 바꿔 줍니다. 이 수업에서는 AI를 파트너로 삼아 게임화된 수업 카드를 만들어 볼 거예요.
훌륭한 게임 UI가 공통으로 갖추는 세 가지 요소를 조합합니다: 노력에 보상을 주는 포인트 배지, 학생이 얼마나 왔는지 보여 주는 진행 바, 그리고 목표를 제시하는 도전 카드. 수업이 끝나면 어떤 수업에도 바로 적용할 수 있는 재사용 가능한 컴포넌트를 갖게 됩니다.
완벽한 코드를 외워서 쓸 필요는 없어요. 각 단계를 따라가고, 힌트를 활용하고, 실시간 미리보기로 올바른 방향인지 확인하세요.
안내
수업 카드 컨테이너를 만드세요: rounded-xl 모서리, 패딩, 어두운 gray-800 배경을 가진 div입니다.
힌트: 다음을 사용하세요: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
어디에 작성하나요?
<!-- Build your gamified lesson card here -->11번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.
밝은 노란색 배경의 span을 사용해 학생의 점수를 보여 주는 포인트 배지를 추가하세요.
진행 바를 추가하세요: 회색 트랙 div 안에 너비가 설정된 초록색 채우기 div를 넣습니다.
제목 텍스트 "Today's Challenge"와 학생을 위한 짧은 목표가 있는 도전 카드를 추가하세요.
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: 수업 카드 컨테이너를 만드세요: rounded-xl 모서리, 패딩, 어두운 gray-800 배경을 가진 div입니다.