Visualizar (시각화)
시각 자료는 말로 잘 설명되지 않는 것, 즉 형태, 구조, 방향, 관계, 비율, 공간을 보여줄 때만 수업에 포함됩니다. 장식용이거나 텍스트를 반복하는 시각 자료는 인지 부하를 증가시키고 오류를 포함할 수도 있습니다. 의심스러우면 넣지 마십시오. 잘못된 시각 자료보다 없는 시각 자료가 낫습니다.
1. 유형 선택
| 아이디어가… | 블록 | 예시 |
|---|---|---|
| 관계, 의존성, 흐름, 원인 → 결과 | aula.diagrama (Mermaid graph TD/LR) | 셀릭 금리가 빵값에 도달하는 과정 |
| 행위자 간 상호작용 순서 | aula.diagrama (sequenceDiagram) | 소송 절차 단계 |
| 타임라인 | aula.diagrama (timeline) | 브라질 헌법 역사 |
| 계층 / 분류 | aula.diagrama (graph TD 또는 mindmap) | 법규의 위계 |
| 수치 데이터, 비율, 기하학, 도면 | aula.figura (손수 제작한 SVG) | 월별 인플레이션 |
| 실제 작품, 사물 또는 장소 | aula.imagem | 알보라다 궁전 |
2. 아이디어만 남을 때까지 자르기
- 시각 자료 하나당 하나의 아이디어. 두 개가 필요하면 시각 자료도 두 개입니다.
- 최대 ~7개 요소(노드, 막대, 레이블). 각 요소에 대해 물어보십시오: "이것을 빼도 아이디어가 여전히 명확한가?" 그렇다면 빼십시오.
- 레이블은 짧게: 단어나 구절, 문장이 아닙니다.
- 다이어그램 안에 제목을 넣지 마십시오(블록에 이미
titulo가 있습니다).
3. 시각 자료와 설명 결합 (인접성, 중복 없음)
- 블록의
texto필드를 사용하십시오. 설명은 옆에(시각 자료가 넓으면 바로 아래에) 나타납니다. - 텍스트는 시각 자료의 각 요소를 설명하지 않습니다. 대신 어디를 봐야 하는지와 무엇을 결론 내릴지를 알려줍니다("화살표가 다시 돌아오는 것을 주목하세요: 순환입니다").
- 레이블을 시각 자료 안에 넣을 수 있다면 별도의 범례가 아닌 그곳에 넣습니다.
4. 유형별 규칙
Mermaid
- 특수 문자 또는
R$가 포함된 텍스트는 따옴표로 감쌉니다:A["R$ 1.000"]. - 레이블의 줄바꿈:
<br/>. graph TD(위에서 아래로)는 기초 → 결과에 사용하고,graph LR은 시간에 따른 프로세스에 사용합니다.
SVG (그림 및 그래프)
- 좌표는 스크립트(예:
node -e "...")로 계산하고, '눈대중'으로 하지 마십시오: 잘못된 비율은 거짓된 정보를 줍니다. - 여백이 있는
viewBox,font-family="Inter, sans-serif",fill="currentColor"(라이트/다크 테마에서 작동)를 사용한 텍스트. - 데이터 색상은 최대 2가지 + 중립색. 데이터 출처는
legenda에 표시합니다.
이미지
- 건축, 디자인, 예술 수업에서는 대조 쌍(실패 사례 한 가지와 통과 사례 한 가지)을 선호하며, 두 개의 연속된
aula.imagem블록에 제목을 "이전: …" / "이후: …"로 붙입니다. 학생이 먼저 보고 나중에 읽도록 유도하십시오.texto는 어디를 봐야 하는지와 이미지가 보여주지 않는 것(도면, 축척, 재료, 맥락)을 알려주고, 보이는 것만 설명합니다. - Wikimedia Commons를 선호합니다. 파일 페이지에서 저자와 라이선스를 확인하고
credito,licenca,link(파일 페이지)를填写하십시오. src에는 이미지의 직접 링크(upload.wikimedia.org/...)를 사용하십시오.- 출처가 없거나 복제를 금지하는 사이트의 이미지는 절대 사용하지 마십시오.
5. 확인: 반드시 직접 보기
오류 없이 렌더링된다고 해서 시각 자료가 올바르다는 증거는 아닙니다. 블록을 작성한 후:
- 약 3초 기다립니다(페이지가 자동으로 업데이트됩니다).
- [Claude Code] 앱 브라우저에서 블록까지 스크롤하고 스크린샷을 찍습니다.
(예:
javascript_tool로document.querySelectorAll('[data-tipo="diagrama"]')→ 마지막 →scrollIntoView(), 그 다음computer→screenshot). 다른 에이전트에서는 학생에게 확인을 요청하십시오. - 비판적으로 확인합니다:
- 각 화살표가 올바른 방향을 가리키는가? 각 관계가 사실인가?
- 숫자와 비율이 데이터와 일치하는가?
- 레이블이 잘리거나, 겹치거나, 읽을 수 없는가?
- "다이어그램 오류" 빨간 상자가 나타났는가? → 구문을 수정하십시오.
- 이미지: 로드되었는가? (
img.naturalWidth > 0) - 보기만으로 아이디어를 이해할 수 있는가?
- 수정하고 다시 확인하십시오. 올바르고 명확한 시각 자료를 만들 수 없다면, 블록을 제거하고 텍스트로 설명하십시오.