개념 관계도 빌더 무료 HTML 교구 | 학생이 직접 연결하는 인터랙티브 다이어그램 + 프롬프트
📌 이 글 요약
- 학생이 직접 개념을 연결하는 인터랙티브 관계도 빌더 HTML 교구 무료
- 노드 추가 + 드래그 이동 + 화살표 연결 — 마인드맵·인과관계·분류 활동 모두 가능
- 과학(생태계), 사회(인과관계), 국어(인물관계) 등 전과목 활용
🎮 바로 써보기 + 다운로드
"이 개념들이 어떻게 연결되는지 보여줄 수 있는 도구가 필요했어요"
사회 수업에서 "원인→결과" 관계를 설명할 때, 과학에서 "먹이사슬" 그릴 때, 국어에서 "인물 관계도" 만들 때 — 항상 칠판에 동그라미 그리고 화살표 긋고 했잖아요.
이걸 학생들이 직접 폰이나 패드에서 해볼 수 있으면 좋겠다고 생각했습니다. 노드(동그라미) 추가하고, 드래그로 위치 잡고, 클릭해서 화살표로 연결. 완성하면 스크린샷 찍어서 제출.
📋 과목별 활용 예시
과학 — 생태계 먹이 관계
풀 → 메뚜기 → 개구리 → 뱀 → 매. 학생이 직접 화살표로 연결하며 먹이사슬 구성.
사회 — 사회 문제 인과관계
산업화 → 도시 인구 집중 → 주택 부족 → 집값 상승 → 청년 주거 불안. 원인-결과 사슬 만들기.
국어 — 소설 인물 관계도
주인공, 조력자, 적대자, 배경 인물 등을 노드로 만들고 관계(우정/대립/사랑) 화살표 연결.
수학 — 집합 관계 (포함/교집합)
자연수 ⊂ 정수 ⊂ 유리수 ⊂ 실수. 포함 관계를 화살표로 표현.
영어 — 단어 어원 관계도
라틴어 어근 → 파생 단어들 연결. pre-(before) → predict, prevent, prepare.
🔧 제작 프롬프트
// Claude 프롬프트
개념 관계도 빌더를 HTML 단일 파일로 만들어줘.
기능:
- 캔버스 영역에 노드(원형 또는 사각형) 추가 (더블클릭 또는 "추가" 버튼)
- 노드 텍스트 편집 (클릭해서 직접 입력)
- 노드 드래그로 위치 이동 (터치 지원)
- 두 노드 사이에 화살표 연결 (한 노드 길게 누르고 → 다른 노드에 드롭)
- 화살표에 라벨 추가 가능 (관계명: "원인", "결과", "포함" 등)
- 노드 색상 변경 (5가지 프리셋)
- 노드/화살표 삭제 (X 버튼 또는 더블클릭)
- 전체 초기화 버튼
- 결과를 이미지로 저장 (Canvas → PNG 다운로드)
- 모바일 반응형, 터치 드래그
- 한국어 UI, Noto Sans KR
미리 세팅할 수 있는 데이터 (선택):
const presetNodes = [
{id: 1, text: "산업화", x: 100, y: 100, color: "#FF6B6B"},
{id: 2, text: "도시화", x: 300, y: 100, color: "#4ECDC4"},
];
const presetEdges = [
{from: 1, to: 2, label: "원인→결과"},
];
💡 수업 활용 팁
빈 캔버스 모드: presetNodes를 비워두면 학생이 처음부터 직접 구성
힌트 모드: 노드만 미리 배치하고, 화살표 연결은 학생이 하도록
평가: 완성된 관계도 PNG 저장 → 구글 클래스룸에 제출
🖼️ 노드에 이미지 넣기
텍스트 대신 사진을 넣고 싶으면 (인물 사진, 국기, 생물 사진 등):
💡 커스터마이징
- 노드 모양: 원형/사각형/다이아몬드 선택 옵션 추가 가능
- 화살표 스타일: 실선/점선/양방향 화살표
- 그룹 색상: 같은 카테고리 노드끼리 같은 색 자동 지정
- 저장/불러오기: JSON으로 내보내기 → 다음 시간에 이어서 작업
대화 참여하기