);
}
// ── Slide 1 — Hero ──────────────────────────────────
function SlideHero() {
return (
고려대 AMP 특별강연 · KOREA UNIVERSITY AMP
REASON OF MOON
달
의
이
성
송세훈 · SEHUN SONG
인공지능 시대,
'어떻게 질문할 것인가'
를 가르치는 사람.
{D.career}교육 현장
{D.books.length}출간 저서
{D.titles.length}현재 직함
);
}
// ── Slide 2 — Current Roles ─────────────────────────
function SlideTitles() {
return (
NOW · 현재의 활동
7개의 역할로 동시에 살다
출판인 · 교육자 · 개발자 · 엔지니어 · 교수 · 기자 · 강연자
{D.titles.map((t, i) => (
0{i + 1}
{t.ko}
{t.en} · since {t.since}
))}
);
}
// ── Slide 3 — Four Pillars ──────────────────────────
function SlidePillars() {
return (
FOUR PILLARS · 네 개의 기둥
달의 이성을 떠받치는 네 기둥
연결 · 창조 · 학습 · 설계 — 메타프롬프트 사고법의 골격
{D.pillars.map((p, i) => (
))}
);
}
// ── Slide 4 — Creativities ──────────────────────────
function SlideCreativities() {
return (
THREE CREATIVITIES · 세 가지 창의성
기존 결합 · 가능성 탐색
패러다임 변형
Margaret Boden의 창의성 분류로 설계된 학습 프레임
{D.creativities.map((c, i) => (
{c.glyph}
{c.ko}
{c.en}
{c.desc}
))}
"프롬프트에 대한 프롬프트 = 어떻게 질문할 것인가에 대한 질문"
);
}
// ── Slide 5 — Books ─────────────────────────────────
function SlideBooks() {
return (
BOOKS · 저서
프롬프트의 언어로 4권을 쓰다
2023년부터 매해 새로운 프롬프트 사고법 출간
{D.books.map((b, i) => (
))}
);
}
// ── Slide 6 — Projects ──────────────────────────────
function SlideProjects() {
return (
PROJECTS · 최근 프로젝트
교육 · AI · 언어를 잇는 6개의 실험실
2021 데이터바우처부터 2025 UPMD 프롬프트 언어까지
{D.projects.map((p, i) => (
))}
);
}
// ── Slide 7 — Timeline ──────────────────────────────
function SlideTimeline() {
const [played, setPlayed] = useState(0);
const trackRef = useRef(null);
const total = D.timeline.length;
useEffect(() => {
setPlayed(0);
const startDelay = 600; // wait for slide-in
const perStep = 110; // ms between reveals
const t0 = setTimeout(() => {
let i = 0;
const id = setInterval(() => {
i += 1;
setPlayed(i);
if (i >= total) clearInterval(id);
}, perStep);
// store for cleanup
trackRef.current && (trackRef.current._intervalId = id);
}, startDelay);
return () => {
clearTimeout(t0);
if (trackRef.current?._intervalId) clearInterval(trackRef.current._intervalId);
};
}, [total]);
// auto-scroll head as it plays
useEffect(() => {
if (!trackRef.current) return;
const nodes = trackRef.current.querySelectorAll('.tl-node');
const idx = Math.min(played, nodes.length - 1);
if (idx < 0 || !nodes[idx]) return;
const target = nodes[idx];
const left = target.offsetLeft - trackRef.current.clientWidth * 0.55;
trackRef.current.scrollTo({ left: Math.max(0, left), behavior: 'smooth' });
}, [played]);
return (
TIMELINE · 발자취
1994 → 2026, 30년의 궤적
영문학도에서 프롬프트 엔지니어로 — {Math.min(played, total)} / {total}
{D.timeline.map((y, i) => (
))}
);
}
// ── Slide 8 — Manifesto ─────────────────────────────
function SlideManifesto() {
return (
{D.manifesto.line1}
{D.manifesto.line2}
{D.manifesto.line3}
{D.manifesto.sub}
고려대 AMP 특별강연 · 감사합니다
);
}
const SLIDES = [
{ id: 'hero', name: 'HERO', label: '강연자', Comp: SlideHero },
{ id: 'titles', name: 'NOW', label: '현재 활동', Comp: SlideTitles },
{ id: 'pillars', name: 'FOUR PILLARS', label: '네 기둥', Comp: SlidePillars },
{ id: 'creat', name: 'CREATIVITY', label: '창의성', Comp: SlideCreativities },
{ id: 'books', name: 'BOOKS', label: '저서', Comp: SlideBooks },
{ id: 'proj', name: 'PROJECTS', label: '프로젝트', Comp: SlideProjects },
{ id: 'tl', name: 'TIMELINE', label: '발자취', Comp: SlideTimeline },
{ id: 'manif', name: 'MANIFESTO', label: '맺음', Comp: SlideManifesto },
];
// ── Tweaks panel ────────────────────────────────────
function TweaksPanel({ visible, tweaks, setTweaks, onClose }) {
if (!visible) return null;
return (
);
}
// ── Root ────────────────────────────────────────────
function App() {
const [tweaks, setTweaksState] = useState(DEFAULTS);
const [tweaksVisible, setTV] = useState(false);
const [slideIdx, setSlideIdx] = useState(0);
const [progress, setProgress] = useState(0);
const [paused, setPaused] = useState(false);
const setTweaks = (partial) => setTweaksState((t) => ({ ...t, ...partial }));
const playing = tweaks.autoplay && !paused;
// auto-advance
useEffect(() => {
if (!playing) return;
const startTime = performance.now();
let raf;
const tick = (now) => {
const elapsed = now - startTime;
const p = elapsed / tweaks.slideDuration;
setProgress(p);
if (p >= 1) {
setSlideIdx((i) => (i + 1) % SLIDES.length);
setProgress(0);
} else {
raf = requestAnimationFrame(tick);
}
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [slideIdx, playing, tweaks.slideDuration]);
// keyboard nav
useEffect(() => {
const onKey = (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') { setSlideIdx((i) => (i + 1) % SLIDES.length); setProgress(0); }
if (e.key === 'ArrowLeft') { setSlideIdx((i) => (i - 1 + SLIDES.length) % SLIDES.length); setProgress(0); }
if (e.key.toLowerCase() === 'p') { setPaused((p) => !p); }
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
// edit mode
useEffect(() => {
const onMsg = (e) => {
if (e.data?.type === '__activate_edit_mode') setTV(true);
if (e.data?.type === '__deactivate_edit_mode') setTV(false);
};
window.addEventListener('message', onMsg);
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
return () => window.removeEventListener('message', onMsg);
}, []);
useEffect(() => { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: tweaks }, '*'); }, [tweaks]);
const palette = PALETTES[tweaks.paletteKey] || PALETTES.moon;
const Slide = SLIDES[slideIdx].Comp;
return (
{/* persistent moon scene */}
{/* corner decor */}
{/* topbar */}
{/* slide stage */}
{SLIDES.map((s, i) => (
{i === slideIdx && }
))}
{/* progress bar */}
{/* slide chapters */}
{/* play/pause control */}
←/→ 이동 · 스페이스 다음 · P 일시정지
setTV(false)}/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
);