레이아웃 샘플
모든 슬라이드 레이아웃과 요소를 한 덱에
awesome-ai-stack · 데모
일반 레이아웃
제목 아래 작은 부제 — ::sub[텍스트]로 답니다
<Slide> — 클래스 없이 쓰면 제목이 상단에 고정되는 기본 슬라이드입니다.
- 순서 없는 목록
- 인라인: 굵게, 기울임,
코드, 링크
- 순서 있는 목록
- 두 번째 항목
인용문은 이렇게 표시됩니다.
출처: awesome-ai-stack 문서 · example.com/docs
좋은 발표는 슬라이드가 아니라 이야기로 남는다.
— awesome-ai-stack · class="quote"
표
| 레이아웃 | 문법 | 비고 |
|---|---|---|
| 표지 | class="cover" | 큰 제목, 중앙 |
| 배경 이미지 | bg={img} | 풀블리드 |
| 컬럼 | :::cols | ---로 구분 |
| 미디어 분할 | aas-split | 이미지·코드·다이어그램 |
| 세로 정렬/채움 | img-top·fill | 세로 위치·cover |
| 부제 · 출처 | ::sub[…] · source="…" | 제목 아래 · 우측 하단 |
| 인용 · 지표 | class="quote" · :::stats | 대형 인용 · 숫자 카드 |
| 콜아웃 · 비교 | :::note/tip/warning · :::compare | 강조 박스 · 좌우 카드 |
| 단계 · compact | :::steps · class="compact" | 화살표로 하나씩 · 자연 크기 |
| 목차 제외 | toc={false} | 제목 숨김 |
표는 표준 마크다운 문법을 그대로 씁니다. 다이어그램·이미지는 마우스를 올리면 크게 보기 버튼이 나타나고, o 키로 전체 슬라이드를 한눈에 볼 수 있습니다. 긴 다이어그램은 aas-split scroll(세로)·class="scroll-x"(가로)로 박스 안에서 스크롤됩니다.
이미지: awesome-ai-stack 샘플 에셋
복잡한 순서도 + 설명
aas-split scroll — 왼쪽 다이어그램은 열 안에서 세로로 스크롤됩니다
flowchart TD
A[사용자 요청] --> B{입력 검증}
B -->|유효| C[의도 분류]
B -->|무효| Z[오류 반환]
C --> D{도구 필요?}
D -->|예| E[도구 선택]
D -->|아니오| F[직접 응답]
E --> G[도구 실행]
G --> H{성공?}
H -->|예| I[결과 통합]
H -->|아니오| J[재시도 · 폴백]
J --> G
I --> K[응답 생성]
F --> K
K --> L[사용자에게 출력]에이전트가 요청을 처리하는 흐름입니다.
- 입력 검증 — 유효하지 않으면 즉시 오류를 반환합니다
- 의도 분류 → 도구 필요 여부 판단
- 필요하면 도구 선택 → 실행 → 성공 확인, 실패 시 재시도·폴백
- 결과를 통합하거나 직접 응답해 최종 출력
다이어그램이 길어 열 안에서 세로로 스크롤됩니다. 클릭하면 크게 볼 수 있습니다.
스크롤 워크스루
→(화살표)를 누르면 왼쪽 순서도가 해당 위치로 스크롤되고 오른쪽 설명이 바뀝니다
flowchart TD
A[사용자 요청] --> B{입력 검증}
B -->|유효| C[의도 분류]
B -->|무효| Z[오류 반환]
C --> D{도구 필요?}
D -->|예| E[도구 선택]
D -->|아니오| F[직접 응답]
E --> G[도구 실행]
G --> H{성공?}
H -->|예| I[결과 통합]
H -->|아니오| J[재시도 · 폴백]
J --> G
I --> K[응답 생성]
F --> K
K --> L[사용자에게 출력]① 입력 검증 — 요청이 유효한지 확인하고, 아니면 바로 오류를 반환합니다.
② 도구 판단 — 의도를 분류하고 도구가 필요한지 결정합니다.
③ 실행·검증 — 도구를 실행해 성공하면 결과를 통합, 실패하면 재시도·폴백합니다.
④ 최종 출력 — 응답을 생성해 사용자에게 전달합니다.
다이어그램 + 긴 설명 (compact)
class="compact" — 다이어그램은 자연 크기(패딩만) 그대로, 아래로 글이 길게 흐릅니다
flowchart LR a[수집] --> b[정제] --> c[학습] --> d[평가]
기본 다이어그램 슬라이드는 세로를 꽉 채우지만, <Slide class="compact">를 쓰면 다이어그램이 원래 크기로 자리하고 아래에 설명을 길게 이어 쓸 수 있습니다.
- 파이프라인의 각 단계를 문장으로 풀어 설명할 때
- 다이어그램은 참고용이고 글이 주가 될 때
- 여러 문단이 필요할 때 적합합니다
이렇게 문단을 이어서 넣어도 다이어그램이 위로 밀려 올라가지 않고, 박스에는 약간의 패딩만 유지됩니다.
가로로 긴 다이어그램 (가로 스크롤)
class="compact scroll-x" — 넓은 순서도는 줄이지 않고 자연 크기 그대로, 박스 안에서 가로로 스크롤됩니다
flowchart LR a[수집] --> b[정제] --> c[라벨링] --> d[특징 추출] --> e[학습] --> f[교차 검증] --> g[평가] --> h[튜닝] --> i[배포] --> j[모니터링]
파이프라인처럼 단계가 많아 가로로 긴 순서도는, 폭에 맞춰 축소하면 글자가 너무 작아집니다. scroll-x를 쓰면 다이어그램이 원래 크기를 유지하고 박스 안에서 좌우로 스크롤됩니다.
- 데이터·ML 파이프라인처럼 단계가 많은 흐름에 적합합니다
- 각 노드는 읽기 좋은 크기를 유지합니다
- 클릭하면 라이트박스로 전체를 크게 볼 수 있습니다
가로 스크롤 워크스루
→(화살표)를 누르면 위쪽 파이프라인이 해당 단계로 가로 스크롤되고 아래 설명이 바뀝니다
flowchart LR a[수집] --> b[정제] --> c[라벨링] --> d[특징 추출] --> e[학습] --> f[교차 검증] --> g[평가] --> h[튜닝] --> i[배포] --> j[모니터링]
① 데이터 준비 — 수집·정제·라벨링으로 학습용 데이터를 만듭니다.
② 학습 — 특징을 추출하고 모델을 학습합니다.
③ 평가 — 교차 검증과 평가로 성능을 확인하고 튜닝합니다.
④ 운영 — 배포하고 모니터링하며 필요하면 다시 학습합니다.
코드 워크스루
→를 누르면 코드가 해당 부분으로 스크롤되고 그 줄 전체가 강조됩니다
const SYSTEM = 'You can call tools.';
async function runAgent(input: string) {
const messages = [
{ role: 'system', content: SYSTEM },
{ role: 'user', content: input },
];
for (let turn = 0; turn < MAX_TURNS; turn++) {
const res = await model.chat(messages);
messages.push(res.message);
if (!res.toolCalls?.length) {
return res.message.content;
}
for (const call of res.toolCalls) {
const out = await tools[call.name](call.args);
messages.push({
role: 'tool',
content: out,
});
}
}
throw new Error('max turns exceeded');
}① 진입점 — 시스템·사용자 메시지로 대화를 시작합니다.
② 모델 호출 — 매 턴 모델을 호출하고 응답을 기록합니다.
③ 종료 조건 — 도구 호출이 없으면 결과를 반환합니다.
④ 도구 실행 — 도구를 호출하고 결과를 대화에 넣습니다.