2026년 9월 6일 일요일

[국어·사회] 노션 스타일 배움노트 - 사이드바 트리로 만드는 모둠 디지털 역사 백과사전



우리 모둠이 직접 만드는 노션(Notion) 스타일 주제별 탐구 배움노트 & 모둠 디지털 백과사전

📝 초등 5~6학년 국어 '정보 요약하기' 및 사회 '우리 역사의 발전' 단원 — 학생들이 역사 인물과 사건을 노션(Notion) 스타일의 사이드바 트리 구조로 정리하고 핵심 내용을 카드 블록(block)으로 정리하여 모둠별 디지털 역사 도감을 만듭니다. 외부 계정 가입 없이 단일 HTML 파일로 완결되는 참여형 지식 구조화 프로젝트입니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
노션 스타일 사이드바 트리 주제(조선시대) → 소주제(신분제) → 세부내용(탕평책) 계층 구조로 좌측 사이드바가 폴더처럼 펼쳐집니다. ▶ 클릭 시 서브 트리 펼침 애니메이션 + 이모지 아이콘으로 시각적 분류.
블록 단위 정보 카드 하나의 사건을 '제목 + 3줄 요약 + 태그' 카드 블록으로 정리하며 정보 요약력을 훈련합니다. 모둠원이 작성한 카드는 왼쪽 사이드바와 양방향 연결되어 클릭 시 자동으로 해당 위치로 이동.
가볍게 공유하는 링크 배포 외부 클라우드 계정 가입 없이 완성된 HTML 파일을 그대로 학급 패들릿이나 공유 폴더에 넣으면 다른 모둠도 곧바로 열람 가능합니다. 다른 모둠 도감의 '칭찬 스탬프' 버튼으로 정보의 신뢰도 투표.

2. 핵심 아키텍처 해설

① 트리 데이터: TREE 상수

const TREE = [
  {
    id: "root-1",
    emoji: "🏰",
    title: "조선 시대의 성립",
    children: [
      { id: "sub-1", title: "훈민정음 반포", content: "세종대왕이 백성을 위해 창제한 문자..." },
      { id: "sub-2", title: "과거 제도 정착", content: "학문을 통한 관료 선발 체계..." }
    ]
  }
];

사이드바는 이 재귀(recurse) 트리 상수를 순회하며 자동 렌더링됩니다. 학생이 추가한 정보 카드는 특정 소주제 아래에 바로 연결됩니다.

② 카드 블록 정보 정리 UI

.block-card {
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 12px;
}
.block-card:hover { background: #f9fafb; }

노션의 블록 개념을 재현한 카드 UI입니다. 학생들이 쓴 요약본에 태그(인물, 사건, 제도)를 부여하면 자동으로 카테고리 필터가 생성됩니다.

③ 모둠 배포용 CSV/HTML 링크 출력

완성된 트리 데이터는 '모둠 도감 공유 버튼' 클릭 한 번으로 별도 JSON 텍스트로 추출됩니다. 이를 학급 홈페이지나 패들릿에 게시하면 다른 모둠들이 서로의 백과사전을 방문하며 피드백을 나눌 수 있습니다.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 주제 계층(연대별/인물별/사건별)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 모둠도감.html로 저장합니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const TREE = [...] 상수에 역사 주제 트리와 4~6개의 소주제 콘텐츠를 내장하여 브라우저에서 즉시 실행되도록 한다.
3. 노션 스타일 UI 재현: 좌측 고정 사이드바(트리 뷰) + 우측 본문(카드 블록 그리드)의 2분할 레이아웃을 CSS Flexbox로 구현한다.
4. 학생 개인정보 0: 학생 실명 대신 모둠명과 닉네임만 사용하며, 입력 데이터는 브라우저 세션 메모리로만 유지한다.
5. 모바일 반응형: 모바일에서는 사이드바가 숨김 햄버거 메뉴로 전환되도록 미디어 쿼리 적용.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 우리 모둠이 탐구할 역사 시대 단위는 무엇인가요? (예: 선사시대, 삼국시대, 조선시대, 근현대)
2. 각 카드에 표시할 키워드 태그(인물, 사건, 유물, 제도) 4종 이상을 지정할까요?
3. 사이드바 폰트 크기와 카드 그리드 밀도는 기본값으로 할까요?

🎯 에디터 한줄평

"정보를 요약한다는 것은 남의 글을 복사하는 것이 아니라 나만의 지도를 그리는 행위입니다. 학생들이 노션 스타일 트리에 역사 인물을 배치하고 태그를 다는 과정에서 뜻밖에 발견하게 되는 것은 역사 지식이 아니라 '내 사고의 틀' 자체입니다. 언젠가 직장인들이 사용하는 업무 도구와 똑같은 구조를 초등학교 교실에서 다룬다는 것, 그것이 가장 자연스러운 미래 교육의 실감입니다."

📚 기술·교육 참고 링크

  • Notion 공식 홈페이지 : 블록 기반 지식 정리 UI 참고 자료
  • 교육과정 연계: 5~6학년 국어(정보 요약하기, 토론과 소통), 사회(우리 역사의 발전), 실과(정보처리 기초)
By 시간: