Garden Skills

예시 체험

중2 수학 — 일차함수 그래프 인터랙티브 탐구 페이지 만들기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기

선생님이 입력한 내용

중학교 2학년 수학 담당 교사가 '일차함수와 그 그래프' 도입 차시를 위해, 교실 화면에 띄울 탐구용 웹 페이지를 직접 준비하는 상황이다.

중학교 2학년 수학 '일차함수와 그 그래프' 단원 도입용 인터랙티브 학습 페이지를 HTML 한 장으로 만들어 주세요. 학생들이 기울기 a와 y절편 b를 슬라이더로 바꾸면 그래프가 바로 바뀌는 탐구 활동, 기울기만 바꾼 작은 그래프 3개, 확인 문제 3개를 넣어 주세요. 교실 화면에 띄울 거라 글씨는 크게, 톤은 차분하게 해 주세요.

나온 결과

기울기 a — x가 1만큼 커질 때 y가 얼마나 변하는지를 나타냅니다. 조절기를 움직이면 직선이 어떻게 달라지는지 바로 확인할 수 있습니다. 회색 직선 y = x와 견주어 보세요. 확인 문제 2. y = 2x와 y = 2x + 5의 그래프는 서로 평행합니다. 기울기가 같고 y절편만 다르기 때문입니다.

직접 해 보기 — 3단계

1. Claude Code 같은 AI 에이전트에 저장소 안내대로 이 스킬 모음을 설치한다. 결과가 HTML이므로 별도 API 키나 프로그램 설치 없이 쓸 수 있다.
2. 학년·단원·넣을 활동·톤을 적은 문장을 붙여 넣는다. 위 문장을 바꿔 써도 된다.
3. 만들어진 HTML 파일을 브라우저로 열어 슬라이더를 직접 움직여 보고, 식·그래프·문제가 교육과정에 맞는지 확인하고 고친다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (web-design-engineer) · 확인일 2026-10-16. 이 스킬(web-design-engineer)은 디자인 지침을 담은 스킬이라 별도 API 키나 그림 도구 없이 HTML 한 장으로 결과를 만들 수 있었다. 다만 스킬 문서가 요구하는 사람 승인 지점(디자인 시스템 확인, v0 초안 확인)은 일괄 실행이라 자동으로 넘겼고, 그래서 선생님 피드백을 반영하는 과정은 거치지 않았다. 그림은 만들어진 HTML을 헤드리스 브라우저로 찍은 위쪽 일부다(내용은 고치지 않았다). 화면의 좌표와 값은 수업에서 쓰기 위해 정한 수업용 예시 값이며 측정된 사실이 아니고, 슬라이더를 움직여 나오는 값은 일차함수를 계산한 결과다. 스킬은 참고할 실제 브랜드 자산(로고·제품 사진)을 먼저 확보하라고 안내하지만, 이 자료는 사진 없이 도형과 글 중심이라 그 단계는 해당하지 않는다. 글꼴은 Noto Serif / Noto Sans KR을 불러오며, 인터넷이 막히면 컴퓨터에 있는 명조·고딕 글꼴로 대체된다. 차시 구성·확인 문제·좌표는 교사가 성취기준에 맞게 직접 검토해야 한다.

써 보려면

1. 저장소 ConardLi/garden-skills를 엽니다.
2. 설치가 필요합니다. 절차는 저장소 안내를 따릅니다.
3. API 키가 필요합니다. 키를 받는 방법은 저장소 안내를 따릅니다.

출처

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 정보 정정 요청

라이선스