● 강의 데모 · 로그인 필요없음
AI 활용 예제
강의에서 보여드린 예시들을 모아둔 갤러리입니다 · 카드를 눌러 직접 체험해보세요 · 각 예시 하단엔 실제로 쓴 프롬프트도 있어요
🧰 실습 예제
📚 AI 강의 자료
🎯 코칭 · 자기이해 도구
🎡
삶의 수레바퀴
8개 영역에 점수를 매기면 레이더 차트로 균형이 보이는 코칭 셀프 체크 도구.
wheel-of-life.html
→
🎯
목표 달성 계산기
현재값·목표값·기한을 넣으면 진행률과 하루 필요 페이스가 계산돼요.
goal-calculator.html
→
🌤
무드 트래커
기분을 고르고 날짜를 클릭하면 달력에 색으로 쌓이는 감정 기록 도구.
mood-tracker.html
→
🎴
강점카드 뽑기
카드를 뽑으면 20가지 강점 중 하나가 무작위로 나오는 아이스브레이킹용 인터랙션.
strength-cards.html
→
💗
감정 단어 카드
카드를 뽑으면 감정 단어 하나가 무작위로 나오는, 감정 어휘를 넓히는 도구.
emotion-cards.html
→
🎮 게임
⚡
반응속도 테스트
초록불이 켜지는 순간 클릭! 밀리초 단위로 반응속도를 측정하는 미니게임.
reaction-game.html
→
🪜
사다리타기
참가자·결과 명단을 넣고 이름을 클릭하면 사다리를 따라 결과가 나오는 그 게임.
ladder-game.html
→
⚖️
밸런스 게임
둘 중 하나만 고르는 질문 16개 — 클릭하면 가상의 투표 비율도 함께 나와요.
balance-game.html
→
🎯
빙고판 생성기
항목 목록을 입력하면 무작위 빙고판을 만들어주고, 줄이 완성되면 자동으로 세줘요.
bingo-generator.html
→
🗨
아이스브레이킹 질문카드
카드를 뽑으면 서로를 알아가는 질문이 무작위로 나와요.
icebreaker-cards.html
→
🧰 범용 도구
🥐
사장님 관제 대시보드
가상의 1인 베이커리 창업자를 위한 오늘의 할 일·매출 현황 대시보드 (샘플 데이터).
example-dashboard.html
→
⏱
포모도로 집중 타이머
25분 집중 + 5분 휴식을 반복하는 원형 카운트다운 타이머.
focus-timer.html
→
⏲
타이머
원하는 시간을 설정해 카운트다운 — 실습 시간 제한, 발표 시간 재기에 활용.
timer.html
→
✅
투두리스트
할 일을 추가·체크·삭제하고 진행률이 실시간으로 계산되는 기본 예시.
todo-list.html
→
🎲
조편성 프로그램
참가자 명단과 조 개수를 넣으면 무작위로 조를 나눠주는 워크숍용 도구.
team-grouping.html
→
💰
간단 가계부
수입/지출을 입력하면 잔액이 실시간으로 계산되는 기초 장부.
expense-tracker.html
→
⚖️
BMI 계산기
키·몸무게를 넣으면 체질량지수와 체중 구간을 바로 계산.
bmi-calculator.html
→
🎨
색깔 팔레트 생성기
기준 색을 고르면 배색 방식에 따라 어울리는 5색 팔레트를 만들어줘요.
color-palette.html
→
🔲
QR코드 생성기
텍스트나 링크를 입력하면 QR코드가 바로 만들어져요.
qr-generator.html
→
🗒
포스트잇 메모보드
메모를 자유롭게 추가하고 드래그로 옮기는 브레인스토밍용 보드.
memo-board.html
→
🧾
더치페이 계산기
단순 n분의 1은 물론, 항목별로 먹은 사람만 나눠 정산하는 것도 가능.
split-bill.html
→
🎂
나이 계산기
생년월일을 넣으면 만 나이·연 나이·다음 생일까지 D-day를 계산.
age-calculator.html
→
🧮
다음 강의에서 추가 예정
회계 프로그램, 심리테스트 등 새 예시가 이곳에 계속 추가됩니다.
📊 대시보드
📚
AI 개념 정리 대시보드
LLM, 멀티모달, 토큰, RAG, 에이전트 등 핵심 용어를 한 화면에 정리했어요.
ai-concepts.html
→
📈
최신 AI 트렌드 대시보드
웹 검색으로 확인한 2026년 현재 AI 업계 트렌드 8가지 요약.
ai-trends.html
→
🧠 개념 설명 데모
🤖
AI 에이전트란?
요청 → 계획 → 도구 호출 → 결과 종합 과정을 단계별 애니메이션으로.
what-is-agent.html
→
🧩
Skill이란?
같은 질문에 스킬 없이 vs 스킬 적용 답변을 나란히 비교해봐요.
what-is-skill.html
→
✏️
프롬프트 엔지니어링 비교
허술한 프롬프트와 잘 짜인 프롬프트, 결과 차이를 눈으로 확인.
prompt-comparison.html
→
🔢
토큰 계산기
텍스트를 넣으면 대략 몇 토큰인지 감을 잡아볼 수 있는 도구.
token-counter.html
→
🕸
멀티 에이전트 협업
여러 에이전트가 동시에 작업을 나눠 처리하고 종합하는 과정을 시각화.
multi-agent.html
→
🔍
RAG(검색 증강 생성)란?
질문 → 문서 검색 → 답변 생성으로 이어지는 흐름을 단계별로.
what-is-rag.html
→
🔌
MCP 도구 연결 지도
AI가 이메일·캘린더·노션 같은 외부 도구에 연결되는 구조를 클릭해서 탐색.
what-is-mcp.html
→
👻
환각(할루시네이션)이란?
AI가 모르는 것도 그럴듯하게 지어내는 현상을 질문별로 체험.
hallucination.html
→
🗺
임베딩이란? — 벡터 지도
비슷한 의미의 단어들이 벡터 공간에서 가까이 모이는 걸 클릭해서 확인.
embeddings.html
→
🌡
Temperature(창의성 조절)란?
같은 질문도 온도값에 따라 답변 다양성이 얼마나 달라지는지 비교.
temperature.html
→
⚙️
파인튜닝 vs 프롬프팅
AI를 내 용도에 맞게 조정하는 두 가지 방법을 항목별로 비교.
finetuning-vs-prompting.html
→
✂️
토큰화(Tokenization)란?
문장을 입력하면 토큰 단위로 잘리는 과정을 색깔 블록으로 확인.
tokenization.html
→
🔮
다음 토큰 예측이란?
후보 단어를 클릭해서 문장을 직접 이어가보는 인터랙티브 데모.
next-token-prediction.html
→
🎯
Zero-shot vs One-shot vs Few-shot
예시를 몇 개 주느냐에 따라 답변 형식·정확도가 달라지는 걸 비교.
zero-vs-fewshot.html
→
🧩
Chain-of-Thought(단계적 사고)
즉답과 단계별로 생각한 답변의 정확도 차이를 비교.
chain-of-thought.html
→
💬
챗봇 vs 에이전트
단순 대화형과 도구를 실제로 쓰는 에이전트의 차이를 비교.
chatbot-vs-agent.html
→
🛠
AI의 도구 사용(Tool Use)
계산기 도구를 호출해서 정확한 답을 완성하는 흐름을 단계별로.
tool-use.html
→
🔓
오픈소스 vs 폐쇄형 모델
Llama류 오픈소스와 GPT·Claude류 폐쇄형 모델의 차이 비교.
opensource-vs-closed.html
→
🕵️
프롬프트 인젝션이란?
문서에 숨은 악성 지시에 AI가 어떻게 대응하는지 시나리오로 확인.
prompt-injection.html
→
🛡
AI 가드레일이란?
요청의 위험도에 따라 AI가 다르게 반응하는 원리를 클릭해서 확인.
ai-guardrails.html
→
😊
감정 분석이란?
문장을 넣으면 긍정·부정 단서를 찾아 감정을 판정해주는 데모.
sentiment-analysis.html
→
🏷
개체명 인식(NER)이란?
문장에서 사람·조직·날짜·장소를 자동으로 찾아 색깔로 표시.
ner.html
→
🪟
컨텍스트 윈도우 꽉 채우기
대화가 길어지면 오래된 메시지가 밀려나는 과정을 시각화.
context-window-fill.html
→
Claude(Cowork)로 만든 데모 갤러리