스터디 자료·발표 디자인 지침 (기본 지침자료)
적용 대상 = ai-study 모든 스터디 자료(
study*.html)·모임 공지·정리 페이지, 그리고 devplan 보고 페이지의 도표. 출처 = 2026-07-23 웹조사(Mayer 멀티미디어 원칙 / Penn State Assertion-Evidence / 플로우차트·파이프라인 도표 실무 / SessionLab 워크숍 설계). 자료 만들기 전 이 문서를 먼저 읽는다.
0. 한 줄 원칙
슬라이드는 읽는 문서가 아니라 보는 증거다. 문장은 제목에 두고, 본문은 그림·표·도표로 보여준다.
1. 슬라이드 구조 — Assertion-Evidence (핵심)
- 슬라이드 제목 = 주장 한 문장(완전한 서술문). "원격접속 준비" ❌ → "노트북에서 메인 PC 자료에 닿아야 개발이 시작된다" ⭕.
- 제목 아래는 불릿 목록이 아니라 시각 증거(도표·표·스크린샷·비교 그림) 1개를 크게.
- 근거: 주제-불릿 구조 대비 이해·회상 유의미 상승, 오개념 약 1/10. 불릿은 문장 조각·중복(redundancy)으로 인지부하를 올린다.
- 불릿을 쓰는 예외 = 체크리스트·준비물처럼 항목 자체가 목록인 것만. 이때도 5±2줄.
2. 인지부하 (Mayer 12원칙 중 실전 4개만)
| 원칙 | 적용 규칙 |
|---|---|
| Coherence(응집) | 장식·의미없는 아이콘·배경이미지 제거. 안 쓰는 정보는 뺀다. 한 슬라이드 = 한 메시지. |
| Signaling(신호) | 핵심어 1~2개만 강조색. 도표엔 "여기부터 보세요" 표식(①②③·굵은 화살표). |
| Contiguity(근접) | 설명 글은 해당 그림 바로 옆. 범례를 멀리 두지 말고 요소에 직접 라벨. |
| Redundancy(중복) | 말할 내용을 그대로 슬라이드에 적지 않는다. 화면은 요약, 상세는 말/배포문서. |
| Personalization | 문체는 대화체("~해 주세요"), 격식체 논문투 금지. |
3. 파이프라인·플로우 도표
- 방향 고정: 좌→우 또는 위→아래. 한 도표 안에서 섞지 않는다.
- 선 교차 최소화, 정렬·간격 균등. 관련 단계는 시각적으로 묶는다(그룹 박스).
- 색은 2~4색. 색 = 구조(입력/처리/산출/사람개입)를 의미하고, 장식이면 뺀다.
- 도형 의미 고정: 사각형=작업, 원통=데이터/저장, 마름모=판단, 사람아이콘=사람이 하는 일.
- 한 화면에 다 들어오게. 안 들어오면 도표를 쪼갠다(개요 1장 + 상세 N장).
- 폰트는 본문과 동일 계열, 대비 확보(작은 회색 글씨 금지).
4. 워크숍(실습형 모임) 설계
- 목표를 아젠다 맨 위에 문장으로 적고, 각 활동을 그 목표에 비춰 넣거나 뺀다.
- 타임박스를 활동별로 명시하고 시작 때 공유. 전체의 15~20%는 버퍼(막힘·질문용).
- 성인 학습 = 이유 납득 + 자기 일감 + 실패 경험. 그래서 각자 본인 실제 업무를 대상으로 삼는 게 연습 과제보다 강하다.
- 개인 작업 시간과 공유 시간을 번갈아 배치(내향·외향 모두 참여).
- 준비물·사전과제는 모임 전 체크리스트로 분리(당일 세팅은 시간 부족).
5. ai-study 하우스 스타일 (고정)
- 톤 = 웜톤 페이퍼(
--bg:#f6f3ee, 잉크#2b2622, 포인트#c97c4a), 흰 카드 + 얇은 테두리. - 금지(팀장 모토 "심플함이 베스트다"): 이모지 과다 · 숫자 강조 패널 남발 · 칸반 · 테두리 포인트 라인.
- 자료 페이지 = 사이드 색인 + 슬라이드 덱(
study.html셸 재사용, 좌우 방향키·발표 모드·색인 검색 포함). - 발표 모드(프로젝터 폰트 확대) 유지 필수 — 도서관 모임은 노트북 화면 공유가 기본.
- 지시문 블록은 접힘(
details.fileblock) + 복사 버튼. 멤버가 그대로 붙여넣는 게 목적이므로 줄바꿈 폭은 40자 내외로 좁게. - 이미지는 나노바나나(gemini 웹UI CDP) 생성 → 워터마크 제거 → 페이지에 인라인. 장식 목적이면 넣지 않는다(§2 Coherence).
6. 자료 만들 때 체크리스트
- 각 슬라이드 제목이 문장인가(주장)?
- 제목 아래 주인공이 시각 증거인가(불릿 나열 아님)?
- 한 슬라이드 한 메시지인가? 안 쓰는 요소 뺐나?
- 도표 방향 일관·색 4색 이하·한 화면에 들어오나?
- 아젠다에 타임박스 + 버퍼 15~20% 있나?
- 멤버가 복사해서 바로 실행할 지시문이 있나?
- 모임 전 준비 체크리스트가 분리돼 있나?
참고 출처
- Mayer 멀티미디어 학습 원칙 — https://teaching.pitt.edu/resources/evidence-based-best-practices-for-creating-multimedia-for-learning/
- Assertion-Evidence 구조(Penn State) — https://www.assertion-evidence.com/ , 체크리스트 PDF http://www.writing.engr.psu.edu/AE_checklist.pdf
- 파이프라인 도표 실무 — https://www.decube.io/post/4-best-practices-for-effective-data-pipeline-diagrams
- 플로우차트 설계 원칙 — https://www.conceptdraw.com/How-To-Guide/flowchart-design
- 워크숍 설계·퍼실리테이션 — https://www.sessionlab.com/blog/how-to-run-a-workshop/